flash-i-wallaby.-projektowanie-animacji-zgodnych-z-html5 ebook.pdf

(17085 KB) Pobierz
887665473.008.png
Spis treci
Przedmowa ................................................................................................. 7
1.
Flash Professional — podstawy .................................................... 15
Platforma Flash
16
Rzut okiem na program Flash Professional
18
Importowanie skadników
22
Rysowanie ksztatów
22
Obsuga obrazów
23
Przeksztacanie skadnikó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 uyciu Wallaby
38
3.
Tworzenie zaawansowanych animacji ........................................ 41
Projektowanie pod ktem wydajnoci
43
Wskazówki dotyczce wydajnoci Wallaby
46
4.
Obsuga programu Wallaby .......................................................... 47
Konwertowanie animacji
47
5
887665473.009.png
 
5.
Zastosowanie animacji Wallaby ................................................... 53
Umieszczanie animacji
53
Wzbogacanie projektu o prost interakcj
58
Skorowidz ................................................................................................. 61
6
Spis treci
ROZDZIA 2.
Tworzenie
prostej animacji HTML5
Nasza pierwsza, bardzo prosta animacja bdzie przedstawiaa pyncy napis.
Efekt bdzie podobny do starego znacznika HTML o nazwie <marquee> , a cho
nie jest on szczególnie wyrafinowany, to na pocztek zupenie wystarczy.
Po zakoczeniu pracy nad animacj bdziesz potrzebowa programu Adobe
Wallaby, aby j wyeksportowa. Jeli dotychczas go nie zainstalowae,
wykorzystaj woln chwil na pobranie go ze strony Adobe Labs ( http://labs.
adobe.com/ ).
Tworzenie nowego projektu
Zanim przystpisz 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 dotyczcych tworzenia nowego
dokumentu. W tym przypadku potrzebujemy projektu zgodnego z ActionScript
3.0, wic wybierz opcj o takiej wanie nazwie i kliknij przycisk OK .
Na ekranie pojawi si wówczas nowy dokument Flasha z pust scen, w której
bdziesz wprowadza tekst i animowa go.
31
887665473.010.png
 
Rysunek 2.1. Okno dialogowe Nowy dokument (New Document)
Tworzenie napisu
Na tym etapie moesz ju przystpi do tworzenia napisu. Zacznij od
wczenia narzdzia Tekst ( Text ) przy uyciu odpowiedniego przycisku na
pasku narzdzi (patrz rysunek 2.2).
Rysunek 2.2. Przycisk narzdzia Tekst (Text) na pasku narzdzi
Po wczeniu narzdzia Tekst ( Text ) kliknij w dowolnym miejscu sceny
(zmiana ksztatu kursora symbolizuje gotowo do wprowadzania tekstu)
i utwórz dowolny napis, który chciaby animowa (patrz rysunek 2.3).
32
Rozdzia 2. Tworzenie prostej animacji HTML5
887665473.001.png 887665473.002.png 887665473.003.png 887665473.004.png 887665473.005.png 887665473.006.png 887665473.007.png
 
Zgłoś jeśli naruszono regulamin