Adobe Flash CS3 – informacje ogólne

Jeszcze kilka lat temu uwazalem stwierdzenie, ze Flash to przyszlosc internetu za bardzo odwazne – teraz wiem, ze jest to fakt. Warto wspomniec, ze Flash ogromnie ewoluowal. Z poczatku byla to tylko techniczna nowinka z pólki o tworzeniu ruchomej grafiki wektorowej. Z czasem jednak stal sie on doskonalym narzedziem zdatnym do tworzenia materialów sieciowych, a co za tym idzie niezbednym elementem wszystkich aspektów tworzenia stron WWW. Nie twierdze, ze Flash nie ma przeciwników, zdarzaja sie sceptycy, którzy zapieraja sie rekoma i nogami przed instalacja pluginu. Na szczescie to tylko maly ulamek internautów, wiec nie powinniscie miec oporów przed umieszczaniem na swej stronie barwnych animacji. Przy okazji porada: nie popadajcie w skrajnosc i z umiarem korzystajcie z Flashowych dobrodziejstw na Waszej stronie. Witryny przepelnione grafika i animacjami przewaznie dlugo sie laduja (polskie lacza!), a od ich ogladania mozna dostac oczoplasu :)

Kurs ten w swoim podstawowym zarysie powstal juz dawno temu i dotyczyl wersji Flash MX. Od tego czasu wielokrotnie go modyfikowalem i uaktualnialem motywowany Waszymi pochlebnymi opiniami i zachetami. Kurs postanowilem przygotowac z kilku powodów – przede wszystkim jest to wyraz mojej wdziecznosci dla ludzi, którzy udostepniajac swoja wiedze w internecie pomogli mi poznac tajniki Flasha, co sprawilo, ze czuje sie niejako w obowiazku pomagac innym. Po drugie, pamietam jak ciezko bylo mi znalezc kompletne, zwiezle kompendium które w sposób wyczerpujacy omawialoby podstawowe narzedzia programu.

W tym kursie zajmiemy sie poznawaniem podstawowych zagadnien zwiazanych z najnowsza wersja programu (trial do sciagniecia na stronie producenta – www.adobe.com). Postaram sie w ciekawy i prosty sposób omówic najwazniejsze funkcje programu. Bez wodolejstwa wlasciwego ksiazkom poswieconym tej tematyce. Po uwaznej lekturze kursu bedziecie juz potrafili stworzyc prosta animacje, banner oraz przycisk. Poznacie takze szeroko omówione, najwazniejsze opcje programu i nauczycie sie tworzyc proste skrypty w jezyku ActionScript. Do rozpoczecia kursu potrzebny jest oczywiscie Adobe Flash (zdecydowanie polecam najnowsza, ósma wersje, jednak mysle ze z kursu mozna spokojnie korzystac od wersji MX wzwyz), plugin (instalowany z programem), troche czasu i dobrych checi.

Nawet doswiadczeni uzytkownicy Flasha czesto nie wiedza, ze sa rózne typy pluginu Flasha. Plugin, który odwiedzajacy strone pobiera ze strony Adobre to plugin OCX dla przegladarki. Plugin, który instalujesz wraz z programem jest w wersji Developer Edition. Róznica polega m.in na tym, ze bez pluginu Developer Edition nie mozna otwierac z dysku plików .swf. Zapamietaj wiec, ze jesli chcesz przeslac komus plik z rozszerzeniem .swf, nie bedzie on go w stanie otworzyc, jesli ma plugin jedynie w wersji OCX.

Mam nadzieje, ze bedziecie cierpliwymi uczniami, dzieki czemu szybko opanujecie elementarna wiedze na temat tego genialnego programu. Kurs podzielilem na dwie czesci: teoretyczna i praktyczna. Nauke polecam zaczac od czesci teoretycznej, lecz nie uczcie sie na pamiec wszystkiego co jest tam napisane. Wystarczy przeczytac raz, nawet jak czegos nie zrozumiecie nie martwcie sie, na pewno do tej czesci bedziecie wracac wielokrotnie.

Pozostaje mi tylko zyczyc Wam wszystkim powodzenia, zapalu i wytrwalosci.

Zobacz także kurs Flash na eduweb.pl!

Czesc teoretyczna plansza I – Niezbedne informacje

Przed uruchomieniem programu nalezy wiedziec co nieco o formatach plików, na których to bedziemy pracowac. Podczas edycji naszego filmu poslugujemy sie plikiem z rozszerzeniem *.fla. Jest to najwazniejszy plik, bez którego praktycznie niemozliwa jest edycja naszej animacji (cos na zasadzie plików *.psd w Photoshopie). Czestym problemem malo doswiadczonych webmasterów jest usuniecie pliku *.fla, który uwazaja oni za niepotrzebny, jesli juz umiescili film na stronie. Kiedy przychodzi moment, ze chca cos zmienic w swojej animacji, (np. uaktualnic link w bannerze) spotyka ich niemila niespodzianka. Tylko plik *.fla umozliwia modyfikacje filmu!

Jezeli przez przypadek utracimy plik *.fla mozliwe jest przynajmniej czesciowe odzyskanie materialów za pomoca programów takich jak Ave-imperator i SWF Decompiler MX 2002 Pro

Aby umiescic swoja animacje na stronie musimy ja opublikowac, co nastepuje po wybraniu opcji Publish z menu File (Shift+F12). Publikowaniu poswiecilem osobna lekcje gdyz okno publikacji zawiera wiele przydatnych opcji z którymi warto sie zapoznac. Kiedy juz opublikujemy nasz film, w folderze, w którym ostatnio zapisywalismy prace, powstana dwa nowe pliki. Jeden z plików bedzie mial rozszerzenie *.html, a drugi *.swf. Pliki *.swf to format playera Flasha i mozna go noramlnie odtwarzac jesli mamy zainstalowany plugin, o czym wspominalem wczesniej. Plik *.html jest bezuzyteczny bez pliku *.swf, poniewaz jak gdyby „czerpie” z niego informacje. Wlasnie dlatego kiedy tworzymy strone, musimy pamietac, zeby na serwerze w folderze z plikiem *.html umiescic plik *.swf. Dokument w htmlu mozemy dowolnie modyfikowac, mozemy tez wkleic nasza animacje do innego pliku .html naszej strony, kopiujac i wklejajac w odpowiednie miejsce zawartosc znaczników <OBJECT> </OBJECT>.

UWAGA: Pliku *.fla nie umieszczamy na serwerze (chyba ze chcemy go udostepnic innym uzytkownikom).

Aby uchronic plik *.swf przed importem przez ciekawskich uzytkowników, mozemy go zabezpieczyc haslem. W tym celu wybieramy menu File , dalej opcje Publish settings, a w zakladce Flash zaznaczamy Protect from import i okreslamy nasze haslo w polu Password. Wiecej informacji na ten temat znajdziesz w osobnej lekcji poswieconej publikowaniu.

Wyglad i funkcje programu

Po uruchomieniu Flasha naszym oczom ukaze sie szereg tajemniczych okienek z dziesiatkami opcji. Wyglada to bardzo profesjonalnie, ale nie nalezy sie zalamywac czy zniechecac, z biegiem czasu zobaczycie, ze wszystkie te elementy interfejsu da sie z latwoscia opanowac i dostosowac do swoich potrzeb. Wkrótce takze przekonacie sie, ze Flash posiada szereg funkcji, których obsluga jest typowo intuicyjna i mozna sie latwo zorientowac co do czego sluzy. Zwlaszcza jezeli korzystaliscie wczesniej z programów Macromedii nie bedziecie mieli wiekszego problemu z opanowaniem podstawowych funkcji. Z czasem poznacie program na tyle ze uzyteczne stanie sie uzywanie skrótów klawiaturowych do wywolywania odpowiednich narzedzi i bedziecie mogli sie pozbyc np. palety tools która zacznie niepotrzebnie zajmowac miejsce na ekranie. Przy omawianiu podstawowych narzedzi bede w nawiasie podawal domyslne oznaczenie klawiaturowe. W kolejnych lekcjach przyblize budowe interfejsu i omówie podstawowe funkcje i panele. Na poczatku zalecam pobiezna lekture tego dzialu -na pewno bedziecie do niego wielokrotnie wracac, a wkuwanie wszystkiego od razu na pamiec nie ma sensu, gdyz wiekszosc funkcji lepiej poznaje sie i zapamietuje w praktyce.

Zobacz także kurs Flash na eduweb.pl!

Czesc teoretyczna plansza II – Warstwy

Warstwy to z pewnoscia jeden z najwazniejszych elementów programu, to w nich znajduja sie klatki (omówione dalej), w których umieszczamy nasze obiekty. Panel warstw jest domyslnie widoczny w górnej czesci ekranu, mozemy go ukryc odznaczajac w menu Viev opcje Timeline (Ctrl+Alt+T).

Dobrym nawykiem jest nadawanie warstwom nazw pochodzacych od zawartych w nich obiektów badz animacji. To w znacznym stopniu ulatwi nam nawigacje, a po jakims czasie gdy bedziemy chcieli edytowac nasz film unikniemy zmudnego przypominania sobie co znajduje sie w jakiej warstwie.

