You are on page 1of 38

IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Macromedia Flash MX 2004.


Sztuka projektowania
Autorzy: Shane Rebenschied, Lynda Weinman
Tumaczenie: Marcin Samodulski, Jakub Thiele-Wieczorek
ISBN: 83-7361-806-6
Tytu oryginau: Macromedia Flash MX 2004 Beyond
the Basics Hands-On Training (Hands on Training (H.O.T))
Format: B5, stron: 408
Program Macromedia Flash sta si niemal standardem w zakresie przygotowywania
aplikacji multimedialnych na strony WWW, i nie tylko. Jest poczeniem narzdzia
do grafiki wektorowej ze rodowiskiem programistycznym, co pozwala na tworzenie
nie tylko animacji, ale take elementw interaktywnych, pozwalajcych uytkownikowi
midzy innymi na sterowanie odtwarzaniem oraz wprowadzanie i pobieranie danych.
Aby do tworzonej we Flashu prezentacji doda moliwo komunikacji z uytkownikiem,
trzeba zastosowa jzyk ActionScript oraz moduy noszce nazw komponentw.
Ksika Macromedia Flash MX 2004. Sztuka projektowania jest przeznaczona
dla tych uytkownikw Flasha, ktrzy opanowali ju jego narzdzia graficzne i chc
wykona nastpny krok wykorzysta w swoich pracach moliwoci oferowane
przez ActionScript. Opisuje sposoby uywania tego jzyka do tworzenia pojedynczych
elementw i caych aplikacji. Dowiesz si, jak pobiera i formatowa dane ze rde
zewntrznych, odtwarza cyfrowe wideo i tworzy efektowne menu. Dziki wiczeniom
i przykadowym projektom zamieszczonym na doczonym do ksiki CD-ROM-ie
poszerzysz swoje umiejtnoci o zaawansowane techniki oparte na programowaniu
w ActionScript.
Korzystanie z bibliotek wspdzielonych i danych zewntrznych
Formatowanie tekstu za pomoc jzyka HTML i arkuszy stylw
Tworzenie interaktywnego pokazu slajdw
Budowanie wskanika postpu adowania danych
Interaktywne formularze z weryfikacj wprowadzanych danych
Odtwarzanie plikw MP3 i cyfrowego wideo
Menu stworzone z wykorzystaniem ActionScript
Publikacja projektu na stronie WWW
Wykorzystaj ActionScript, by tchn ycie w projekty wykonane we Flashu

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Spis treci
Wstp ................................................................................................................................................................................................... 9
Rozdzia 1. Podstawy ................................................................................................................................................................ 19
O czym jest ta ksika? .............................................................................................................................................. 19
Co powiniene ju umie? ........................................................................................................................................20
Modularno, modularno, modularno ........................................................................................................... 21
Nowe funkcje programu Flash MX 2004 ...............................................................................................................22
Czy powiniene dokona aktualizacji programu Flash MX do MX 2004? .......................................................24
wiczenie 1. Co waciwie tworzymy ...................................................................................................................... 26
Aktualizacje ................................................................................................................................................................ 30
Gotowe pliki witryny ................................................................................................................................................ 31

Rozdzia 2. Od czego powinienem zacz? .................................................................................................................... 33


Na czym polega proces konstruowania witryny WWW? ..................................................................................... 33
Od jakiego programu naley zacz? ...................................................................................................................... 39
wiczenie 1. Instalacja czcionki uywanej w witrynie ..........................................................................................40
wiczenie 2. Integracja ............................................................................................................................................. 41
Sugestie dotyczce pracy nad witryn ..................................................................................................................... 53

Rozdzia 3. Zaczynamy ............................................................................................................................................................. 55


Czym jest gwny plik SWF? .................................................................................................................................... 55
Czym s klasy, obiekty, metody i waciwoci? ...................................................................................................... 56
Czym s typy danych? ............................................................................................................................................... 57
Czym jest funkcja? ..................................................................................................................................................... 58
Czym jest MovieClipLoader i czym rni si od loadMovie? ............................................................................ 60
wiczenie 1. Tworzenie gwnego pliku SWF i umieszczanie w nim obiektu MovieClipLoader ................. 61
Czym jest biblioteka wspdzielona? ......................................................................................................................72
wiczenie 2. Tworzenie i przygotowywanie biblioteki wspdzielonej .............................................................72

Rozdzia 4. Klasa LoadVars .................................................................................................................................................... 89


wiczenie 1. Co waciwie tworzymy ......................................................................................................................89
wiczenie 2. Wstawianie czcionek wspdzielonych ............................................................................................90
Pisanie komentarzy ...................................................................................................................................................94

wiczenie 3. Programowanie obiektu LoadVars ................................................................................................... 96


Czym jest klasa LoadVars? ...................................................................................................................................... 104
wiczenie 4. adowanie tekstu sekcji Our History ............................................................................................. 104
wiczenie 5. Umoliwienie przewijania tekstu .................................................................................................... 111

Rozdzia 5. Jzyk HTML i kaskadowe arkusze stylw ............................................................................................. 121


wiczenie 1. Co waciwie tworzymy .....................................................................................................................121
wiczenie 2. Modyfikacja zaadowanego tekstu przy uyciu jzyka HTML .................................................. 122
Kaskadowe arkusze stylw w programie Flash MX 2004 ................................................................................... 129
wiczenie 3. Korzystanie z kaskadowych arkuszy stylw .................................................................................. 130

Rozdzia 6. Klasa TextFormat ............................................................................................................................................ 141


wiczenie 1. Co waciwie tworzymy .....................................................................................................................141
Czym jest klasa TextFormat ................................................................................................................................... 143
wiczenie 2. Dodawanie podmenu ...................................................................................................................... 144
wiczenie 3. Automatyczna zmiana rozmiaru pola tekstowego ...................................................................... 153
wiczenie 4. Definiowanie stanw Roll Over i Roll Out dla opcji podmenu ............................................... 156
wiczenie 5. Wyczanie interaktywnoci ........................................................................................................... 160
wiczenie 6. Kopiowanie i wklejanie funkcji ...................................................................................................... 162
wiczenie 7. Wczanie interaktywnoci ............................................................................................................. 164
wiczenie 8. Wykaczanie podmenu ................................................................................................................... 169
wiczenie 9. Tworzenie podsekcji Our Staff ....................................................................................................... 172

Rozdzia 7. Tworzenie pokazu slajdw ............................................................................................................................. 181


wiczenie 1. Co waciwie tworzymy .....................................................................................................................181
wiczenie 2. Przygotowania .................................................................................................................................. 182
wiczenie 3. adowanie pierwszego slajdu .......................................................................................................... 187
wiczenie 4. Wywietlanie liczby dostpnych slajdw ...................................................................................... 192
wiczenie 5. Dodawanie funkcji nastpny slajd ................................................................................................. 197
wiczenie 6. Dodawanie funkcji poprzedni slajd ...............................................................................................202
wiczenie 7. Dodawanie tekstu opisujcego slajd ..............................................................................................207
wiczenie 8. Dodawanie licznika slajdw ........................................................................................................... 210

Rozdzia 8. Tworzenie wskanika postpu adowania ............................................................................................ 217


wiczenie 1. Co waciwie tworzymy .................................................................................................................... 217
wiczenie 2. Zacznijmy .......................................................................................................................................... 219
wiczenie 3. Listener onLoadProgress ................................................................................................................. 221

Rozdzia 9. Tworzenie formularza .................................................................................................................................... 227


wiczenie 1. Co waciwie tworzymy ....................................................................................................................227
wiczenie 2. Projektowanie formularza .............................................................................................................. 230
6

MACROMEDIA FLASH MX 2004


Sztuka projektowania

wiczenie 3. Proste sprawdzanie poprawnoci formularza ............................................................................... 239


wiczenie 4. Uycie obiektu LoadVars do wysyania zawartoci formularza .................................................248
wiczenie 5. Stylizacja formularza .......................................................................................................................254

Rozdzia 10. Odtwarzacz plikw MP3 ........................................................................................................................... 261


wiczenie 1. Co waciwie tworzymy .................................................................................................................... 261
Czym rni si pobieranie progresywne od strumieniowania? ........................................................................ 263
Kompresja strumieniowanego dwiku ...............................................................................................................264
wiczenie 2. Zaczynamy ........................................................................................................................................ 266
wiczenie 3. adowanie pliku MP3 ......................................................................................................................269
Czym jest klasa Sound? ...........................................................................................................................................274
wiczenie 4. Zatrzymywanie i wznawianie odtwarzania muzyki ..................................................................... 276
wiczenie 5. Wywietlanie informacji ID3 ..........................................................................................................285
wiczenie 6. Zmiana cieek ..................................................................................................................................289

Rozdzia 11. Tworzenie odtwarzacza wideo ............................................................................................................... 301


wiczenie 1. Co waciwie tworzymy .................................................................................................................... 302
wiczenie 2. Zaczynamy ........................................................................................................................................ 303
W jaki sposb utworzy plik FLV .......................................................................................................................... 307
Osadza czy nie osadza? ........................................................................................................................................ 310
wiczenie 3. Co tam ...............................................................................................................................................311
wiczenie 4. Pobieranie i odtwarzanie materiau wideo ................................................................................... 320
wiczenie 5. Przeczany przycisk Play-Pause ..................................................................................................... 330
Czym jest klasa NetStream? ................................................................................................................................... 333
wiczenie 6. Tworzenie pasku postpu odtwarzania ............................................................................................. 335
wiczenie 7. Uycie funkcji obsugi zdarzenia onStatus ................................................................................... 341
wiczenie 8. Sprztanie .......................................................................................................................................... 345

Rozdzia 12. Gwne menu ................................................................................................................................................. 349


wiczenie 1. Co waciwie tworzymy .................................................................................................................... 349
wiczenie 2. Przygotowywanie pliku FLA ........................................................................................................... 351
wiczenie 3. Skrypt dla zdarze onRollOver, onRollOut i onRelease ........................................................... 354
wiczenie 4. czenie wszystkich elementw ..................................................................................................... 359

Rozdzia 13. Przygotowania do zaprezentowania projektu wiatu .................................................................. 365


wiczenie 1. Umieszczanie projektu opracowanego we Flashu na stronie napisanej w jzyku HTML ...... 365
Potencjalne zmiany w sposobie osadzania elementw na stronach WWW .................................................... 373
Opcje dotyczce wykrywacza pluginu .................................................................................................................. 374
wiczenie 2. Tworzenie detektora pluginu Flash MX 2004 .............................................................................. 377
Podsumowanie ......................................................................................................................................................... 383
SPIS TRECI

Dodatek A Obsuga techniczna i rozwizywanie problemw ............................................................................. 385


Dodatek B Zasoby zwizane z programem Macromedia Flash MX 2004 ..................................................... 389
Dodatek C Flash Communication Server i skrypty CGI ......................................................................................... 395
Skorowidz .................................................................................................................................................................................... 397

MACROMEDIA FLASH MX 2004


Sztuka projektowania

Zaczynamy

W tym rozdziale:
Gwny plik SWF
Klasy, obiekty, metody i waciwoci
Typy danych
Funkcje
Klasa MovieClipLoader
Biblioteki wspdzielone
Tworzenie i przygotowywanie biblioteki wspdzielonej

W poprzednich dwch rozdziaach poznae podstawowe koncepcje zwizane z tworzeniem witryn


