kurs flash.doc

(261 KB) Pobierz
Flash to program, który został stworzony przez firmę Macromedia

Flash to program, który został stworzony przez firmę Macromedia. Posługując się tym programem możemy stworzyć wysokiej jakości animacje i i interaktywne elementy, które możemy wstawić na naszą stronę WWW. Zaletą tego programu jest to, że animacje które stworzymy zajmują bardzo mało i przez co nie opóźniają ładowania strony. Kolejnym faktem, który wskazuje na atrakcyjność tego programu jest to, że do naszej animacji możemy dodać dźwięk. Dźwięk jest dobrej jakości i dzięki kompresji nie zwiększa bardzo objętości powstałego pliku. Używanie programu jest dość proste elementy naszej animacji możemy rysować w podobny sposób jak to robimy w Windowsowym Paintcie. Na kolejnych stronach postaram się przybliżyć wam ten program i mam nadzieję, że po jego przeczytaniu i analizie każdy z was będzie mógł zrobić dowolną animację czy baner reklamowy swojej strony. Przy nauce kursu będzie potrzebny nam przede wszystkim Flash którego wersję trial można ściągnąć ze strony firmy Macromedia ściągnąć [Pobierz].

·         W górnej części okna programu, bezpośrednio nad obszarem konstruowanej sceny użytkownik może manipulować warstwami oraz animować obiekty (na rysunku obszar A). Poziome paski z lewej strony (na rysunku oznaczone napisem Layer 1) reprezentują warstwy. Tutaj możemy zmienić ich nazwy (klikając dwukrotnie nazwę dotychczasową) lub status. Zaznaczając opcje oznaczone kolejno symbolami Oko, Kłódkai Kwadratmożemy odpowiednio ukryć, zablokować lub wyświetlić kontur wszystkich obiektów na danej warstwie. Klikając prawym przyciskiem pasek warstwy, uzyskasz dostęp do dodatkowych opcji m.in. wstawiania Wstawienie warstwyi usuwania warstw Usuwanie warstwy.

·         Bezpośrednio po tym obszarem znajdują się trzy przyciski: Dodawanie nowej warstwy- dodawanie nowej warstwy,Dodawanie warstwy prowadzącej - dodawanie warstwy prowadzącej (Guide Layer - potrzebna do zdefiniowania toru ruchu obiektu po krzywej, opcja Add Guide Layer) i Usuwanie warstwy- usuwanie aktualnie wybranej warstwy. Określanie kolejności wyświetlania obiektów na ekranie ustawia się przeciągając warstwy wyżej lub niżej.

·         Z prawej strony (na rysunku obszar B) umieszczone są linie czasowe przypisane do każdej warstwy. Klatka, w której zapisane są zmiany obiektu, nosi nazwę klatki kluczowej (keyframe). Oznaczona jest kółkiem (wypełnionym Wypełniona klatka kluczowalub pustym Pusta klatka kluczowa, w zależności od tego, czy warstwa zawiera jakiś obiekt, czy nie). Taka struktura sceny wymusza konieczność umieszczania każdego animowanego obiektu na odrębnej warstwie, w przeciwnym wypadku nie można by było precyzyjnie kontrolować ich zachowania.

·         Na pasku przy lewej krawędzi (na rysunku obszar C) znajdują się podstawowe narzędzia do projektowania obiektów. Pod przyciskami narzędzi umieszczony jest pasek właściwości danego narzędzia umożliwiający dopasowanie np. kroju czcionki czy koloru wypełnienia wielokątów.

·         Na początek zapoznaj się z najprostszymi narzędziami - są nimi Oval(służy do rysowania elipsy) oraz Rectangle(do rysowania prostokątów). Jeśli chcesz rysować figury o ustalonych proporcjach nie zapomnij o uaktywnieniu opcji Snap, dzięki temu Flash będzie usiłował poprawić tworzone obiekty, aby miały równe proporcje (taki sam efekt można uzyskać przytrzymując klawisz [Shift] podczas rysowania), przydatne może się okazać włączenie siatki (z menu Viewopcja Gird). W przypadku obu narzędzi masz możliwość ustalenia niektórych parametrów: kolor konturu Line Colori wypełnienia Fill Colororaz grubość Line Thicknessi wzór Line Stylekonturu (odpowiednio Line Thickness i Line Style), dodatkowo przy narzędzia Rectangle Rectanglemożesz określić zaokrąglenie wierzchołków - służy do tego przycisk Round Rectangle Radius Round Rectangle Radius. Jeżeli przykładowe wzory linii nie są odpowiednie, można zdefiniować własny wzór (w tym celu z rozwijanej listy dostępnych wybieramy opcję Custom). Przy tworzeniu wzorzystych konturów należy pamiętać, że mogą spowolnić wyświetlanie skomplikowanych scen, zwłaszcza na wolnych komputerach.

