PRACA DYPLOMOWA

Zespół Szkół Elektrycznych we Włocławku

Tomasz Pełnikowski

Flash 5 Animacje i interakcje

                                        Praca Dyplomowa

                                        napisana pod kierunkiem

                                        mgr  inż Sławomira Grzegorzewskiego

                                           Włocławek 2004

Spis treści

Wstęp.....................................................................................

1. Czym jest Flash....................................................................

1.1. Standard sieciowy..............................................................................

1.2. Interaktywność..................................................................................

1.3. Łatwość użytkowania..........................................................................

2.Interfejs...............................................................................

2.1. Przyborniki........................................................................................

2.2. Główne Menu.....................................................................................

2.3. Listwa czasowa

2.4. Panele

3.Tekst

  3.1. Tworzenie elementów tekstowych

  3.2. Rodzaje pól tekstowych

  3.3. Rozbijanie tekstu

  3.4. Animowanie tekstu

4.Symbole

  4.1. Typy symboli

  4.2. Tworzenie symboli

  4.3. Edycja symboli

  4.4. Praca z klonami symboli

5.Dźwięk we Flash-u

  5.1. Parametry dźwięku

5.2. Importowanie dźwięków

5.3. Umieszczanie dźwięku na listwie czasowej

5.4. Konfiguracja i edycja klonów dźwięku

6. Warstwy

  6.1. Tworzenie warstw

  6.2. Usuwanie warstw

  6.3. Zmiana nazw warstw

  6.4. Ustalanie kolejności warstw

  6.5. Kopiowanie warstw

  6.6. Rodzaje warstw

7. Animacja

  7.1. Na czym polega animacja

  7.2. Metody animacji

  7.3. Tworzenie animacji

8. Podstawowe akcje i interaktywność

  8.1. Interaktywność we Flashu

  8.2. Zdarzenia

  8.3. Obiekty docelowe

9. Publikacja animacji

9.1. Przygotowanie filmu do optymalnego odtwarzania

9.2. Publikacja i eksport filmu

8.3. Ustawienie opcji Flash Player-a

Podsumowanie

Bibliografia

Wstęp

W dzisiejszych czasach Internet odgrywa wielką rolę w życiu ludzi. Każdy może w nim znaleźć coś dla siebie. To właśnie dzięki niemu świat stał się jednością. Jest on źródłem wszelakich informacji, gdzie bez wychodzenia z domu można dokonać zakupów, opłacić rachunki. Jest to naprawdę fascynujące.

Od momentu, gdy pojawiły się strony WWW (World Wide Web), na których oprócz dotychczasowego tekstu można było umieszczać także kolorowe obrazki i zdjęcia, Internet przeżywa istny rozkwit. Początkowo swoje strony w Internecie umieszczały duże firmy międzynarodowe. Jednakże dostępność i popularność tego medium spowodowała, że wkrótce ogromna liczba ludzi posiadła własne witryny w sieci.

Na skutek tak niesamowitej popularności Internetu firmy softwareowe szybko zwietrzyły interes i zaczęły produkować oprogramowanie, które z jednej strony miało pomóc użytkownikowi

w poruszaniu się po infostradzie a z drugiej dać zawodowcom i nie tylko narzędzia do tworzenia coraz bardziej atrakcyjnych witryn internetowych.

Jednak największym problemem witryn internetowych był

(i wciąż jest) fakt, iż dobrze wyglądające strona WWW ładuje się długo ze względu na bardzo dużą ilość grafiki (pliki JPEG i GIF), która na niej występuje, a o animacjach to w ogóle można zapomnieć.

Wielu próbowało rozwiązać ten problem na różne sposoby. Jedną

z firm, która nad tym również pracowała była Macromedia. Ludzie tam pracujący stworzyli program, którego popularność, jako narzędzia wykorzystywanego przy tworzeniu publikacji dla Internetu, stale rośnie. Mowa tu o programie Flash

              Głównym powodem wybrania przeze mnie zrealizowanego tematu jest zainteresowanie tworzeniem interaktywnych stron internetowych, na co właśnie pozwala Flash5. W mojej pracy zostały opisane podstawy tego wspaniałego programu. W poszczególnych rozdziałach i podrozdziałach opisuję narzędzia, jakimi dysponuje Flash oraz sposoby ich użycia. Praca ma na celu ukazanie prostoty tworzenia zawansowanych stron internetowych oraz animacji. Jest kierowana szczególnie do mniej doświadczonych użytkowników tego programu, choć i Ci bardziej zaawansowani na pewno znajdą w niej interesujące wiadomości. Starałem się, aby praca była jak najbardziej zrozumiała oraz by zawierała jak najwięcej informacji. Oczywiście nie mogłem w niej opisać wszystkich możliwość tego wszechstronnego programu, ale zawarłem podstawowe wiadomości, które w zupełności wystarczą do stworzenia ciekawych prezentacji multimedialnych oraz stron internetowych zapierających dech w piersiach.

Źródła potrzebne do zrealizowania przedstawionego tematu to głównie książki. Jednak, jak już wcześniej pisałem olbrzymim źródłem informacji jest Internet, dlatego też pewne informacje zaczerpnąłem

z tej sieci.

Dla polepszenia przejrzystości praca podzielona jest na rozdziały i podrozdziały. W rozdziałach wymienione i scharakteryzowane zostały poszczególne elementy, z jakich składa się animacja, a podrozdziały zawierają dokładny ich opis oraz sposoby jak najlepszego wykorzystania.

1. Czym jest Flash

1.1  Standard sieciowy

Jak może potwierdzić większość osób przygotowujących materiały sieciowe, producenci przeglądarek i oprogramowania często przystosowują standardy internetowe do swoich potrzeb poprzez definiowanie własnych wersji tych standardów. Każdy z nas robi

różne rzeczy na własne sposoby, nigdzie zaś nie jest to bardziej widoczne niż w przeglądarkach. Weźmy następujący scenariusz: po wielogodzinnej pracy utworzyliśmy doskonałą stronę WWW, z idealnie rozmieszczoną grafiką i być może kilkoma skryptami JavaScript odpowiedzialnymi za interaktywność. Oglądamy rezultat swojej pracy w ulubionej przeglądarce i jesteśmy zachwyceni tym co widzimy — wszystko wygląda i działa dokładnie tak, jak powinno. Nasze zadowolenie trwa do momentu, gdy decydujesz się wyświetlić stronę w mniej ulubionej przeglądarce — w tym momencie zachwyt przeradza się w zażenowanie. Nie dość, że wszystko wygląda inaczej niż powinno, to jeszcze strona WWW generuje jeden błąd JavaScript za drugim. W wspaniała interaktywna strona sieciowa padła ofiarą problemów z kompatybilnością przeglądarek — proble­mów, które spędzają sen z powiek projektantom sieciowym.

Sieć WWW rozwija się w gwałtownym tempie, jednak brak uniwersalnych standardów jest hamulcem dla wielu nowoczesnych technologii. Producenci sieciowi poprzestają na stosowaniu podstawowych opcji — nie chcą ryzykować problemów

z kompatybilno­ścią, powstających przy stosowaniu zaawansowanych rozwiązań. Firma Macromedia rozwiązała ten problem, tworząc odtwarzacz Flash Player, plug-in umożliwiający od­twarzanie prezentacji Flasha w taki sam sposób na wszystkich przeglądarkach, syste­mach operacyjnych, urządzeniach współpracujących z siecią WWW, a nawet konsolach do gier wideo (na przykład Sega Dreamcast czy Sony Play Station).

Dziś, oprócz rozprzestrzeniania się w sieci WWW i urządzeniach elektronicznych, tech­nologia Flasha działa na witrynach sieciowych największych firm światowych. Prawdę mówiąc, 35 procent

z zestawienia 50 najlepszych stron WWW świata zostało utworzo­nych za pomocą tego programu. Z drugiej strony, ponad 90 procent używanych obecnie przeglądarek — czyli inaczej niemal 250 milionów użytkowników — potrafi odtwarzać materiały Flasha bez konieczności pobierania odtwarzacza. (Informacja dla pozostałych 10 procent: pobieranie plug-inu jest proste i przebiega szybko). Co więcej, obecne wer­sje popularnych przeglądarek zawierają odtwarzacz Flash Player, podobnie jak nowe wersje systemów operacyjnych Windows i MacOS. Jeśli te fakty nie czynią technologii Flasha standardem, to chyba nic nim nie jest.

Dodatkowym atutem jest fakt, że w zeszłym roku firma Macromedia opublikowała format SWF, zezwalając tym samym wszelkim producentom oprogramowania na tworzenie produktów eksportujących materiały w formacie filmów Flasha. W odpowiedzi   na to posunięcie — przy milczącym uznaniu czołowej pozycji rynkowej Flasha — firma Ad­obe zaoferowała produkt zdolny do eksportowania materiałów w formacie Flasha. Jest to wspaniała wiadomość dla projektantów sieciowych, którzy maj ą teraz większy wybór narzędzi (choć możliwości tworzenia elementów interaktywnych programu LiveMotion nie dorównują Flashowi 5). Co więcej, kilku niezależnych producentów oprogramowania również pracuje nad narzędziami do tworzenia animacji, grafiki 3D i innymi, eksportu­jącymi materiały

w formacie SWF. Również wiele popularnych aplikacji graficznych

(w tym Adobe Illustrator i CorelDRAW) potrafi teraz eksportować pliki bezpośrednio w formacie SWF.

Dla osób tworzących we Flashu najważniejszy jest fakt, że swoje dzieła tworzą oni je­den raz — korzystając z wszelkich udogodnień

i stosując dowolne techniki — wiedząc o tym, że zawsze będą one wyglądały tak samo bez względu na platformę, przeglądarkę czy zastosowane przez użytkownika urządzenie. Nie trzeba mówić, jak ważne jest to dla producentów sieciowych.

1.2 Interaktywność

Mało jest zjawisk równie interesujących jak ruch

i interaktywność. Gdy byliśmy dziećmi, mogliśmy poświęcić godziny na obserwowanie motyla lub oglądanie filmów animowanych. I choć niewielu ludziom sprawia przyjemność obserwowanie kamieni, znacznie więcej jest amatorów oglądania kreskówek, w których kamienie te są poddawane wszelkiego rodzaju eksplozjom. Wszyscy chcielibyśmy, aby nasze działania wywoływały reakcję. Flash po­zwala przygotowywać dla użytkowników tego rodzaju atrakcje. Wszystko zależy od dobre­go pomysłu, który jest iskrą do powstania dobrej prezentacji interaktywnej.

We Flashu elementy interaktywne mogą wyświetlać informacje, drukować je, odtwa­rzać dźwięki, przenosić użytkowników w różne miejsca filmu i reagować na zdarzenia myszy (ruch i kliknięcia). Oprócz tego użytkownicy mogą przeciągać elementy filmu

i manipulować nimi. Można też tworzyć własne gry lub samodzielne aplikacje siecio­we wyposażone w elementy logiki. Film Flasha może odtwarzać się zgodnie z przygo­towanym scenariuszem lub poddawać się woli użytkownika. Możemy nawet zamieścić w nim tekst i funkcje HTML. Najcenniejszym nabytkiem dla interaktyw­ności jest jednak nowy język skryptowy Flasha 5. Oferuje on możliwości konkurujące lub nawet przewyższające możliwości języka JavaScript. Pozwala użytkownikom ste­rować przeróżnymi elementami (w tym położeniem kursora, kolorem obiektów itp.). Filmy Flasha mają teraz więcej możliwości, użytkownicy mogą mieć na nie większy wpływ, zaś wrażenia, jakich im dostarczysz, mogą być naprawdę niezapomniane.

Mówiąc o prezentacji, nie można zapominać o dźwięku. Bez niego nawet najbardziej wyszukany projekt wizualny jest niepełny. Flash pozwala wzbogacać wrażenia widza o efekty dźwiękowe oraz synchronizować ścieżkę dźwiękową z akcją odbywającą się na ekranie. Możemy też umożliwić użytkownikowi regulację głośności

i panoramy dźwię­ku, dzięki czemu będzie on miał większy wpływ na to, co słyszy. A im bardziej zaanga­żujemy widza, tym lepiej zapamięta on wiadomość, jaką chcemy mu przekazać.

1.3 Łatwość użytkowania

Uwieńczeniem wszystkich wymienionych atutów jest fakt, że tworzenie tych elementów jest bardzo łatwe. We Flashu możemy stworzyć efektowną prezentację multimedialną wraz z elementami interaktywnymi i przyciskami, bez konieczności otwierania innego pro­gramu graficznego, czy pisania jakichkolwiek skryptów w edytorze HTML. Nasze dzieło i tak będzie wyglądało i działało identycznie na wszystkich urządzeniach współ­pracujących z Flashem.

We Flashu są dostępne listwy czasowe, ujęcia i sceny, które ułatwiają zarządzanie ani­macjami i elementami interaktywnymi. Oprócz tego program ten oferuje kilka narzędzi służących do zarządzania materiałami i obiektami, planowania procesu produkcji oraz analizowania i testowania projektów przed ich opublikowaniem — wszystko to, by uwolnić potencjał twórczy i podnieść efektywność pracy.

Flash zawiera bogaty zestaw narzędzi, które pozwalają tworzyć projekty o profesjonal­nym wyglądzie bez potrzeby opanowania specjalnych umiejętności czy technik. Tę wersję programu firma Macromedia wyposażyła w wygodny i intuicyjny interfejs, przypominający inne programy do tworzenia grafiki. (Na przykład, program Dreamweaver lub Fireworks). Niektóre narzędzia Flasha działają podobnie jak w innych wektorowych programach graficznych, choć są również takie, które pozwalają tworzyć grafikę w bardzo nietypowy i wygodny sposób. Jeśli wcześniej używaliśmy programu ilustracyjnego, nie masz powodu do zmartwienia — na­rzędzia Flasha powininniśmy opanować w błyskawicznym tempie. Nawet jeśli nigdy nie używaliśmy żadnego programu graficznego, bez trudu zrozumiemy zasady działania Flasha.

Może się zdarzyć, że narzędzia rysownicze Flasha okażą się niewystarczające (najprost­szy przykład — gdy chcemy zastosować grafikę bitmapową). Wówczas możemy skorzy­stać z możliwości importowania do programu różnorakich materiałów. Tym sposobem możemy tworzyć grafikę w ulubionym programie ilustracyjnym lub graficznym, a na­stępnie importować ją do Flasha i użyć jej w filmie. Oprócz tego Flash potrafi bezpo­średnio importować pliki programów FreeHand i Fireworks, co stanowi kolejny dowód na to, że tworzenie efektownych prezentacji nigdy nie będzie problemem.

2. Interfejs

Zmodyfikowany interfejs Flasha 5 jest wygodniejszy i bardziej intuicyjny od poprzedniej wersji, co wiąże się z szybką nauką

i wygodniejszą pracą. Jeśli używamy innych produktów firmy Macromedia zauważymy podobieństwo między programami, takie jak pasek Launcher ( ikony  w prawym dolnym narożniku okna dokumentu), ikony narzędzi w przyborniku, układ poleceń menu oraz stosowanie paneli w pracy   nad projektem.

Omówię teraz poszczególne elementy interfejsu Flasha 5

i sposób dopasowania go do własnych upodobań. Na rysunku 2.1 pokazałem interfejs programu z jego najważniejszymi elementami.

Rysunek 2.1 Nowy dokument otwarty we Flashu składa się z listy czasowej, obrazu, obszaru roboczego.

2.1 Przyborniki

We Flashu niezbędne są przyborniki. Flash posiada dwa główne przyborniki — ...