WWW w programie Flash MX 2004. Teraz wykorzystamy je w praktyce. W tym rozdziale utworzysz
gwny plik SWF, ktry bdzie peni rol pojemnika przechowujcego inne pliki zwizane z witryn oraz kod w jzyku ActionScript moliwy do wielokrotnego wykorzystania. Napiszesz rwnie
gwny skrypt, kontrolujcy sposb adowania wszystkich plikw SWF i JPEG uywanych w witrynie. Dodatkowo dowiesz si, czym s biblioteki wspdzielone, pozwalajce na przechowywanie
zasobw (takich jak czcionki) wykorzystywanych w projekcie, a take stworzysz jedn z nich. Jest to
dosy dugi rozdzia zajmujcy si wieloma nowymi i bardzo wanymi tematami, wic jeli czytasz
to pn noc i mylisz sobie tylko dokocz ten rozdzia i id spa, radz Ci poczeka z lektur
do czasu, gdy si porzdnie wypisz. Chyba e chcesz mie naprawd dziwne sny, w ktrych bd
Ci goniy wielkie MovieClipLoadery z wielkimi, kapicymi kami. ;-)

Czym jest gwny plik SWF?


Jeli nie mieszkasz w jaskini od roku 1954, zapewne syszae o ksikach J.R.R. Tolkiena, przeniesionych na ekran w postaci trylogii Wadca piercieni. Dzisiejsze wszdobylskie media stamtd podchwyciy zdanie Jeden by wszystkimi rzdzi, zwizane z magicznym, wszechmocnym piercieniem, ktrego moc pozwala na kontrolowanie kilku innych magicznych piercieni. W poniszym
wiczeniu stworzymy magiczny piercie naszej witryny. Ten gwny plik SWF speni rol pojemnika, do ktrego bd adowane wszystkie inne pliki SWF. Bdzie on rwnie zawiera kod w jzyku
ActionScript, ktry zostanie wielokrotnie wykorzystany w witrynie, na przykad skrypt pozwalajcy

na adowanie zasobw (MovieClipLoader), zmiennych (LoadVars) i kaskadowych arkuszy stylw


(TextField.StyleSheet). Tworzc go i uywajc do przechowywania zmiennych i czsto uywanych funkcji, uzyskujemy dwie rzeczy:
Centralizujemy czsto uywane fragmenty kodu w jzyku ActionScript. Pozwala to na atw

modyfikacj kodu w jednym, scentralizowanym miejscu. Poniewa inne pliki SWF odnosz
si do niego, automatycznie bd korzysta ze zmian wprowadzonych w skrypcie. Gdyby
zamiast tego wpisa ten kod bezporednio do kadego pliku, ktry z niego korzysta, to
modyfikujc plik lub poprawiajc bd, musiaby powtrzy te czynnoci wielokrotnie,
w kadym z uywanych plikw. Zobaczysz, e centralizacja skryptw znacznie usprawnia
proces tworzenia witryny.
Centralizacja kodu w jzyku ActionScript pozwala na zmniejszenie rozmiaru plikw,

poniewa wszystkie skrypty s trzymane tylko w jednym miejscu. Gdyby wstawi je do


kadego pliku SWF, znacznie powikszyby cakowity rozmiar projektu. Trzymanie czsto
uywanego kodu w jednym miejscu i korzystanie z referencji w innych plikach SWF pozwala
na redukcj rozmiaru plikw poprzez uniknicie powtarzania identycznego skryptu.

Czym s klasy, obiekty, metody i waciwoci?


Gdy zaczniesz pisa kod w jzyku ActionScript, ktry nada funkcjonalno tej witrynie, napotkasz
pewne sowa, ktrych prawdopodobnie nie znasz. Ta sekcja w skrcie opisuje definicje klas, obiektw, metod i waciwoci. Wierz w to, e analogie pomagaj w procesie uczenia. Aby pomc Ci
w lepszym zrozumieniu tych skomplikowanych tematw, posu si w swoich wyjanieniach psem.
Cho cz terminologii moe brzmie nieco mylnie, gdy dokoczysz wiczenia zawarte w tej ksice, bdziesz ju z ni bardziej obeznany.
Klasy. Klasy s definicjami grup obiektw. Na przykad pies moe nalee do klasy zwierzt.

Wszystkie zwierzta maj pewne charakterystyczne cechy, ktre posiada te pies. Klas mona
uwaa po prostu za kategori obiektw. W przypadku programu Flash MX 2004 klipy
filmowe i przyciski s klasami. Posiadaj one metody i waciwoci, ktre definiuj, co mog
one robi w projekcie, a czego nie mog.

Obiekty. Obiekt jest w skrcie instancj klasy. Tak jak moesz posiada na scenie instancj

symbolu graficznego, obiekt w przypadku jzyka ActionScript jest instancj klasy. Jest on
zbiorem waciwoci i metod (o ktrych wicej przeczytasz poniej), dziedziczonych z klasy.
Ponadto kady z obiektw posiada wasn nazw, ktrej mona uywa w referencjach do
niego. Na przykad w programie Flash MX 2004 instancje klipw filmowych i przyciskw s
obiektami, poniewa stanowi instancje odpowiadajcych im klas.
Metody. Metody s zachowaniami obiektw. Zachowaniami (metodami) psa mog by:

szczekanie, sapanie, linienie si, sikanie na meble i zjadanie butw. W przypadku jzyka
Flash MX 2004 ActionScript klasy posiadaj wbudowane metody, ktre moesz wykorzysta.
Moesz te stworzy wasne metody, przyporzdkowujc je funkcji (wicej na temat funkcji
dowiesz si w dalszej czci tego rozdziau). Analogi tej moliwoci moe by na przykad
to, e pies zawsze szczeka (jest to jego wbudowana metoda), ale jeli chcesz, moesz mu doda
zachowanie, ktre pozwoli na przemieszczanie kotw si woli i rzucanie nimi po pokoju
(metoda dodana). Na przykad klip filmowy, bdcy obiektem, posiada metody pozwalajce
na jego odtwarzanie, zatrzymywanie odtwarzania, przechodzenie do nastpnej klatki itd.

56

MACROMEDIA FLASH MX 2004


Sztuka projektowania

Uwaga
Czym s zmienne?
W tej ksice czsto bdziemy uywa zmiennych, dlatego warto wiedzie, czym s. W skrcie zmienna jest pojemnikiem tworzonym w jzyku ActionScript, pozwalajcym na przechowywanie danych lub referencji do instancji
obiektu lub przyporzdkowywanie utworzonych obiektw. Zmienna jest nieco podobna do symbolu. Jednak tak
jak symbol jest pojemnikiem pozwalajcym na przechowywanie elementw wizualnych grafiki, tekstu itp.,
zmienna pozwala na przechowywanie danych, takich jak imi, liczba itp. Dziki tej ksice zyskasz due dowiadczenie w pracy ze zmiennymi. Bdziemy ich uywa do przechowywania liczb (takich jak czas trwania cieki
dwikowej), cigw znakw (takich jak imi uytkownika wysyajcego komentarz za pomoc formularza)
i obiektw jzyka ActionScript (takich jak obiekt MovieClipLoader, ktry utworzymy w dalszej czci tego rozdziau).
Zmienne s wrcz nieocenione w pracy w programie Flash MX 2004
Waciwoci. Waciwoci s atrybutami, ktre definiuj obiekt. Na przykad wszystkie psy

(a przynajmniej wikszo z nich) posiadaj cztery apy, dwoje oczu, ogon, pysk i mierdzcy
oddech. Klip filmowy posiada waciwoci takie jak: jego widoczno (_visible),
przezroczysto (_alpha), obrt (_rotation) itd.
Z kilkoma z tych okrele bdziesz mia do czynienia w wiczeniu 1. w tym rozdziale.

Czym s typy danych?


W czasie pisania kodu w jzyku ActionScript zauwaysz zapewne co, z czym do tej pory si nie
spotkae. Piszc akcje i tworzc zmienne, bdziesz dodawa krtki tekst po ich nazwie. Jest on nowoci we Flashu MX 2004, nazwan okreleniem typu danych. Pozwala on na okrelenie rodzaju
danych, jakie bdzie zawiera zmienna. Pocztkowo wydaje si to nieco zagmatwane, ale szybko
nabierzesz dowiadczenia i zrozumiesz, o czym pisz, gdy zaczniesz korzysta ze zmiennych w wiczeniach zawartych w tym i w nastpnych rozdziaach. Oto przykad okrelenia typu danych:

Widzisz? Po nazwie zmiennej myVar jest napis :String, po myVar2 za :Number. Zaznaczone identyfikatory s przykadami okrele typw danych. eby uy ich w swoich akcjach, wystarczy je wpisa po nazwie zmiennej. Zadaniem powyszych okrele jest poinformowanie skryptu, e zmienna
myVar zawiera dane typu String (cig znakw), myVar2 za Number (liczba). Takie rozwizanie ma
wiele zalet. Jako rednio zaawansowany uytkownik programu Flash powiniene zdawa sobie spraw
z trzech najwaniejszych:
Okrelanie typw pozwala na poinformowanie skryptu, jakiego rodzaju dane ma

przechowywa zmienna. Pozwala rwnie na zmian typu danych przechowywanych


w zmiennej. Innymi sowy, jeli zawiera ona liczb, ktra ma by traktowana jako cig
znakw, moesz to zapewni uywajc typu String. Dlaczego miaby to zrobi?
ROZDZIA 3.
Zaczynamy

57

C, jeli wykonujesz jakie obliczenia (dzielenie, mnoenie itd.) na liczbach, chciaby,


eby byy one traktowane jako typ Number, a nie String. Prba wykonania oblicze
matematycznych (z ktrymi bdziesz mia do czynienia w czasie tworzenia paska postpu
i preloaderw) na cigach znakw powoduje powstanie bdw.
Korzystanie ze zmiennych i obiektw okrelonego typu jest uwaane za dobry styl

kodowania. A to dlatego, e okrela si w ten sposb typ danych przechowywanych


w zmiennej lub obiekcie (String, Number itp.). Dostarczenie takiej informacji Flashowi
pozwala na zmniejszenie potencjalnej liczby bdw w filmie.
Zauwa rwnie, e ze wzgldu na to, i w programie Flash MX 2004 zosta usunity tryb

Normal w panelu Actions (akcje), okrelenie typu zmiennych pomaga w szybszym pisaniu
skryptw. Dzieje si tak dlatego, e dziki niemu wywietlane s podpowiedzi do kodu
i moliwe jest korzystanie z funkcji automatycznego uzupeniania w przypadku
wbudowanych klas (obiektw).
Powinienem Ci poinformowa o tym, e okrelanie typw w jzyku ActionScript nie jest obowizkowe. Dlatego te jest obsugiwane tylko w czasie tworzenia pliku SWF z uyciem jzyka ActionScript 2.0 (czyli wersji uywanej domylnie w momencie tworzenia nowego pliku FLA w programie
Flash MX 2004). Jeli pominiesz okrelanie typw, w wikszoci przypadkw akcje bd dziaay
bez wikszych problemw. Chciaem o tym napisa ju na pocztku ksiki, poniewa jest to nowa
cecha jzyka ActionScript 2.0. Ponadto moim zadaniem jest nauczenie Ci waciwych sposobw
pisania skryptw, a take przygotowanie do nauki bardziej zaawansowanych funkcji tego jzyka,
poprzez zaprezentowanie niektrych sformuowa i technik. W dalszej czci tego rozdziau dowiesz
si, w jaki sposb moesz tworzy wasne okrelenia typw danych.

Czym jest funkcja?


Symbol mona uwaa za pojemnik, w ktrym przechowywana jest grafika. Jego ciekaw cech jest
to, e mona go wykorzystywa wiele razy bez znacznego zwikszenia rozmiaru pliku SWF. Funkcje s pod tym wzgldem podobne, jednak zamiast grafiki przechowuj fragmenty kodu w jzyku
ActionScript. Mona je uwaa za pojemniki pozwalajce na przechowywanie skryptw, ktre mog
zosta wielokrotnie uyte w projekcie. S wyjtkowo uyteczne w sytuacjach, w ktrych wystpuje
potrzeba powtarzania bloku instrukcji.
Powiedzmy, e posiadamy szereg przyciskw, jak na pasku nawigacyjnym naszej witryny. Chcemy,
eby w momencie, gdy uytkownik kliknie jeden z nich, pojawi si animowany klip filmowy, muzyka ucicha, a w dynamicznym polu tekstowym, umieszczonym na scenie, pojawi si jaki tekst.
Gdybymy nie uyli funkcji, musielibymy przypisa wszystkie te akcje kadej instancji przycisku.
Nastpnie aby je zmieni, powinnimy modyfikowa kod kadej z nich! Co, jeli przyciskw byoby 50? To prawdziwy przepis na szalestwo. Zamiast tego moemy utworzy funkcj zawierajc kod,
ktry wykonuje te same trzy akcje (rozpoczcie odtwarzania klipu, zatrzymanie muzyki i wywietlenie komunikatu), a nastpnie przyporzdkowa instancjom przyciskw po jednym wierszu kodu,
powodujcym wywoanie funkcji i, co za tym idzie, wykonanie zawartych w niej akcji. Wwczas, gdy
zaistnieje potrzeba modyfikacji kodu, nie bdziemy musieli go zmienia w kadej z instancji. Wystarczy, e zmodyfikujemy funkcj. Oto przykad tego, jak moe ona wyglda:
58

MACROMEDIA FLASH MX 2004


Sztuka projektowania

function buttonClick() {
myMC.play();
myMusic.stop();
myMessage.text = "You clicked on a button. Congratulations!";
}

W tym przykadzie funkcji zostaa nadana nazwa buttonClick. Nazwa moe by zupenie dowolna.
Jedynym ograniczeniem jest to, e nie moe zaczyna si od cyfry, zawiera spacji ani znakw specjalnych (?, *, % itp.). Pomidzy nawiasami klamrowymi ({ }) znajduj si akcje, ktre maj zosta
wykonane w momencie wywoania funkcji. Aby to nastpio, wystarczy wpisa jej nazw (upewniajc
si, e okrelona zostaa cieka dostpu do niej w przypadku, gdy znajduje si ona na innej listwie
czasowej), dodajc operator wywoania ():
buttonClick();

Aha, nowoci w programie Flash MX 2004 jest to, e rozrnia on mae i wielkie litery w skryptach.
Tak wic jeli napiszesz:
buttonclick();

funkcja nie zostanie wywoana.


Inn zalet korzystania z funkcji jest moliwo przekazywania im parametrw. Oznacza to, e moesz przekazywa funkcji parametry, niezalenie od tego, gdzie zostaa ona wywoana (w powyszym
przykadzie jest wywoywana przez przycisk). Na przykad, co zrobi, jeli chcemy, eby tre wywietlanego komunikatu zaleaa od tego, ktry przycisk zosta kliknity? W tej chwili komunikat jest
staym elementem funkcji, co oznacza, e niezalenie od tego, ktry przycisk kliknie uytkownik,
wywietlony zostanie ten sam komunikat. Moemy jednak przyporzdkowa funkcji parametr,
nastpnie przy wywoywaniu funkcji w akcjach poszczeglnych przyciskw przekaza do tego parametru inny tekst. Jeli wydaje Ci si, e pisz po grecku, moe pomoe nastpujcy przykad. Ta sama
funkcja z dodanym parametrem bdzie wygldaa nastpujco:
function buttonClick (msg) {
myMC.play();
myMusic.stop();
myMessage.text = msg;
}

Jak widzisz, jedyn rnic jest to, e obecnie po nazwie funkcji w nawiasach zosta umieszczony
napis msg. Nie, nie oznacza on dodatku do ywnoci, poprawiajcego jej smak. Jest to po prostu
nazwa zmiennej zawierajcej tekst, ktry bdzie wywietlany, bdca skrtem od message (ang. komunikat). Jeli przyjrzysz si ostatniej akcji, zauwaysz, e znajduje si ona rwnie po instrukcji
myMessage.text =. Parametr msg dziaa po prostu jak miejsce na informacj, ktr moemy przekaza funkcji w momencie jej wywoania. Na przykad jeli chcesz, eby po klikniciu przycisku
o nazwie Our Products funkcja wywietlaa komunikat We have lots of stuf. Check it out., powiniene
przyporzdkowa mu nastpujc akcj:
on (release) {
buttonClick ("We have lots of stuff. Check it out.");
}

ROZDZIA 3.
Zaczynamy

59

Tekst We have lots of stuff. Check it out. jest parametrem przekazywanym funkcji w momencie, gdy
uytkownik kliknie przycisk. Zostaje on umieszczony w miejscu, w ktrym znajduje si napis msg.
Dziki temu w momencie kliknicia tego przycisku w dynamicznym polu tekstowym zostaje wywietlony komunikat zawierajcy ten cig znakw.
Parametr funkcji jest po prostu zmienn lokaln. To znaczy, e po wywoaniu funkcji zostaje on
usunity dla zaoszczdzenia pamici. Istnieje nawet moliwo tworzenia zmiennych o nazwie takiej
samej jak nazwa parametru. Nie powoduje to adnych konfliktw.
Funkcj uyt w poprzednich przykadach naley stworzy za pomoc jzyka ActionScript. Nazywamy j funkcj najwyszego poziomu. Obiekty rwnie posiadaj wbudowane funkcje (co sam zobaczysz, gdy bdziesz tworzy obiekt MovieClipLoader w dalszej czci tego rozdziau). S one nazywane
metodami i zostay opisane wczeniej w czci Czym s klasy, obiekty, metody i waciwoci.
Jestem pewien, e nadal masz wiele pyta zwizanych z funkcjami i sposobami ich wykorzystania,
nauczysz si o nich wiele z dalszej czci tej ksiki.

Czym jest MovieClipLoader


i czym rni si od loadMovie?
Funkcja loadMovie pozwala na zaadowanie pliku SWF lub JPG do innego pliku SWF. Jest to wietne rozwizanie, poniewa pozwala na podzielenie duego projektu na mniejsze czci i umoliwia
adowanie ich za kadym razem, gdy uytkownik tego wymaga. Jest to rwnie doskonay sposb
na skrcenie czasu adowania witryn opartych na programie Flash MX 2004, poniewa daje moliwo pocztkowego zaadowania jedynie podstawowej informacji (takiej jak menu nawigacyjne).
Nastpnie w miar zapotrzebowania cigane s inne sekcje witryny.
Funkcji loadMovie, mimo e bya bardzo uyteczna, brakowao pewnych moliwoci, dlatego wielu
programistom nie wystarczaa. Potrzebowali lepszych procedur, pozwalajcych na konstruowanie
preloaderw, zarzdzanie bdami itp. Dlatego firma Macromedia zdecydowaa si wprowadzi
w programie Flash MX 2004 nowy (lepszy) sposb adowania zewntrznych zasobw. Tak powstaa klasa MovieClipLoader.
Klasa MovieClipLoader zajmuje si tym samym, co funkcja loadMovie pozwala na adowanie
zewntrznych plikw SWF i JPG do innego pliku SWF (lub innego poziomu). Tym, co j odrnia,
jest fakt, e jest znacznie bardziej zoona i oferuje wicej opcji zwizanych z adowaniem i zajmowaniem si plikami SWF i JPG.
MovieClipLoader jest klas, ktrej naley przyporzdkowa obiekty nasuchujce, czyli listenery. Jak
wskazuje nazwa, nasuchuj one, czym w danym momencie zajmuje si MovieClipLoader. Gdy
wystpi okrelone zdarzenie, wykonaj powierzone im zadania. Na przykad jeli uywasz obiektu
MovieClipLoader w celu zaadowania zewntrznego pliku JPG, a plik ten nie istnieje, moesz przyporzdkowa mu listener onLoadError, ktry spowoduje wywietlenie komunikatu o bdzie.
Kiedy, gdy do adowania zasobw uywao si funkcji loadMovie, jeli chciao si stworzy preloader pokazujcy stopie zaadowania pliku, naleao stworzy ptl, ktra powtarzaa kod w jzyku
60

MACROMEDIA FLASH MX 2004


Sztuka projektowania

ActionScript. Teraz klasa MovieClipLoader zawiera wasne ptle tego typu, w obiekcie listener
o nazwie onLoadProgress. Pod wieloma wzgldami nowa klasa jest znacznie atwiejsza w obsudze, a take oddaje do dyspozycji znacznie wiksz liczb opcji pozwalajcych na obsug zewntrznych plikw SWF i JPG. W tabeli poniej zostay przedstawione rne funkcje typu listener wraz z opisami.
Listener

Opis

onLoadComplete

Wywoywany jest (a co za tym idzie, s wykonywane wszystkie zawarte w nim akcje)


w momencie, gdy zakoczy si adowanie danego zasobu.

onLoadError

Wywoywany jest, gdy adowanie zasobu si nie powiedzie.

onLoadInit

Podobnie jak onLoadComplete wywoywany jest w momencie, gdy zakoczy si


adowanie danego zasobu i gdy uruchomiona zostaje pierwsza klatka zaadowanego
klipu. W niektrych przypadkach lepiej jest stosowa go zamiast onLoadComplete,
poniewa w momencie jego wywoania wiadomo, e klip zosta do koca zaadowany
i jest gotowy do odtworzenia.

onLoadProgress

Wywoywany za kadym razem, gdy na dysku jest zapisywana adowana zawarto


klipu. Oznacza to, e za kadym razem, gdy zostaje cignity fragment informacji
dotyczcej klipu, jest on uruchamiany. Jest on ptl w jzyku ActionScript, ktra jest
wykonywana w czasie cigania zasobw. Wanie w nim umieszcza si kod preloadera
(zrobimy to w rozdziale 8. Tworzenie preloadera).

onLoadStart

Wywoywany w momencie, gdy rozpoczyna si adowanie zasobu.

Jak widzisz (ale zapewne jeszcze nie do koca rozumiesz), klasa MovieClipLoader jest bardzo potnym dodatkiem do programu Flash MX 2004. W dalszej czci tego rozdziau wykorzystamy j po
raz pierwszy.

wiczenie 1. Tworzenie gwnego pliku SWF


i umieszczanie w nim obiektu MovieClipLoader
W tym wiczeniu zaczniemy tworzy pierwszy fragment witryny firmy L.A. Eyeworks, czyli gwny plik SWF. Jak wiesz z czci Czym jest gwny plik SWF?, plik master.swf bdzie suy za pojemnik, do ktrego bd adowane inne moduy w formacie SWF (muzyka, oprawki, sekcja about us
itp.). Bd w nim rwnie przechowywane czsto wykorzystywane fragmenty kodu w jzyku ActionScript. Przechowywanie czsto uywanych akcji w centralnej lokalizacji pozwala na skrcenie czasu
spdzonego nad projektem, poniewa dziki niemu nie ma potrzeby powtarzania kodu za kadym
razem, gdy jest on potrzebny. Duo atwiej jest rwnie wprowadza pniejsze zmiany w skrypcie.
W tym wiczeniu napiszemy skrypt MovieClipLoader, ktry zajmie si adowaniem plikw SWF
i JPG do witryny.
W tym wiczeniu nauczysz si wielu rzeczy, wic jeli chcesz najpierw zrobi sobie przerw lub przebiec
si dookoa bloku, teraz jest na to odpowiedni czas. ;-)
1. Otwrz swoj ulubion przegldark i wpisz do niej adres:

http://www.lynda.com/flashbtb/laeyeworks/
ROZDZIA 3.
Zaczynamy

61

Spowoduje to otworzenie w jej oknie gotowej witryny. W zalenoci od szybkoci cza jej
adowanie moe trwa bardzo krtko lub nawet minut. Po zaadowaniu witryny zobaczysz
pasek nawigacyjny na grze ekranu, odtwarzacz muzyczny na dole, na rodku za animowan
grafik firmow. Kady z tych elementw jest osobnym plikiem SWF, odpowiednio
main_menu.swf, music.swf i splash.swf. Wszystkie trzy pliki s w momencie zaadowania witryny
automatycznie adowane do gwnego pliku master.swf.

Gdy klikniesz jeden ze znajdujcych si na grze przyciskw, na przykad about us, zobaczysz,
e grafika zniknie, a na jej miejsce zostanie zaadowany modu About Us (inny plik SWF).
To samo dotyczy dowolnego innego przycisku nawigacyjnego. rodek witryny jest miejscem,
do ktrego s adowane rne moduy, podmieniane w momencie kliknicia jednego
z przyciskw. Caa zawarto jest adowana i przechowywana w pliku master.swf, ktry za chwil
utworzymy. Gdy uytkownik klika jeden z przyciskw, kae instancji klasy MovieClipLoader
zaadowa okrelony plik SWF lub JPG. Czy to wydaje si zbyt atwe? W gruncie rzeczy takie
wanie jest. Oczywicie eby do tego doprowadzi, potrzeba odrobiny pracy i przemylanego
kodu w jzyku ActionScript, ale przecie ta ksika istnieje po to, eby Ci tego wszystkiego
nauczy, nieprawda? :-)

62

MACROMEDIA FLASH MX 2004


Sztuka projektowania

2. Na doczonej do ksiki pycie CD-ROM znajduje si folder o nazwie la_eyeworks. Zawiera

on wszystkie pliki, z ktrymi bdziemy pracowa w tej ksice. Skopiuj go na pulpit wraz
z zawartoci.

Czsto bdziemy korzysta z plikw znajdujcych si w tym folderze. Dlatego upewnij si,
e dokadnie wiesz, gdzie si on znajduje. Folder ten bdzie rwnie peni funkcj gwnego
katalogu witryny L.A. Eyeworks. Innymi sowy, bdziesz w nim zapisywa wszystkie pliki,
ktrymi bdziemy si zajmowa.
Jeli pracujesz na komputerze dziaajcym pod kontrol systemu operacyjnego Windows, wykonaj
instrukcje przedstawione we wstpie, aby umoliwi odczyt i zapis folderu i plikw, ktre si w nim
znajduj.
3. Uruchom program Flash MX 2004. Wybierz z menu polecenie File/New (plik/nowy),

a nastpnie w oknie dialogowym New Document opcj Flash Document i kliknij OK.

Niektre okna w programie Flash MX 2004 wygldaj inaczej ni w wersji Flash MX Professional
2004. Przykadem jest strona startowa. Okno dialogowe New Document (pokazane na powyszej
ilustracji) rwnie do nich naley. W programie Flash MX Professional 2004, w zakadkach General i Templates znajduje si wicej opcji. Pomimo tych rnic wiczenia zawarte w ksice dotycz
obu wersji programu.
ROZDZIA 3.
Zaczynamy

63

Gdy plik SWF zostaje zaadowany do innego pliku tego typu, plik nadrzdny definiuje
prdko odtwarzania filmu. Oznacza to, e plik master.swf (ktry wanie utworzye) okrela
ten parametr dla wszystkich adowanych do niego plikw SWF. W przypadku witryny firmy
L.A. Eyeworks zosta on ustawiony na 21 klatek na sekund. Cho jego warto jest przedmiotem
sporu pomidzy rnymi projektantami korzystajcymi z programu Flash MX 2004, moim
zdaniem ta, ktrej uylimy, wystarczy, eby wszystkie animacje byy pynnie odtwarzane
(nisza prdko odtwarzania filmu powoduje, e wywietlanie obrazu nie jest pynne).
Nie jest rwnie zbyt wymagajca, jeli chodzi o parametry komputerw uytkownikw,
ktrzy bd ogldali witryn (wiksza prdko odtwarzania wymaga lepszego sprztu).
4. Otwrz okno Document Properties, wciskajc Ctrl+J (w systemie Windows) lub Cmd+J (w systemie

Mac OS). W polach Dimensions ustaw szeroko filmu na 600 pikseli, a wysoko na 400 pikseli.
Ustaw kolor ta na barw o wartoci szesnastkowej #B4CCE5. Moesz to zrobi klikajc
kolorowy kwadrat i wpisujc j w polu znajdujcym si na prawo od okienka (warto zostaa
okrelona na podstawie modelu witryny stworzonego w programie Adobe Photoshop).
W polu Frame rate wpisz prdko odtwarzania filmu rwn 21 klatek na sekund. Kliknij OK.

Jeli klikniesz przycisk Make Default, program uyje wpisanych ustawie jako wartoci domylnych
dla wszystkich tworzonych dokumentw.
5. Wybierz z menu polecenie File/Save (plik/zapisz) i zapisz plik FLA. W oknie dialogowym

przejd do pulpitu, nastpnie wejd do folderu la_eyeworks, ktry umiecie tam na pocztku
wiczenia, i do katalogu site. Nadaj plikowi nazw master i kliknij Save.

64

MACROMEDIA FLASH MX 2004


Sztuka projektowania

Kolejnym wsplnym elementem wszystkich adowanych plikw SWF jest to. Niezalenie
od tego, ktry plik obecnie oglda uytkownik, w tle znajduje si ten sam obraz. W nastpnym
kroku dodamy go do pliku master.fla.
6. Zmie nazw warstwy 1. na bg, po czym utwrz now warstw i zmie jej nazw na a.
Umiecimy na niej kod w jzyku ActionScript. Warstwa bg bdzie za zawiera (tak, zgade)

obraz wywietlany w tle. Zanim przejdziemy do nastpnego kroku, upewnij si, e zaznaczye
warstw bg.

7. Wcinij Ctrl+R (w systemie Windows) lub Cmd+R (w systemie Mac OS), aby zaimportowa

na scen nowy element. W oknie dialogowym Import przejd do pulpitu, nastpnie wejd do
folderu la_eyeworks, resources, a nastpnie bitmaps. Zaznacz bitmap o nazwie bg i kliknij przycisk
Open (w systemie Windows) lub Import (w systemie Mac OS), aby umieci j na scenie.

Bitmapa bg (ktra posiada taki sam rozmiar jak scena 600400 pikseli) powinna zosta
automatycznie wyrwnana z prawym grnym rogiem sceny. Moesz to sprawdzi: otwrz
panel Info (Ctrl+I w systemie Windows lub Cmd+I w systemie Mac OS) i upewniaj si, e punkt,
wzgldem ktrego jest ustalana pozycja symbolu jest umieszczony w prawym grnym rogu,
a jego obie wsprzdne maj warto 0.

ROZDZIA 3.
Zaczynamy

65

8. Zablokuj warstw bg i kliknij pierwsz klatk warstwy a (akcje). Otwrz panel Actions (F9).

Zanim bdziesz mg wykorzysta klas MovieClipLoader, musisz utworzy jej instancj


za pomoc jzyka ActionScript. Przypomina to sposb uycia obrazka najpierw naley
go narysowa, przekonwertowa do postaci symbolu, a nastpnie umieci na scenie. Klasa
MovieClipLoader musi by uyta w podobny sposb. Najpierw naley utworzy jej instancj
(nazywan obiektem). Zajmiemy si tym w nastpnym kroku.
9. W panelu Actions wpisz nastpujcy wiersz kodu:
var myMCL

Jest to instrukcja, ktra kae programowi Flash MX 2004 utworzy zmienn o nazwie myMCL.
Tekst var jest skrtem od variable (zmienna). Pozwala on rwnie na okrelenie zakresu
zmiennej (ang. variable scope), ktrym zajmiemy si w dalszej czci ksiki. Tak wic jeli
zobaczysz przed jak nazw sowo var (w tym przypadku przed cigiem znakw myMCL),
oznacza to, e tworzona jest zmienna o podanej nazwie. Cho jego uycie nie zawsze jest
konieczne, korzystanie z niego jest uwaane za dobry nawyk. Jest ono rwnie konieczne
w przypadku przyporzdkowywania zmiennej okrelonego typu (czym zajmiemy si
za chwil). W nastpnym kroku przyporzdkujemy zmiennej obiekt klasy MovieClipLoader.
W ten sposb, gdy bdziemy chcieli wyda mu jaki rozkaz, bdziemy si do niego odnosi
uywajc nazwy zmiennej, myMCL.
10. Po deklaracji zmiennej myMCL wpisz:
:MovieClipLoader

Gdy bdziesz wpisywa powyszy cig znakw, zauwaysz, e pojawi si przewijane pole
tekstowe, zawierajce rne opcje. Jeli nie chcesz go wpisywa, moesz wybra t opcj z listy
i wcisn Enter lub Return. Flash MX 2004 wstawi wwczas to sowo. Pokazana lista jest
przykadem podpowiedzi do kodu, czyli prby pomocy ze strony programu. Na podstawie
tego, co piszesz, Flash MX 2004 wykrywa, e uywasz deklaracji typu (okrelonej za pomoc
dwukropka) pozwalajcej na ustawienie typu zmiennej myMCL. W tym przypadku informujesz
go, e typem ma by MovieClipLoader. Gdyby pomin t deklaracj, skrypt nadal by dziaa.
Jednak po wprowadzeniu do programu Flash MX 2004 jzyka ActionScript 2.0 zaleca si
stosowanie dokadnych okrele typw, poniewa jest to zgodne z jego specyfikacj. Innymi
sowy, korzystanie z okrele typw jest zalecane przez firm Macromedia, poniewa uznaje
si je za dobry nawyk programistyczny. Gwnie dlatego bdziemy z nich korzysta
w wiczeniach.
66

MACROMEDIA FLASH MX 2004


Sztuka projektowania

11. Dopisz na kocu wiersza:


= new MovieClipLoader();

W ten sposb kaesz Flashowi stworzy now instancj obiektu MovieClipLoader i umieci
j w zmiennej myMCL. W przyszoci, jeli bdziesz chcia, aby Flash wykona jak czynno,
wystarczy, e odniesiesz si do tego obiektu, uywajc nazwy zmiennej.
Gratulacje! Wanie utworzye nowy obiekt typu MovieClipLoader, ktry wkrtce bdzie
mg by uywany do adowania plikw SWF i JPG do gwnej zawartoci strony. Nawet
o tym nie wiedzc, dodae projektowi sporo nowej funkcjonalnoci. Podobnie jak
umieszczenie w projekcie klipu automatycznie daje moliwo wykorzystania jzyka
ActionScript do modyfikacji jego metod i waciwoci, takich jak widoczno, przezroczysto,
obrt itp., dodanie obiektu MovieClipLoader daje moliwo korzystania z jego wbudowanych
metod i nasuchiwaczy (listenerw) do adowania plikw SWF i JPG. Umoliwia to rwnie
uzyskiwanie raportw pokazujcych postpy w ciganiu itp. Dodanie tego jednego wiersza
kodu dao wicej korzyci, ni sobie wyobraasz. Poznasz je w kolejnych wiczeniach.
Teraz, cho stworzye nowy obiekt typu MobieClipLoader, nadal potrzebujesz kilku wierszy
kodu w jzyku ActionScript, aby zacz on dziaa. Gdy bdzie on gotowy, bdziesz mia
moliwo wykorzystania go do wielu czynnoci, takich jak adowanie pliku SWF. Jednak
jeli chcesz dowiedzie si wicej na temat procesu adowania, np. jaki fragment pliku pozosta
jeszcze niezaadowany lub co naley zrobi po jego zaadowaniu itp., nie pytaj o to tego
obiektu. Aby uzyska informacje na temat tego, co aktualnie robi MovieClipLoader, musisz
mu przyporzdkowa obiekt nasuchujcy (listener). Odpowiada on na rne zdarzenia
wywoywane przez t klas. Na przykad jeli kaesz obiektowi typu MovieClipLoader
zaadowa plik SWF, zacznie on to robi, a gdy skoczy, wyle parametr (success) do obiektu
nasuchujcego (listenera) o nazwie onLoadComplete (jeli taki dodae), przyporzdkowanego
do obiektu MovieClipObject, do ktrego jest adowany plik. Obiektowi nasuchujcemu
(listenerowi) moesz przypisa skrypt, ktry okreli, co ma si zdarzy po kompletnym
zaadowaniu pliku.
12. Kliknij na kocu pierwszego wiersza kodu i wcinij klawisz Enter (w systemie Windows)

