Professional Documents
Culture Documents
0 dla Adobe
Flash CS4/CS4 PL Professional.
Oficjalny podrcznik
Autor: Adobe Creative Team
Tumaczenie: Pawe Koronkiewicz
ISBN: 83-7197-641-0
Tytu oryginau: ActionScript 3.0 for Adobe
Flash CS4 Professional Classroom in a Book
Format: 170230, stron: 368
Poznaj tajniki pracy z ActionScript 3.0 w rodowisku Flash CS4 i twrz efektowne animacje
Jak wprowadza mechanizmy interakcyjne we Flashu?
Jak sterowa osi czasu i animacj?
Jak pisa funkcje obsugi zdarze?
Adobe ActionScript 3.0 to zaawansowany jzyk programowania, w peni zintegrowany
z Flashem CS4 -- rozbudowanym rodowiskiem projektowania graficznego, wyposaonym
w narzdzia do pracy z dwu- i trjwymiarow animacj, dwikiem, grafik wektorow
i bitmapow, tekstem oraz obrazem wideo. Dziki temu Adobe ActionScript 3.0
umoliwia tworzenie multimedialnych, bogatych i w peni interaktywnych aplikacji,
takich jak gry, systemy do e-nauki i e-commerce oraz tradycyjne aplikacje dla platformy
Adobe AIR.
Ksika ActionScript 3.0 dla Adobe Flash CS4/CS4 PL Professional. Oficjalny podrcznik
zostaa przygotowana w oparciu o oficjalny program szkoleniowy Adobe Systems
Incorporated, opracowany przez ekspertw Adobe. Poszczeglne lekcje zawieraj
podstawowe i zaawansowane informacje, a take liczne wskazwki oraz opisy technik
czy mechanizmw, ktre umoliwiaj uzyskanie wysokiej efektywnoci pracy.
Z podrcznikiem nauczysz si sprawnie posugiwa tym wyjtkowym jzykiem
programowania, tworzy pliki kodu ActionScript, obsugiwa zdarzenia i funkcje.
Dowiesz si, jak wzbogaca Twoje aplikacje o takie elementy, jak animacja, dwik,
wideo i wyszukana grafika, aby zadowoli najbardziej wyrafinowane gusta uytkownikw.
Formaty plikw Flash i ActionScript 3.0
O czasu
Zdarzenia i funkcje
Animacja, dwik, wideo i ActionScript
Tworzenie instalacji klasy we Flashu
adowanie zawartoci w czasie pracy aplikacji
Narzdzia w rodowisku testowania
Tablice i ptle
Lista odtwarzania w formacie XML
Zaawansowane techniki animacji i pracy z grafik
Drukowanie i wysyanie poczty
Opanuj ActionScript 3.0 i twrz efektowne animacje we Flashu CS4!
Spis treci
Jak zacz
Seria Oficjalny podrcznik. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Wymagane przygotowanie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Instalowanie Flasha. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Konfiguracja sprztowa komputera. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Kopiowanie plikw lekcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Jak korzysta ztej ksiki. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Konwencje typograficzne. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Inne rda informacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Informacje natemat ActionScriptu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Aktualizacje Flasha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Wersja programu Flash Player. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Uytkownicy wersji CS3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Certyfikaty Adobe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1 O czasu
Przegld lekcji. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Pierwsze kroki. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Wizanie kodu zosi. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23
Propozycje samodzielnych wicze. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2 Zdarzenia ifunkcje
Przegld lekcji. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Tworzenie detektorw zdarze ifunkcji obsugi zdarze. . . . . . . . . . . . . . . . . . . . 36
Sterowanie odtwarzaniem klikniciami przyciskw. . . . . . . . . . . . . . . . . . . . . . . . . 38
Propozycje samodzielnych wicze. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
SPIS TRECI
Book AS34Flash.indb 4
2009-06-25 01:39:43
3 Animacja iActionScript
Przegld lekcji. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Przykadowy projekt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Waciwoci klipw. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Obiekty typu Tween animacje zklatkami porednimi wActionScripcie. . . 59
Propozycje samodzielnych wicze. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
6 Sterowanie adowaniemzawartoci
Przegld lekcji. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Narzdzia wrodowisku testowania. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Przygotowywanie pola tekstowego ipaska postpu. . . . . . . . . . . . . . . . . . . . . . . 108
Wstawianie kodu ledzcego prac skadnika UILoader. . . . . . . . . . . . . . . . . . . . 110
Wizanie odtwarzania klatek zprocesem adowania. . . . . . . . . . . . . . . . . . . . . . . 116
Propozycje samodzielnych wicze. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
7 Tablice iptle
Przegld lekcji. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Pocztkowa wersja przykadowego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Dodawanie obiektw MovieClip zBiblioteki. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Generowanie wielu obiektw przy uyciu ptli for. . . . . . . . . . . . . . . . . . . . . . . . . 133
Detektory zdarze kliknicia obiektw Block. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Book AS34Flash.indb 5
2009-06-25 01:39:43
9 Dwik iActionScript
Przegld lekcji. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Pocztkowa wersja przykadowego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Suwak skadnik Slider. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Klasy Sound, SoundChannel iSoundTransform. . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Wstawianie tytuw piosenek ptla for. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Ukrywanie niepotrzebnych suwakw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Programowanie przyciskw dowybierania utworw. . . . . . . . . . . . . . . . . . . . . . 200
Wywietlanie suwakw. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Detektor zdarzenia ID3 obiektu Sound. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Obiekt TextFormat. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Oprogramowanie suwakw. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Propozycje samodzielnych wicze. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
SPIS TRECI
Book AS34Flash.indb 6
2009-06-25 01:39:44
11 Wideo iActionScript
Przegld lekcji. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Zawarto folderu lekcji. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Skadnik FLVPlayback. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Konfigurowanie waciwoci skadnika FLVPlayback . . . . . . . . . . . . . . . . . . . . . . . 242
Waciwoci obiektu FLVPlayback wActionScripcie. . . . . . . . . . . . . . . . . . . . . . . . 245
Kolor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Skadnik FLVCaptioning. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Lista odtwarzania wformacie XML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Tryb penoekranowy. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Propozycje samodzielnych wicze. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Book AS34Flash.indb 7
2009-06-25 01:39:44
SPIS TRECI
Book AS34Flash.indb 8
2009-06-25 01:39:44
adowanie zawartoci
wczasie pracy aplikacji
Przegld lekcji
Wtej lekcji czytelnik dowie si, jak:
86
Book AS34Flash.indb 86
2009-06-25 01:39:52
87
Book AS34Flash.indb 87
2009-06-25 01:39:52
Poniewa jednym zgwnych tematw tej lekcji jest integrowanie wielu plikw wjeden
projekt weFlashu, zasb materiaw nadysku CD jest znacznie bogatszy.
Zapoznajmy si zzawartoci folderu Lessons\Lesson05. Znajdziemy wnim podfolder
Images zplikami JPG ipodfolder Text zplikami tekstowymi ASCII. Wszystkie te elementy wczymy doprojektu weFlashu przy uyciu ActionScriptu.
Wpodfolderze Start znajduje si plik lesson05_start.fla, gwny plik, zktrym bdziemy
pracowa wtej lekcji. Wtym samym folderze srwnie pliki instruments.swf ipaint.
swf. Stofinalne wersje projektw zlekcji 3. i4. Lekcj rozpoczniemy odzaadowania tych dwch plikw SWF doprojektu lesson05_start.fla przy uyciu instancji skadnika List (innymi sowy, przy uyciu obiektu typu List). Nastpnie utworzymy nowy
plik galerii, ktry pozwoli uytkownikowi wybiera elementy zlisty miniatur iwywietla due wersje reprezentowanych przez nie obrazkw. Kady obrazek bdzie podpisany. Podpisy bd adowane zodrbnych plikw tekstowych. Gotowa galeria zostanie
dodana dolisty plikw, ktre mona zaadowa doprojektu lesson05_start.fla.
88
Book AS34Flash.indb 88
2009-06-25 01:39:52
5 Zwracajc uwag nato, aby wdalszym cigu zaznaczona bya klatka 50 nowej
warstwy components, przecigamy zaznaczon wpanelu pozycj List nast
montaowy. Uyjemy tego skadnika doutworzenia listy plikw, ktre uytkownik
moe zaznaczy izaadowa doprojektu.
6 Zaznaczamy nowy skadnik typu List nastole montaowym iwywietlamy panel
Properties (Waciwoci) (polecenie Window/Properties (Okno/Waciwoci)).
7 Wpanelu waciwoci nadajemy obiektowi nazw instancji loadList.
8 Ponownie wpanelu waciwoci, zmieniamy warto waciwoci X obiektu
loadList na30, aY na150.
9 Zmieniamy wartoci waciwoci W(szeroko) iH (wysoko) na, odpowiednio,
140 i60.
10 Zwracajc uwag, aby wdalszym cigu zaznaczony by ten sam obiekt loadList,
otwieramy panel Component Inspector (Inspektor skadnikw) (polecenie Window/
Component Inspector (Okno/Inspektor skadnikw)).
11 Zaznaczamy parametr dataProvider iklikamy obrazek lupy pojawiajcy si
wprawej czci pola tekstowego. Otwieramy wten sposb okno, wktrym mona
wprowadza etykiety iokrela powizania elementw listy zdanymi.
12 Dodajemy dolisty trzy nowe elementy, klikajc trzykrotnie przycisk +.
13 Zaznaczamy parametr label pierwszego elementu iwpolu tekstowym poprawej
stronie wprowadzamy Instruments.
Bdzie toetykieta pierwszego elementu listy.
14 Zaznaczamy parametr data pierwszego elementu iwprowadzamy warto
instruments.swf.
Book AS34Flash.indb 89
89
2009-06-25 01:39:53
Dane przypisane poszczeglnym elementom posu doprzechowywania nazw plikw, ktre bd adowane powybraniu tych elementw.
90
Book AS34Flash.indb 90
2009-06-25 01:39:53
Taka konstrukcja powinna wyglda znajomo. Detektor zdarzenia CHANGE dodajemy wtaki sam sposb jak detektory zdarze zwizanych zmysz irozpoczciem
odtwarzania klatki.
Funkcja loadFile() jest teraz wywoywana zakadym razem, gdy uytkownik
wybiera klikniciem element listy. Naszym kolejnym zadaniem jest wpisanie kodu
tej funkcji. Bdzie on adowa odpowiedni plik SWF wywietlany przez instancj
skadnika UILoader.
Window, piszemy:
loadWindow.source = "instruments.swf";
Wnaszym projekcie potrzebna jest funkcja, ktra aduje plik okrelony danymi powizanymi zelementem listy. Nazwy plikw wprowadzilimy wczeniej jako parametry dataProvider. Informacja tazostanie wykorzystana wkodzie funkcji. Wefekcie
jeeli uytkownik wybierze naprzykad element oetykiecie Paint, doobiektu UILoader
Book AS34Flash.indb 91
91
2009-06-25 01:39:53
92
Book AS34Flash.indb 92
2009-06-25 01:39:53
Plik galerii
Teraz przejdziemy doprzygotowywania pliku galerii, doktrego odwouje si skadnik List. Galeria bdzie aplikacj, ktra pozwala uytkownikowi wybiera obrazki JPG
adowane przez obiekt UILoader przy uyciu miniatur. Zaznaczenie miniatury bdzie
dodatkowo powodowao zaadowanie tekstu zpliku zewntrznego iprzypisanie pobranego cigu znakw dopola tekstowego nastole montaowym. Wstpna wersja projektu
toplik gallery.fla wfolderze Lesson05/Start. Dodamy doniego kod ActionScript realizujcy wszystkie potrzebne funkcje. Rozpocznijmy jednak odzapoznania si zelementami, ktre zostay ju dla wygody czytelnika przygotowane.
Plik gallery.fla
Wpliku przygotowane selementy graficzne ioglny ukad galerii. Naszym zadaniem
bdzie uzupenienie projektu oodpowiedni kod ActionScript, czyli polecenia odpowiedzialne zaadowanie tekstu iobrazkw.
1 Otwieramy plik gallery.fla zfolderu Lessons\Lesson05\Start.
Naosi czasu wida cztery warstwy, anastole montaowym znajduj si trzy obiekty.
Nie zostay jeszcze zdefiniowane adne operacje. Naszym podstawowym zajciem
wtej lekcji bdzie wprowadzanie kodu wwarstwie actions. Wwarstwie loader
znajduje si obiekt UILoader.
2 Zaznaczamy instancj skadnika UILoader. Wpanelu waciwoci wida, ejej
nazwa toldr.
3 Zaznaczamy dynamiczne pole tekstowe wwarstwie text. Nazwa instancji toinfo.
4 Zaznaczamy wwarstwie thumbs klip zawierajcy zbir miniatur. Jego nazwa
tothumbs_mc.
5 Dwukrotnie klikamy klip thumbs_mc.
Teraz wida, eklip skada si zsiedmiu przyciskw zobrazkami. Gdy zaznaczamy kolejne przyciski, widzimy zmiany nazwy instancji wpanelu Properties
(Waciwoci) odbtn1 dobtn7. Poniewa przyciski znajduj si wewntrz
klipu thumbs_mc, cieka odwoa donich bdzie miaa posta thumbs_mc.btn1,
thumbs_mc.btn2 itd.
6 Wracamy doosi czasu, wybierajc polecenie menu Edit/Edit document (Edytuj/
Edytuj dokument).
Book AS34Flash.indb 93
93
2009-06-25 01:39:53
94
Book AS34Flash.indb 94
2009-06-25 01:39:53
Book AS34Flash.indb 95
95
2009-06-25 01:39:53
Kolejnym elementem jest funkcja textLoad(), ktra wykona operacj adowania tekstu zpliku zewntrznego. Wywoanie tej funkcji wystpuje wkadej funkcji
obsugi zdarzenia kliknicia przycisku.
2 Pod wpisanym wczeniej wpanelu Actions (Operacje) kodem wprowadzamy:
function textLoad(file:String, color:uint) {
loader.load(new URLRequest(file));
info.backgroundColor = color;
}
Funkcja textLoad() robi dwie rzeczy. Najpierw wywouje metod load klasy
URLLoader. Metoda taaduje plik tekstowy. Pamitajmy, ewywoanie tej funkcji nastpuje przy klikniciu jednego zsiedmiu przyciskw. Gdy powrcimy dofunkcji obsugi
zdarze, zobaczymy wnich, efunkcji przekazywane sdwa parametry. Pierwszym
jest cig znakw opisujcy ciek pliku, adrugi tonumer koloru. Nazwy parametrw
tofile icolor.
Parametr file suy dowskazywania cieki pliku, ktry zostanie zaadowany metod
load(). Parametr color suy dookrelania koloru ta umieszczonego wczeniej
nastole montaowym pola tekstowego onazwie info.
Gdy funkcja zostaje wywoana, pierwszy wiersz aduje tekst, adrugi zmienia kolor ta.
Jednak wtym momencie tekst nie zostaje jeszcze wywietlony. Wymaga tododatkowo
przypisania zaadowanych danych dowaciwoci text pola tekstowego.
Wywietlanie danych zaadowanych zzewntrznych plikw tekstowych wpolu tekstowym jest prost operacj. Zanim jednak doniej przejdziemy, powinnimy zadba obardzo istotn rzecz sprawdzi, czy czynno pobierania danych zzewntrz zakoczya
si sukcesem.
96
Book AS34Flash.indb 96
2009-06-25 01:39:53
Gdy obiekt loader zakoczy adowanie pliku tekstowego, funkcja obsugi zdarzenia
COMPLETE wywietli tekst wpolu nastole montaowym.
Teraz moemy powici nieco uwagi formatowaniu pola tekstowego. Bdzie ono
miao wyrniajce si to iobramowanie, ustalimy te kolor obramowania.
Uwaga:
Formatowaniem
tekstu zajmie
my si wlekcji8.,
Quiz zprzyciska
mi opcji wpliku
ActionScriptu.
Book AS34Flash.indb 97
97
2009-06-25 01:39:53
Dodawanie paska
przewijaniapola tekstowego
Zawarto adowanych plikw tekstowych nie mieci si wpolu tekstowym nastole
montaowym. Szczliwie si jednak skada, eFlash zosta wyposaony wskadnik
UIScrollBar, ktry pozwala wyposay pole wpasek przewijania.
Przewijanie tekstu towana funkcja, zwaszcza winterfejsach, ktre dysponuj niewielk iloci miejsca dowywietlania informacji. Dodanie dopola tekstowego paska
przewijania nie jest trudne. Naszym kolejnym zadaniem bdzie powizanie pola tekstowego info zeskadnikiem UIScrollBar.
1 Zaznacz nastole montaowym pole tekstowe info.
2 Wybierz zmenu Text (Tekst) polecenie Scrollable (Przewijalny).
98
Book AS34Flash.indb 98
2009-06-25 01:39:53
Utwrz nowy projekt weFlashu idodaj go dolisty wlesson05_start.fla tak, aby sta
si kolejnym elementem listy obiektw dowywietlenia.
Zastp pliki JPG uywane wprojekcie gallery.fla innymi obrazkami. Sprbuj tak
zmodyfikowa kod, aby pliki byy pobierane zinnej cieki.
Book AS34Flash.indb 99
99
2009-06-25 01:39:54
Pytania kontrolne
1 Jakie typy plikw mona zaadowa doprojektu przy uyciu skadnika UILoader?
2 Jakie zdarzenie skadnika List jest generowane, gdy uytkownik wybiera elementy
zlisty?
3 Jakie zdarzenie klasy URLLoader jest generowane wchwili zakoczenia pobierania
danych?
Odpowiedzi
1 Skadnik UILoader pozwala adowa pliki SWF, JPG, PNG iGIF.
2 Dowykrywania wyboru elementu zlisty wywietlanej przez skadnik List suy
zdarzenie CHANGE tego skadnika.
3 Poprawne zakoczenie adowania danych przez obiekt URLLoader sygnalizuje
zdarzenie COMPLETE.
100
2009-06-25 01:39:54