·         Do tworzenia odręcznych rysunków używaj ołówka Pencil(Pencil). Narzędzie oferuje kilka trybów pracy (Pencil Mode) różnią się liczbą szczegółów i stylem tworzonych linii: od prostych łamanych Straightendo łagodnych łuków Smooth. Czas na pędzel Brush(Brush). Wiele dodatkowych opcji dostępnych pod przyciskiem Brush ModeBrush Mode pozwoli pokrywać farbą wyłącznie wypełnienie zaznaczonego obiektu Paint Fills, rysowanie linii pod istniejącymi kształtami Paint Behind, rysować linie tylko nad zaznaczonym obszarem Paint Selectionczy też zawęzić obszar malowania do wnętrza konturu Paint Inside, w którym rozpocząłeś malowanie. Oprócz malowania wybranym kolorem możesz również zaimportować bitmapę z której ustalisz kolor farby. W tym celu włącz do projektu plik graficzny (z menu Fileopcja Import) i rozbij go na edytowalny kształt poleceniem Modify| Break Apart, dzięki tej operacji będziesz mógł go modyfikować. Następnie pobierz kolor bitmapy za pomocą narzędzia DropperDropper (zakraplacz). Teraz wybierz narzędzie BrushBrush i możesz już malować, używając jako tekstury wczytanej uprzednio bitmapy. Możesz również wypełniać daną bitmapą używając narzędzia Paint BucketPaint Bucket.

·         Przycisk Text tool(Text Tool) pozwala na wprowadzenie do sceny tekstu. Przed wskazaniem miejsca, w którym będziesz wpisywać dany tekst, należy określić jego parametry: krój czcionki Font(Font), wielkość czcionki Font Size(Font Size), kolor liter Text Color(Text Color), atrybuty (Bold Wytłuszczenie, Italic Pochylenie), położenie tekstu Położenie Tekstu(Alignment) i właściwości akapitu (Paragraph). Wyżej wymienione parametry również można zmodyfikować później, jeśli nie zgrupowałeś tekstu lub nie rozbiłeś go na krzywe poleceniem Modify| Break Apart. Przydatna jest możliwość zmiany keringu (poziomych odstępów między znakami), w tym celu zaznacz tekst i dopasuj odstępy, naciskając [Ctrl]+[Alt]+[strzałka w lewo] lub [strzałka w prawo]. W wersji 4 programu Flash dodano możliwość tworzenia pól tekstowych, których zawartość może być modyfikowana przez użytkownika podczas odtwarzania filmu. Aby utworzyć obiekt tego typu, zaznacz przycisk Text FieldText Filed przed wpisaniem tekstu na ekranie.

·         Ostatnią czynnością tworzenia grafiki jest rysowanie linii - narzędzie Line. Jak w większości programów graficznych, także i we Flashu można określić jej Line Thicknessgrubość, kolor Line Colori wzór Line Style. Pamiętaj o klawiszu [Shift], który przyda się do rysowania linii poziomych, pionowych i nachylonych pod kątek 45 stopni.
Jeżeli uważasz, że te narzędzia Ci nie wystarczą do tworzenia grafiki, możesz zaimportować grafikę (*.jpg, *.gif, itp.) stworzoną w innych programach np. Paint Shop Pro.

Animacja

1. W programie Macromedia Flash istnieją trzy metody tworzenia animacji. Pierwsza polega na rysowaniu wielu ilustracji znajdujących się w kolejnych klatkach na linii czasu - przypomina to tradycyjny sposób tworzenia filmów animowanych. Dwie kolejne metody sprowadzają się do określenia tylko stanu początkowego i końcowego poruszanych obiektów (pierwszej i ostatniej klatki animacji) - Flash sam (metodą interpolacji) wyświetli wszystkie stany pośrednie, co w wyniku da wrażenie płynnego ruchu.

