Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00052 006694 14488998 na godz. na dobę w sumie
Flash i Wallaby. Projektowanie animacji zgodnych z HTML5 - książka
Flash i Wallaby. Projektowanie animacji zgodnych z HTML5 - książka
Autor: Liczba stron: 64
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-3940-3 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> xml i xslt - programowanie
Porównaj ceny (książka, ebook (-25%), audiobook).

Błyskawiczne tworzenie animacji w HTML5!

Projektowanie zgodnych ze standardami animacji na potrzeby WWW jest dziś o wiele łatwiejsze niż kiedyś. Dzięki swym możliwościom HTML5 może być dobrą alternatywą dla Flasha - technologii opracowanej przez firmę Adobe. Zauważył to zresztą sam producent, wydając narzędzie Wallaby, pozwalające na konwersję animacji z formatu Flash do HTML5. Dzięki temu urządzenia nieobsługujące formatu Flash, takie jak iPad i iPhone, bez problemu mogą wyświetlać animacje.

Zakodowanie animacji w HTML5 jest czasochłonne, a we Flashu - szybkie i przyjemne. Dzięki tej książce połączysz przyjemność i wydajność z dostępnością. Nawet jeżeli nie miałeś wcześniej styczności z omawianymi technologiami, błyskawicznie stworzysz pierwszą animację Flash, a następnie skonwertujesz ją do formatu HTML5. Ponadto poznasz potencjał biblioteki jQuery i wzbogacisz swoją pracę o funkcje interaktywne. W tej książce znajdziesz także wiele cennych wskazówek, które pozwolą Ci uniknąć typowych problemów. Wykorzystaj więc eksperymentalne narzędzie Wallaby i twórz zachwycające animacje!

Po lekturze tej książki:

Wykorzystaj możliwości Flasha i Wallaby oraz potencjał HTML5!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

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ą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, 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 znaleźć 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ę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treļci Przedmowa .................................................................................................7 1. Flash Professional — podstawy .................................................... 15 16 18 22 22 23 26 28 Platforma Flash Rzut okiem na program Flash Professional Importowanie skäadników Rysowanie ksztaätów Obsäuga obrazów Przeksztaäcanie skäadników projektu na symbole Klatki kluczowe 2. Tworzenie prostej animacji HTML5 .............................................. 31 31 32 34 38 Tworzenie nowego projektu Tworzenie napisu Animowanie napisu Eksportowanie animacji HTML5 przy uĔyciu Wallaby 3. Tworzenie zaawansowanych animacji ........................................ 41 43 46 Projektowanie pod kñtem wydajnoĈci Wskazówki dotyczñce wydajnoĈci Wallaby 4. Obsĥuga programu Wallaby ..........................................................47 47 Konwertowanie animacji 5 5. Zastosowanie animacji Wallaby ...................................................53 53 58 Umieszczanie animacji Wzbogacanie projektu o prostñ interakcjö Skorowidz ................................................................................................. 61 6 _ Spis treļci 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 (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 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 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 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 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 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 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 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 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 40 _ Rozdziaĥ 2. Tworzenie prostej animacji HTML5 Skorowidz 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 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 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 I 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 J JavaScript, 7 jQuery, 49, 54, 60 jquery-1.4.2.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 62 _ Skorowidz 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, 31 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
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Flash i Wallaby. Projektowanie animacji zgodnych z HTML5
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: