Flash i Wallaby Projektowanie animacji zgodnych z HTML5 flawal


Tytuł oryginału: Creating HTML5 Animations with Flash and Wallaby
Tłumaczenie: Piotr Cieślak
ISBN: 978-83-246-3940-3
© 2012 Helion S.A
Authorized Polish Translation of the English edition of Creating HTML5 animations with Flash
and Wallaby, 1st Edition 9781449307134 © 2011 Ian McLean
This translation is published and sold by permission of O Reilly Media, Inc., which owns or
controls all rights to publish and sell the same.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any
means, electronic or mechanical, including photocopying, recording or by any information
storage retrieval system, without permission from the Publisher.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu
niniejŹszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą
kserograficzŹną, fotograficzną, a także kopiowanie książki na nośniku filmowym,
magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądz towarowymi
ich właścicieli.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce
informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich
wykorzystanie, ani za zwiÄ…zane z tym ewentualne naruszenie praw patentowych lub autorskich.
Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za
ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Pliki z przykładami omawianymi w książce można znalezć pod adresem:
ftp://ftp.helion.pl/przyklady/flawal.zip
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/flawal
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
" Kup książkę " Księgarnia internetowa
" Poleć książkę " Lubię to! Nasza społeczność
" Oceń książkę
Spis tre ci
Przedmowa ................................................................................................. 7
1. Flash Professional  podstawy .................................................... 15
Platforma Flash 16
Rzut okiem na program Flash Professional 18
Importowanie sk adników 22
Rysowanie kszta tów 22
Obs uga obrazów 23
Przekszta canie sk adników projektu na symbole 26
Klatki kluczowe 28
2. Tworzenie prostej animacji HTML5 .............................................. 31
Tworzenie nowego projektu 31
Tworzenie napisu 32
Animowanie napisu 34
Eksportowanie animacji HTML5 przy u yciu Wallaby 38
3. Tworzenie zaawansowanych animacji ........................................ 41
Projektowanie pod k tem wydajno ci 43
Wskazówki dotycz ce wydajno ci Wallaby 46
4. Obs uga programu Wallaby ..........................................................47
Konwertowanie animacji 47
5
Poleć książkę
Kup książkę
5. Zastosowanie animacji Wallaby ...................................................53
Umieszczanie animacji 53
Wzbogacanie projektu o prost interakcj 58
Skorowidz ................................................................................................. 61
6 Spis tre ci
Poleć książkę
Kup książkę
ROZDZIA 2.
Tworzenie
prostej animacji HTML5
Nasza pierwsza, bardzo prosta animacja b dzie przedstawia a p yn cy napis.
Efekt b dzie podobny do starego znacznika HTML o nazwie , a cho
nie jest on szczególnie wyrafinowany, to na pocz tek zupe nie wystarczy.
Po zako czeniu pracy nad animacj b dziesz potrzebowa programu Adobe
Wallaby, aby j wyeksportowa . Je li dotychczas go nie zainstalowa e ,
wykorzystaj woln chwil na pobranie go ze strony Adobe Labs (http://labs.
adobe.com/).
Tworzenie nowego projektu
Zanim przyst pisz do projektowania animacji, musisz utworzy nowy pro-
jekt Flasha. Wydaj polecenie Plik/Nowy (File/New), aby otworzy okno dialo-
gowe Nowy dokument (New Document), pokazane na rysunku 2.1.
We wspomnianym oknie znajdziesz kilka opcji dotycz cych tworzenia nowego
dokumentu. W tym przypadku potrzebujemy projektu zgodnego z ActionScript
3.0, wi c wybierz opcj o takiej w a nie nazwie i kliknij przycisk OK.
Na ekranie pojawi si wówczas nowy dokument Flasha z pust scen , w której
b dziesz wprowadza tekst i animowa go.
31
Poleć książkę
Kup książkę
Rysunek 2.1. Okno dialogowe Nowy dokument (New Document)
Tworzenie napisu
Na tym etapie mo esz ju przyst pi do tworzenia napisu. Zacznij od
w czenia narz dzia Tekst (Text) przy u yciu odpowiedniego przycisku na
pasku narz dzi (patrz rysunek 2.2).
Rysunek 2.2. Przycisk narz dzia Tekst (Text) na pasku narz dzi
Po w czeniu narz dzia Tekst (Text) kliknij w dowolnym miejscu sceny
(zmiana kszta tu kursora symbolizuje gotowo do wprowadzania tekstu)
i utwórz dowolny napis, który chcia by animowa (patrz rysunek 2.3).
32 Rozdzia 2. Tworzenie prostej animacji HTML5
Poleć książkę
Kup książkę
Rysunek 2.3. Napis utworzony przy u yciu narz dzia Tekst (Text)
Po umieszczeniu tekstu na scenie mo esz przyst pi do animowania. Najpierw
jednak  zgodnie z tym, o czym wspomina em w rozdziale 1.  nale y
przekszta ci go na symbol, który trafi do biblioteki projektu.
Aby to zrobi , zaznacz wprowadzony tekst, a nast pnie wydaj polecenie
Modyfikuj/Konwertuj na symbol (Modify/Convert to Symbol) lub naci nij kla-
wisz F8.
Zauwa , e po utworzeniu symbolu w panelu Biblioteka (Library) pojawi si
nowy obiekt, który mo na wykorzysta do stworzenia wielu identycznych
instancji na scenie projektu (patrz rysunek 2.4).
Poniewa przekszta cony przed chwil napis zosta automatycznie potrak-
towany jako instancja obiektu z biblioteki, nie ma potrzeby usuwania go
i zast powania kolejn kopi .
Tworzenie napisu 33
Poleć książkę
Kup książkę
Rysunek 2.4. Symbol w panelu Biblioteka (Library)
Animowanie napisu
Skoro mamy ju scen z symbolem, mo emy przyst pi do animowania. Do
uzyskania efektu polegaj cego na p ynnym przesuni ciu si napisu w poprzek
sceny potrzebujemy klatki kluczowej, w której znajdowa by si on poza jej
obr bem.
Zwró uwag , e w chwili utworzenia napisu na scenie Flash automatycznie
przekszta ci pierwsz klatk na osi czasu na klatk kluczow (patrz ry-
sunek 2.5).
Rysunek 2.5. Klatka kluczowa z napisem
34 Rozdzia 2. Tworzenie prostej animacji HTML5
Poleć książkę
Kup książkę
W celu umiejscowienia napisu poza widocznym obszarem projektu po pro-
stu kliknij go i przeci gnij w praw stron , a znajdzie si poza kraw dzi
sceny (jak na rysunku 2.6).
Rysunek 2.6. Napis zosta przesuni ty w praw stron , poza widoczny obszar sceny
Po umiejscowieniu napisu poza scen nale y stworzy animacj polegaj c
na p ynnym przep yni ciu tekstu przez ekran. Kliknij jedn z dalszych klatek
kluczowych na osi czasu (powiedzmy, 20.), aby j zaznaczy , nast pnie kliknij
j prawym przyciskiem myszy i wybierz polecenie Wstaw klatk kluczow
(Insert Keyframe) z kontekstowego menu. Zauwa , e utworzona w ten sposób
klatka ma t sam zawarto co pierwsza klatka na osi (patrz rysunek 2.7).
Rysunek 2.7. Po przekszta ceniu 20. klatki na kluczow
Upewnij si , e utworzona klatka kluczowa jest nadal zaznaczona, kliknij
napis znajduj cy si poza scen i przeci gnij go tak daleko w lew stron ,
Animowanie napisu 35
Poleć książkę
Kup książkę
by ponownie znalaz si poza jej obszarem, ale z drugiej strony (jak na ry-
sunku 2.8). Aby mie pewno , e napis nie zosta przesuni ty w osi Y, naci-
nij klawisz Shift w trakcie przeci gania.
Rysunek 2.8. Napis po przesuni ciu w lew stron , poza obr b sceny
Po utworzeniu klatek kluczowych oraz zdefiniowaniu po o enia napisu
w pierwszej i ostatniej klatce pozostaje nam ju tylko utworzenie animo-
wanego przej cia. Prawym przyciskiem myszy kliknij dowoln klatk mi -
dzy kluczowymi, a nast pnie wybierz polecenie Utwórz klasyczn animacj
(Create classic tween), aby utworzy klasyczn animacj (patrz rysunek 2.9).
Rysunek 2.9. Klasyczna animacja ruchu mi dzy dwoma klatkami kluczowymi
36 Rozdzia 2. Tworzenie prostej animacji HTML5
Poleć książkę
Kup książkę
Po utworzeniu animacji mo esz opublikowa gotowy projekt, aby wy wie-
tli jej podgl d (patrz rysunek 2.10). Aby to zrobi , wydaj polecenie Sterowanie/
Testuj film/Test (Control/Test Movie/Test) lub po prostu naci nij Shift+Enter
(Shift+Return w Mac OS).
Rysunek 2.10. Gotowa animacja
Utworzona w ten sposób animacja polega na p ynnym przesuni ciu tekstu
od strony prawej do lewej. Zauwa , e animacja nie jest zatrzymywana po
odegraniu ostatniej klatki, lecz jest odtwarzana w sposób ci g y, w p tli. Za-
p tlenie odtwarzania jest w czane domy lnie dla ka dego klipu filmowego
Flasha.
Mo esz teraz zamkn podgl d animacji, a nast pnie zapisa j przy u y-
ciu polecenia Plik/Zapisz (File/Save). Nadaj jej dowoln nazw (na przyk ad
marquee.fla) i umie w wybranym folderze na dysku twardym komputera.
Zapami taj po o enie tego pliku, gdy ju za chwil b dziesz go wczytywa
do programu Wallaby.
Animowanie napisu 37
Poleć książkę
Kup książkę
Eksportowanie animacji HTML5
przy u yciu Wallaby
Po uruchomieniu programu Wallaby od uzyskania gotowej animacji dzieli
Ci ju tylko kilka kroków. Najpierw kliknij przycisk Browse (przegl daj)
i otwórz plik z projektem Flasha (czyli ten z rozszerzeniem .fla), który
przed chwil zapisa e (patrz rysunek 2.11).
Rysunek 2.11. Interfejs programu Wallaby
Po zaznaczeniu pliku .fla kliknij przycisk Convert (przekszta ). Program
poprosi Ci wówczas o nazwanie wynikowego pliku HTML. Nazwij go na
przyk ad marquee.html i kliknij przycisk Save (zapisz), aby zainicjowa proces
konwersji. Po jego zako czeniu w polu Status (stan) pojawi si stosowna
informacja.
Teraz mo esz wy wietli gotow animacj . Odszukaj folder, w którym zapi-
sa e wyeksportowany dokument HTML, a w nim plik o nazwie marquee.html
wraz z kilkoma innymi plikami pomocniczymi (patrz rysunek 2.12). Wszyst-
kie te pliki s niezb dne do poprawnego odtworzenia animacji, zadbaj wi c
o to, by znalaz y si w jednym folderze.
38 Rozdzia 2. Tworzenie prostej animacji HTML5
Poleć książkę
Kup książkę
Rysunek 2.12. Pliki wyeksportowane przez Wallaby
Po dwukrotnym klikni ciu dokumentu marquee.html animacja zostanie
odtworzona w domy lnej przegl darce. Mo esz usi i podziwia pierwsze
efekty swojej pracy: p ynnie animowany tekst zgodny ze standardem HTML5,
który mo na ogl da w przegl darce i wielu urz dzeniach przeno nych.
Pierwsza prosta animacja za nami, mo esz wi c mia o przyst pi do czytania
rozdzia u 3., w którym znajdziesz wskazówki dotycz ce tworzenia nieco
bardziej skomplikowanych projektów.
Eksportowanie animacji HTML5 przy u yciu Wallaby 39
Poleć książkę
Kup książkę
40 Rozdzia 2. Tworzenie prostej animacji HTML5
Poleć książkę
Kup książkę
Skorowidz
A C
Create classic tween, Patrz Utwórz
ActionScript, 17, 42
klasyczn animacj
Adobe Creative Suite, 16
CSS3, 10
Adobe Flash, Patrz Flash
Adobe Flash Professional, Patrz Flash
Adobe Wallaby, Patrz Wallaby
E
animacja
eksportowanie, 38
Edytor ruchu, 29, 30
klasyczna, 30
eksportowanie animacji, 38
konwertowanie, 47
Enable Logging, 49
kszta tu, 29
Errors and Warnings, 51
napis, 32
napis animowany, 34
F
nowy projekt, 31
prosta, 31
filtry, 42
ruchu, 29
FLA, 17
umieszczanie w dokumencie
Flash, 7, 8, 15, 17
HTML, 53
biblioteka, 18
wydajno , 43
dotarcie do odbiorców, 9
wzbogacanie o interakcj , 58
funkcje obs ugiwane w Wallaby, 10, 41
zaawansowana, 41
Grafika, 26
zastosowanie, 53
interfejs, 18
animowany napis, 34
Klip filmowy, 26
kszta ty, 22
obrazy, 23
B
odtwarzacz, 17
omówienie programu, 18
biblioteka, 18
o czasu, 20
b dy Wallaby, 51
pasek narz dzi, 22
Button, Patrz Przycisk
platforma, 16
61
Poleć książkę
Kup książkę
Flash
M
Przycisk, 26
scena, 19
Macromedia, 16
sk adniki, 22, 26
mapy bitowe, 23
symbole, 26
unikanie skalowania, 25
wymagania systemowe, 11
marquee.css, 49, 54, 57
funkcje Flasha obs ugiwane w Wallaby, 10
marquee.html, 49
FutureSplash Animator, 16
marquee.js, 49, 54, 60
marquee.log, 49
marquee_assets, 49, 54
G
maski, 41
Grafika, 26 morphing, Patrz przeistoczenie
Motion Editor, Patrz Edytor ruchu
Movie Clip, Patrz Klip filmowy
H
HTML5, 7, 8
N
napis, 32
I
animowany, 34
importowanie sk adników, 22
nowy projekt, 31
Insert Keyframe, Patrz Wstaw klatk
kluczow
O
instalacja Wallaby, 47
instancje, 27 obrazy, 23, 42
interakcja, 58 obrysy, 42
interfejs Flasha, 18 obs uga Wallaby, 47
iPad, 7 obs ugiwane w Wallaby funkcje Flasha,
iPhone, 7 10, 41
odtwarzacz Flash, 17
ograniczenia
J
przegl darek, 45
JavaScript, 7 Wallaby, 10
jQuery, 49, 54, 60 ostrze enia Wallaby, 51
jquery-1.4.2.js, 49, 54
o czasu, 20, 41
klatki, 20
warstwy, 21
K
klatki, 20
P
klatki kluczowe, 21, 28
puste, 28 pakiet Adobe Creative Suite, 16
Klip filmowy, 26
pasek narz dzi we Flashu, 22
konwertowanie animacji, 47
platforma Flash, 16
kszta ty, 22, 23, 42
pliki FLA, 17
pliki SWF, 17
Preferences, 49
L
Preview in Default Browser, 49
listwa czasowa, Patrz o czasu
prosta animacja, 31
62 Skorowidz
Poleć książkę
Kup książkę
przeistoczenie, 30
U
przej cia, 21, 28, 43
przekszta canie sk adników
umieszczanie animacji w dokumencie
na symbole, 26
HTML, 53
przepustowo cza, 45
unikanie skalowania map bitowych, 25
Przycisk, 26
ustawienia Wallaby, 49
przyciski, 42
Utwórz klasyczn animacj , 36
puste klatki kluczowe, 28
W
R
Wallaby, 7
rysowanie kszta tów, 22
b dy i ostrze enia, 51
eksportowanie animacji, 38
instalacja, 47
S
konwertowanie animacji, 47
obs uga, 47
scena, 19
obs ugiwane funkcje Flasha, 10, 41
skalowanie map bitowych, 25
ograniczenia, 10
sk adniki, 22, 26
stan, 50
stan Wallaby, 50
ustawienia, 49
Status, 50
wydajno , 46
SWF, 17
zastosowanie animacji, 53
symbole, 26, 42
zgodno z przegl darkami, 10
Grafika, 26
warstwy, 21, 41
Klip filmowy, 26
WebKit, 10
Przycisk, 26
Wstaw klatk kluczow , 35
wybór pomi dzy mapami bitowymi

a kszta tami, 23
wydajno animacji, 43
cie ki, 43
ograniczenia przegl darek, 45
przepustowo cza, 45
testowanie projektu, 44
T
za o enia projektu, 44
tekst, 43
wydajno Wallaby, 46
Tekst, 32
wymagania systemowe Flasha, 11
testowanie projektu, 44
wype nienia, 42
tween, Patrz przej cia
wzbogacanie animacji o interakcj , 58
tworzenie animacji
eksportowanie, 38
Z
napis, 32
napis animowany, 34
zaawansowana animacja, 41
nowy projekt, 31
za o enia projektu, 44
prostej, 31
zastosowanie animacji Wallaby, 53
wydajno , 43
zgodno Wallaby z przegl darkami, 10
zaawansowanej, 41
znaczniki CSS3, 10
Skorowidz 63
Poleć książkę
Kup książkę


Wyszukiwarka

Podobne podstrony:
Animacja kultury Projekt Budujemy Nowy Liskow BROSZURA 2
animacja flash tworzenie stron www biblia (fragment)
Macromedia Flash MX 2004 Sztuka projektowania
Blender Od planowania, modelowania oraz teksturowania do animacji i renderingu Praktyczne projekty

więcej podobnych podstron