Nalezy takze wspomniec, ze warstwy mozna dowolnie pozycjonowac wzgledem siebie. Polega to na kliknieciu na danej warstwie i przeciagnieciu jej w góre lub w dól. To bardzo przydatny element przy tworzeniu animacji, gdyz warstwy maja te wlasciwosc, ze wyzsze w hierarchii przykrywaja nizsze (ich elementy). Oznacza to, ze jezeli na przyklad chcemy umiescic tlo „pod” tekstem, tak aby byl on widoczny, warstwa z tlem musi sie znalezc ponizej warstwy z tekstem. W innym wypadku nasz tekst zostanie przykryty przez tlo i nie bedzie widoczny.

Warstwom mozemy nadawac okreslone wlasciwosci, co znacznie ulatwi i przyspieszy nasza prace. Omówmy wiec symbole znajdujace sie nad nazwami warstw. Sa to , i . Wystepuje jeszcze jeden symbol, widoczny kiedy warstwa jest aktywna (ciemniejszy kolor). To symbol , który oznacza, ze wlasnie w tej warstwie aktualnie pracujemy. Wlasciwosci opatrzone symbolami oczka, klódki i kwadraciku, mozemy nadawac samodzielnie, klikajac na odpowiednie czarne kropki obok nazw warstw. Oto screen z uzywanymi opcjami:

Aktywna funkcja Show/Hide All Layers (na screenie warstwa 6), powoduje, ze warstwa ta jest niewidoczna podczas edycji (ale bedzie widoczna po opublikowaniu filmu i w podgladzie!). Aktywna opcja jest oznaczona krzyzykiem, a po kliknieciu na nim nastepuje odblokowanie opcji.

Kolejna wlasciwoscia jest Lock/Unlock All Layers (na screenie warstwa 5). Jej aktywowanie powoduje zamkniecie wybranej warstwy. Jesli ta opcja jest wlaczona, nie mozemy wybrac zadnego elementu z tej warstwy. Jest to przydatne wówczas, gdy na naszym obszarze roboczym mamy duzo obiektów umieszczonych w róznych warstwach, które chcemy edytowac. Dobrym nawykiem jest wiec zamykanie warstw, w których zakonczylismy prace. Dzieki temu unikniemy przypadkowego usuniecia badz edycji elementów znajdujacych sie w danej warstwie. Aktywna opcja jest widoczna w postaci malej klódeczki. Deaktywacja przebiega po kliknieciu na nia.

Ostatnia opcja jaka mamy do wyboru jest Show All Layers as Outlines (warstwa 4 na screenie). Jej wlaczanie jak i wylaczanie przebiega identycznie jak w omówionych powyzej przypadkach. Aktywna opcja cechuje sie pustym w srodku kwadracikiem w odpowiednim miejscu obok nazwy wybranej warstwy. Uaktywnienie tej wlasciwosci powoduje, ze w wybranych warstwach sa widoczne jedynie kontury obiektów (ang. outlines), wypelnienie zostaje ukryte.

Zobacz także kurs Flash na eduweb.pl!

Czesc teoretyczna plansza III – Pole klatek animacji

Pole klatek animacji sklada sie z ‚cegielek’ o róznych kolorach i zawierajacych rózne elementy (w zaleznosci od zawartosci, czy np. dodanej akcji) – to sa wlasnie klatki. O tym, w jakiej klatce aktualnie sie znajdujemy informuje nas podswietlona czesc miarki znajdujacej sie powyzej klatek, oraz napis na dolnej listwie .

W zaleznosci od tego, co znajduje sie w danej klatce moze ona przybierac rozmaite formy:

  • Klatka z czarna kropka to klatka kluczowa, znajduje sie w niej obiekt, który animujemy. Klatki kluczowe mozemy wstawic klikajac prawym przyciskiem myszy w odpowiednim miejscu na listwie czasowej i wybierajac opcje Isert Keyframe (F6).
  • Pusta, biala klatka oznacza, ze nic w niej nie ma ani nie zachodzi w niej zadna akcja.
  • Klatka ze znakiem a informuje nas o tym, ze zostal do niej dodany jakis skrypt w jezyku ActionScript (dowiecie sie o nim co nieco w dalszej czesci kursu).
  • Jezeli klatki sa podswietlone na niebiesko, a miedzy nimi jest widoczna strzalka, oznacza to, ze trwa akcja ruchu (motion).
  • Klatki podswietlone na zielono z umieszczona pomiedzy nimi strzalka informuja nas o zachodzacej akcji zmiany ksztaltu (shape).

Na dole mamy podana liczbe klatek wyswietlanych na sekunde, oraz czas trwania filmu w sekundach do klatki w której sie znajdujemy. Opcje dostepne po lewej stronie to opcje Onion Skin, które omówione sa w osobnej lekcji. Wielkosc klatek na linii czasu mozemy dostosowac do naszych wymogów klikajac na ikonke a nastepnie wybierajac odpowiednia opcje.

Kiedy klikniemy prawym przyciskiem myszy na wybranej klatce na listwie czasowej, naszym oczom ukaze sie nastepujace menu :

Postaram sie opisac w skrócie jego funkcje… Nalezy zwrócic uwage ze nie dla wszystkich klatek (kluczowe, puste itp.) sa dostepne wszystkie opcje i z reguly sa to tylko wybrane opcje. Jesli w naszej warstwie znajduja sie jakies klatki kluczowe, pierwsza pozycja na liscie jest:

Create Motion Tween – wybranie tej opcji powoduje utworzenie akcji ruchu pomiedzy sasiednimi klatkami kluczowymi;

Insert Frame – wstawia w wybranym miejscu pusta klatke;

Remove Frames – kasuje zaznaczona klatke/klatki;

Insert Keyframe – wstawia klatke kluczowa;

Insert Blank Keyframe – wstawia pusta klatke kluczowa;

Clear Keyframe – usuwa zawartosc z klatki kluczowej;

Convert to Keyframes – zamienia zaznaczona klatke/klatki na klatke kluczowa;

Convert to Blank Keyframes – zamienia zaznaczona klatke/klatki na pusta klatke kluczowa;

Cut Frames – wycina zaznaczona klatke;

Copy Frames – kopiuje zaznaczona klatke;

Paste Frames – wkleja w wybrane miejsce wczesniej zaznaczona klatke;

Clear Frames – usuwa zawartosc z zaznaczonych klatek;

Select All Frames– zaznacza wszystkie klatki we wszystkich warstwach;

Reverse Frames – odwraca kolejnosc zaznaczonych klatek;

Synchronize Symbols – uzgadnia w czasie (synchronizuje) obiekty w zaznaczonych klatkach;

Zobacz także kurs Flash na eduweb.pl!

Czesc teoretyczna plansza IV – Symbole

Symbole to podstawowe elementy z jakimi przyjdzie nam pracowac we Flashu. Jezeli wybierzemy z menu Insert/New Symbol lub wcisniemy Ctrl+F8 zobaczymy na ekranie okno wybory obiektów.

Symbole wedruja do biblioteki (Ctrl+l)o której wiecej dowiecie sie w lekcjach o panelach. W polu Name wpisujemy nazwe dla nowego obiektu, a nastepnie zaznaczamy obiekt, który chcemy utworzyc i klikamy na OK.

Wlasciwosci obiektów:

Movie Clip – klip filmowy. Dobrze jest nauczyc sie od razu robic wszystkie animacje w klipach, a nastepnie umieszczac je na glównej listwie czasowej przeciagajac klipy z biblioteki na pole pracy. W klipach mozna robic wszystko to co na glównym polu pracy tzn. animowac obiekty, dodawac nowe itp. Pomagaja one w pracy gdyz pozwalaja uporzadkowac poszczególne elementy filmu tak by wszytsko nie znajdowalo sie na glównej listwie czasowej. Klipami bedziemy potem mogli sterowac ze skryptów co jest ich dodatkowa zaleta

Button -przycisk. Domyslnie po utworzeniu przycisku zobaczycie listwe czasowa z jedna warstwa, w której znajduja sie cztery klatki oznaczone odpowiednio Up, Over, Down i Hit. Klatka Up odpowiada za standardowy wyglad przycisku, w klatce Over znajduje sie przycisk po najechaniu na niego myszka (pamietajac, ze do klatek mozemy wstawic takze klipy, w polu Over moze sie znalezc jakas animacja). Klatka Down odpowiada za wyglad buttona podczas jego przycisniecia, a Hit zawiera obszar, który nalezy do danego przycisku (nie jest wyswietlany w animacji).

Graphic -statyczny obiekt graficzny. To zwykla grafika, zaimportowana lub stworzona bezposrednio we Flashu.

Na symbol mozemy takze zamienic istniejacy juz obiekt, na przyklad narysowany ksztalt czy zaimportowany rysunek. W tym celu wystarczy wybrac z menu Modify opcje Convert to Symbol (F8). Naszym oczom ukaze sie podobne okienko w którym znajduja sie identyczne opcje jak te opisane powyzej.