2. Różnice dotyczą przede wszystkim zmienianych parametrów. Jedna z metod umożliwia animowanie położenia, wielkości, obrotu, przezroczystości, itp. (animacja typu Motion Tween), druga pozwala na płynną zmianę kształtów obiektów, czyli tzw. Morpfing (animacja typu Shape Tween). W przypadku animacji Shape Tween zmianom podlega także kolor wypełnienia i konturów obiektu. Chcąc określić lub zmienić stan obiektu w danym punkcie czasu, należy do wybranej klatki wstawić tzw. klatkę kluczową (służy do tego klawisz [F6]). Klatka aktualnie edytowana zaznaczona jest na linii czasu pionową czerwoną kreską, aby przejść do innej klatki, wystarczy kliknąć kreślone miejsce. Inną metodą poruszania się wzdłuż linii czasu jest używanie klawiszy [<] i [>], w ten sposób można przemieszczać się o jedną klatkę do przodu lub wstecz. Numer aktualnej klatki znajduje się w dolnej części linii czasu, na prawo od przycisków.

3. Aby najłatwiej dla wybranej warstwy wstawić pewną liczbę klatek, zaznaczajmy odpowiedni odcinek na początku linii czasu i naciskamy klawisz [F5]. Następnie na wybranym obszarze tworzy się klatki kluczowe (mając wciąż zaznaczone klatki, należy nacisnąć klawisz [F6]). Teraz w miarę wypełniania klatek grafiką puste kółka będą ustępowały miejsca wypełnionym.

4. Aby użyć animacji Motion Tween trzeba operować symbolami. Najczęściej klatki kluczowe (początkowa i końcowa) będą zawierały ten sam symbol (zmieniają się tylko niektóre jego parametry). Na linii czasu trzeba utworzyć puste klatki (tak jak w poprzednim przypadku), tym razem jednak potrzebne są tylko dwie klatki kluczowe. Ponieważ jedna już jest (pierwsza klatka), należy przejść kilkanaście klatek dalej i nacisnąć klawisz [F6]. Teraz określa się typ animacji: prawym przyciskiem myszy klikając pierwszą klatkę kluczową i z menu, które się pojawi wybrać opcję Properties. Na karcie Zakładk Tweeningnależy wybrać Motion.
Po narysowaniu grafiki w pierwszej klatce tworzy się z niej symbol. W tym celu należy zaznaczyć grafikę i nacisnąć klawisz [F8], podając nazwę obiektu. Następnie w drugiej klatce kluczowej i wstawia się ten sam symbol, przeciągając go z okienka Library [Ctrl+L]. Teraz, gdy modyfikuje się obiekt w jednej z klatek Flash automatycznie zapisuje informacje, wykorzystywane później podczas animacji.

Na pewno każdy z was widział animację we flashu w której na ekranie pojawiał się napis i w efektowny sposób po chwili np. obracając się znikał. Wiem z doświadczenia, że właśnie ten efekt na odbiorcy robi największe wrażenie . Postaramy się teraz zrobić animację która będzie znacznie trudniejsza od poprzedniej, ale rządzi się ona tymi samymi zasadami. Zrobimy baner polegający na tym, że pojawi się napis DALEJ a po kliknięciu w niego przejdziemy do  następnego rozdziału naszego kursu. Na początku ustalmy kolor tła (ja ustawię czarny) i wymiary naszej animacji na 200 x 70 pikseli. Teraz dodamy do istniejącej warstwy pięć nowych warstw. Klikamy w polu warstwy na znak + (Add Layer) który znajduje się na dole tego pola. Powtarzamy tę czynność do uzyskania sześciu warstw z nazwami od Layer 1 do Layer 6 teraz zmieniamy nazwę każdej z nich nazywajmy kolejno : warstwa 6 niech się nazywa D, warstwa 5 A i tak do warstwy nr. 1 którą nazwijmy link gdyż będzie ona zawierać pole w które klikniemy by przenieść się DALEJ. Teraz stworzymy każdą literę. Możemy je po prostu narysować  w odpowiedniej warstwie, ale ja was przy okazji nauczę jak tworzyć obiekty graficzne, które potem możemy wielokrotnie wstawiać do naszej animacji. Klikamy w menu opcję Insert dalej New Symbol... lub kombinację klawiszy Ctrl+F8 Tu w wyświetlonym okienku wpisujemy nazwę obiektu Name u nas będą to kolejne litery i ustalamy Behavior na Graphic klikamy OK. Teraz otworzyło się nam pole w którym narysujemy naszą literę. Wybieramy narzędzie do pisania oznaczone literą A na pasku. Ustalamy czcionkę np. Times New Roman, wielkość litery na 36 i kolor żółty . Tworzymy pierwszą literę w naszym przypadku D. Teraz wyśrodkujemy ją. Wciskamy Ctrl+k z wyświetlonego okienka wybieramy położenie pionowe Vertical na wzglądem linii środkowej (trzeci kwadrat), położenie poziome Horizontal też wg. linii biegnącej przez środek i na koniec zaznaczamy opcję Align to page. Klikamy OK. Teraz powtarzamy czynność dla każdej kolejnej litery. Potem powracamy  do naszej sceny klikając zakładkę z jej nazwą. Teraz musimy nasze litery wstawić do animacji. Zapamiętane one zostały w bibliotece naszej animacji wciśnijmy Ctrl+L pojawiło się nam okienko zawierający kolejny litery naszej animacji . Teraz przechodzimy do warstwy pod nazwą D klikając na nią w polu warstwy, następnie łapiemy kursorem z biblioteki naszą literę D i przeciągamy na nasze główne pole. Potem przełączamy się pomiędzy kolejnymi warstwami i w każdej z nich umieszczamy odpowiednią jej literę. Ustawiamy litery w napis i umieszczamy je poza polem animacji (na szarym tle). Teraz będziemy każdą literą animować postępujemy tak jak z kółkiem w wcześniejszej lekcji. Sprawmy, że najadą one z góry ( tworzymy animację każdej litery ) niech wszystkie one ułożą napis na naszym głównym polu. Teraz klikamy prawym klawiszem myszy na kolejne litery w klatce nr. 1 wchodzimy w opcję Properties... W poprzedniej lekcji ustaliliśmy zmianę koloru tu sprawimy, że litera będzie niewidoczna i powoli będzie się pojawiać wybieramy opcję Alpha i ustalamy na 0%. Powtarzamy tę czynność dla każdej litery. Teraz wstawimy opóźnienie dla poszczególnych liter sprawi to, że najadą one po kolei. Klikamy na pierwszą klatkę warstwy z drugą literą i wciskamy klawisz F5 trzy razy . Powtarzamy czynność dla następnych warstw tylko z tym wyjątkiem, że od poprzedniej warstwy liczba klatek ma być większa o trzy. Teraz by nasze litery nie zniknęły wstawmy klatki kluczowe (klawisz F6)  w każdej warstwie w klatce o numerze takim jak końcowa ostatniej litery. Potem wstawmy kolejną klatkę kluczową w klatce o numerze o 10 większym (w każdej warstwie).Sprawi to,że nasz napis zdążymy przeczytać zanim sprawimy, że litery się rozmyją jednocześnie powiększając. Każdą literę teraz powiększamy klikamy na nią prawym klawiszem myszki i wybieramy opcję Scale . Potem ponownie wchodzimy we właściwości Properties każdej litery i znowu ustawiamy Color Effect Alpha na 0%. Na koniec pozostało nam w warstwie którą nazwaliśmy link utworzyć przycisk Button prostokątny  koloru takiego samego jak tło i rozmiarów takich jak cała animacja. Ważne jest to, żeby warstwa link była najniżej bo gdy będzie powyżej którejś z liter to najzwyklej ją zasłoni (możecie to sprawdzić przesuwając ją do góry). Teraz wybieramy opcję Insert, New Symbol i tu wybieramy Button czyli przycisk. Zauważyliście teraz na pewno, że w polu klatek pojawiły się cztery pola Up oznacza klatkę w której nasz przycisk jest w stanie spoczynku, Over oznacza klatkę w której nad przyciskiem znajduje się myszka, Down oznacza stan przycisku gdy wciśniemy myszkę no i pole Hit oznacza obszar na przycisku który będzie zmieniał nasz kursor w łapkę i umożliwiał np. wciśnięcie go. Wstawiamy klatki kluczowe we wszystkie te klatki. Rysujemy nasz prostokąt w klatce Up potem kopiujemy go do klatki Hit w tym celu wciskamy klawisze Ctrl+C przechodzimy do klatki Hit i wklejamy klawiszami Ctrl+Shift+V . Powracamy do zakładki z naszą sceną i do warstwy link wstawiamy z bibliteki (Ctrl+L) nasz przycisk. Potem klikamy go dwa razy otworzy się nam wtedy okienko o nazwie Instance Properties tu przechodzimy do zakładki Actions czyli akcje. Teraz klikamy znak + i z dostępnej listy wybieramy opcję On mouseEvent oznacza to, że wykonujemy akcję myszką. Zaznaczamy z listy Event: opcje Press czyli wciśnięcie.  Potem znowu wciskamy znak +  i wybieramy z listy opcję Get URL czyli pobierz stronę. W pole o nazwie URL wpisujemy adres strony np. http://www.wp.pl. Możemy także ustalić w jakiej ramce załaduje się na nasza strona (pole Window). W ostatniej klatce naszej animacji warstwy link wstawiamy klatkę kluczową. Teraz na sam koniec pozostało nam stworzenie pliku .swf i zapisanie naszego projektu animacji. Jak widzicie aby uzyskać tak prosty efekt trzeba trochę popracować. Mam nadzieję, że zrozumieliście. Dałem wam trochę dużo nowych wiadomości jak na jeden temat, ale po dokładnej analizie od razu załapiecie o co chodzi.

Animacja Poklatkowa

1. Metoda ta przypomina tradycyjne metody tworzenia filmów animowanych - na warstwie tworzysz dużą liczbę klatek kluczowych i dla każdej z nich rysujesz obiekt w kolejnej fazie animacji. Szybkie, sekwencyjne odtwarzanie rysunków daje wrażenie ruchu. Metoda ta nadaje się do animowania postaci i skomplikowanych przekształceń, wszędzie tam, gdzie zastosowanie innych metod animacji nie przynosi spodziewanych rezultatów. Pojedyncze klatki animacji mogą się składać z kształtów, grup czy symboli - zazwyczaj jednak będą to kształty.

2. Bardzo często ten rodzaj animacji jest wykorzystywany w celu animowania bitmap importowanych do projektu. Aby to zrobić, dla każdej klatki kluczowej wybierz polecenie File| Importi wybierz plik graficzny, który chcesz zaimportować. Po zaimportowaniu plików zastanów się, czy nie warto przekonwertować grafiki na postać wektorową - w ten sposób przyśpieszysz późniejsze ładowanie i odtwarzanie gotowej animacji.

·         Zawsze staraj się wykorzystywać te same symbole w różnych kluczowych klatkach - w ten sposób możesz znacząco zmniejszyć rozmiar ostatecznego pliku animacji. Spróbuj połączyć możliwości kilku rodzajów animacji polkatkowej z morphingiem - poza zmniejszeniem rozmiaru pliku oszczędzisz w ten sposób sporo pracy przy rysowaniu kolejnych klatek, a efekty mogą być znacznie ciekawsze.

·         Nigdy nie używaj animacji poklatkowej, aby uzyskać efekt przesuwania czy skalowania obiektu bądź płynną zmianę koloru. Do tego celu znacznie lepiej wykorzystać animację typu Motion Tween.

Animacja Motion Tween

1. Jest chyba najczęściej spotykana w filmach wykonanych za pomocą Flasha, ale w ten sposób można animować jedynie symbole. Jeśli masz zamiar animować kształty bądź grupy, program automatycznie przekonwertuje je na symbole. W celu utworzenia sekwencji ruchu musisz wstawić kluczową klatkę w miejscu, gdzie ma się zaczynać animacja, i ustawić jej typ na Motion Tween. Można to zrobić w oknie właściwości kluczowej klatki (kliknij dwukrotnie daną klatkę i z zakładki Tweeningwybierz Motion) lub klikając klatkę prawym klawiszem myszy i wybierając polecenie Create Motion Tween.

2. Teraz wszystkie klatki będą miały kolor niebieski, to oznacza że znajdują się w typie animacji Motion Tween. Możesz również utworzyć dalsze kluczowe klatki w miejscach, w których chcesz zmienić jakiś atrybut animowanego symbolu (połączenie animacji polkatkowej z Motion Tween). Może to być położenie, wielkość, obrót, kolor, przezroczystość czy jasność. Podczas odtwarzania filmu Flash będzie płynnie zmieniał parametry zgodnie z Twoimi ustawieniami. Wszystkie kluczowe klatki na danej warstwie muszą zawierać tylko jeden i ten sam symbol - w przeciwnym wypadku stracisz kontrolę nad animacją. Dlatego też, w przeciwieństwie do animacji poklatkowej w tym przypadku należy przeznaczyć po jednaj warstwie dla każdego animowanego symbolu. W przypadku domyślnych ustawień zmiany atrybutów następują z sposób liniowy - wartości pośrednie są uzyskiwane przez interpolację wartości wprowadzonych dla klatek kluczowych. Jeśli chcesz, możesz zmienić to ustawienie - służy do na tego suwak Easingkarcie Tweeningokna właściwości kluczowej klatki. Jeśli przesuniesz go w stronę pozycji In, początkowy etap ruchu będzie się charakteryzował wolniejszymi zmianami atrybutów, podczas gdy pod koniec sekwencji zmiany będą szybsze. Odwrotny efekt da przesunięcie suwaka do pozycji Out. W ten sposób możesz kontrolować dynamikę swoich animacji bez wstawiania dużej liczby kluczowych klatek. Tą metodę można również stosować w przypadku Morphingu, następnej opisanej techniki animacji.

·         Nie zmieniaj zbyt wielu atrybutów jednocześnie, gdyż łatwo możesz stracić kontrolę nad zachowaniem obiektu (dotyczy to zwłaszcza takich transformacji, jak przesuwanie, obrót i zmiana położenia centralnego punktu symbolu). Po wprowadzeniu jakiejś zmiany do animacji sprawdź, jakie efekty ona wywołała.

Przykład pierwszy

 


Aby szybko stworzyć np. baner

1. Zaczniemy od napisania naszego tekstu (u mnie był to: Serwis Infodaro itp)
2.Teraz zaznaczamy nasz tekst poprzez jednokrotne kliknęciem na niego strzałką i wciskamy kombinację klawiszy Ctrl+B. Wten sposób rozgrupowaliśmy nasz tekst.
3.Teraz zaznaczamy cały nasz tekst i wchodzimy w Modifi/Schape/Soften Fill Edges i wpisujemy to co poniżej:
(9kB)
4.Teraz robimy dokładnie to samo co w punkcie 3. i gotowe: efekt powinien wyjść jak na rysunku powyżej.
5. Oczywiście kolor tło wybieramy indywidualnie. Klikamy prawym klawiszem myszki nad białym tłem. Z dostępnego menu wybieramy opcję Movi Properities następnie wybieramy Background Color i wybieramy kolor tła. Natomiast jeśli chodzi o rotację wyświetlanych napisów. Musimy skorzystać z programu Gifanimator dostępnego na stronie Akademi Wiedzy Serwisu Infodaro lub całej sieci www. Tworzymy kilka podobnych do siebie banerów i scalamy je w jeden przy pomocy programu. Sądzę, że obsługi Gifanimatora nie trzeba wyjaśniać.

Uprzedzam tylko, że opisana powyżej operacja jest dość skomplikowana dla procesaora, częstym efektem jest zawieszenie pracy Flasha.d

Przykład drugi

Tworzenie prostych przycisków:

1. Wybierz Insert/New Symbol, wpisz nazwę przycisku i w Behavior wybierz Button. Kliknij OK.


Formatowanie tekstu
2. Teraz powinien znaleźć się w trybie edycji symboli. U góry znajduje się listwa czasowa, składająca się z czterech oddzielnych ujęć: Up, Over, Down i Hit. W ujęciu Up narysuj element graficzny odpowiadający normalnej postaci przycisku.

3. Następnie stwórz ujęcie kluczowe dla stanu Over, klikając na tą klatkę i naciskając F6. W tym ujęciu jest stan przycisku gdy najedzie na niego kursor myszy. Jeżeli chcesz aby np. zmienił kolor to narysuj przycisk o wybranym przez siebie kolorze.

4. Teraz zrób keyframe dla klatki Down. W tej klatce znajduje się nasz button gdy jest kliknięty czyli np. zmień mu kolor.

5. W klatce Hit zrób klatkę kluczową. Ujęcie to definiuje aktywny obszar przycisku. Nie trzeba tu tworzyć żadnych ładnych przycisków, i tak nie będzie tego widać.

6. Koniec teraz przetestuj swoje dzieło

Przykład trzeci

Krok 1

