Tytuł oryginału: Creating HTML5 Animations with Flash and Wallaby

Transkrypt

1

2 Tytuł oryginału: Creating HTML5 Animations with Flash and Wallaby Tłumaczenie: Piotr Cieślak ISBN: Helion S.A Authorized Polish Translation of the English edition of Creating HTML5 animations with Flash and Wallaby, 1st Edition 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ądź 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, GLIWICE tel , helion@helion.pl WWW: (księgarnia internetowa, katalog książek) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/flawal.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. Kup książkę Poleć książkę Oceń książkę Księgarnia internetowa Lubię to!» Nasza społeczność

3 Spis tre ci Przedmowa Flash Professional podstawy 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 Tworzenie prostej animacji HTML Tworzenie nowego projektu 31 Tworzenie napisu 32 Animowanie napisu 34 Eksportowanie animacji HTML5 przy u yciu Wallaby Tworzenie zaawansowanych animacji Projektowanie pod k tem wydajno ci 43 Wskazówki dotycz ce wydajno ci Wallaby Obs uga programu Wallaby...47 Konwertowanie animacji 47 5

4 5. Zastosowanie animacji Wallaby...53 Umieszczanie animacji 53 Wzbogacanie projektu o prost interakcj 58 Skorowidz Spis tre ci

5 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 <marquee>, 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 ( adobe.com/). Tworzenie nowego projektu Zanim przyst pisz do projektowania animacji, musisz utworzy nowy projekt Flasha. Wydaj polecenie Plik/Nowy (File/New), aby otworzy okno dialogowe 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

6 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

7 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 klawisz 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 potraktowany jako instancja obiektu z biblioteki, nie ma potrzeby usuwania go i zast powania kolejn kopi. Tworzenie napisu 33

8 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 rysunek 2.5). Rysunek 2.5. Klatka kluczowa z napisem 34 Rozdzia 2. Tworzenie prostej animacji HTML5

9 W celu umiejscowienia napisu poza widocznym obszarem projektu po prostu 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