W nastepnych lekcjach dowiecie sie czegos o panelach w których znajduje sie wiekszosc opcji dostepnych w programie.

Zobacz także kurs Flash na eduweb.pl!

Czesc teoretyczna plansza V – Ustawienia czesc I

Okienka ustawien mozna uruchomic z menu window/panels. Okienka posiadaja najwazniejsze zestawy ustawien dotyczacych wszystkich aspektów naszego filmu. Uklad i wywolywanie paneli zmienilo sie w wersji MX i jego obsluga jest teraz bardziej intuicyjna niz np. we Flashu 5.

Kiedy po raz pierwszy uruchomimy na górze znajdziemy pole warstw i klatek animacji omówione wczesniej. Po lewej stronie znajdzie sie panel Tools z którego zapewne najczesciej bedziemy korzystac. Na dole umiejscowione sa trzy panele – Actions, Help oraz Properities. Po prawej stronie umieszczono panele Color Mixer, Components, Component Inspector oraz Behaviors. Z paneli dotyczacych komponentów zapewne na poczatku nie bedziecie korzystali dosc czesto, natomiast bardzo uzyteczny bedzie Color Mixer.

Panelami widocznymi na ekranie mozemy dowolnie zarzadzac, modyfikowac ich wielkosc, przesuwac (za pomoca metody przeciagnij i upusc klikajac na obszarze po prawej strony od nazwy panelu). Mozemy takze zwinac panel klikajac na jego nazwe. Dopóki w pelni nie opanujecie tych operacji mozecie korzystac z opcji po prawej stronie od nazwy – klikajac na nia uzyskacie dostep do szeregu operacji których mozecie dokonac w celu modyfikacji okienka. Jesli za bardzo pogubicie sie podczas przestawiania mozecie wrócic do pierwotnych ustawien wybierajac Window/Panel Sets/Default Layout.

Omówie tutaj dokladnie jedynie najwazniejsze panele, kotórych poznanie bedzie niezbedne do dalszej pracy. Reszte paneli opisze krótko i postaram sie wskazac do czego w praktyce przydaje sie dany panel najbardziej. Te panele lepiej poznacie w trakcie samodzielnej pracy. Postaram sie omawiac panele po kolei tak jak wystepuja one w menu Window

W podmenu toolbars mamy nastepujace panele:

  • Main – tego panelu nie bede szerzej omawial gdyz znajdziecie go prawie w kazdym programie (np. Microsoft Word) i zawiera podstawowe opcje dotyczace np. tworzenia nowego dokumentu czy zapisywania. Panel ten nie jest zbyt czesto uzywany, gdyz obecne w nim opcje czesto mozna znalezc w menu File lub korzystac ze skrótów klawiaturowych. W celu oszczedzenia miejsca na monitorze mozna nie wlaczac tego panelu
  • Controller – zawiera podstawowe opcje dotyczace odtwarzania naszego filmu (stop, play, rewind). Równiez nie jest zbyt powszechnie stosowany i znajduje uzyteczne zastosowanie tylko w niektórych przypadkach.
  • Edit Bar – to przydatny pasek nad polem klatek w którym znajdziemy informacje w jakiej scenie sie znajdujemy (ew. w jakim symbolu – o tym pózniej). Podstawowa zaleta jest tutaj mozliwosc szybkiego powrotu do glównej sceny jesli pracujemy na przyklad w róznych klipach filmowych o których wiecej dowiecie sie w nastepnej lekcji. Z prawej strony znajdziemy opcje dotyczace edytowania scen i symboli oraz wazne okienko pozwalajace nam np. powiekszyc widok.

Zobacz także kurs Flash na eduweb.pl!

Czesc teoretyczna plansza VI- Ustawienia czesc II – panel Properities

Panel Properities to bardzo wazny panel i wymaga on szerszego omówienia. Jest on jednym z najczesciej uzywanych paneli i dostepne w nim opcje zmieniaja sie w zaleznosci od tego, jaki obiekt zaznaczylismy. Jest to duze udogodnienie, gdyz nie musimy korzystac z wielu innych paneli a wyswietlane sa tylko opcje uzyteczne w danym momencie i dla danego obiektu. Panel Properities dzieli sie na dwie czesci i w celu zaoszczedzenia miejsca na poczatku widoczna jest jedynie jedna jego czesc tymczasem druga, nie mniej wazna jest dostepna po nacisnieciu malego trójkacika w prawym dolnym rogu panelu. Zazwyczaj bedziemy korzystali z calego panelu wiec warto od razu kliknac na maly trójkacik. Panel powinien wygladac teraz tak:

Uzyteczna rzecza dla poczatkujacych jest szybki dostep do pomocy programu dotyczacej opcji panelu Properities które sa aktualnie dostepne. Przeniesienie do Help’a nastepuje po nacisnieciu .

Okno w którym aktualnie sie znajdujemy dotyczy ogólnych ustawien naszego filmu i dostepne jest po kliknieciu na wolny obszar pola pracy. Warto teraz wspomniec czym wlasciwie jest pole pracy. Pole Pracy to domyslnie biale pole, którego wlasciwosci okreslamy wlasnie w tym oknie. W polu pracy edytujemy i rysujemy nasze obiekty. Tworzenie obiektów jest banalnie proste i sprowadza sie do opanowania Toolbaru, widocznego z lewej strony, którego opcje przypominaja te z windowsowego Painta, nie bede wiec tracil czasu na omawianie ich. Wracajac do panelu Properities z wlasciwosciami dla pola pracy – to tutaj mozemy dostosowac np.ilosc klatek odgrywanych na sekunde (fps) oraz kolor tla i rozmiar naszego filmu. Wybierajac rozmiary filmu obok Size otworzymy okno Documents Properities.

Wazniejsze opcje do których mamy tu dostep to:

  • Dimensions– tu okreslamy rozmiar pola pracy dla naszego filmu. W polu Width definiujemy szerokosc, a w Height wysokosc. Wartosci te okreslamy domyslnie w pixelach (px). Jednostki mozemy zmienic w okienku Ruler Units.
  • Background Color – definiujemy kolor tla, domyslnie bialy.
  • Frame Rate -ilosc klatek wyswietlanych na sekunde. Im wieksza wartosc wpiszemy w tym polu, tym nasz film bedzie plynniejszy i szybszy. Domyslna wartosc to 12, ja jednak polecam eksperymentowanie z filmem poczawszy od 24 fpsów. Oczywiscie nalezy uwazac, gdyz im wieksza wartosc ustawimy, tym wieksze klopoty z odtwarzaniem filmu beda mialy gorsze komputery. Zwykle dla zapewnienia plynnosci filmu stosuje sie przedzial od 25 do 30 klatek, jednak juz 25 klatek oko ludzkie postrzega jako zupelnie plynne.

Do pierwotnych ustawien powrócimy po wybraniu opcji Make Default.

Panel Properities w omówionym przypadku sluzyl nam do ustawienia wlasciwosci pola pracy. Inne opcje znajda sie w nim jednak, gdy zaznaczymy jeden z symboli. Jak juz wiecie z poprzedniej lekcji symbole to Movie Clipy (klipy filmowe), Buttony (przyciski) i obiekty typu Graphic (zwykla grafika). Po zaznaczeniu jednego z symboli w panelu Properities znajda sie odpowiednie opcje. Zapoznajmy sie z najwazniejszymi:

Panel Properities dla symbolu Movie Clip:

W opcjach dotyczacych klipów filmowych znajduja sie miedzy innymi informacje o rozmiarze klipu (W oraz H) oraz pozycji w osi wspólrzednych (X i Y). Duzo wazniejsze jest jednak pole <Instance Name> oraz opcja Color.
W <Instance Name> wpisujemy wazna nazwe instancji dla naszego klipu. Nazw tych potem uzywamy w jezyku ActionScript by odniesc sie do tych obiektów.

Opcja Color zawiera ustawienia (efekty) z których bedziemy najczesciej korzystac. Efekty poznamy lepiej w czesci praktycznej wiec podam tylko ich glówne funkcje. Po rozwinieciu listy mamy dostepne:

  • Brightness – rozjasnia obiekt. Wartosc definiujemy w procentach;
  • Tint – plynna zmiana jednego koloru w drugi;
  • Alpha – dosc czesto uzywany efekt, powoduje „znikanie” obiektu. Wartosc ustalona na 0% sprawia, ze obiekt jest calkowicie niewidoczny. Warto zapamietac, ze efekt ten powoduje duze obciazenie procesora.
  • Advanced – pozwala bardzo precyzyjnie zdefiniowac opcje efektu.

Jesli chodzi o Properities dla symbolu Button, oraz Graphic, elementy i ich podstawowe funkcje pozostaja praktycznie niezmienione.

Jeszcze inaczej prezentuje sie zawartosc panelu Properities gdy mamy zamiar edytowac obiekty które wlasnie stworzylismy takie jak linie, figury, czy pola tekstowe.

W przypadku, gdy zaznaczymy narysowany przez nas obiekt(ksztalt) taki jak np. prostokat, panel properities bedzie wygladal tak:

Mozemy tutaj modyfikowac nasz obiekt. Zmiana koloru wypelnienia nastepuje po rozwinieciu listy kolorów obok ikonki z wiaderkiem. Zmiana koloru linii mozliwa jest po wybraniu koloru z listy obok ikonki olówka. Obok znajduje sie rozwijana lista w której okreslimy ksztalt linii (domyslnie Solid). Po rozwinieciu mozemy wybrac z nastepujacych ksztaltów linii:

Dla linii (stroke) opcje sa podobnie, nie mozemy jedynie ustawic koloru wypelnienia.

Odmienny wyglad przyjmie panel Properities w wyniku zaznaczenia konkretnej klatki. Jesli bedzie to klatka kluczowa, panel wygladac bedzie tak:

Bardzo wazna wlasciwoscia jaka tu ustawimy jest <Frame Label>. Dodajemy tu nazwe do wybranej klatki. Jest to jakby etykieta, która pozwala na odnoszenie sie do wybranej klatki w jezyku ActionScript bez uzywania trudnych do zapamietania wartosci numerycznych (tzn. muselibysmy zapamietac, jaki numer ma dana klatka). Pomocne jest to takze wtedy, kiedy kolejnosc naszych klatek zmieni sie, wówczas odnosnik w postaci liczby bedzie dotyczyl innej klatki i spowoduje nieprawidlowe dzialanie naszego skryptu. Label Type dotyczy typu nazwy – warto tutaj wspomniec o mozliwosci wybrania opcji Comment. Wybranie tej ocji sprawia, ze to co wpisalismy w okienku Frame Label staje sie komentarzem przypietym do danej klatki, komentarz ten nie jest rozpoznawany w skryptach ActionScript.

Z opcji Tween mamy do wyboru Motion i Shape. Te opcje okreslaja typ animacji -Motion to ruch, a Shape – zmiana ksztaltu. Dla kazdego typu animacji mozemy dostosowac zachowanie, jak na przyklad obrót w okienku Rotate (dla Moti on). Wiecej o tych opcjach dowiesz sie w czesci praktycznej kursu.

Opcja Sound umozliwia dodanie i edycje zaimportowanego pliku z muzyka. Mozemy importowac wszystkie popularne typy plików jak na przyklad *.wav i *.mp3. Importowanie zachodzi po wybraniu opcji Import z menu File (Ctrl+R) i podwójnym kliknieciu na pozadanym pliku. Zaimportowane dzwieki trafiaja do biblioteki, a oznaka, ze do jakiejs klatki jest dodany dzwiek jest widoczny w niej granatowy zygzak Po wstawieniu pliku z muzyka do klatki poza innymi ustawieniami mozemy dla niego wybrac jeden z dostepnych efektów (rozwijane menu Effect):

Dostepne tu ustawienia to:

  • Left Channel -muzyka odtwarzana tylko w lewym kanale;
  • Right Channel -muzyka odtwarzana tylko w prawym kanale;
  • Fade Left to Right -plynne przejscie z lewego do prawego kanalu;
  • Fade Right to Left -plynne przejscie z prawego do lewego kanalu;
  • Fade in -muzyka na poczatku jest wyciszona i stopniowo zglasniana. Daje to mozliwosc sciszenia glosników bez uszczerbku na zdrowiu ;)
  • Fade out -na koncu muzyka jest powoli wyciszana;
  • Custom -pozwala precyzyjnie zdefiniowac zaawansowane opcje.

Ostatnie funkcje panelu properities dotycza pola tekstowego. Dostepne sa po zaznaczeniu dowolnego tekstu.

W okienku obok duzej litery A wybieramy czcionke, ponizej ustalamy m.in. jej wysokosc, odstepy miedzy znakami, kolor oraz indeks (górny lub dolny) natomiast obok rozmiar, kolor, pogrubienie i kursywe oraz zakres marginesów. Nie omawiam dokladnie tych funkcji gdyz powinny byc one znane kazdemu kto mial do czynienia chocby z najprostszym edytorem tekstu.

Ikonka jest odpowiedzialna za wygladzanie tekstu tzn. swoiste rozmywanie czcionek – efekt niekiedy niepotrzebny.

W rozwijanym menu po lewej stronie mamy do wyboru:

  • Static Text to zwykly tekst który nie bieze udzialu w zadnych operacjach.
  • Dynamic Text to tekst do którego pózniej mozemy odwolywac sie w skryptach nadajac mu odpowiednia zmienna w polu Variable oraz nazwe instance. Ustanowienie zmiennej bedzie nam przydatne na przyklad przy komunikacji Flasha z php czy przy ladowaniu teksty z plików .txt do Flasha. Jednak na tym poziomie jedynie sygnalizuje jego funkcje gdyz jest to opcja bardziej zaawansowana.
  • Input text, to takie pole tekstowe, które umozliwia wpisanie jakiejs wartosci z klawaitury przez odwiedzajacego nasza strone lub prezentacje.

Dla wszystkich typów pól tekstowych dostepne sa jeszcze inne, bardziej zaawansowane opcje które poznacie w trakcie tworzenia coraz bardziej skomplikowanych animacji.

Kolejnym panelem w menu Window jest panel Timeline. Ten panel to nic innego jak omówiona wczesniej listwa czasowa wraz z warstwami. Natomiast paleta Tools to juz wspomniany zestaw narzedzi które prawdopodobnie juz znacie z innych programów graficznych a ich obsluga jest dosc intuicyjna wiec ich omówienie nie jest tutaj konieczne. Inne panele opisane sa w nastepnej lekcji.

Zobacz także kurs Flash na eduweb.pl!

Czesc teoretyczna plansza VII – Ustawienia czesc III – panel Library

Do omówienia pierwszej czesci paneli pozostalo nam jeszcze zapoznanie sie z panelem Library. Dostep do tego panelu uzyskamy wybierajac Library z menu Window (Ctrl+l).

Uzyskujemy dostep do tzw. Biblioteki, czyli zbioru wszystkich elementów naszej strony (symboli omówionych wczesniej oraz zaimportowanych grafik czy dzwieków). Aby umiescic elementy z biblioteki w naszej animacji, przeciagamy je po prostu na pole pracy. Za pomoca ikonek znajdujacych sie na dole panelu mozemy dodac nowy symbol do biblioteki (Add Symbol), usunac go (Delete), ustawic jego wlasciwosci (Properities), lub dodac nowy folder (New Folder). Na górze widoczny jest podglad naszego symbolu. W prawym górnym rogu okienka z symbolami widoczne sa ikonki za pomoca których mozemy odwrócic kolejnosc symboli w bibliotece oraz dostosowac rozmiar panelu.

Klikajac prawym przyciskiem myszy na wybranym symbolu mamy do dyspozycji szereg opcji.

Mozemy tu operowac na zaznaczonym symbolu: zmienic jego nazwe (Rename) sklonowac go (Duplicate), przesunac do wczesniej utworzonego Folderu (Move to Folder) czy skasowac (Delete).

Na odrobine uwagi zasluguje jeszcze opcja Linkage która pozwala w pewien sposób dolaczyc dany element do naszego fimu bez koniecznosci umieszczania go na glównej scenie. Nazywamy to eksportem symbolu i w praktyce sprawdza sie na przyklad przy dolaczaniu do filmu muzyki która pózniej bedziemy odtwarzac za pomoca odpowiedniego skryptu ActionScript.

Znacie juz glówne funkcje panelu Library, w nastepnych lekcjach kontynuowac bedziemy poznawanie paneli.

Zobacz także kurs Flash na eduweb.pl!

Czesc teoretyczna plansza VIII – Ustawienia czesc IV

W tej lekcji zajmiemy sie panelami z podmenu Design Panels. Czesc z nich zapewne jest Wam juz znana z innych programów, tym latwiej bedzie Wam pracowac. W Desing Panels z menu Window sa dostepne nastepujace panele:

Screen zamiescilem poniewaz warto zapamietac skróty klawiaturowe do tych paneli – poniewaz bedziemy ich czesto uzywac stanie sie to duzo wygodniejsze.

Panel Align

W panelu Align mozemy latwo ustawic obiekty wzgledem siebie. Jesli zaznaczymy dowolne (minimum dwa) obiekty czyli np. ksztalty czy symbole, mozemy latwo dopasowac ich odleglosci wzgledem siebie, rozmiar i odleglosc. Najprosciej sprawdzic to w praktyce i narysowac trzy dowolne figury, nastepnie zaznaczyc je i eksperymentowac z kazda opcja po kolei. Obsluga tych opcji staje sie czysto intuicyjna a wiec nie bede po kolei opisywal kazdej opcji.

Panel Color Mixer

Panel Color Mixer pozwoli nam wybrac kolor dla zaznaczonego obiektu. Oprócz znanych juz z panelu Properities ustawien koloru linii i wypelnienia mamy mozliwosc precyzyjnego okreslenia koloru poprzez kod szesnastkowy, dopasowanie odpowiednich wartosci R, G i B lub po prostu wybranie odpowiedniego koloru z palety. W okienku Alpha ustawiamy przezroczystosc rysunku.

Panel Color Swatches

W panelu Color Swatches równiez wybieramy kolory. Tutaj definiujemy kolor z palety zaawansowanych kolorów. Ponizej mamy dostepny panel edycji gradientów tak wiec mozemy równiez nasz obiekt wypelnic gradientem.

Panel Info

Panel Info zawiera podtawowe wiadomosci na temat zaznaczonego obiektu. Jego rozmiary w okienkach W (szerokosc) i H (wysokosc), natomiast w okienkach X i Y definiujemy polozenie zaznaczonego obiektu na osiach pionowej i poziomej. Dzieki ikonce mozemy w dziewieciu miejscach ustwaiwic punkt, wokól którego bedziemy na przyklad edytowac obiekt za pomoca narzedzia Free Transform (Q). Warto sprawdzic jak ta opcja dziala w praktyce gdyz znajdzie zastosowanie w wielu etapach naszej pracy.

Panel Transform

Panel Transform pozwala na zaawansowana transformacje naszych obiektów, której nie osiagniemy za pomoca narzedzia Free Transform. Panel pozwala edytowac nasz obiekt. W okienkach i mozemy rozciagnac/zwezyc obiekt w poziomie lub pionie. Zaznaczona opcja Constrain powoduje, ze proporcje rysunku zostaja zachowane. Dzieki opcji Rotate mozemy obracac zaznaczony obiekt wedlug wartosci wpisanej w okienku obok. Jesli wlaczymy opcje Skew, obiekt odchyli sie w pionie/poziomie wedlug zdefiniowanych wartosci.

Panel Scene omówie szczególowo w nastepnej lekcji.

Zobacz także kurs Flash na eduweb.pl!

Czesc teoretyczna plansza IX – Ustawienia czesc V – Sceny

UWAGA! Ta czesc kursu ulegla aktualizacji. W zasadzie jest to kwestia uznania, ale przyjelo sie NIE KORZYSTAC ze scen podczas tworzenia stron www. Jest ku temu wiele powodów, jednak nie beda one tematem rozwazan w tej czesci. Warto zapamietac, ze wszystko, co mozemy zrobicza pomoca scen jest w równie prosty sposób osiagalne przy uzyciu Movie Clipów i ActionScript. Zostawilem jednak ta czesc kursu jedynie z notka na poczatku, gdyz nieraz uzyteczne jest korzystanie ze scen, na co dowodem – choc dosc prozaicznym, moze byc konsekwentne pozostawianie tej funkcji w kolejnych odslonach Flasha.

Sceny zawieraja poszczególne filmy. W hierarchii stoja wyzej od warstw. Miedzy scenami mozemy sie poruszac za pomoca przycisków w opublikowanym filmie, badz dzieki panelowi Scene po wybranu Window/Design Panels/Scene. Dzieki scenom mozemy w latwy sposób przygotowac cala witryne WWW. Wazne jest ustalenie prawidlowej kolejnosci scen. Sceny zawsze sa odtwarzane w kolejnosci, wiec jesli na przyklad mamy dwie sceny, jedna z preloaderem i druga z wlasciwym filmem wazne jest abysmy umiescili scene z preloaderem nad scena z filmem. Zwykle filmy flasha które stanowia strony WWW skladaja sie z jednej lub dwóch scen gdyz lepiej zamiast odrebnych scen stosowac Movie Clipy.

Nawigator Scen

Nawigator to okienko, które wywolujemy wybierajac Window/Design Panels/Scene. Tutaj w latwy sposób mozemy zarzadzac scenami. Mozemy usunac wybrana scene klikajac na ikonke (Delete Scene), lub dodac nowa za pomoca (Add Scene). Mozemy takze zamienic kolejnosc scen klikajac na dana scene i przesuwajac ja w góre lub w dól.

Aby zmienic nazwe sceny wystarczy dwukrotnie kliknac lewym przyciskiem myszy na wybranej nazwie, wpisac nowa i zatwierdzic operacje klawiszem Enter.

Dobra maniera to nazywanie scen od ich zawartosci, podobnie jak warstw. Aby szybko poruszac sie pomiedzy scenami uzywamy przycisku w górnej czesci listwy czasu.

Zobacz także kurs Flash na eduweb.pl!

Czesc teoretyczna plansza X – Ustawienia czesc VI

W taj czesci kursu zajmiemy sie panelami z podmenu Development Panels. Wywolujemy je oczywiscie z menu Window.

Z tego podmenu szerszego omówienia wymaga panel Actions. Choc bedziecie mieli z nim do czynienia w trakcie nauki ActionScript juz teraz warto wiedziec do czego sluzy.

Tutaj tworzymy skrypty w jezyku ActionScript. Po prawej stronie jest widoczne puste pole w którym znajda sie nasze skrypty. Po lewej sa widoczne dostepne akcje podzielone na kilka kategorii w którym znajdziemy szereg funkcji ulatwiajacych prace. Skrypty dodajemy poprzez dwukrotne klikniecie na dane polecenie w lewym oknie, lub przeciagniecie polecenia do praweg okna. Jesli juz mamy w prawym oknie polecenie, na dole dla ulatwienia pojawiaja sie okienka w których mozemy okreslac parametry naszych skryptów. W lewym dolnym oknie znajdziemy elementy do których mozemy dodac skrypty.

W panelu Actions znajduje sie jeszcze wiele przydatnych zaawansowanych opcji, które poznacie gdy juz bedziecie potrafili tworzyc proste animacje.

Inne wazne panele to:

  • Panele Components i Components Inspector – pozwoli na korztsanie z komponentów. Przygotowanych specjalnie uniwersalnych elementów ja paski przewijania czy gotowe preloadery. Komponenty mozna takze ladowac z zewnatrz i tworzyc samodzielnie. Komponenty z reguly ulatwiaja i przyspieszaja prace, ale wielu doswiadczonych uzytkowników Flasha woli wszystkie elementy wykonywac samodzielnie;
  • Panel Output urouchamia sie automatycznie podczas testowania filmu (Shift+Enter) i pokazuje ewentualne bledy w skryptach ActionScript;
  • Panel History z podmenu Other Panels znaja uzytkownicy innych programów, np. Photoshopa. Jest niezwykle przydatny gdyz pozwala nam powrócic do praktycznie kazdego etapu pracy a ilosc elementów w oknie panelu history zalezy wylacznie od pojemnosci naszego dysku.
  • W panelu Movie Explorer z podmenu Other Panels widoczne sa wszystkie elementy naszej animacji sa widoczne w postaci drzewka i mozemy je dowolnie modyfikowac.
  • W panelu Common Libraries z podmenu Other Panels znajdziemy zestaw gotowych elementów do umieszczenia w naszej animacji. Zbiór zawiera takie elementy jak przyciski, grafiki, gotowe klipy filmowe, czy krótkie lekcje i wskazówki.

Tak oto dotrwaliscie do konca czesci teoretycznej kursu. Nareszcie bedziecie mogli przetestowac zdobyta wiedze w praktyce. Zapraszam do czesci praktycznej, która niewatpliwie jest duzo ciekawsza :)

Zobacz także kurs Flash na eduweb.pl!

Czesc praktyczna plansza I – pierwsza animacja

pobierz pliki zródlowe

Gratuluje wytrwalosci, w koncu dotarlismy do momentu, w którym nasza wiedze teoretyczna sprawdzimy w praktyce. Wiem, ze bedziecie wielokrotnie wracac do rozdzialu o wygladzie i funkcjach programu, dlatego tez tej czesci zamiast wyjasniac wszystko ponownie, zrobilem proste odnosniki do poprzedniego dzialu przy omawianiu niektórych zagadnien.

Specjalnie do tej czesci kursu przygotowalem Video tutoriale, które ulatwia, przyspiesza i zapewne uprzyjemnia Ci nauke. Tutoriale sa dostepne w kursie na mojej stronie www.eduweb.pl.

Na poczatek stworzymy prosta animacje, z uzyciem kilku prostych elementów. Narysujemy kwadrat, a nastepnie sprawimy, by poruszal sie w poziomie, powiekszal i stopniowo znikal. Przy okazji bedzie on sie obracal wokól wlasnej osi. Tym sposobem opanujemy naraz kilka podstawowych efektów. Zaczynajmy!

Pierwsza rzecza, o która musimy zadbac podczas tworzenia kazdej animacji, sa cechy naszego pola pracy a tym samym calego filmu. Aby je edytowac posluzymy sie panelem Properties dla pola pracy. Szerokosc naszego pola pracy ustawiamy na 400px (Width), a wysokosc na 100px (Height). Kolor tla zróbmy bialy, a liczbe odtwarzanych na sekunde klatek na 24 (fps). Reszte opcji pozostawiamy bez zmian.

Teraz, kiedy juz ustawilismy wlasciwosci naszego filmu mozemy zabrac sie do rysowania kwadratu. Zanim to zrobimy wybieramy klatke w której powstanie nasz kwadrat- bedzie to pierwsza klatka w warstwie „Layer 1”, która jest domyslnie klatka kluczowa. Nasza klatka oraz warstwa „Layer 1” podswietlila sie na czarno- to znak ze mozemy rozpoczac w niej prace.

Z panelu z narzedziami znajdujacego sie po lewej stronie wybieramy Rectangle Tool(R) – symbol kwadratu. Wypelnienie dla naszego kwadratu ustawiamy na czerwone, linie zrobimy czarna.

W panelu Properities bedziemy mogli wybrac styl i grubosc naszej linii. Mozemy juz narysowac kwadrat z lewej strony pola pracy. Kwadrat rysujmy z wcisnietym klawiszem Shift. Kiedy narysujemy kwadrat, w klatce, w której pracujemy pojawi sie czarna kropka, co oznacza ze jest to klatka kluczowa zawierajaca jakis obiekt. By zaznaczyc obiekt wybieramy narzedzie Arrow Tool (lub wciskamy V), a nastepnie zaznaczamy nasz obiekt klikajac lewym przyciskiem myszy na wolnej przestrzeni i przeciagajac kursor tak, by objal caly nasz rysunek (tak, jak to sie robi przy zaznaczaniu kilku plików w Windowsie) lub dwukrotnie na nim klikamy lewym przyciskiem myszy.

Teraz, gdy juz zaznaczyliscie kwadrat umiesccie go w lewym dolnym rogu pola pracy. Pozostalo nam utworzenie akcji ruchu i dodanie kilku efektów. Akcje ruchu tworzymy klikajac prawym przyciskiem myszy na klatce kluczowej i z dostepnych opcji wybierajac Create Motion Tween. Klatka podswietlila sie na niebiesko. Nastepnym krokiem jest umieszczenie klatki kluczowej w 50 klatce naszej animacji. Aby to uczynic wybieramy 50 klatke na listwie czasowej i wciskamy klawisz F6. Obszar pomiedzy klatkami podswietlil sie na niebiesko i pojawila sie czarna strzalka.

Nadal bedac w 50 klatce wybieramy narzedzie Arrow Tool, klikamy na kwadrat i przeciagamy go tak, by znalazl sie przy prawej krawedzi Pola Pracy. Teraz powiekszamy nasz obiekt klikajac na nim prawym przyciskiem myszy, wybierajac Free Transform i „ciagnac” w góre za wybrany róg kwadratu (jesli przytrzymamy Shift proporcje miedzy poszczególnymi scianami zostana zachowane). Nastepnie pozycjonujemy powiekszony kwadrat tak, by nie wystawal poza pole pracy.

Jesli wcisniemy teraz Enter, zobaczymy jak nasz kwadrat przesuwa sie i powieksza. Teraz pozostaje nam sprawic, by stopniowo znikal. Dokonujemy tego klikajac na 50 klatke i po kliknieciu na kwadrat w panelu Properities z rozwijanej listy Color wybieramy opcje Alpha, której wartosc ustalamy na 0%.

Logiczne jest, ze gdybysmy w 50 klatce nie wybrali zadnego efektu, a w pierwszej ustawili Alpha na 0%, nasz kwadrat stopniowo by sie pojawial. Wrócmy do 1 klatki i w okienku Properities ustawmy Tweening na Motion, Rotate na CV, a liczbe obrotów ( .. times) ustawmy na 1. Reszte opcji pozostawmy bez zmian.

Znów wciskamy Enter aby zobaczyc nasza animacje.

To juz koniec pracy, mozemy spokojnie zapisac (File/Save As.. lub Ctrl+Shift+S) i opublikowac (File/Publish lub Shift+F12) nasz plik. W ten sposób powstala Twoja pierwsza animacja we Flashu. Zapraszam do dalszej pracy.

Zobacz także kurs Flash na eduweb.pl!

Czesc praktyczna plansza II – animacja po torze

pobierz pliki zródlowe

Wykonujac nasza poprzednia animacje sprawilismy, ze kwadrat poruszal sie w poziomie. W tej czesci kursu nauczycie sie animowac obiekt po wybranym torze. Moze to byc na przyklad kolo, elipsa, czy dowolny, wykonany przez Was rysunek. Animacja po torze jest niezwykle prosta i pozwala osiagnac ciekawe efekty. W naszej animacji stworzymy kwadrat poruszajacy sie po elipsie, który dodatkowo bedzie sie obracal wokól wlasnej osi. W tej czesci zakladam, ze macie juz jako taka wiedze o programie wiec w nawiasach podaje tylko skróty klawiszowe, z których latwo sie korzysta. Do dziela!

Na poczatek oczywiscie ustalamy wlasciwosci filmu w panelu Properities. Obszar Pola pracy ustawiamy na 300×300 px, fpsy na 24. Reszte pozostawiamy bez zmian.

Teraz przygotujemy warstwy, w których bedziemy pracowac. Warstwe, która bedzie nam potrzebna dodajemy klikajac na symbol Kiedy klikniemy na ten symbol, nad nasza pierwsza warstwa pojawi sie warstwa Guide Layer, a warstwa pierwsza odsunie sie nieznacznie w prawo. Wyglada to tak:

Warstwa pierwsza automatycznie przyjela wlasciwosc Guided, co mozemy sprawdzic klikajac na nia prawym przyciskiem myszy i wybierajac Properities.

To oznacza, ze obiekty z pierwszej warstwy beda poruszac sie po torze narysowanym w warstwie Guide: Layer 1. Przechodzimy teraz do warstwy Guide i rysujemy w niej okrag bez wypelniena. Wypelnienie usuwamy zaznaczajac w Fill Color opcje .

Kiedy juz narysujemy nasz okrag na polu pracy, najpierw poprzez klikniecie na nim prawym przyciskiem i wybranie opcji Free Transform musimy dopasowac go do pola pracy.

Nastepnie ciagnac za jeden z boków zaznaczenia w dól badz w góre nadajemy okregowi ksztalt elipsy. Teraz pozycjonujemy nasz rysunek tak, aby nie wystawal poza pole pracy. UWAGA: Obiekty w warstwie Guide (w naszym przypadku elpisa) nie sa widoczne na filmie!

Teraz mozemy juz przejsc do warstwy „Layer 1”, której nazwe dla ulatwienia zmienilem na „animowany kwadrat”. Warstwe Guide nazwalem „tor ruchu”. W warstwie „animowany kwadrat” rysujemy teraz kwadrat dowolnych rozmiarów, który znajdowal sie bedzie na naszej elipsie. Wygladac to moze nastepujaco:

Obramowanie dla kwadratu w panelu Properities ustalilem na 1 px, kolor linii wybralem czarny, a wypelnienie czerwone. Pora animowac nasz kwadrat. W tym celu w warstwie „animowany kwadrat” na 1 klatce klikamy prawym przyciskiem myszy i wybieramy „Create Motion Tween”, a w klatce 50 i 100 dodajemy klatki kluczowe (F6). Przechodzimy do 50 klatki, wybieramy i przesuwamy w niej nasz kwadrat o odleglosc troche krótsza niz polowa elipsy w prawo. Pamietajmy, ze nasz kwadrat powinien stykac sie z elipsa. Teraz przechodzimy do klatki 100 i znów przesuwamy go o niecale pól dlugosci, tak, aby znalazl sie prawie w punkcie wyjscia. Jesli przesuneli go bysmy o wiecej niz polowe elipsy, dojechalby do miejsca w klatce 50 a nastepnie wrócilby na swoje miejsce. W warstwie „tor ruchu” klawiszem F5 dodajemy pusta klatke w 100 klatce animacji. Nasza linia czasu powinna sie prezentowac nastepujaco:

Ostatnia rzecza, jaka wykonamy bedzie obracanie kwadratu. Spowodujemy, ze od klatki 1 do 50 wykona on jeden obrót zgodnie ze wskazówkami zegara, a nastepnie, od 50 do 100 klatki „odkreci sie”. W tym celu w 1 klatce w warstwie „animowany kwadrat” w panelu Properities dla pierwszej klatki Rotate ustawiamy na CW, a w polu obok wpisujemy ilosc obrotów – 1.

To samo wykonujemy w klatce 50, tyle ze opcje Rotate ustawiamy na CCW.

Zapraszam do nastepnej lekcji dotyczacej zmiany ksztaltu obiektu.

Zobacz także kurs Flash na eduweb.pl!

Czesc praktyczna plansza III – zmiana ksztaltu obiektu

pobierz pliki zródlowe

Pora na kolejny typ animacji, który polega na zmianie ksztaltu obiektu. W naszej animacji zajmiemy sie plynnym przejsciem kwadratu w kolo. To stary i oklepany przyklad, ale najlepiej i najprosciej oddaje cechy tego typu animacji.

Na poczatku utwórzmy nowy film i ustalmy wlasciwosci pola pracy. Mam nadzieje, ze z tym zadaniem poradzicie sobie juz sami, nie chcecie przeciez czytac czwarty raz tego samego. Teraz wybieramy pierwsza klatke naszej warstwy (nazwalem ja „shape”) i rysujemy w niej dowolny kwadrat. Nastepnie w klatce 30 naszego filmu wstawiamy pusta klatke kluczowa. Aby to zrobic klikamy prawym przyciskiem myszy na 30 klatce i wybieramy Insert Blank Keyframe. W miejscu naszego kwadratu rysujemy kolo… aby mialo ono podobne wymiary i polozenie poslugujemy sie panelem Properities. Kiedy juz mamy gotowe kolo wracamy do pierwszej klatki i wybieramy dla niej wlasciwosci: z panelu Properities wybieramy

z rozwijanego menu przy opcji Tweening funkcje Shape.

Na naszej linii czasu miedzy klatkami powinna sie pojawic czarna strzalka na zielonym tle.

Jesli teraz nacisniemy Enter zobaczymy juz jak nasz kwadrat plynnie przechodzi w kolo. To jednak nie koniec, postaram sie jeszcze zapoznac Was z przydatna funkcja Shape Hints. Funkcja ta pozwala dostosowac tor, wedlug którego bedzie przebiegac zmiana ksztaltu. Zaznaczamy pierwsza klatke i w menu Modify wybieramy opcje Shape i Add Shape Hint (Ctrl+Shift+H). Pojawilo sie male, czerwone kóleczko z symbolem litery A. Powtórzmy ta operacje jeszcze trzy razy, tak aby wyswietlily sie literki od A do D. Teraz umiescmy te literki w naroznikach naszego kwadratu.

Przejdzmy do klatki w której mamy kólko. Tutaj znajduja sie juz nasze literki, nalezy je jeszcze odpowiednio rozmiescic. Ja zrobilem to tak jak na screenie, ale warto sobie pokombinowac, rozwiazan jest bardzo wiele.

Nasze kóleczka podswietlily sie na zielono, co oznacza, ze wszystko zrobilismy dobrze i zostaly nadane Shape-Hinty. W razie problemów z rozmieszczeniem shape hintów polecam na poczatek metode prób i bledów, pózniej ‚zlapiecie’ o co chodzi. Mozna tez wesprzec sie helpem Flasha w którym wszystko jest wytlumaczone na prostszym przykladzie liczb. Nasza animacja jest gotowa. Prezentuje sie tak (ja jeszcze na koniec dodalem zwykly shape tween aby przejscie bylo plynne).

Zobacz także kurs Flash na eduweb.pl!

Czesc praktyczna plansza IV – efekt maski

pobierz pliki zródlowe

W tej czesci kursu postaram sie Was nauczyc dwóch rzeczy. Po pierwsze tworzyc efekt maski, po drugie poslugiwac sie obiektami Graphic oraz Movie Clip. Na poczatku tworzymy nowy Movie Clip. W menu Insert wybieramy New Symbol (Ctrl+F8), a nastepnie ustalamy jego nazwe i zachowanie na Movie Clip.

Klikamy OK. Tak powstal nasz pierwszy klip filmowy. Mozemy w nim wykonywac wszystko to, co robilismy na glównym polu pracy. Korzystanie z klipów ulatwia jednak prace i pomaga zachowac porzadek. O tym, w jakim klipie aktualnie sie znajdujemy informuje nas napis powyzej panelu warstw:

Na poczatek stwórzmy dwie warstwy. Górna nazwijmy „maska”, a dolna „napis”. Przejdzmy do 1 klatki warstwy napis i wpiszmy do niej tekst za pomoca narzedzia Text Tool, wybierajac je z panelu Tools badz wciskajac T. W panelu Properities mozemy ustawic opcje dotyczace tekstu – kolor tekstu ustawiamy na czerwony. Ja wpisalem przykladowo slowo „Flash „. Nadal znajdujac sie w warstwie „napis”, wstawmy teraz pusta klatke do 35 klatki animacji (F5).

Przechodzimy do pierwszej klatki warstwy maska i rysujemy w niej waski prostokat troche wyzszy od naszego tekstu i szerokosci mniej wiecej 30px. Kolory prostokata nie graja roli, nie beda widoczne na animacji. To bedzie obiekt, który ma „odslaniac” nasz napis. Mozemy go dodatkowo troche pochylic stosujac opcje Free Transform . Ustawiamy prostokat tak, aby znalazl sie przed tekstem i animujemy go od prawej strony do lewej, do konca tekstu, tak jak to robilismy w pierwszej animacji z kwadratem. Koniec animacji powinien sie znalezc w 35 klatce (jesli zrobiliscie inaczej bardzo latwo mozecie przenosic klatki kluczowe klikajac na nich i przeciagajac je w prawo lub w lewo).

Teraz klikamy na warstwe „maska” prawym przyciskiem myszy i wybieramy opcje Mask. Wlasciwosci nizszej warstwy zostana automatycznie ustawione na Masked, a my zobaczymy cos takiego:

UWAGA: Po wykonaniu tej operacji, warstwy zostana zablokowane, aby dokonywac w nich zmian musimy je uprzednio odblokowac odznaczajac ikonke klódki. Pamietajmy, aby przed odtwarzaniem animacji znów zamknac warstwy. To oznacza, ze w warstwie „maska” mamy obiekty, którymi odkrywamy te z warstwy „napis”.

Juz teraz jesli nacisniemy Enter zobaczymy ciekawy efekt. My jednak chcemy zrobic cos troszke innego, tak zeby napis byl caly czas widoczny. W tym celu tworzymy nowa warstwe (ikonka Add Layer), nazywamy ja „tlo” i umiejscawiamy najnizej, pod dwiema dotychczasowymi warstwami. Do warstwy tlo kopiujemy pierwsza klatke z warstwy napis klikajac na niej prawym przyciskiem, wybierajac opcje Copy Frames,a nastepnie wstawiamy ja do 1 klatki warstwy „tlo” poleceniam Paste Frames. Wybieramy narzedzie Text Tool (T) i zmieniamy kolor naszego tekstu na szary. Wstawiamy pusta klatke do klatki 35 animacji, dzieki czemu nasza listwa czasowa prezentuje sie nastepujaco:

Skonczylismy juz prace nad naszym Movie Clipem, teraz wystarczy go tylko umiejscowic na glównym polu pracy. Klikamy na ikonke aby powrócic do glównej czesci naszej animacji. Otwieramy biblioteke (Ctrl+L), z której nasz Klip Filmowy „maska” przeciagamy na pole pracy (tak, jak to sie robi z Windowsowymi folderami) i pozycjonujemy. Klip automatycznie znajdzie sie w pierwszej klatce pierwszej warstwy. Oprócz klipu w bibliotece znajduje sie takze symbol typu Graphic, w którym jest nasz prostokat. Klikajac dwukrotnie na tym obiekcie przeniesiemy sie do okna, w którym mozemy edytowac rysunek. Zapisywanie rysunków jako symbol Graphic jest przydatne wówczas, kiedy jednego rysunku uzywamy w wielu klipach i do wielu animacji. Wówczas nie musimy go wszedzie poprawiac jesli wystapi blad, robimy to jedynie w danym obiekcie Graphic. Jesli wcisniemy Ctrl+Enter, zobaczymy owoc naszej pracy w pelnej okazalosci… powinien on sie prezentowac mniej wiecej tak:

Ja jeszcze troche przesunalem tekst w warstwie maskowanej – „napis”, dlatego efekt wyglada troche inaczej. W nastepnej lekcji nauczycie sie tworzyc przycisk.

Zobacz także kurs Flash na eduweb.pl!

Czesc praktyczna plansza V – przycisk

pobierz pliki zródlowe

Krótkie wprowadzenie do ActionScript

AS to jezyk skryptowy, wykorzystywany we Flashu. Jezyk ActionScript podobnie jak sam Flash przeszedl wiele modyfikacji w odniesieniu do poprzednich wersji programu. We Flashu 8 jest on juz w pelni zaawansowanym, imponujacym narzedziem z którego korzystaja nie tylko zaawansowani Flashmani. Jezyk ten jest podobny do JavaScript i opiera sie na dodawaniu akcji do poszczególnych klatek lub obiektów (MC i buttony). Przy tworzeniu strony internetowej, dzieki duzemu rozbiciu poszczególnych skryptów na rózne obiekty unikamy kilometrowego kodu, którego edycja jest nuzaca i monotonna. Skrypty w AS sa zwykle bardzo krótkie, dzieki czemu wykrycie i poprawienie bledu nie trwa dlugo. By wstawic skrypt do naszej animacji poslugujemy sie panelem Actions (Window/Development Panels/Actions lub F9). Samo wstawianie skryptów opiera sie na przeciaganiu lub wpisywaniu gotowych polecen. Dla ulatwienia otrzymujemy od programu pomoc w postaci wyswietlenia okreslonych pól do których wystarczy np. wpisac adres strony www, do której chcemy sie odniesc za pomoca linku. Wszystko wyjasnie przy okazji tworzenia przycisku, wiec nie martwcie sie, jesli jeszcze malo z tego wszystkiego rozumiecie.

Tworzenie przycisku

Stworzymy zaraz przycisk bedacy odnosnikiem do strony WWW, do którego dodamy dzwiek oraz sprawimy, by po najechaniu nan myszka odtwarzala sie animacja. Aby wykonac przycisk najpierw tworzymy nowy obiekt button (Ctrl+F8) i nadajemy mu dowolna nazwe. Nastepnie w klatce kluczowej przycisku (UP) rysujemy prostokat o wymiarach 100x25px. Wypelniamy go na czerwono, obramowanie standardowo czarne grubosci 1,5px. Tlo naszej animacji ustawilismy wczesniej jak zwykle na biale. Na przycisku piszemy dowolny tekst, ja napisalem „Flash”.

Klatke kopiujemy do pozostalych trzech: OVER, DOWN i HIT. Spróbujemy teraz zrobic cos takiego, aby po najechaniu myszka na nasz przycisk byla odtwarzana jakas animacja. W tym celu musimy MC z animacja wstawic do klatki OVER przycisku.

Najpierw jednak musimy takowa animacje stworzyc. Tworzymy nowy obiekt Movie Clip, który nazwiemy kolo. Teraz w jedynej warstwie tego obiektu rysujemy dowolny obiekt i animujemy go w dowolny sposób. Ja posluzylem sie naszym wczesniejszym klipem z maska. Otwieramy biblioteke (Ctrl+L) i przechodzimy do naszego przycisku dwukrotnie na nim klikajac. Przechodzimy do klatki Over, przeciagamy do niej z biblioteki nasz klip i pozycjonujemy go wzgledem przycisku. Ja umiescilem go po prewej stronie przycisku.

Pozostalo nam dograc do przycisku dzwiek i posluzyc sie ActionScriptem, by stworzyc z przycisku odnosnik. Wybieramy dowolny dzwiek jako podklad.

Dzwiek importujemy do filmu wybierajac opcje Import z menu File (Ctrl+R). Gdy juz zaimportujemy plik dzwiekowy, trafi on do naszej biblioteki. Chcemy, by dzwiek byl odtwarzany w momencie najechania na przycisk kursorem, wiec musimy go wstawic do klatki Over. Klikamy na niej i otwieramy panel Properities. Z rozwijanego menu Sound wybieramy nasz plik.

Na linii czasu, w klatce Over pojawila sie pionowa kreska informujaca o tym, ze klatka ta zawiera dzwiek.

Teraz powracamy do sceny glównej, przenosimy przycisk z biblioteki na pole pracy i pozycjonujemy go. Pozostalo stworzenie z przycisku odnosnika. Klikamy na nim i wybieramy Actions(F9). Pojawlo sie okno Actions, w którym

z lewej strony wybieramy akcje getURL i klikamy na niej dwukrotnie badz przeciagamy na prawa strone. Oba dzialania prowadza do tego samego efektu – z prawej strony wyswietli sie akcja. My jeszcze musimy uzupelnic ja o zdarzenie dotyczace przycisku wiec radze od razu skopiowac do pola Actions ponizszy skrypt:

on (release) {

getURL („http://www.eduweb.pl”);

}

Wyglada to tak:

www.eduweb.pl

komenda on (release) powoduje to, ze po przycisnieciu buttona i zwolnieniu przycisku myszy, zostanie wykonana akcja znajdujaca sie pomiedzy nawiasami { i }. Akcja getURL(); otwiera adres zdefiniowany w nastepujacym po niej nawiasie. Adres musi byc wpisany w cudzyslowie.

To juz wszystko!

W nastepnej lekcji nauczysz sie tworzyc efekty zwiazane z tesktem.

Zobacz także kurs Flash na eduweb.pl!

Czesc praktyczna plansza VI – animowany tekst

pobierz pliki zródlowe

Przy tworzeniu animowanego tekstu bedziemy korzystac z wielu efektów. Ustawmy wymiary naszego filmu na 400x100px, fps ustawmy na 24 klatki na sekunde. Teraz tworzymy nowy Movie Clip (Ctrl+F8), który nazywamy „animowany tekst”. bedziemy animowli tekst „Kurs Adobe Flash”. W tym celu stwórzcie szesc warstw. W pieciu warstwach znajda sie literki z wyrazu „Adobe”, w szóstej warstwie napis „Kurs” i „Flash”. Literki animuje osobno, gdyz beda sie one pojawialy po sobie, nie da sie tego zrobic w jednej warstwie. Nazywamy odpowiednio warstwy i w kazdej wpisujemy dana literke.

Musicie uwazac, zeby nie wstawic np. do jednej klatki dwóch literek i zeby tak dobrac font, zeby nie wystawal potem poza banner.

Prostym sposobem na umieszczenie wszystkich literek na osobnych warstwach jest utworzenie w jednej warstwie napisu „Adobe”, nastepnie zaznaczamy napis przez klikniecie (pojawi sie niebieska ramka wokól napisu), teraz naciskamy kombinacje Ctrl+B – spowoduje to rozbicie calego wyrazu na poszczególne literki. Nie usuwajac zaznaczenia, klikamy prawym przyciskiem na dowolna literke i z rightclick menu wybieramy opcje Distribute to Layers. Spowoduje to utworzenie 5 nowych warstw, w których kolejno zostana umieszczone poszczególne literki. Dodatkowo warstwy automatycznie przyjma taka nazwe, jaka literka sie w nich znajdzie. Teraz, gdy juz masz wszystkie literki na osobnych warstwach, zaznacz je ponownie i z panelu Properities wybierz z rozwijanego menu pod rozmiarem fontu Anti-alias for Animation (font bedzie ladnie wygladzony podczas animacji).

Kiedy juz mamy we wszystkich warstwach klatki kluczowe z jakims obiektem, zaczynamy animowac literki. Zrobimy to „hurtem” dla wszystkich literek. Zaznaczamy pierwsze klatki wszytskich warstw z literkami napisu Adobe. Klikamy prawym przyciskiem na obojetnie której klatce kluczowej i wybieramy Create Motion Tween. Teraz wstawiamy klatki kluczowe (F6) w klatce 10 i 13.

Teraz musimy dzialac osobno w kazdej klatce. W pierwszej klatce warstwy z literka „A” przez klikniecie zaznaczamy ta literke, nastepnie klikamy prawym, wybieramy Free Transform i przytrzymujac przycisk Shift (w celu zachowania proporcji), lapiemy za prawy górny róg zaznaczenia i zmniejszamy literke.

Przechodzimy do klatki 10 i tam znów wybieramy Free Transform, ale teraz nieco powiekszamy literke.

Ja dodatkowo w 1 klatce ustawilem jeszcze efekt Alpha z panelu Properities/Color na 0% (pamietaj, aby najpierw zaznaczyc literke klikajac na nia). Teraz czynnosc ta powtarzamy dla wszystkich literek a w dziesiatej warstwie tworzymy napis Kurs(przerwa na literki)Flash.

Kiedy wcisniemy Enter powinnismy juz zobaczyc animacje, ale chcemy jeszcze sprawic, zeby literki nie znikaly zaraz po tym jak sie pokaza. W tym celu animacja w kazdej warstwie musi trwac do 30 klatki. W 30 klatce kazdej warstwy (oprócz ostatniej), wstawiamy pusta klatke (F5). Prezentuje sie to nastepujaco:

Teraz zajmijmy sie animacja ostatniej warstwy. Klatke kluczowa przeciagamy do 13 klatki, tworzymy Motion Tween i wstawiamy nastepna klatke kluczowa do klatki 30 (F6).

Wracamy do klatki 13, klikamy prawym przyciskiem myszy na napisie, wybieramy Free Transform i rozciagamy nasz napis w poziomie.

Nadajmy teraz temu napisowi efekt Alpha w palecie Properities, opcji Color i ustawmy wartosc na 0%

Gdybysmy chcieli pozostawic tak nasza animacje, w zasadzie nie musielibysmy rozbijac literek z napisu Adobe na warstwy. Zrobilismy to po to, aby teraz spowodowac, ze literki nie beda pojawiac sie równoczesnie a z pewnym opóznieniem. Powiedzmy, ze bedzie to opóznienie rzedu 4 klatek. Literki beda wchodzic po kolei, dlatego warstwa z literka A pozostaje bez zmian. W kolejnej warstwie z literka d, zaznaczamy klatki od 1 do 13 i przesuwamy je o 4 klatki do przodu. Klatki z kolejnej warstwy przesuwamy juz o 8 klatek, nastepna o 12 itd. Na koncu musimy tez przesunac klatki z ostatniej warstwy z animacja „Kurs_____Flash” do klatki 29, a animacje z warstw 1-5 przeduluzyc do
46 klatki (F5). Powinno to wygladac nastepujaco:

To juz wszystko. Mozemy teraz zapisac i opublikowac (Shift+F12) animacje.

Gratuluje wytrwalosci, umiecie juz naprawde duzo… zagladajcie do artykulów i tutoriali, aby uzupelnic swoja wiedze.

Zapraszam równiez do komentowania kursu. Czekam na wszelkie Wasze uwagi. zauwazycie w kursie jakis blad, lub cos bedzie dla Was niezrozumiale piszcie na grzegorz[at]eduweb.pl.

Zobacz także kurs Flash na eduweb.pl!