lub Return (w systemie Mac OS), aby utworzy nowy. Nastpnie napisz:
var myListener:Object = new Object();

Ta instrukcja kae Flashowi MX 2004 utworzy now zmienn o nazwie myListener


(ktrej typ zostaje okrelony jako obiekt) i umieci w niej nowy obiekt. Do tego momentu
zmienna myListener posiada przyporzdkowany zwyky obiekt. Nie reaguje on jeszcze
na zdarzenia wywoywane przez klas MovieClipLoader. Jednak za chwil go tego nauczymy.
ROZDZIA 3.
Zaczynamy

67

13. Kliknij na kocu drugiego wiersza kodu i wcinij kilka razy klawisz Enter (w systemie

Windows) lub Return (w systemie Mac OS). Flash ignoruje puste wiersze, wic moesz
to zrobi dowoln liczb razy. Nastpnie napisz:
myMCL.addListener(myListener);

Ten wiersz kodu przyporzdkowuje obiekt nasuchujcy (listener) obiektowi klasy


MovieClipLoader o nazwie myMCL. Od tego momentu za kadym razem, gdy obiekt myMCL
wywoa jakie zdarzenie (zacznie lub skoczy adowa plik itp.), przyporzdkowany mu
obiekt nasuchujcy (listener) spowoduje uruchomienie okrelonego skryptu.
Moesz doda dowoln liczb obiektw nasuchujcych (listenerw) reagujcych na zdarzenia
wywoywane przez ten obiekt. Kilka z nich zobaczysz w tym i w nastpnych rozdziaach.
Gratuluj! Wanie utworzye pierwszy skrypt dla obiektu klasy MovieClipLoader! Pniej
zobaczysz, e mona z nim zrobi duo wicej. Aby nie zuy zbyt wielu szarych komrek
naraz, kolejne moliwoci bdziemy jej dodawa stopniowo. W rozdziale 8. Tworzenie
preloadera umiecimy w nim preloader. Jednak w tej chwili kaemy jej tylko adowa pliki
SWF i JPG. Zajmiemy si tym w nastpnym punkcie.
14. Ukryj lub zminimalizuj okno programu Flash MX 2004. Nastpnie otwrz folder la_eyeworks,

ktry umiecie na pulpicie. Wejd do katalogu site i dwukrotnie kliknij plik splash.swf
(system operacyjny moe nie pokazywa rozszerzenia pliku). Powinno to spowodowa
automatyczne otworzenie animacji, ktr zawiera, w programie Macromedia Flash Player 7,
dostarczanym wraz z programem instalacyjnym Flasha MX 2004. W nastpnym punkcie
wpiszemy wiersz kodu, ktry kae obiektowi MovieClipLoader umieszczonemu w pliku
master.fla zaadowa plik splash.swf.

68

MACROMEDIA FLASH MX 2004


Sztuka projektowania

15. Zamknij plik splash.swf i spjrz na zawarto folderu site. Zauwa, e znajduje si w nim
rwnie plik master.fla (w ktrym umieszczony jest skrypt uywajcy klasy MovieClipLoader).

Po zaadowaniu zasobw do projektu w programie Flash MX 2004 naley zwrci uwag


na to, gdzie s one umieszczone wzgldem pliku, ktry suy do ich zaadowania.
16. W programie Flash MX 2004 upewnij si, e nadal zaznaczona jest pierwsza klatka kluczowa

warstwy a oraz e otwarty jest panel Actions (F9). Nastpnie kliknij koniec ostatniego wiersza
kodu i wcinij kilka razy klawisz Enter (w systemie Windows) lub Return (w systemie Mac OS),
tworzc przerw (dziki temu uzyskujemy przestrze pomidzy wanymi czciami skryptu).
17. Napisz:
myMCL.loadClip("splash.swf", 5);

Ten wiersz kae obiektowi typu MovieClipLoader (myMCL) zaadowa plik splash.swf
do poziomu 5. Prawdopodobnie wiesz ju, e adujc go do innego pliku SWF, masz dwie
moliwoci: moesz umieci go w klipie filmowym lub na okrelonym poziomie. Poziom
jest czym, co przypomina niewidoczn warstw, znajdujc si nad filmem, do ktrego
adowana jest nowa zawarto. Umoliwia on skonfigurowanie kolejnoci uoenia nowego
obiektu wzgldem istniejcej zawartoci filmu. W tym przypadku plik splash.swf zostaje
zaadowany na poziom 5. Poziom 2. znajduje si nad 1., 3. nad 2. itd. Film gwny, do ktrego
plik jest adowany, jest okrelany jako poziom 0 (w jzyku ActionScript _level0).
W momencie adowania zasobw (plikw SWF, JPG itp.) do okrelonego poziomu, moesz wykorzysta dowolny poziom, od 0 do 2 130 706 429 (tak, to ponad dwa miliardy). Jak widzisz, mamy
do dyspozycji olbrzymi ilo miejsca.
ROZDZIA 3.
Zaczynamy

69

Uwaga
Kompatybilno wsteczna klasy MovieClipLoader
Naley pamita o tym, e obiekt typu MovieClipLoader, taki jak ten, ktry wanie utworzye, nie zawsze jest
kompatybilny z wczeniejszymi wersjami pluginu umoliwiajcego odtwarzanie plikw programu Flash. Bdzie on
dziaa tylko w najnowszych wersjach programu Flash Player. W tej ksice nauczysz si tworzy wykrywacz pluginu,
ktry pozwoli na identyfikacj uytkownikw korzystajcych z jego wczeniejszych wersji. Przekierowujc ich do innej
strony lub witryny, zapobiega si otwieraniu filmu przez osoby, ktre nie posiadaj kompatybilnej wersji pluginu.
Jeli chcesz (lub wymaga tego Twj klient) zapewni kompatybilno z wczeniejszymi wersjami pluginu, musisz uywa funkcji loadMovie (lub loadMovieNum). Ksika dotyczy najnowszej wersji programu Flash i dostpnych
w niej funkcji, dlatego zawiera informacje na temat wielu funkcji, ktre nie s kompatybilne z wczeniejszymi wersjami
pluginu. Jednak ze wzgldu na to, e klasa MovieClipLoader jest integraln czci metody tworzenia witryn, z ktrej wanie korzystamy, uznaem, e powiniene zdawa sobie spraw z wystpujcego w jej przypadku braku kompatybilnoci wstecznej.

Uwaga
Nowe reguy bezpieczestwa
W programie Macromedia Flash 7 Player zostay wprowadzone nowe reguy bezpieczestwa, ktre uniemoliwiaj
adowanie do pliku SWF wszelkiego rodzaju danych (zmiennych, plikw SWF i JPG itd.) ze rde znajdujcych
si poza domen, w ktrej plik ten si znajduje. Innymi sowy, jeli Twj plik znajduje si pod adresem http://www.
mojadomena.com, nie moesz do niego zaadowa danych z innego serwera, dostpnego pod adresem http://www.
innadomena.com. eby to umoliwi, musisz utworzy tzw. plik regu midzydomenowych. Jest to prosty plik
XML (o nazwie crossdomain.xml), przechowywany w gwnym katalogu serwera zawierajcego dane, ktre
chcesz zaadowa. Znajduje si w nim lista adresw URL, ktre mog korzysta z danych umieszczonych na
serwerze. Oto przykadowa zawarto takiego pliku:
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/
cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="www.company.com" />
</cross-domain-policy>

Jeli sprbujesz zaadowa do projektu stworzonego w programie Flash MX 2004 dane, ktre znajduj si w innej
domenie, nie uywajc pliku regu midzydomenowych, w momencie, gdy uytkownik odwiedzi Twoj witryn,
zobaczy okno dialogowe z pytaniem, czy chce zaadowa dane z innego serwera. Oczywicie jako projektant nie
chcesz, eby byo ono wywietlane.
Wicej informacji na temat regu bezpieczestwa w pluginie Macromedia Flash 7 oraz pliku regu midzydomenowych znajdziesz na stronie WWW firmy Macromedia (niestety, tylko w jzyku angielskim) pod adresem:
http://www.macromedia.com/support/flash/ts/documents/loadvars_security.htm
W najnowszej (powstaej w czasie pisania tej ksiki) wersji programu Macromedia Flash Player, czyli
w 7.0.r19, zostaa dodana nowa akcja (System.security.loadPolicyFile) pozwalajca na umieszczenie plikw regu midzydomenowych w innych miejscach na serwerze. Wicej na jej temat przeczytasz pod adresem:
http://www.macromedia.com/devnet/mx/flash/articles/fplayer_security.html

70

MACROMEDIA FLASH MX 2004


Sztuka projektowania

18. Przetestuj film, wybierajc z menu polecenie Control/Test Movie (Kontrola/Testuj Film).

Jak widzisz, plik splash.swf zostaje bez problemu zaadowany do pliku master.swf (w ktrym
znajduje si skrypt wykorzystujcy klas MovieClipLoader). Po umieszczeniu pliku SWF
lub JPG na danym poziomie, jego lewy grny rg (x:0, y:0) jest wyrwnywany z lewym
grnym rogiem gwnego pliku SWF (rwnie x:0, y:0). Dziki temu plik splash.swf jest
idealnie wyrwnany z plikiem master.swf. Jest tak dlatego, e oba dokumenty zostay utworzone
z uyciem tego samego rozmiaru sceny. W ten sposb podczas tworzenia zawartoci plikw
(logo, muzyki, sekcji about us itd.) wiesz, jak wszystkie elementy zostan ustawione wzgldem
gwnego pliku master.swf.
Wiem, e cztery wiersze kodu wpisane w tym wiczeniu mog wydawa si przesad, biorc
pod uwag to, e su one tylko do zaadowania pliku SWF. Pamitaj jednak, e ten kod
bdzie kontrolowa adowanie wszystkich plikw SWF i JPG w caej witrynie firmy L.A.
Eyeworks, nie wspominajc ju o przewagach klasy MovieClipLoader nad star funkcj
loadMovie, ktr ju powiniene zna (wicej informacji na temat rnic pomidzy nimi
znajdziesz w poprzedniej czci, Czym jest MovieClipLoader i czym rni si od loadMovie?).
W ten sposb uzyskae pierwszy dziaajcy przykad wykorzystania klasy MovieClipLoader!
19. Zapisz plik master.fla, wybierajc z menu polecenie File/Save.

W nastpnym wiczeniu nauczysz si uywa niezwykle przydatnej funkcji, pozwalajcej na zmniejszenie rozmiaru pliku: biblioteki wspdzielonej. Jest ona plikiem SWF zawierajcym gar zasobw
symboli, czcionek itp., moliwych do wykorzystania w innych plikach SWF. Jej koncepcja jest
podobna do koncepcji symbolu (podobnie jak on, pozwala na wielokrotne wykorzystywanie tego
samego elementu), z t rnic, e w jej przypadku mamy do czynienia z ca bibliotek elementw
dostpnych dla wielu plikw SWF.

ROZDZIA 3.
Zaczynamy

71

Czym jest biblioteka Wspdzielona?


Widziae ju, jak mona wykorzystywa symbole (symbole graficzne, klipy filmowe itp.) do redukcji rozmiaru pliku, w ktrym jest zapisany film stworzony w programie Flash MX 2004, poprzez
wielokrotne wykorzystywanie identycznych elementw. A jeli podzielimy witryn na kilka czci
i bdziemy je adowa uywajc funkcji loadMovie lub klasy MovieClipLoader (tak jak w tej ksice),
przy czym bdziemy chcieli wykorzysta w kadym z nich ten sam symbol? Lub gdy znajdziemy si
w czsto spotykanej sytuacji, w ktrej wszystkie pliki bd korzystay z tej samej czcionki? Normalnie powinnimy skopiowa symbol do kadego pliku lub w przypadku czcionki osadzi j w kadym
pliku, w ktrym chcemy z niej korzysta. Spowodowaoby to zwikszenie rozmiaru pliku, poniewa
ten sam symbol byby cigany wielokrotnie, podobnie jak czcionka. Co moemy zrobi w takiej
sytuacji? Nie moemy przecie udostpni go kilku plikom SWF, prawda? Nieprawda. Moemy to
zrobi uywajc biblioteki wspdzielonej.
Sama biblioteka wspdzielona nie jest niczym niezwykym. Jest to zwyky plik FLA, ktrego biblioteka jest wypeniona symbolami, czcionkami itp. Rnica pomidzy nim i zwykym plikiem FLA
zaczyna by widoczna w momencie przydzielania nazw poszczeglnym elementom. Zrobimy to
w nastpnym wiczeniu. Jeli chcesz udostpni jeden z elementw innemu plikowi FLA, wystarczy,
e przecigniesz go do jego biblioteki. Flash MX 2004 automatycznie utworzy cze do elementu
wspdzielonego (ktre jest po prostu odnonikiem do obiektu znajdujcego si w bibliotece wspdzielonej), pozwalajc Ci na wykorzystanie go w swoim projekcie. Moe on by udostpniony dowolnej liczbie plikw.
Element pochodzcy z biblioteki wspdzielonej nie zostaje osadzony w pliku, w ktrym zosta
umieszczony. Pozostaje w niej nadal. W odpowiednim pliku znajduje si jedynie odnonik wskazujcy jego pooenie w bibliotece! Pod tym wzgldem element biblioteki wspdzielonej przypomina
symbol (element, ktry mona wykorzystywa wielokrotnie). Rni si od niego jedynie moliwoci
wielokrotnego wykorzystywania elementw w rnych plikach SWF. Czy to nie potne narzdzie?

wiczenie 2. Tworzenie i przygotowywanie


biblioteki wspdzielonej
W tym wiczeniu utworzymy bibliotek wspdzielon. Bdzie ona zawieraa elementy, ktre wykorzystamy w nastpnych wiczeniach.
1. Otwrz plik master.fla (ktry utworzye w ostatnim wiczeniu), jeli go przypadkowo

zamkne, a nastpnie plik shareLib.fla. Oba znajduj si w folderze site umieszczonym


w katalogu la_eyeworks na Twoim pulpicie (patrz pierwszy rysunek na nastpnej stronie).
2. Otwrz bibliotek pliku shareLib.fla. Zobaczysz w niej tylko jeden obiekt przycisk o nazwie

btn.arrow. Nie martw si. Za chwil umiecimy w niej wicej elementw (patrz drugi rysunek
na nastpnej stronie).

72

MACROMEDIA FLASH MX 2004


Sztuka projektowania

Gwnym zastosowaniem biblioteki wspdzielonej jest udostpnianie zasobw moliwych


do wykorzystania w wielu rnych plikach SWF. Jeli dany element jest wykorzystywany
tylko raz, w jednym pliku, umieszczanie go w takiej bibliotece nie ma sensu.
3. Kliknij prawym przyciskiem myszy (w systemie Windows) lub kliknij z wcinitym

klawiszem Ctrl (w systemie Mac OS) symbol btn.arrow znajdujcy si w bibliotece sharedLib,
a nastpnie wybierz z menu polecenie Linkage (patrz pierwszy rysunek na nastpnej stronie).
4. Spowoduje to otworzenie okna dialogowego Linkage Properties. Moesz w nim okreli sposb

udostpnienia elementu znajdujcego si w bibliotece oraz jego nazw. Najpierw kliknij


opcj Export for ActionScript. Spowoduje to automatyczne zaznaczenie pola Export in first
frame. Nastpnie wpisz w polu Identifier nazw arrowBtn. Moe ona by absolutnie dowolna.
Jednak podobnie jak w przypadku nazwy instancji symbolu nie powinna si zaczyna od
liczby. Nie moe te zawiera spacji ani znaku specjalnego, takiego jak ?, * itp. Na koniec
zaznacz pole Export for runtime sharing. Spowoduje to automatyczne wypenienie pola URL
nazw, ktr otrzyma plik w momencie publikacji, czyli shareLib.swf (patrz drugi rysunek
na nastpnej stronie).

ROZDZIA 3.
Zaczynamy

73

Tabela znajdujca si poniej zawiera opis powyszych opcji.


Opcje dostepne w oknie Linkage properties

74

Opcja

Opis

Identifier

Jest to nazwa, ktr naley przypisa kademu z udostpnianych elementw.


Dopuszczalny jest dowolny cig znakw. Nie powinien on jednak zawiera spacji
ani znakw specjalnych, takich jak ?, # itp. Nie moe rwnie zaczyna si cyfr.

AS 2.0 Class

Nazwa klasy w jzyku ActionScript 2.0, ktra ma zosta przyporzdkowana do symbolu.

Export for
ActionScript

Pozwala na manipulowanie elementem za pomoc jzyka ActionScript.

Export for
runtime sharing

Pozwala na wykorzystanie elementu w czasie odtwarzania pliku SWF. Jeli nie zaznaczysz
tej opcji, element nie pojawi si w opublikowanym dokumencie.

Import for
runtime sharing

Ta opcja jest dostpna po wybraniu w dokumencie docelowym polecenia Linkage


dla obiektu pochodzcego z biblioteki wspdzielonej. Jej wyczenie nie pozwala
na wywietlanie elementu w czasie odtwarzania.

Export in first
frame

Powoduje eksport elementu biblioteki wspdzielonej w sposb, ktry umoliwia


korzystanie z niego ju w pierwszej klatce filmu. Jeli nie zaznaczysz tej opcji, bdziesz
mg umieci jego instancj na scenie, w klatce, w ktrej bdziesz go potrzebowa.

URL

To pole zawiera adres w formacie URL, pod ktrym znajduje si plik SWF. Flash MX
2004 automatycznie wpisuje do niego nazw pliku, w ktrym znajduje si biblioteka
wspdzielona. W tym przypadku jest to sharedLib.swf.

MACROMEDIA FLASH MX 2004


Sztuka projektowania

5. Kliknij OK. Symbol jest teraz wspdzielony i moesz go umieszcza w bibliotekach innych

plikw FLA.

Teraz powinnimy utworzy symbol czcionki, ktra ma by udostpniona innym plikom SWF.

6. Kliknij przycisk Library Preferences (waciwoci biblioteki), a nastpnie wybierz z menu

polecenie New Font (nowa czcionka).


Spowoduje to otworzenie okna dialogowego Font Symbol Properties (waciwoci symbolu
czcionki). Moesz w nim wybra czcionk, ktrej symbol chcesz utworzy, i nada jej nazw,
ktra bdzie widoczna w bibliotece. Na licie powiniene widzie czcionki Bitstream, ktre
zainstalowae w rozdziale 2. Od czego powinienem zacz?. W systemie Mac OS X
zobaczysz wicej czcionek Bitstream Vera ni na poniszej ilustracji pochodzcej z systemu
Windows. Windows grupuje rne style, na komputerach Macintosh s one wywietlane
oddzielnie. Oznacza to, e uytkownicy tych dwch systemw bd musieli uy rnych
procedur. Wspomn o tym w nastpnych punktach.

ROZDZIA 3.
Zaczynamy

75

7. Niezalenie od tego, z ktrego systemu korzystasz, wybierz z rozwijanego menu czcionk


Bitstream Vera Sans. W polu Name wpisz Vera. Upewnij si, e nie s zaznaczone opcje Bold,

Italic i Alias text. Rozmiar tekstu nie jest istotny w przypadku sposobu, w jaki wykorzystujemy
czcionki w tej ksice. Dlatego pozostaw go bez zmian i kliknij OK.

Wspaniale! Wanie utworzye symbol w bibliotece. Jest nim caa czcionka! Niele. Nastpnie
dodamy trzy inne czcionki Vera, ktrych bdziemy uywa do tworzenia witryny firmy L.A.
Eyeworks.
8. Powtrz punkt 7., ale w systemie Windows wybierz czcionk Bitstream Vera Sans, a nastpnie

kliknij opcj Bold. W systemie Mac OS wybierz Bitstream Vera Sans Bold. Nie musisz zaznacza
opcji Bold. Niezalenie od tego, z ktrego systemu korzystasz, wpisz w polu Name nazw
VeraBold i kliknij OK.

9. Jeszcze raz powtrz punkt 7., ale w systemie Windows wybierz czcionk Bitstream Vera Sans,

a nastpnie kliknij opcje Bold i Italic. W systemie Mac OS wybierz Bitstream Vera Sans Bold
Oblique. Nie musisz zaznacza opcji Bold i Italic. Niezalenie od tego, z ktrego systemu
korzystasz, wpisz w polu Name nazw VeraBoldOblique i kliknij OK.

10. Jeszcze raz powtrz punkt 7., ale w systemie Windows wybierz czcionk Bitstream Vera Sans,

a nastpnie kliknij opcj Italic. W systemie Mac OS wybierz Bitstream Vera Sans Bold Oblique.
Nie musisz zaznacza opcji Italic. Niezalenie od tego, z ktrego systemu korzystasz, wpisz
w polu Name nazw VeraOblique i kliknij OK.

76

MACROMEDIA FLASH MX 2004


Sztuka projektowania

Super! Teraz gdy zajrzysz do biblioteki pliku sharedLib.fla, zobaczysz, e poza przyciskiem
o nazwie btn.arrow znajduj si w niej rwnie cztery czcionki: Vera, VeraBold, VeraBoldOblique
i VeraOblique. Musisz teraz ustawi dla kadej z nich odpowiednie opcje w oknie Linkage
Properties (tak jak dla symbolu btn.arrow w punktach 3. i 4.), dziki czemu bd one dostpne
dla innych plikw SWF.

11. W bibliotece sharedLib kliknij prawym przyciskiem myszy (w systemie Windows) lub kliknij

z wcinitym klawiszem Ctrl (w systemie Mac OS) symbol czcionki Vera i wybierz z rozwijanego
menu polecenie Linkage. W oknie Linkage Properties zaznacz opcje: Export for ActionScript
(ktra spowoduje automatyczne zaznaczenie pola Export in first frame) i Export for runtime
sharing. Upewnij si rwnie, e w polu Identifier automatycznie pojawi si napis Vera
(czyli nazwa symbolu czcionki), a w polu URL nazwa pliku sharedLib.swf. Kliknij OK.

12. Powtrz powyszy proces dla pozostaych trzech czcionek. Wszystkie ustawienia powinny

by takie same jak w kroku 11., z nastpujcymi wyjtkami: dla czcionki VeraBold wpisz
w polu Identifier identyfikator VeraBold, dla czcionki VeraBoldOblique VeraBoldOblique,
a dla VeraOblique VeraOblique. Uf!
Teraz, gdy skonfigurowae poczenia z symbolami, moesz ich uy w dowolnej liczbie
plikw SWF (w nastpnym rozdziale zobaczysz, jak to zrobi). Du korzyci pync
z korzystania z biblioteki wspdzielonej jest to, e same czcionki s osadzone tylko w pliku
sharedLib. Wszystkie pozostae elementy witryny mog z nich korzysta, ale nie musz ich
przechowywa. Po prostu wykorzystuj one referencje do czcionek w pliku sharedLib.swf.
Pozwala to na znaczn redukcj rozmiaru projektu, poniewa nie ma koniecznoci
osadzania czcionek w kadym pliku, w ktrym s one uyte. Hura!

ROZDZIA 3.
Zaczynamy

77

Ostatni rzecz, ktr musimy zrobi, jest may trik zwizany z bibliotek wspdzielon.
Jednak zanim zaczniemy, powiniene zrozumie, dlaczego istnieje taka konieczno.
W nastpnym rozdziale uyjemy niektrych czcionek w innych plikach SWF. Gdy uytkownik
odwiedzi nasz witryn i zacznie przeglda jej zawarto, to w momencie, gdy po raz
pierwszy bdzie wymagany element pochodzcy z biblioteki, Flash zacznie ciga cay plik,
ktry go zawiera. Niestety nie ciga tylko jednego elementu, lecz ca bibliotek. I cho nie
stanowi to duego problemu, to jednak w przypadku sporej biblioteki moe znacznie
spowolni odtwarzanie filmu lub spowodowa jego zatrzymanie. Najlepiej byoby oczywicie
zaadowa plik sharedLib.swf w sposb kontrolowany, aby uytkownik wiedzia, co si dzieje.
Problem w tym, e zwykle wczeniejsze zaadowanie pliku sharedLib.swf nic nie da (cho logika
sugeruje, e powinno). Program Flash MX 2004 po prostu zaaduje go ponownie w momencie,
gdy uyty zostanie pierwszy element wspdzielony. Zamiast tego utworzymy plik SWF,
ktrego zadaniem bdzie rozpoczcie cigania biblioteki w momencie, w ktrym bdziemy
mogli je kontrolowa. Bdzie on zawiera tylko jeden element biblioteki wspdzielonej. Plik
trigger.swf bdzie adowany na pocztku odtwarzania projektu, z uyciem klasy MovieClipLoader.
Poniewa znajduje si w nim element wspdzielony, spowoduje to rozpoczcie cigania
pliku sharedLib.swf. Dziki temu od tego momentu caa biblioteka wspdzielona bdzie
dostpna dla wszystkich plikw SWF zawartych w witrynie.
Po pierwsze, musimy utworzy plik uruchamiajcy, o nazwie trigger.fla, ktry wykorzysta
jeden z elementw biblioteki do rozpoczcia cigania pliku sharedLib.swf.
13. Zapisz zmiany w pliku sharedLib.fla, a nastpnie wybierz z menu polecenie File/Publish

(plik/publikuj), aby wyeksportowa plik SWF do katalogu, w ktrym znajduje si biblioteka


(Pulpit\la_eyeworks\site).
14. Zamknij plik sharedLib.fla.
15. Utwrz nowy, pusty plik FLA, wciskajc Ctrl+Alt+N (w systemie Windows) lub Cmd+Opt+N

(w systemie Mac OS).


Nie musisz si przejmowa rozmiarami ani kolorem ta tego pliku, poniewa uyjemy go
tylko do uruchomienia adowania biblioteki wspdzielonej. Uytkownik nawet nie bdzie
wiedzia o tym, e zostaje on zaadowany. Po zakoczeniu adowania biblioteki plik trigger.swf
zostanie zastpiony plikiem splash.swf.
16. Najpierw zapisz nowy plik FLA, wybierajc z menu polecenie File/Save As. Umie go
w folderze Pulpit\la_eyeworks\site, nadajc mu nazw trigger. Kliknij przycisk Save.
17. Otwrz bibliotek sharedLib, wybierajc z menu polecenie File/Import/Open External Library

(plik/importuj/otwrz bibliotek zewntrzn). W oknie dialogowym Open as Library


dwukrotnie kliknij plik sharedLib. Spowoduje to otworzenie biblioteki pliku sharedLib.fla.
Plik uruchamiajcy wymaga tylko jednego symbolu z biblioteki wspdzielonej.
Po zaadowaniu pliku trigger.swf i stwierdzeniu, e na scenie znajduje si taki element,
rozpocznie ciganie (i buforowanie) caej biblioteki!
18. Przecignij przycisk btn.arrow do przestrzeni roboczej (szarego obszaru wok sceny) pliku

trigger.fla. Powinien si znajdowa poza scen, poniewa ma by niewidoczny po zaadowaniu


dokumentu do pliku master.swf.
78

MACROMEDIA FLASH MX 2004


Sztuka projektowania

Problem z plikiem master.fla polega na tym, e obecne ustawienie jego listwy czasowej
powoduje adowanie wszystkich plikw w pierwszej klatce kluczowej. Teraz, gdy utworzye
plik, ktry powoduje zaadowanie biblioteki wspdzielonej, chcesz, eby zakoczyo si ono
przed wywietleniem zawartoci pliku splash.swf. Poniewa biblioteka jest bardzo wanym
elementem witryny (w kocu zawiera czcionki, ktre bd uywane niemal we wszystkich
plikach SWF), powinna by adowana jako pierwsza. Dlatego powinnimy wstawi przerwy
pomidzy ciganiem poszczeglnych plikw. Zawarto pocztkowa (trigger.swf, sharedLib.swf
itp.) zostanie zaadowana od razu w pierwszej klatce kluczowej. Nastpnie gowica przejdzie
do klatki 10., w ktrej nastpi adowanie nastpnego elementu, logo o nazwie splash.swf.
Musisz jednak wstawi akcj, ktra rozpocznie odtwarzanie pliku master.swf po zakoczeniu
adowania plikw trigger.swf i biblioteki wspdzielonej, czyli pliku sharedLib.swf.
19. Zmie nazw pierwszej warstwy na shared lib asset. Nastpnie utwrz now warstw i nazwij j a.

20. Zaznacz pierwsz klatk kluczow warstwy a i otwrz panel Actions (F9).
21. Wstaw akcj, ktra rozpocznie odtwarzanie listwy czasowej pliku master.swf, poprzez

kliknicie panelu Actions i umieszczenie w nim instrukcji:


_level0.play();

Powoduje ona rozpoczcie odtwarzania listwy czasowej pliku master.swf (_level0). Oczywicie
jest ona wykonywana po cakowitym cigniciu pliku trigger.swf. Ale poniewa plik ten zawiera
rwnie element pochodzcy z biblioteki wspdzielonej, przez co rozpoczyna ciganie pliku
sharedLib.swf, akcja zostanie wykonana dopiero w chwili, gdy oba pliki zostan zaadowane. Uf.
Teraz musimy tylko zapisa zmiany w pliku i wyeksportowa go do formatu SWF.
Aby unikn zamiecania folderu site, powiniene wyczy tworzenie dodatkowego pliku
HTML w momencie publikacji pliku FLA.

ROZDZIA 3.
Zaczynamy

79

22. Wybierz z menu polecenie File/Publish Settings (Plik/Ustawienia publikacji). W oknie dialogowym

wycz opcj HTML. Dziki temu zapobiegniesz tworzeniu pliku trigger.html w momencie
publikacji dokumentu. Jest on niepotrzebny, poniewa plik trigger.swf bdzie adowany
bezporednio do pliku master.swf.

23. Kliknij przycisk Publish. Spowoduje to opublikowanie pliku trigger.swf w folderze site (w miejscu,

w ktrym znajduje si plik trigger.fla). Nastpnie kliknij OK, aby zamkn okno dialogowe
Publish Settings.
24. Zapisz dokonane zmiany, wybierajc z menu polecenie File/Save. Nastpnie zamknij plik

trigger.fla, uywajc polecenia File/Close (moesz rwnie uy skrtu klawiszowego Ctrl+W


w systemie Windows lub Cmd+W w systemie Mac OS).
Tymczasem na listwie czasowej pliku master.fla wszystkie akcje nadal znajduj si w pierwszej
klatce kluczowej. W nastpnych kilku krokach przeniesiemy moment, w ktrym adowany
jest plik splash.swf, do jej dalszej czci. Kaemy rwnie obiektowi MovieClipLoader,
znajdujcemu si w pliku master.fla, zaadowa plik trigger.swf. Oczywicie posuy on
do rozpoczcia adowania biblioteki wspdzielonej poprzez uycie jednego z elementw,
ktre zawiera. Na koniec stworzymy rwnie komunikat o adowaniu filmu, aby uytkownik
nie musia patrze na pust stron w czasie, gdy cigane s pliki trigger.swf i sharedLib.swf.
25. Upewnij si, e masz otwarty plik master.fla (jeli go zamkne, moesz otworzy go

ponownie, wchodzc do folderu Pulpit\la_eyeworks\site i dwukrotnie klikajc jego nazw).


Zaznacz pierwsz klatk kluczow warstwy a i otwrz panel Actions.
26. Kliknij koniec wiersza myMCL.loadClip("splash.swf", 5); i wcinij Enter (w systemie

Windows) lub Return (w systemie Mac OS), aby przej do nastpnej linii. Nastpnie zaaduj
plik trigger.swf do poziomu 5., wpisujc:
myMCL.loadClip("trigger.swf", 5);

80

MACROMEDIA FLASH MX 2004


Sztuka projektowania

Poniewa plik trigger.swf nie ma adnych widocznych elementw (zawiera jedynie przycisk
z biblioteki wspdzielonej, umieszczony poza obszarem roboczym), po jego zaadowaniu
scena pliku master.swf bdzie pusta. Gdy program Macromedia Flash Player 7 wykryje, e plik
trigger.swf uywa referencji do elementu pochodzcego z biblioteki wspdzielonej, rozpocznie
ciganie (i buforowanie) jej zawartoci. Po kompletnym cigniciu pliku, ktry j zawiera
(sharedLib.swf), bdziesz mg uy dowolnego, pochodzcego z niej elementu. Super!
Prawdopodobnie zauwaye, e plik trigger.swf jest adowany na ten sam poziom, co plik
splash.swf, czyli _level5. Dzieje si tak dlatego, e suy on jedynie do cignicia biblioteki
wspdzielonej. Gdy skoczy, nie jest ju potrzebny. Wtedy zostaje usunity, a w jego miejsce
jest adowany plik splash.swf. To ma by wdziczno? ;-) Cho adowanie obu dokumentw
do tego samego poziomu nie jest problemem, to zrobienie tego w tym samym czasie moe
ju nim by. Przy obecnym skrypcie po rozpoczciu adowania pliku splash.swf zostaje on
od razu usunity i zastpiony plikiem trigger.swf. W ten sposb uytkownik nigdy nie zobaczy
pierwszego z nich. Plik splash.swf powinien wic by adowany po cakowitym cigniciu
i zakoczeniu dziaania pliku trigger.swf i co za tym idzie, po zaadowaniu biblioteki
wspdzielonej. W nastpnych kilku punktach zajmiemy si zmian tej kolejnoci.
27. Kliknij klatk 10. warstwy a i wstaw now klatk kluczow, wciskajc F6. Nastpnie, aby bya
w niej rwnie widoczna warstwa bg, zaznacz jej klatk 10. i dodaj dodatkowe klatki, wciskajc

klawisz F5.

W klatce kluczowej z numerem 10, znajdujcej si na warstwie a, wstawimy akcj, ktra


rozpocznie adowanie pliku splash.swf. Powd, dla ktrego bdzie on adowany dopiero
wtedy, jest taki, e chcemy, eby by on adowany po cakowitym cigniciu pliku trigger.swf
(ktre ma miejsce w klatce 1.) i biblioteki wspdzielonej. Gdy to nastpi, wykonana zostanie
akcja _level0.play();, przyporzdkowana pierwszej klatce kluczowej pliku trigger.swf, po
czym w klatce 10. zostanie odtworzony plik master.swf. Oczywicie musi on zosta zatrzymany
w jego pierwszej klatce kluczowej, wic w nastpnych kilku punktach dodamy rwnie akcj,
ktra to spowoduje. W rozdziale 12. Menu gwne poznasz kolejny powd, dla ktrego
rozpoczcie adowania pliku splash.swf jest tak wane.
28. Kliknij klatk kluczow z numerem 1, znajdujc si na warstwie a i otwrz panel Actions (F9).
Nastpnie zaznacz wiersz myMCL.loadClip("splash.swf", 5);, przecigajc po nim mysz

i klikajc jej prawym przyciskiem (w systemie Windows) lub z wcinitym klawiszem Ctrl
(Mac). W menu, ktre si pojawi, wybierz polecenie Cut. Spowoduje to wycicie akcji z klatki
numer 1 i umieszczenie jej w schowku, co umoliwi jej pniejsze wklejenie w innym miejscu.