10 by ponownie znalaz si poza jej obszarem, ale z drugiej strony (jak na rysunku 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 animowanego 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

11 Po utworzeniu animacji mo esz opublikowa gotowy projekt, aby wy wietli 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 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. Zap 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 yciu 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

12 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 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 zapisa e wyeksportowany dokument HTML, a w nim plik o nazwie marquee.html wraz z kilkoma innymi plikami pomocniczymi (patrz rysunek 2.12). Wszystkie 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

13 Rysunek 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

14 40 Rozdzia 2. Tworzenie prostej animacji HTML5

15 Skorowidz A ActionScript, 17, 42 Adobe Creative Suite, 16 Adobe Flash, Patrz Flash Adobe Flash Professional, Patrz Flash Adobe Wallaby, Patrz Wallaby animacja eksportowanie, 38 klasyczna, 30 konwertowanie, 47 kszta tu, 29 napis, 32 napis animowany, 34 nowy projekt, 31 prosta, 31 ruchu, 29 umieszczanie w dokumencie HTML, 53 wydajno, 43 wzbogacanie o interakcj, 58 zaawansowana, 41 zastosowanie, 53 animowany napis, 34 B biblioteka, 18 b dy Wallaby, 51 Button, Patrz Przycisk C Create classic tween, Patrz Utwórz klasyczn animacj CSS3, 10 E Edytor ruchu, 29, 30 eksportowanie animacji, 38 Enable Logging, 49 Errors and Warnings, 51 F filtry, 42 FLA, 17 Flash, 7, 8, 15, 17 biblioteka, 18 dotarcie do odbiorców, 9 funkcje obs ugiwane w Wallaby, 10, 41 Grafika, 26 interfejs, 18 Klip filmowy, 26 kszta ty, 22 obrazy, 23 odtwarzacz, 17 omówienie programu, 18 o czasu, 20 pasek narz dzi, 22 platforma, 16 61

16 Flash Przycisk, 26 scena, 19 sk adniki, 22, 26 symbole, 26 wymagania systemowe, 11 funkcje Flasha obs ugiwane w Wallaby, 10 FutureSplash Animator, 16 Grafika, 26 HTML5, 7, 8 G H importowanie sk adników, 22 Insert Keyframe, Patrz Wstaw klatk kluczow instalacja Wallaby, 47 instancje, 27 interakcja, 58 interfejs Flasha, 18 ipad, 7 iphone, 7 I J JavaScript, 7 jquery, 49, 54, 60 jquery js, 49, 54 K klatki, 20 klatki kluczowe, 21, 28 puste, 28 Klip filmowy, 26 konwertowanie animacji, 47 kszta ty, 22, 23, 42 L listwa czasowa, Patrz o czasu M Macromedia, 16 mapy bitowe, 23 unikanie skalowania, 25 marquee.css, 49, 54, 57 marquee.html, 49 marquee.js, 49, 54, 60 marquee.log, 49 marquee_assets, 49, 54 maski, 41 morphing, Patrz przeistoczenie Motion Editor, Patrz Edytor ruchu Movie Clip, Patrz Klip filmowy napis, 32 animowany, 34 nowy projekt, 31 N O obrazy, 23, 42 obrysy, 42 obs uga Wallaby, 47 obs ugiwane w Wallaby funkcje Flasha, 10, 41 odtwarzacz Flash, 17 ograniczenia przegl darek, 45 Wallaby, 10 ostrze enia Wallaby, 51 o czasu, 20, 41 klatki, 20 warstwy, 21 P pakiet Adobe Creative Suite, 16 pasek narz dzi we Flashu, 22 platforma Flash, 16 pliki FLA, 17 pliki SWF, 17 Preferences, 49 Preview in Default Browser, 49 prosta animacja, Skorowidz

17 przeistoczenie, 30 przej cia, 21, 28, 43 przekszta canie sk adników na symbole, 26 przepustowo cza, 45 Przycisk, 26 przyciski, 42 puste klatki kluczowe, 28 R rysowanie kszta tów, 22 S scena, 19 skalowanie map bitowych, 25 sk adniki, 22, 26 stan Wallaby, 50 Status, 50 SWF, 17 symbole, 26, 42 Grafika, 26 Klip filmowy, 26 Przycisk, 26 cie ki, 43 T tekst, 43 Tekst, 32 testowanie projektu, 44 tween, Patrz przej cia tworzenie animacji eksportowanie, 38 napis, 32 napis animowany, 34 nowy projekt, 31 prostej, 31 wydajno, 43 zaawansowanej, 41 U umieszczanie animacji w dokumencie HTML, 53 unikanie skalowania map bitowych, 25 ustawienia Wallaby, 49 Utwórz klasyczn animacj, 36 W Wallaby, 7 b dy i ostrze enia, 51 eksportowanie animacji, 38 instalacja, 47 konwertowanie animacji, 47 obs uga, 47 obs ugiwane funkcje Flasha, 10, 41 ograniczenia, 10 stan, 50 ustawienia, 49 wydajno, 46 zastosowanie animacji, 53 zgodno z przegl darkami, 10 warstwy, 21, 41 WebKit, 10 Wstaw klatk kluczow, 35 wybór pomi dzy mapami bitowymi a kszta tami, 23 wydajno animacji, 43 ograniczenia przegl darek, 45 przepustowo cza, 45 testowanie projektu, 44 za o enia projektu, 44 wydajno Wallaby, 46 wymagania systemowe Flasha, 11 wype nienia, 42 wzbogacanie animacji o interakcj, 58 Z zaawansowana animacja, 41 za o enia projektu, 44 zastosowanie animacji Wallaby, 53 zgodno Wallaby z przegl darkami, 10 znaczniki CSS3, 10 Skorowidz 63

18

19