Stworzymy teraz animację, która będzie się opierała na klatkach kluczowych. Narysujmy teraz prostokąt obwiednie i wypełnienie wykonamy w kolorze czerwonym. Muszę tu przyokazji zaznaczyć, że Flesh traktuje obwiednie i wypełnienie jako dwa oddzielne elementy.

Krok 2

Teraz używając ikony oznaczającej tekst Tekstwprowadzimy tekst np. Strona Domowa. Używając opcji do konfiguracji napisy ustawiamy kolor na czarny,czcionkę na arial, pogrubiamy i pochylamy [rysunek obok].

Krok 3

Zaznaczając oba elementy (prostokąt i tekst) tworzymy grupę wciskając kombinację klawiszy CTRL+G. Następnie wcikamy klawisz F8 i w oknie Symbol Properities wpisujemy nazwę np. anim1 oraz zaznaczamy w parametrze Behavior opcję Graphic. W ten sposob stworzyliśmy element do animacji [rysunek poniżej].

Krok 4

Teraz w oklienku Timeline wybieramy klatkę 1 i ustawiamy nasz animowany element w odpwiednim miejscu strony. Następnie zaznaczamy np. klatkę nr 20 i wciskamy klawisz F6 tworząc klatkę kluczową i ponownie ustawiamy element w tej klatce.

Timeline

 

Okno Timeline

Krok 4

Teraz klikamy dwukrotnie między klatkami kluczowymi wywołując okno Frame Promerties i wybieramy opcję Tweening. Następnie wybieramy Motion (dla kształtów nie zdefinjowanych wybieramy Shape)[rysunek poniżej].

W oknie Frame Properties możemy okrelić czy obiekt ma być skalowany (jeśli został pzeskalowany w klatce kluczowej), czy ma miec nadaną rotację i w którą stronę oraz ile ma wykonać obrotów, czy ma poruszać się po wyznaczone wczesniej ścieżce oraz czy ruch ma być jednostajny, przyśpieszony czy opóźniony. Aby obejrzeć animację naciskamy klawisz ENTER.

Skrypty akcji

Action skrypt to prosty język skryptowy umożliwiający dodawanie i wykonywanie wielu różnych elementów takich jak linki do stron www, opcje wyświetlania czasu, kopiowanie obiektów, zmiana lub ukrywanie kursora, tworzenie formularzy i wiele, wiele innych. Tworzenie skryptu jest dość proste gdyż polega na wstawianiu gotowych już elementów języka. Skrypty możemy stosować do przycisków i klatek kluczowych animacji. By wstawić skrypt klikamy np. na przycisk prawym klawiszem i wybieramy opcje Actions. Tu otwiera na się okienko:

 Z jego lewej strony mamy polecenia które można wstawić. Podwójne kliknięcie powoduje wstawienie go do ramki z prawej strony. By stworzyć np. hiperłącze do strony www uaktywniane po kliknięciu np. w przycisk stosujemy kolejno takie polecenia. On Mouse Event gdzie ustalamy Event na Press ( wciśnięcie ) lub Release ( zwolnienie klawisza myszki ), potem polecenie Get URL i ustalamy URL: pliku np. http://www.dudzio.prv.pl lub index.html oraz Window: czyli okno w którym ma się dana strona wyświetlić. Jeżeli tworzymy baner możemy ustalić _top czyli nowe okno na całym ekranie. To tyle. Prawidłowo wykonany skrypt powinien wyglądać tak:

on (release) {
getURL ("http://www.infodaro.prv.pl/", "_top");
}

Dzięki zastosowaniu skryptów do klatek możemy sterować naszą animacją. Skrypt : stop ();  zastosowany w ostatniej klatce zatrzyma nam całą animację i nie pozwoli na jej loop czyli zapętlenie i ciągłe odtwarzanie. Można zastosować także skrypt : gotoAndPlay (5); który zastosowany w dowolnej klatce kluczowej zapętli nam animację która będzie przechodziła i odtwarzała ją od klatki nr. 5 . Przykładów można przytaczać bardzo dużo więcej o skryptach i ich zastosowaniu możecie poczytać w pomocy Flash'a w menu Help opcje ActionScript Reference i ActionScript Dictionary. Niestety pomoc jest w wersji angielskiej i zrozumienie niektórych zagadnień może sprawić wam kilka problemów. 

 

Zgłoś jeśli naruszono regulamin