ROZDZIA 3.
Zaczynamy

81

29. Zaznacz klatk kluczow z numerem 10 (ktr dodae w punkcie 27.), znajdujc si na
warstwie a i otwrz panel Actions. Nastpnie kliknij prawym przyciskiem myszy (w systemie

Windows) lub z wcinitym klawiszem Ctrl (w systemie Mac OS) i z wybierz z rozwijanego
menu polecenie Paste. Spowoduje to wklejenie akcji myMCL.loadClip("splash.swf", 5);
pochodzcej z klatki 1. do klatki 10.

Poniewa nie chcemy, eby te akcje byy wykonywane w sposb cigy, co moe nastpi
po zaptleniu gowicy, musimy umieci w klatce 10. rwnie akcj stop().
30. Kliknij na lewo od wiersza myMCL.loadClip("splash.swf", 5); i wcinij Enter (w systemie

Windows) lub Return (w systemie Mac OS), aby wstawi nad nim przerw. Nastpnie kliknij
pierwszy pusty wiersz w panelu Actions i wpisz akcj:
stop();

Gdy gowica dojdzie do klatki 10., film zostanie zatrzymany. Wtedy obiekt typu
MovieClipLoader zaaduje do poziomu 5. plik splash.swf, zastpujc nim plik trigger.swf
zaadowany w klatce 1. Aby nie rozpoczo si automatyczne odtwarzanie pliku master.swf
(chcemy, eby nastpio ono po kompletnym zaadowaniu poprzednich plikw), musimy
umieci w klatce 1. jeszcze jedn akcj stop().
31. Kliknij klatk 1. warstwy a. Nastpnie kliknij mysz przed pierwszym wierszem kodu, var
myMCL:MovieClipLoader = new MovieClipLoader(); i wcinij Enter (w systemie Windows)

lub Return (w systemie Mac OS), aby wstawi nowy wiersz. Kliknij go i dodaj akcj:
stop();

82

MACROMEDIA FLASH MX 2004


Sztuka projektowania

Teraz odtwarzanie pliku master.swf zostanie zatrzymane a do momentu, gdy pliki trigger.swf
i sharedLib.swf zostan cakowicie cignite i uruchomi akcj, ktra sprawi, e rozpoczcie
odtwarzania pliku master.swf stanie si moliwe:
_level0.play();

Cho jeszcze nie skoczylimy, jest to dobry moment na przetestowanie dotychczasowych


wynikw pracy.
32. Zapisz zmiany dokonane w pliku master.fla, wybierajc z menu polecenie File/Save.

Nastpnie przetestuj film, klikajc polecenie Control/Test Movie.


Gdy pojawi si okno Preview, w cigu poowy sekundy powiniene zobaczy logo firmy.
Cho dobrze jest zobaczy, e dziaa ono prawidowo, tak naprawd nie wiesz, czy biblioteka
zostaa zaadowana i czy plik trigger.swf waciwie wykona swoje zadanie. Aby dowiedzie si
wicej na temat procesu adowania oraz tego, jak moe wyglda witryna, jeli uytkownik
posiada wolny modem, uyjemy narzdzia Bandwidth Profiler wraz z funkcj o nazwie Simulate
Download (w poprzednich wersjach programu Flash funkcja ta bya nazwana show streaming).
33. W czasie, gdy nadal ogldasz podgld pliku master.swf, wybierz z menu polecenie View/

Bandwidth Profiler. Spowoduje to podzielenie okna na dwie czci. Dolna zawiera podgld
pliku SWF, grna narzdzie Bandwidth Profiler.
Narzdzie Bandwidth Profiler, jak ju zapewne wiesz, pozwala na ledzenie iloci danych
wysyanych w kadej klatce w sytuacji, gdy uytkownik oglda film przez internet. Pozwala
rwnie na sprawdzenie, jak bdzie przebiegao ciganie pliku przy rnych szybkociach
cza internetowego. W przypadku uycia akcji loadMovie, lub jak w naszym przypadku
klasy MovieClipLoader, moliwe jest rwnie sprawdzenie, ktre zasoby s w danym
momencie cigane i ile czasu zajmie ich adowanie.
Najpierw musimy udostpni oknu narzdzia Bandwidth Profiler wicej przestrzeni, abymy
mogli cokolwiek zobaczy.
34. Powiksz okno Preview (podgld) na ca wysoko monitora. Nastpnie przecignij poziomy

pasek w d tak, aby widzia zawarto pliku SWF, ale mia wicej przestrzeni dla okna
narzdzia Bandwidth Profiler. Pniej przesu pionowy pasek jak najdalej w prawo. W ten
sposb zmienisz ukad okien w sposb, ktry pozwoli na uzyskanie moliwie najwikszej
przestrzeni dla wywietlania statystyk. Wanie na niej bdziesz mg zobaczy, ktre zasoby
s adowane i jaki jest postp w ich ciganiu (patrz pierwszy rysunek na nastpnej stronie).
Teraz, gdy ustawie okno Preview, musisz wybra szybko modemu dla naszego testu.
35. Wybierz z menu polecenie View/Download Settings/56K (4.7 KB/s). Jak widzisz, masz do

wyboru kilka szybkoci, ktre moesz przetestowa. Moesz rwnie utworzy wasn,
wybierajc polecenie Customize. Wybrae jednak najczciej spotykan szybko poczenia
wskopasmowego: modem 56k. Teraz, gdy kaesz Flashowi odtwarza plik SWF, bdzie on
udawa, e ciga go z internetu przez modem 56k. wietnie! (Patrz drugi rysunek
na nastpnej stronie).
36. Wybierz z menu polecenie View/Simulate Download.

ROZDZIA 3.
Zaczynamy

83

Obserwuj okno Bandwidth Profiler. Bd w nim pokazane cigane zasoby oraz postp w ich
adowaniu. Zobaczysz, e plik sharedLib.swf zaczyna by cigany niemal natychmiast. Po jego
zaadowaniu, w sekcji State zaobserwujesz szybkie przejcie do klatki 10. i odtworzenie pliku
splash.swf. Niesamowite! Jedynym problemem zwizanym z aktualnym ustawieniem jest to,
e uytkownik w czasie adowania w tle pliku sharedLib.swf musi siedzie i patrze na pusty
ekran. W tym przypadku biblioteka wspdzielona jest stosunkowo maa (44 KB), jednak nie
zawsze tak jest. Aby uytkownik wiedzia, co si dzieje, powiniene umieci w filmie komunikat,
ktry bdzie go o tym informowa. Dziki temu nikt nie bdzie myla, e witryna nie dziaa
(patrz pierwszy rysunek na nastpnej stronie).
37. Zamknij okno Preview.
38. Kliknij najnisz warstw, o nazwie bg, i dodaj now. Zmie jej nazw na loading message.
Jest to warstwa, ktra bdzie zawieraa tekst loading assets (patrz drugi rysunek

na nastpnej stronie).
84

MACROMEDIA FLASH MX 2004


Sztuka projektowania

39. Wybierz narzdzie Text i kliknij warstw loading message. Nastpnie w oknie Properties Inspector

wybierz opcj Static Text, czcionk _sans (znajdujc si na samej grze listy czcionek w systemie
Windows lub na samym dole w systemie Mac OS), rozmiar 11 i kolor czarny. Upewnij si, e
zaznaczone s opcje Align Center i Alias Text. Pozwalaj one na wpisanie komunikatu z uyciem
czcionki systemowej, _sans. Jak ju zapewne wiesz, nie jest ona osadzana w publikowanym pliku
SWF, lecz kae komputerowi wykorzysta czcionk, ktra jest ju zainstalowana w systemie.
Podobnie dziaa wywietlanie tekstu na stronach WWW opartych na jzyku HTML.

W programie Flash MX 2004 znajduje si bd zwizany z narzdziem Text. Czasem (pisz czasem, poniewa nie zdarza si to zawsze) po jego wybraniu zawarto okna Properties Inspector nie
jest aktualizowana i nie pozwala na wybranie zwizanych z nim opcji. Jeli zdarzy Ci si taka
sytuacja, to aby mie do nich dostp, wybierz narzdzie Text i kliknij mysz na scenie. Cho spowoduje to utworzenie pola tekstowego opartego na poprzednich ustawieniach, zaktualizuje rwnie zawarto okna Properties Inspector. Wwczas bdziesz mg usun pole i ustawi odpowiednie opcje.
Chcemy uy czcionki systemowej, poniewa dziki temu tekst komunikatu zostanie
wywietlony od razu, bez potrzeby cigania dodatkowych czcionek. W ten sposb
ju od momentu zaadowania pliku uytkownik bdzie wiedzia, co si dzieje.
40. Kliknij na scenie i napisz loading assets. Jest to krtki komunikat, ktry uytkownik

bdzie widzia w czasie oczekiwania na zakoczenie adowania pliku sharedLib.swf.

ROZDZIA 3.
Zaczynamy

85

41. Wcinij klawisz Esc, aby wyj z trybu edycji tekstu i otwrz panel Align (wyrwnaj, Ctrl+K

w systemie Windows lub Cmd+K w systemie Mac OS).


42. Upewnij si, e wczony jest przycisk To Stage, a nastpnie kliknij opcj Align horizontal center

(wyrwnaj do rodka w poziomie) i Align vertical center (wyrwnaj do rodka w pionie).


Spowoduje to ustawienie tekstu dokadnie na rodku sceny.

43. Zamknij panel Align.

Chcemy, eby komunikat loading assets by wywietlany tylko w momencie, gdy gowica
zatrzyma si na pierwszej klatce kluczowej. Po odtworzeniu klatki 10. i zaadowaniu pliku
splash.swf powinien on znikn. Aby tak si stao, musisz wstawi pust klatk kluczow
w miejscu klatki 2. warstwy loading message.
44. Kliknij klatk 2. warstwy loading message i umie w niej pust klatk kluczow,

wciskajc F7. Teraz komunikat loading assets jest widoczny tylko w klatce 1.

45. Zablokuj warstwy loading message i a, a nastpnie zapisz zmiany w pliku master.fla,

wybierajc z menu polecenie File/Save.


46. Ponownie przetestuj film, wybierajc z menu polecenie Control/Test Movie. Gdy pojawi si

okno Preview, wybierz z menu polecenie View/Simulate Download, aby zobaczy, jak bdzie
przebiegao ciganie pliku master.swf i adowanych do niego zasobw. Po jego cakowitym
zaadowaniu komunikat zniknie, a zamiast niego pojawi si logo firmy, czyli plik splash.swf
(patrz rysunek na nastpnej stronie).
Gratulacje! Wanie utworzye, zaadowae i udostpnie komunikat informujcy
o adowaniu biblioteki wspdzielonej. Teraz, gdy zostanie ona zaadowana do bufora,
bdziesz mg jej natychmiast uy w dowolnym pliku SWF, adowanym do pliku master.swf.

86

MACROMEDIA FLASH MX 2004


Sztuka projektowania

W nastpnym rozdziale nauczysz si nie tylko korzysta z elementw pochodzcych z biblioteki


wspdzielonej, ale te zapenia dynamiczne pole tekstowe tekstem pochodzcym z zewntrznego
pliku TXT (za pomoc klasy LoadVars). Dowiesz si rwnie, jak umoliwi przewijanie tekstu oraz
jak go modyfikowa uywajc kombinacji jzyka HTML i kaskadowych arkuszy stylw (CSS), a take
jak wstawia do niego pliki SWF (kolejna nowa funkcja)! W nastpnym rozdziale znajduje si caa
masa nowych, ekscytujcych przykadw, wic zamknij drzwi i powiedz swojej drugiej poowie, e
dzi musi i spa bez Ciebie, poniewa masz na ten wieczr inne plany! ;-)

ROZDZIA 3.
Zaczynamy

87

You might also like