Rozdział 19.
Sterowanie klipami filmowymi

W tym rozdziale:

• Omówienie obiektów typu Movie Clip

• Zastosowania obiektów typu Color

• Użytkowanie obiektów typu Sound

• Tworzenie przeciągalnych klipów filmowych

• Drukowanie ujęć filmu Flasha

W poprzednim rozdziale dowiedzieliśmy się, jak ogromne jest znaczenie klipów filmowych w strukturze filmu Flasha. Dzięki temu, że każdy klip filmowy posiada listwę czasową odtwarzaną niezależnie od innych listew czasowych, można realizować w filmie wiele zdarzeń jednocześnie — niezależnie lub w interakcji z innymi klipami. W tym rozdziale dowiesz się, jak manipulować klipami filmowymi w bardziej zaawansowany sposób — nie tylko za pomocą prostych akcji, takich jak gotoAndPlay czy stop.

Omówienie obiektów typu Movie Clip

Język ActionScript we Flashu 5 jest odpowiednikiem języka programowania zorientowanego obiektowo. Podobnie jak w języku JavaScript, każdemu elementowi filmu Flasha odpowiada określony typ danych. Typ ten jest po prostu kategorią, do której należy dany element. Zgodnie z dokumentacją Flasha 5 dostępnych jest pięć typów danych: wartość logiczna (prawda lub fałsz), wartość liczbowa, ciąg znaków (tekst), obiekt oraz klip filmowy. W tej książce przyjmujemy, że klip filmowy również jest obiektem (dlatego mówimy o nim czasem „obiekt typu Movie Clip”). Będziemy o tym przypominać w całej książce. We Flashu 5 obiektem jest każdy element, którego cechy mogą być zmieniane za pomocą skryptów. Obiekty mogą być definiowane przez użytkownika (sam je tworzysz i odpowiednio nazywasz) lub predefiniowane; w tym drugim przypadku są częścią języka programowania. Obiekt typu Movie Clip jest predefiniowany. Oznacza to, że jego charakterystyka została już opisana w języku ActionScript.

Odsyłacz! Krótkie wprowadzenie do zasad programowania obiektowego znajdziesz w rozdziale 18., „Zarządzanie listwami czasowymi”.

Obiekt typu Movie Clip to inaczej klon klipu filmowego, jaki poznaliśmy w poprzednich rozdziałach. Każdy taki klon z punktu widzenia języka ActionScript jest osobnym obiektem. Jednak przy pisaniu skryptów nie traktowaliśmy go w ten sposób. Zanim rozpoczniemy omawianie klipów filmowych jako jednych z najważniejszych elementów filmów Flasha, musisz najpierw zrozumieć, jaka jest charakterystyka predefiniowanego obiektu typu Movie Clip. Przyjrzyj się rysunkowi 19.1, aby uzyskać więcej informacji na ten temat.

Rysunek 19.1. Ogólny opis obiektu typu Movie Clip

Właściwości klipu filmowego

Każdy klon klipu filmowego posiada definiowalne właściwości, które określają jego wygląd, wielkość oraz położenie. Na przykład możesz przemieścić klon klipu filmowego w nowe miejsce na obrazie, zmieniając wartości współrzędnych X oraz Y. Współrzędnym klonu klipu filmowego w języku ActionScript odpowiadają właściwości _x i _y. Niektóre z nich służą tylko do odczytu, co oznacza, że nie możesz zmienić ich wartości. Jedną z właściwości tylko do odczytu jest _url. Zawiera adres internetowy, z którego pobrany został klip filmowy (lub plik .SWF), na przykład http://www.yourserver.com/swf/background.swf. Rysunek 19.2 zawiera wszystkie właściwości obiektu typu Movie Clip. Więcej informacji na temat poszczególnych właściwości znajdziesz w tabeli 19.1.

Rysunek 19.2. Właściwości obiektu typu Movie Clip

Pierwszym znakiem w nazwie każdej właściwości jest znak podkreślenia (_). W tabeli 19.1 w opisie każdej właściwości znajdziesz literę „O” (właściwość tylko do odczytu) i (lub) „Z” (właściwość, której wartość można zmieniać). Wartości wszystkich właściwości można odczytywać. Oznacza to, że zawsze dowiesz się, jaka jest aktualna wartość właściwości. W Flashu 4 wartości odczytywane były przy użyciu akcji getProperty. W skryptach możesz także zmieniać wartości niektórych właściwości. Przy tych właściwościach w tabeli znajdziesz literę „Z”.

Na CD-ROM-ie! Użyj klipu filmowego propInspector z biblioteki pliku property_inspector.fla znajdującego się na CD-ROM-ie, aby zobaczyć wartości właściwości klipów filmowych i filmów.

Tabela 19.1. Właściwości filmu Flasha oraz klipu filmowego

Kategoria	Właściwość	Listwa czasowa	Flash 4	Flash 5	Definicja
Położenie	_x	KF Film	OZ OZ	OZ OZ	Pozioma współrzędna klipu filmowego, podana względem układu współrzędnych obrazu, na którym klip się znajduje. Zwiększa się przy ruchu klipu w prawo. Mierzona w pikselach.
		_y	KF Film	OZ OZ	OZ OZ	Pionowa współrzędna klipu filmowego, podana względem układu współrzędnych obrazu, na którym klip się znajduje. Zwiększa się przy ruchu klipu w dół. Mierzona w pikselach.
		_xmouse	KF Film	n.d. n.d.	O O	Pozioma współrzędna kursora myszy, wyrażona względem układu współrzędnych klipu filmowego (lub filmu).
		_ymouse	KF Film	n.d. n.d.	O O	Pionowa współrzędna kursora myszy, wyrażona względem układu współrzędnych klipu filmowego (lub filmu).
		_rotation	KF Film	OZ OZ	OZ OZ	Kąt obrotu klipu filmowego względem pierwotnej orientacji. Wartość kąta może być ustawiona za pomocą skryptu lub w panelu Transform (lub też przy użyciu modyfikatora Rotation narzędzia Arrow).
	Wymiary	_xscale	KF Film	OZ OZ	OZ OZ	Procentowa szerokość klonu klipu filmowego (lub filmu) podawana w odniesieniu do rzeczywistej wielkości pierwotnego symbolu.
		_yscale	KF Film	OZ OZ	OZ OZ	Procentowa wysokość klonu klipu filmowego (lub filmu) podawana w odniesieniu do rzeczywistej wielkości pierwotnego symbolu.
		_width	KF Film	O O	OZ O	Szerokość (w pikselach) klipu filmowego lub głównej sceny filmu. Nie jest określana przez szerokość obrazu, ale przez szerokość miejsca zajmowanego przez elementy na obrazie (oznacza to, że może być większa lub mniejsza od szerokości obrazu ustawionej w oknie Movie Properties).
		_height	KF Film	O O	OZ O	Wysokość (w pikselach) klipu filmowego lub głównej sceny filmu. Nie jest określana przez wysokość obrazu, ale przez wysokość miejsca zajmowanego przez elementy na obrazie.
	Wygląd	_alpha	KF Film	OZ OZ	OZ OZ	Stopień krycia (odwrotność przeźroczystości) klipu filmowego lub filmu. Podawana w procentach: 100% oznacza pełne krycie, zaś 0% pełna przeźroczystość.
		_visible	KF Film	OZ OZ	OZ OZ	Wartość logiczna określająca widzialność klipu filmowego. Wartość true sprawia, że klip jest widoczny; wartość false sprawia, że jest on niewidoczny. Przyciski niewidzialnych klipów nie są aktywne.
		Color()	KF Film	n.d. n.d.	OZ OZ	Color() jest obiektem Flasha, a nie właściwością obiektu typu Movie Clip. Ponieważ jednak obiekty typu Color mogą sterować kolorem klipów filmowych, wartości koloru klipu filmowego można potraktować jak właściwość definiowaną przez użytkownika.
	Ścieżka wewnętrzna	_name	KF Film	OZ O	OZ O	Zawiera nazwę klonu klipu filmowego (która jest pokazywana na panelu Instance). Umożliwia zarówno odczytanie nazwy, jak i jej zmianę w trakcie odtwarzania filmu.
		_target	KF Film	O O	O O	Zwraca ścieżkę do klonu klipu filmowego w notacji ukośnikowej (z użyciem znaku /). Aby uzyskać ścieżkę w notacji kropkowej, użyj polecenia eval(_target).
		_droptarget	KF Film	O O	O O	Zwraca nazwę (w notacji ukośnikowej) ostatniego klipu, na który został upuszczony przeciągany klip filmowy. Aby uzyskać ścieżkę w notacji kropkowej, użyj polecenia eval(_droptarget). Zastosowanie tej właściwości omówimy w sekcji „Tworzenie przeciągalnych klipów filmowych” w dalszej części tego rozdziału.
Ścieżka zewnętrzna	_url	KF Film	O O	O O	Zwraca pełną ścieżkę dostępu pliku .SWF, w którym akcja została uruchomiona, łącznie z nazwą samego pliku. Korzystając z tej właściwości, możesz uniemożliwić odtwarzanie filmu z innych serwerów niż ten, na którym umieścisz film.
Listwa czasowa	_currentframe	KF Film	O O	O O	Zwraca numer aktualnej klatki (to znaczy klatkę, w której aktualnie znajduje się wskaźnik czasu podczas odtwarzania filmu).
		_totalframes	KF Film	O O	O O	Zwraca liczbę wszystkich ujęć w listwie czasowej filmu lub klonu klipu filmowego.
		_framesloaded	KF Film	O O	O O	Zwraca liczbę ujęć klipu filmowego lub filmu, których dane znajdują się już w pamięci.
	Ustawienia globalne	_highquality	Film	Z	Z	Ustala jakość obrazu odtwarzanego filmu: 0=niska, 1=wysoka, 2=najlepsza. Szczegóły znajdziesz w rozdziale 17. We Flashu 5 właściwość ta jest oznaczona jako wycofywana. Zamiast niej firma Macromedia zaleca stosowanie właściwości _quality.
		_quality	Film	n.d.	OZ	Ustala jakość obrazu odtwarzanego filmu. Wartością tej właściwości może być jeden z poniższych ciągów znaków: "LOW" (funkcja wygładzania obrazu wyłączona), "MEDIUM" (wygładzanie krawędzi grafiki wektorowej z użyciem maski 2×2 piksele, wygładzanie obrazów rastrowych wyłączone), "HIGH" (wygładzanie krawędzi grafiki wektorowej z użyciem maski 4×4 piksele, wygładzanie obrazów rastrowych w ujęciach nieruchomych), "BEST" (wygładzanie krawędzi grafiki wektorowej z użyciem maski 4×4 piksele, wygładzanie obrazów rastrowych we wszystkich ujęciach filmu).
		_focusrect	Film	Z	Z	Wartość logiczna określająca, czy przy przechodzeniu pomiędzy przyciskami za pomocą klawisza Tab pojawia się żółta ramka. Domyślnie program wyświetla tę ramkę, by ułatwić wybór przycisku. Po ustawieniu wartości właściwości na 0 program wyświetla jedynie stan Up przycisku.
		_soundbuftime	Film	Z	Z	Rozmiar bufora dźwięku, podawany w sekundach. Przed rozpoczęciem odtwarzania dźwięku program pobierze dane dźwiękowe odpowiadające podanej liczbie sekund. Domyślnie jest to 5 sekund.

O = właściwość tylko do odczytu (nie może być zmieniana); Z = można zmieniać wartość właściwości; KF = klip filmowy

Metody obiektu typu Movie Clip

Ten tytuł może niepokoić, lecz nie martw się. Metody są po prostu akcjami przypisanymi do obiektu. Wiesz już, że klipy filmowe we Flashu są traktowane jak obiekty. Metoda jest podobna do zwykłej akcji, z tą różnicą, że jest dołączana do nazwy obiektu (lub pełnej ścieżki adresowej zapisanej w notacji kropkowej). Akcja:

gotoAndPlay("start");

staje się metodą:

_root.gotoAndPlay("start");

Jako akcje interaktywne polecenia są wykonywane z poziomu listwy czasowej, która je zawiera. Jako metody polecenia te są związane z określonym (lub dynamicznym) celem. Rysunek 19.3 przedstawia metody obiektu typu Movie Clip. Natomiast tabela 19.2 zawiera opis wszystkich metod obiektów tego typu. Niektóre mogą być używane dla klonów klipów filmowych oraz całych filmów Flasha (_root, _level0, itd.), natomiast inne dotyczą tylko klonów klipów filmowych. Kolumna „Flash 4” informuje o tym, czy metoda (gdy używana jest jako akcja) jest kompatybilna z odtwarzaczem filmów Flasha 4 (Flash 4 Player). Niektóre polecenia muszą być pisane wraz ze ścieżką dostępu (notacja kropkowa) jako metody listwy czasowej lub obiektu typu Movie Clip (w tabeli są one oznaczone przez „M”). Inne polecenia mogą być używane jako akcje (w tabeli są oznaczone literą „A”). Oznacza to, że polecenie nie musi być poprzedzone nazwą obiektu.

Rysunek 19.3. Metody obiektu klipu filmowego

Tabela 19.2. Metody filmów Flasha oraz klipów filmowych

Kategoria	Metoda	Flash 4	Definicja	Sposób użycia
Położenie	getBounds M	Nie	Zwraca obiekt zawierający minimalne oraz maksymalne współrzędne X oraz Y, dostępne jako właściwości obiektu: xMin, xMax, yMin i yMax. Wartości te mogą być użyte do porównywania położenia dwóch lub więcej klipów filmowych.	listwa_czasowa.getBounds(położenie celu); myBounds = myMovieClip. --> ¬[Author:RJ] getBounds(_root); current_xMin = ¬ myBounds.xMin;
		hitTest M	Nie	Zwraca wartość true, jeśli klip filmowy dotyka lub nachodzi na określone miejsce lub cel (zdarzenie to jest nazywane kolizją).	listwa_czasowa.hitTest(x,y, znacznik kształtu); listwa_czasowa.hitTest(położenie celu); var isTouching = myMC.¬ hitTest(innyKlip); trace("isTouching jest ¬ " + isTouching);
		globalToLocal M	Nie	Przelicza współrzędne obrazu głównej listwy czasowej na współrzędne określonego klipu filmowego. Wymaga utworzenia nowego obiektu z właściwościami X oraz Y.	listwa_czasowa.globalToLocal(odniesienie do obiektu); _root.myPoint = new ¬ Object(); _root.myPoint.x = ¬ _root._xmouse; _root.myPoint.y = ¬ _root._ymouse; _myMC.globalToLocal(¬ _root.myPoint);
		localToGlobal M	Nie	Przelicza współrzędne obrazu klipu filmowego na współrzędne głównej listwy czasowej. Takie same wymagania jak przy globalToLocal.	listwa_czasowa.localToGlobal(odniesienie do obiektu); myMC.myPoint = new ¬ Object(); myMC.myPoint.x = ¬ myMC._x; myMC.myPoint.y = ¬ myMC._y; myMC.localToGlobal(¬ myMC.myPoint);
		startDrag M, A	Tak	Rozpoczyna operację przeciągania klonu klipu filmowego na scenie. Klip filmowy porusza się zgodnie z ruchem kursora myszy. Możesz określić, czy klon klipu znajdzie się na środku kursora myszy, a także ograniczyć pole ruchu obiektu (w przestrzeni rodzicielskiej listwy czasowej). Ograniczenie obszaru przeciągania jest przydatne na przykład przy tworzeniu suwaków.	listwa_czasowa.startDrag(centrowanie na wskaźniku, min X, min Y, max X, max Y); myMC.startDrag(false, ¬ 200,0,200,200);
		stopDrag M, A	Tak	Zatrzymuje operację przeciągania rozpoczętą przez akcję startDrag. Przy tej akcji nie jest potrzebne określanie celu, ponieważ jednocześnie może być przeciągany tylko jeden obiekt.	listwa_czasowa.stopDrag(); myMC.stopDrag();
	Odtwarzanie	play M, A	Tak	Rozpoczyna odtwarzanie określonej listwy czasowej od aktualnej pozycji.	listwa_czasowa.play(); // odtwarza główną listwę czasową _root.play(); // odtwarza klip myMC _root.myMC.play();
		stop M, A	Tak	Zatrzymuje odtwarzanie określonej listwy czasowej.	listwa_czasowa.stop(); // zatrzymuje odtwarzanie głównej listwy czasowej _root.stop(); // zatrzymuje odtwarzanie klipu myMC _root.myMC.stop();
		gotoAndPlay M, A	Tak	Przenosi znacznik odtwarzania określonej listwy czasowej do podanej etykiety, klatki lub wyrażenia i rozpoczyna odtwarzanie od nowego miejsca.	listwa_czasowa.gotoAndPlay(położenie); // rozpoczyna odtwarzanie listwy czasowej myMC od etykiety "start" _root.myMC.gotAndPlay ¬ ("start");
		gotoAndStop M, A	Tak	Przenosi wskaźnik czasu w określonej listwie czasowej do podanej etykiety, klatki lub wyrażenia i zatrzymuje odtwarzanie.	listwa_czasowa.gotoAndStop(położenie); // zatrzymuje odtwarzanie listwy czasowej myMC na etykiecie "stop" _root.myMC.gotAndStop ¬ ("stop");
		nextFrame M, A	Tak	Przenosi wskaźnik czasu w określonej listwie czasowej do następnej klatki.	listwa_czasowa.nextFrame(); _root.myMC.nextFrame();
		prevFrame M, A	Tak	Przenosi wskaźnik czasu w określonej listwie czasowej do poprzedniej klatki.	listwa_czasowa.prevFrame(); _root.myMC.prevFrame();
	Operacje wewnętrzne	duplicateMovieClip M, A	Tak	Tworzy kopię klonu klipu filmowego na obrazie (lub zagnieżdża ją w innym klipie). Kopia umieszczana jest w tym samym miejscu co pierwotny klon i na określonym poziomie w warstwie. Obiekty na wyższych poziomach warstwy pojawiają się nad niższymi (na przykład klip filmowy na poziomie 2 pojawia się nad klipem na poziomie 1).	listwa_czasowa.duplicateMovieClip (nazwa*, głębokość); myMC.duplicateMovieClip¬ ("myMC_2",20); myMC_2._x = 200; *Nie powinieneś określać ścieżki do kopii, ponieważ kopia zostanie umieszczona w tym samym miejscu co pierwotny klon.
		removeMovieClip M, A	Tak	Usuwa poprzednio utworzoną kopię klonu klipu filmowego. W przypadku metody nie musisz dodatkowo określać celu. Nie możesz usunąć klonu klipu filmowego, który został ręcznie wstawiony z biblioteki w ujęciu listwy czasowej.	listwa_czasowa.removeMovieClip(); myMC_2.remove.MovieClip¬ ();
		attachMovie M	Nie	Umieszcza klon klipu filmowego znajdującego się w bibliotece na określonej listwie czasowej. Każdy dodawany klon wymaga podania unikalnej nazwy oraz poziomu, na jakim znajdzie się w warstwie. Dodany klon klipu filmowego może być usunięty za pomocą polecenia removeMovieClip.	listwa_czasowa.attachmovie (ID*, nazwa, głębokość); _root.attachMovie(¬ "eye", "eye_1", 1); *Przed użyciem tej metody musisz ustalić w bibliotece identyfikator klipu filmowego, używając okna Linkage Properties.
		swapDepths M	Nie	Zamienia poziomy dwóch zduplikowanych lub dodanych klipów filmowych. Metoda ta może posłużyć do umieszczania jednego klonu klipu filmowego nad (lub pod) innym klonem.	listwa_czasowa.swapDepths(głębokość); listwa_czasowa.swapDepths(cel); // poziom eye_1.swapDepths(10); // cel eye_1.swapDepths(eye_2);
	Operacje zewnętrzne	loadMovie M, A	Tak	Ładuje zewnętrzny plik .SWF do głównego filmu .SWF. Jest to jedna z ważniejszych funkcji Flasha, ponieważ pozwala na podzielenie jednego filmu Flasha na kilka mniejszych części i ładowania ich wtedy, gdy są potrzebne. Ta metoda umożliwia także ładowanie plików .SWF do klipów filmowych.	listwa_czasowa.loadmovie(ścieżka, wysyłane parametry*); myMC.loadMovie(¬ "menu.swf"); *Możesz także przekazywać zmienne Flasha do ładowanych plików .SWF, korzystając z opcjonalnych parametrów „GET” oraz „POST”. Omówimy to w rozdziale 24.
		loadMovieNum M, A	Tak	Działa tak samo jak loadMovie, ale pozwala na ładowanie plików .SWF do poziomów zamiast klipów filmowych.	listwa_czasowa.loadmovieNum(ścieżka, wysyłane parametry*); _level1.loadMovieNum ¬ ("menu.swf"); *Zobacz uwagę przy loadMovie.
		unloadMovie M, A	Tak	Usuwa załadowany plik .SWF z głównego filmu .SWF. Metoda ta pozwala usunąć z pamięci filmy .SWF, które nie są już potrzebne. Używaj tej metody dla plików .SWF załadowanych do klipów filmowych.	listwa_czasowa.unloadMovie(); myMC.unloadMovie();
		unloadMovieNum M, A	Tak	Działa tak samo jak unloadMovie, ale pozwala na usuwanie załadowanych plików .SWF umieszczonych na poziomach, a nie w klipach filmowych.	listwa_czasowa.unloadMovieNum(); _level1.unloadMovieNum¬ ();
		loadVariables M, A	Tak	Ładuje dane z zewnętrznego pliku tekstowego do głównego filmu .SWF. Metoda ta umożliwia dostęp do danych pochodzących ze skryptów serwera (w formacie nazwa zmiennej — wartość) lub z plików tekstowych i umieszczanie ich w klipach filmowych.	listwa_czasowa.loadVaiables(ścieżka, wysyłane parametry*); myMC.loadVariables¬ ("info.txt"); *Zobacz uwagę przy loadMovie.
		loadVariablesNum M, A	Tak	Działa tak samo jak loadVariables, ale jest używana do ładowania danych do poziomów filmowych, a nie klipów filmowych.	listwa_czasowa.loadVariablesNum(ścieżka, wysyłane parametry*); _level1.loadVariables¬ Num("info"); *Zobacz uwagę przy loadMovie.
		getBytesLoaded M	Nie	Zawiera informację o liczbie danych klipu filmowego (lub głównego filmu) pobranych przez odtwarzacz i umieszczonych w pamięci. Wartość ta jest podawana w bajtach.	listwa_czasowa.getBytesLoaded(); loadBytes = ¬ myMC.getBytesLoaded();
		getbytesTotal M	Nie	Zawiera informację o wielkości filmu lub klipu filmowego (w bajtach). W połączeniu z metodą getbytesLoaded() umożliwia obliczenie procentowej wartości pobrania filmu.	listwa_czasowa.getBytesTotal(); totalBytes = ¬ myMC.getBytesTotal(); loadBytes = ¬ myMC.getBytesLoaded(); newPercent = (loadedBy¬ tes/totalBytes)*100;

Uwaga. W tej tabeli znak ¬ oznacza kontynuację tej samej linii kodu.
M = metoda, A = akcja

onClipEvent: detektor zdarzeń klipu filmowego

Jeszcze jednym nowym elementem języka ActionScript wprowadzonym we Flashu 5 jest detektor zdarzeń klipów filmowych onClipEvent. W poprzednich wersjach Flasha dostępne były jedynie detektory zdarzeń ujęć kluczowych oraz przycisków. Teraz możemy także umieścić detektor zdarzenia w skrypcie klonu klipu filmowego (skrypt taki jest dołączany do klonu klipu filmowego jako całego obiektu, a nie umieszczany w ujęciu kluczowym na listwie czasowej klipu). Detektor zdarzeń klipu filmowego onClipEvent może wykrywać dziewięć różnych zdarzeń. Tabela 19.3 zawiera opisy tych zdarzeń.

Tabela 19.3. Zdarzenia klipu filmowego wykrywane przez detektor onClipEvent

Kategoria	Zdarzenie	Definicja	Sposób użycia
Odtwarzanie	load	To zdarzenie zachodzi, gdy: a) klon klipu filmowego po raz pierwszy pojawia się na obrazie, b) dodawany jest nowy klon przy użyciu polecenia attachMovie lub duplicateMovieClip, c) zewnętrzny plik .SWF jest ładowany do klipu filmowego.	onClipEvent(load){ trace(_name + "został ¬ załadowany."); }
		unload	Zdarzenie zachodzi, gdy: a) klip filmowy opuści obraz (zaraz po odtworzeniu ostatniego ujęcia klipu na głównej listwy czasowej), b) zewnętrzny plik .SWF został usunięty z klipu filmowego. Po wykryciu tego zdarzenia akcje zagnieżdżone wewnątrz detektora zostaną wykonane przed ewentualnym skryptem zawartym w listwie czasowej klipu.	onClipEvent(unload){ trace(_name + "został ¬ usunięty."); }
		enterFrame	To zdarzenie zachodzi przy odtworzeniu każdego kolejnego ujęcia klonu klipu filmowego. Akcje zagnieżdżone w detektorze zdarzenia wykonywane są po skryptach zawartych w listwie czasowej klipu filmowego. Zauważ, że zdarzenia enterFrame zachodzą ciągle (z tą samą częstotliwością z jaką odtwarzane są klatki filmu), niezależnie od tego, czy rzeczywiście są wyświetlane jakiekolwiek ujęcia.	onClipEvent(enterFrame){ trace(_name + "jest ¬ odtwarzany."); }
	Działania użytkownika	mouseMove	To zdarzenie zachodzi przy każdym ruchu myszy. W połączeniu z metodą hitTest pozwala na wykrywanie ruchów myszy nad klonem klipu filmowego. W chwili poruszenia myszy aktywacja skryptu wystąpi we wszystkich klonach klipów filmowych zawierających detektor tego zdarzenia.	onClipEvent(mouseMove){ myX = _root._xmouse; myY = _root._ymouse; if(this.hitTest(myX,myY,¬ true) == true){ trace("Ruch myszy nad ¬ klipem filmowym."); } }
		mouseDown	To zdarzenie wystąpi za każdym razem, gdy jest naciśnięty lewy klawisz myszy (niezależnie od położenia kursora na obrazie). Aktywacja skryptu wystąpi we wszystkich klonach klipów filmowych zawierających detektor tego zdarzenia.	onclipEvent(mouseDown){ myX = _root._xmouse; myY = _root._ymouse; if(this.hitTest(myX,myY,¬ true) == true){ trace("Naciśnięcie myszy ¬ na klipie filmowym."); } }
		mouseUp	Zdarzenie to zostanie wyzwolone, gdy zostanie zwolniony lewy klawisz myszy. Aktywacja skryptu nastąpi we wszystkich klonach klipów filmowych zawierających detektor tego zdarzenia.	onclipEvent(mouseUp){ myX = _root._xmouse; myY = _root._ymouse; if(this.hitTest(myX,myY,¬ true) == true){ trace("Puszczenie myszy ¬ na klipie filmowym."); } }
		keyDown	Zdarzenie to wykrywa wciśnięcie klawisza na klawiaturze. W połączeniu z metodą Key.getCode możesz użyć detektora tego zdarzenia do wykrywania naciśnięcia określonych kombinacji klawiszy.	onClipEvent(keyDown){ newKey = Key.getCode(); myKey = Key.UP; if(newKey == myKey){ trace(Jest naciśnięta ¬ strzałka w górę."); } }
		keyUp	To zdarzenie polega na zwolnieniu klawisza na klawiaturze. Działa podobnie do zdarzenia keyDown.	onClipEvent(keyUp){ newKey = Key.getCode(); myKey = Key.LEFT; if(newKey == myKey){ trace(Puszczono klawisz ¬ strzałki w lewo."); } }
Operacje zewnętrzne	data	To zdarzenie zachodzi, gdy: a) akcja loadMovie pobrała plik .SWF i umieściła go w klipie filmowym, b) zakończono ładowanie danych z pliku lub skryptu za pomocą akcji loadVariables (celem był klon klipu filmowego).	onClipEvent(data){ trace("Otrzymano nowe ¬ dane."); }

Uwaga. W tej tabeli znak ¬ oznacza kontynuację tej samej linii kodu.

Inne obiekty współpracujące z obiektami typu Movie Clip

Klipy filmowe mogą być używane z innymi obiektami języka ActionScript sterującymi wyglądem, dźwiękiem oraz przetwarzającymi dane.

Obiekt Color

Ten obiekt wymaga klipu filmowego jako obiektu docelowego. Po utworzeniu nowego obiektu, zawierającego akcję Color(), możesz kontrolować efekty dotyczące kolorów docelowego klipu filmowego. W następnych sekcjach przyjrzymy się bliżej obiektowi Color.

Obiekt Sound

Za pomocą tego obiektu możesz utworzyć klony dźwięków na listwie czasowej klipu filmowego i przygotować je do późniejszego użycia. Temu obiektowi także przyjrzymy się w tym rozdziale.

Obiekt Mouse

Ten obiekt kontroluje widzialność kursora myszy na scenie filmu Flasha. Za jego pomocą możesz „ukryć” oryginalny kursor myszy i w jego miejsce „podstawić” klon klipu filmowego, pełniący rolę zastępczego kursora.

Obiekt XML

Jeśli pracujesz z danymi XML (eXtensible Markup Language) pochodzącymi ze skryptu serwera lub pliku tekstowego, możesz przechowywać wyniki w klonie klipu filmowego, aby wydajniej zarządzać danymi. Obiekt XML jest omówiony w rozdziale 24., „Wyprowadzanie i pobieranie danych we Flashu.”

Inne akcje związane z obiektami typu Movie Clip

Pewne akcje języka ActionScript działają bezpośrednio na klonach klipów filmowych. Służą one do drukowania ujęć oraz adresowania obiektów i listew czasowych. Akcje te omawiamy w tabeli 19.4.

Tabela 19.4. Akcje odnoszące się do klipów filmowych

Funkcja	Definicja	Opcje
print() printNum()	Ta akcja powoduje wydrukowanie ujęcia (lub serii ujęć) podanej listwy czasowej. Akcja printNum używana jest do drukowania poziomów. Na każdej stronie drukowane jest jedno ujęcie. Używaj tych akcji do druku wysokiej jakości. Zapamiętaj, że przy tej metodzie przeźroczystość oraz efekty kolorów nie będą najlepsze. Akcje te omawiamy pod koniec tego rozdziału.	print(cel, ["bmovie", "bmax" lub "bframe"]); gdzie: cel jest ścieżką do klonu klipu filmowego. Każde ujęcie klipu filmowego jest drukowane, chyba że oznaczysz ujęcia przeznaczone do druku za pomocą etykiet #p. Możesz wybrać też jedną z poniższych opcji: "bMovie" powoduje takie kadrowanie przy druku, że drukowany obszar ograniczony jest wielkością ujęcia kluczowego z etykietą #b, "bmax" — największa klatka określa obszar druku, "bframe" — powoduje wydrukowanie każdej klatki tak, aby wypełniła szerokość strony.
printAsBitmap() printAsBitmapNum()	Działają tak samo jak akcje print() i printNum(). Używaj ich do drukowania ujęć zawierających przezroczystość oraz zmiany kolorów. Te akcje omawiamy pod koniec niniejszego rozdziału.	printAsBitmap(cel,["bmovie", "bmax" lub "bframe"]); Opis opcji tej akcji znajdziesz w opisie akcji print() w tej tabeli.
targetPath()	Akcja ta jest zaawansowanym następcą akcji tellTarget z Flasha 4. Zagnieżdżone w niej akcje (zawarte w nawiasach klamrowych) kierowane są do klonu klipu filmowego o podanej ścieżce.	targetPath(ścieżka do klonu klipu filmowego){[tu wpisz akcje]} targetPath(_root.myMC){ stop(); }
tellTarget()	Ta akcja pochodząca z Flasha 4 pozwala kierować akcje bezpośrednio do listwy czasowej klipu filmowego o podanej ścieżce. Ze względu na kompatybilność z Flashem 4 w ścieżce dostępu należy stosować notację ukośnikową.	tellTarget(ścieżka){[tu wpisz akcje]} tellTarget(/myMC){ stop(); }
with()	Ta akcja pozwala uniknąć wielokrotnego wpisywania odniesień i ścieżek. Po określeniu celu w akcji with możesz pominąć ścieżki w zagnieżdżonych akcjach.	with(ścieżka do obiektu){[tu wpisz akcje]} with(_root.myMC){ stop(); }

Praca z właściwościami klipów filmowych

Teraz, kiedy już wiesz, jakie są możliwości klipów filmowych (do czego można je zmusić), pobawmy się trochę ich właściwościami. W tej sekcji dowiesz się, jak korzystać z właściwości klipu filmowego dotyczących jego położenia, obrotu oraz wymiarów.

Uwaga! Poniższe przykłady korzystają z symboli przycisków znajdujących się w bibliotekach Common Libraries, które są dostarczane wraz z Flashem 5. Aby skorzystać z tych przycisków, otwórz bibliotekę za pomocą polecenia Window/Common Libraries/Buttons i przeciągnij ich klony na obraz filmu Flasha.

Położenie klipu filmowego

Możesz zmieniać położenie klonu klipu filmowego za pomocą skryptu, używając właściwości _x oraz _y. Kiedy jest to przydatne? Gdy chcesz umieścić na obrazie wiele klonów klipu filmowego poruszających się losowo (lub w jakikolwiek inny sposób), możesz uniknąć tworzenia animacji automatycznych i zamiast tego napisać parę linii kodu w języku ActionScript.

1. Utwórz nowy film (Ctrl+N lub Command+N).

2. Narysuj prosty kształt, na przykład koło. Zaznacz go i naciśnij F8, aby wykonać konwersję na symbol. W oknie dialogowym Symbol Properties zaakceptuj domyślnie ustawione zachowanie — Movie Clip i nadaj nowemu symbolowi klipu filmowego unikalną nazwę, na przykład kolo.

3. Z zaznaczonym na scenie klonem klipu filmowego, otwórz edytor skryptów — okno Object Actions (Ctrl+Alt+A lub Option+Command+A). Przełącz się w tryb Expert Mode (Ctrl+E) i wpisz następujący kod:

onClipEvent(enterFrame){

this._x += 5;

}

4. Zapisz film w pliku .FLA i przetestuj go (Ctrl+Enter lub Command+Enter). Klon klipu filmowego przesuwa się przez scenę.

Jak działa napisany kod? W kroku 3. przypisałeś detektor zdarzenia onClipEvent (enterFrame) do klonu klipu filmowego. Ponieważ ten klip filmowy posiada tylko jedno ujęcie (i nie znajduje się w nim akcja stop()), zdarzenie enterFrame będzie zachodziło przez cały czas. Z tego powodu wszystkie akcje zawarte w onClipEvent będą ciągle powtarzane.

W naszym detektorze zdarzenia jest zagnieżdżona tylko jedna akcja: this._x += 5. Słowo kluczowe this odnosi się do klonu obiektu, w którym zawarta jest akcja. W tym przypadku this oznacza nasze koło, będące klonem. Zaraz po tym słowie znajduje się odwołanie do właściwości _x dotyczącej położenia na osi X. Łącząc właściwość _x z adresem this (za pomocą kropki) osiągasz to, że odnosisz się do wartości tej właściwości w aktualnym obiekcie.

Po prawej stronie akcji znajduje się operator += oraz wartość 5. Połączenie operatorów + oraz = tworzy skrót, dzięki któremu 5 zostanie dodane do aktualnego położenia klonu koła na osi X. Przy każdym aktywowaniu zdarzenia enterFrame koło przesunie się o 5 pikseli w prawo.

Odsyłacz! Operatory i wyrażenia omawiamy w rozdziale 21, „Planowanie struktury kodu”.

Aby zobaczyć, jak szybko możesz użyć tej akcji dla kilku obiektów, zaznacz na obrazie klon koła i zduplikuj go (Ctrl+D lub Command+D) tyle razy, ile zechcesz. Gdy przetestujesz film, każdy klon będzie się przesuwał w prawo na scenie niezależnie od innych klonów.

Wskazówka! Aby przesuwać klon po przekątnej, dodaj akcję this._y +=5 wewnątrz detektora onClipEvent(). Spowoduje to przesuniecie klonu o pięć pikseli w dół przy każdym uruchomieniu procedury obsługi.

Skalowanie klipów filmowych

W poprzednim przykładzie dowiedziałeś się, jak korzystać z właściwości _x oraz _y obiektu klipu filmowego. Następny przykład pokaże Ci, jak użyć symbolu przycisku do powiększania lub pomniejszania klipu filmowego na obrazie.

1. Utwórz nowy film (Ctrl+N lub Command+N).

2. Narysuj kształt (lub wiele kształtów), zaznacz kształt(y) i naciśnij F8, aby przekonwertować zaznaczenie na symbol. Nadaj symbolowi klipu filmowego (Movie Clip) odpowiednią nazwę, aby można go było łatwo identyfikować w bibliotece.

3. Zaznacz na scenie klon klipu filmowego i otwórz paletę Instance. Nadaj klonowi nazwę. W tym przykładzie nasz klon nazwaliśmy kolo.

4. Z biblioteki przycisków Button Library przeciągnij na obraz klon przycisku.

5. Teraz utworzymy skrypt, który powiększy nasz klon koła. Zaznacz klon przycisku na scenie i otwórz edytor skryptów (okno Object Actions). W trybie Expert Mode wpisz następujący kod:

on (release){

with (kolo){

_xscale += 10;

_yscale += 10;

}

}

Powyższy kod używa akcji with(), przy użyciu której można pominąć wpisywanie ścieżek adresowych w akcjach w niej zagnieżdżonych. W tym przykładzie zwiększyliśmy wartości właściwości _xscale oraz _yscale o 10%. Przy wystąpieniu zdarzenia zwolnienia klawisza myszy nad przyciskiem zmieni się wielkość klonu koła.

6. Zapisz film w pliku .FLA i przetestuj go (Ctrl+Enter lub Command+Enter). Przy każdym kliknięciu klonu przycisku klon klipu filmowego powiększy się o 10%.

7. Zduplikuj klon przycisku (Ctrl+D lub Command+D). Z zaznaczonym nowym klonem przycisku zmień kod w edytorze skryptów na następujący:

on (release){

with (kolo){

_xscale -= 10;

_yscale -= 10;

}

}

Przez zmianę operatora += na -= każde kliknięcie klonu przycisku spowoduje zmniejszenie klonu klipu filmowego o 10%.

8. Ponownie zapisz film i przetestuj go jeszcze raz. Upewnij się, że każdy klon przycisku działa prawidłowo. Jeśli nie działa (lub działa nieprawidłowo), powróć do trybu edycji i sprawdź skrypty obu klonów przycisków.

Ostrzeżenie! W tym prostym przykładzie nie wprowadziliśmy żadnych ograniczeń dotyczących pomniejszania czy powiększania klonu. Jeśli wiele razy klikniesz przycisk pomniejszający klon, to zamiast się zmniejszać, zacznie się powiększać. Tworzenie wyrażeń warunkowych związanych z działaniem klipów filmowych omawiamy w rozdziale 21., „Planowanie struktury kodu”.

Obracanie klipów filmowych

Przejdźmy teraz do właściwości obrotu _rotation. Właściwość ta określa kąt obrotu, pod jakim jest wyświetlany klip filmowy. W przykładzie użyjemy tego samego pliku .FLA, którym posłużyliśmy się w poprzednio.

Uwaga! Jeśli w poprzednim przykładzie narysowałeś idealne koło, to powinieneś dodać coś jeszcze do symbolu klipu filmowego, aby można było zaobserwować obrót klonu. Jeśli będziesz obracał idealne koło, na scenie nie zauważysz rotacji. Ponieważ kąt obrotu jest określany względem punktu odniesienia klipu filmowego, możesz także przesunąć grafikę w symbolu klipu filmowego (w trybie edycji symbolu) tak, aby jej środek nie pokrywał się z punktem odniesienia symbolu. Wtedy na pewno będziesz mógł zaobserwować obrót.

1. Zaznacz klon przycisku, którego używaliśmy do powiększenia klonu klipu filmowego. Zmień skrypt dla przycisku na następujący:

on (release){

kolo._rotation += 10;

}

2. Teraz zaznacz klon przycisku, którego używaliśmy do zmniejszania klonu koła. Zmień skrypt dla przycisku na następujący:

on (release){

kolo._rotation -= 10;

}

3. Zapisz film i przetestuj go. Każdy z przycisków powinien powodować obrót klonu klipu filmowego odpowiednio w prawo lub w lewo.

W tym momencie musisz już mieć ogólne pojęcie o tym, jak korzystać z właściwości klipów filmowych. Powtórz powyższe przykłady, używając innych właściwości, na przykład _width oraz _height. Spróbuj zawrzeć wszystkie właściwości w jednym klonie przycisku lub detektorze onClipEvent.

Zmiany kolorów: obiekt Color

Nowy obiekt typu Color Flasha 5 daje niespotykaną dotąd kontrolę nad obiektem klipu filmowego. Posługując się obiektem Color możesz:

• tworzyć za pomocą skryptów schematy kolorów lub „skóry” dla interfejsów Flasha,

• pozwalać użytkownikowi na wybór i przeglądanie właściwości dotyczących kolorów produktów w sklepach internetowych,

• błyskawicznie zmieniać kolory w filmach tworzonych na zamówienie klienta.

Obiekt Color pozwala sterować kolorami obiektów w filmie Flasha. Omówimy teraz metody specyficzne dla niego. Informacje na ich temat znajdziesz w tabeli 19.5. Zauważ, że tabela została uporządkowana zgodnie z zastosowaniami poszczególnych metod.

Tabela 19.5. Metody obiektu Color

Metoda	Definicja	Opcje
setRGB	Powoduje zmianę kolorów RGB dla określonego obiektu Color (czyli związanego z nim klipu filmowego). Ta metoda powoduje zmianę wszystkich kolorów w docelowym klonie na jeden jednolity kolor RGB.	odwołanie.setRGB(oxRRGGBB); gdzie: odwołanie jest nazwą obiektu Color. W dalszej części tej sekcji omówimy tworzenie takiego obiektu. RR, GG, BB są wartościami koloru (wartości szesnastkowe) odpowiednio dla kanałów: czerwonego, zielonego oraz niebieskiego.
getRGB	Zwraca kolor przypisany przez ostatnie polecenie setRGB. Użyj tej metody, jeśli chcesz zastosować kolor jednego obiektu dla innego obiektu.	odwołanie.getRGB(); Ta metoda nie wymaga żadnych argumentów.
setTransform	Przesuwa wartości składowych RGB oraz wartości procentowe dla określonego obiektu Color (czyli związanego z nim klipu filmowego). Efekt działania tej metody jest podobny do zmiany parametrów w panelu Effects przy wybranej opcji Advanced.	odwołanie.setTransfor(obiekt colorTransform); gdzie: obiekt colorTransform jest nazwą obiektu, który zawiera wartości procentowe i przesunięcia składowych: czerwonej, zielonej, niebieskiej oraz przeźroczystości. W następnej części rozdziału dokładnie omówimy właściwości tego obiektu.
getTransform	Zwraca wartości przypisane przez ostatnie polecenie setTransform. Używaj tej metody w celu przypisania zmian kolorów do innego obiektu Color.	odwołanie.getTransform(); Ta metoda nie wymaga żadnych argumentów.

Tworzenie obiektu Color

Aby modyfikować kolory klonu klipu filmowego za pomocą skryptu, musisz utworzyć nowy obiekt Color i powiązać go klonem. W poniższym ćwiczeniu nauczysz się używać konstruktora obiektu Color. Konstruktory są dokładniej opisane w części V, „Programowanie w języku ActionScript”. Teraz zobaczmy, jak za pomocą obiektu Color możesz zmieniać kolory klipu.

Na CD-ROM-ie! Do ćwiczeń z obiektem Color użyj filmu dog.fla znajdującego się w katalogu ch19 na CD-ROM-ie. Dziękujemy Sandro Corsaro z spanktoons.com za udostępnienie rysunku psa.

1. Zaznacz na scenie klon rysunku psa. Otwórz panel Instance i nadaj klonowi klipu filmowego nazwę dog.

2. Otwórz bibliotekę przycisków (Window/Common Libraries/Buttons) i przeciągnij klon symbolu przycisku na scenę. W tym przykładzie użyliśmy przycisku Grey button-stop z zestawu (rectangle) Button Set.

3. Zaznacz klon przycisku na scenie i otwórz edytor skryptów (Object Actions). W trybie Expert Mode wpisz następujący kod:

on (release){

redSolid = new Color(_root.dog);

redSolid.setRGB(0xFF0000);

}

Wewnątrz detektora on(release) pierwsza akcja tworzy nowy obiekt Color o nazwie redSolid, który odwołuje się do klonu klipu filmowego _root.dog utworzonego w kroku pierwszym. Po zainicjalizowaniu obiektu redSolid mamy dostęp do jego metod, na przykład setRGB. W tym przykładzie zmieniamy kolor klipu filmowego na czysty czerwony, w zapisie szesnastkowym jest to FF.

4. Zapisz film w pliku .FLA i przetestuj go. Kliknij przycisk na obrazie. Kolor klipu filmowego z psem powinien się zmienić na jasnoczerwony. Zamknij testowy plik .SWF i wróć do środowiska edycyjnego.

5. Aby prześledzić działanie metody getRGB, dodamy polecenie trace wyświetlające komunikat w oknie Output. Zaznacz klon przycisku na obrazie i otwórz edytor skryptów. Dodaj następującą linię kodu na końcu (ale jeszcze wewnątrz) detektora on (release):

trace("wartosc dziesietna redSolid = " + "redSolid.getRGB());

6. Zapisz film i przetestuj go. Gdy klikniesz przycisk, powinno się otworzyć okno z następującym tekstem:

wartosc dziesietna redSolid = 16711680

7. Aby zwracana wartość była podawana w postaci szesnastkowej, którą wpisujemy przy metodzie setRGB, musimy ją skonwertować do liczby o podstawie 16. Dodaj następującą akcję do instrukcji w procedurze obsługi on (release):

trace("wartosc szesnastkowa redSolid = " + redSolid.getRGB().toString(16));

8. Zapisz film i przetestuj go. Gdy klikniesz przycisk, w oknie Output pojawi się następujący tekst:

wartosc dziesietna redSolid = 16711680

wartosc szesnastkowa redSolid = ff0000

9. Nie musisz jednak konwertować wartości zwracanej przez getRGB, aby przypisać innemu obiektowi Color wartość poprzednio wpisaną za pomocą setRGB. Zduplikuj klon klipu filmowego psa i nadaj nowemu nazwę dog2. Zduplikuj klon przycisku na scenie. Zmień akcje przypisane do nowego klonu przycisku na następujące:

on (release){

redSolid2 = new Color(_root.dog2);

redSolid2.setRGB(redSolid.getRGB());

}

10. Zapisz film, a potem przetestuj go. Gdy klikniesz pierwszy przycisk, klon o nazwie dog stanie się czerwony. Gdy naciśniesz drugi przycisk, klon o nazwie dog2 stanie się czerwony.

Uwaga! Jeśli najpierw naciśniesz drugi przycisk, klon o nazwie dog2 stanie się czarny. Dlaczego? Dlatego, że akcje z pierwszego przycisku jeszcze nie zostały wykonane; nie została więc wykonana metoda setRGB, przez co getRGB nie ma skąd pobrać koloru. A nawet więcej, nie został jeszcze utworzony obiekt redSolid. Z tego też powodu Flash zwraca zero lub wartość null dla metody getRGB. W szesnastkowym kodzie koloru wartości zerowej odpowiada czerń.

Teraz, kiedy poznałeś już w pewnym stopniu metody setRGB oraz getRGB obiektu Color, przejdźmy do bardziej skomplikowanego obiektu colorTransform. Użyjemy pliku .FLA z tego ćwiczenia, więc pozostaw jeszcze psa na scenie!

Tworzenie obiektu colorTransform

Pozostały nam jeszcze dwie metody obiektu Color: setTransform oraz getTransform. Wymagają one zrozumienia przestrzeni barw RGB. Zanim użyjemy metody setTransform dla obiektu Color, musisz używając konstruktora obiektów, utworzyć ogólny obiekt, który stanie się obiektem colorTransform, gdy przypiszesz do niego właściwości kolorów.

Właściwości obiektu colorTransform są następujące:

• ra — wartość procentowa kanału czerwonego,

• rb — wartość przesunięcia kanału czerwonego,

• ga — wartość procentowa kanału zielonego,

• gb — wartość przesunięcia kanału zielonego,

• ba — wartość procentowa kanału niebieskiego,

• bb — wartość przesunięcia kanału niebieskiego,

• aa — wartość procentowa kanału przeźroczystości,

• ab — wartość przesunięcia kanału przeźroczystości.

Właściwości z literą a na drugiej pozycji w nazwie zawierają wartości procentowe zmieniające się od -100 do 100, z literą b na drugiej pozycji zawierają wartości przesunięcia z przedziału od -255 do 255 (wynika to z 24-bitowej przestrzeni barw RGB, gdzie każdy kanał zapisany jest na ośmiu bitach, czyli może przyjąć jedną z 256 różnych wartości).

Jeśli właściwości te wydają ci się skomplikowane, zajrzyj do panelu Effect i wybierz opcję Advanced. Gdy to zrobisz, po lewej stronie znajdą się parametry procentowe, natomiast po prawej wartości przesunięcia składowych. Trzeba przyznać, że trudno jest określić kolor, widząc tylko liczby. W odpowiednim doborze wartości w obiekcie setTransform pomoże nam panel Effect.

1. Używając tego samego pliku .FLA co w poprzednim ćwiczeniu, zaznacz oryginalny klon klipu filmowego na scenie. Otwórz panel Effect (polecenie Window/Panel/Effect) i z listy wybierz opcję Advanced. Po lewej stronie parametr Blue ustaw na -100%. Natomiast po prawej stronie parametry G oraz B odpowiednio na 37 oraz 255. Przy tych wartościach pies powinien być niebieski i mieć żółte oczy. Zapamiętaj te wartości, byś mógł ich użyć w skrypcie. Następnie usuń efekt, wybierając z listy opcję None.

2. Zduplikuj jeden z istniejących klonów przycisku. Do nowego klonu dodamy kod, który będzie inicjalizował nowe obiekty Color oraz colorTransform. Obiektowi colorTransform nadamy takie same wartości, jakie uzyskaliśmy w pierwszym kroku. Następnie zastosujemy metodę setTransform dla obiektu Color, używając danych zawartych w obiekcie colorTransform. Zaznacz dodany przed chwilą klon przycisku i w edytorze skryptów (oknie Object Actions) wpisz następujący kod:

on (release) {

dogColor = new Color(_root.dog);

rabidLook = new Object();

rabidLook.ba = -100;

rabidLook.bb = 255;

rabidLook.gb = 37;

dogColor.setTransform(rabidLook);

}

W powyższym kodzie utworzyliśmy dwa obiekty: dogColor oraz rabidLook. Obiektowi rabidLook przypisaliśmy trzy właściwości obiektu colorTransform: ba, bb oraz gb. Ich wartości ustaliliśmy wcześniej (w pierwszym kroku). Następnie użyliśmy obiektu rabidLook jako argumentu metody setTransform wywoływanej dla obiektu dogColor (który jest obiektem typu Color).

3. Zapisz film Flasha i przetestuj go. Kliknij klon przycisku wykreowanego w drugim kroku. Kolory klonu klipu filmowego psa powinny się zmienić na takie, jakie widzieliśmy w pierwszym kroku. Zamknij plik .SWF i powróć do środowiska edycyjnego.

4. Utwórzmy teraz przycisk, który przywróci oryginalny wygląd klonowi psa. Struktura kodu będzie taka sama, jak w drugim kroku, ale użyjemy teraz innej metody przypisywania właściwości obiektowi colorTransform. Zduplikuj przycisk opracowany w drugim kroku, otwórz edytor skryptów i zmień kod skryptu na następujący:

on (release) {

dogColor = new Color(_root.dog);

restoreLook = new Object();

restoreLook = {

ra: '100',

rb: '0',

ga: '100',

gb: '0',

ba: '100',

bb: '0',

aa: '100',

ab: '0'

}

dogColor.setTransform(restoreLook);

}

W obiekcie restoreLook zdefiniowaliśmy wszystkie domyślne właściwości używając par nazwa-wartość oddzielonych dwukropkiem (:). Zauważ, że wszystkie właściwości obiektu restoreLook mogą zostać zadeklarowane i zainicjalizowane wewnątrz bloku {}.

5. Zapisz plik .FLA i przetestuj film. Kliknij klon przycisku, który utworzyłeś w drugim kroku. Gdy klon psa zmieni kolor, kliknij klon przycisku, który opracowałeś w czwartym kroku. Klon psa powróci do oryginalnych kolorów. Kliknij teraz pierwszy klon przycisku, którego utworzyłeś w poprzedniej sekcji. Ten klon (korzystający z metody setRGB) zmienia kolor psa na jednolitą czerwień. Kliknij jeszcze raz klon przycisku, który zawiera obiekt restoreLook — klon psa znowu powróci do swego pierwotnego wyglądu!

Metoda setRGB może zmieniać tylko podstawowe właściwości kolorów obiektu typu Movie Clip, ale metoda setTransform jest już naprawdę użytecznym narzędziem. Wszystkie zmiany wyglądu, jakie możesz przeprowadzić w panelu Effect, możesz także zrealizować za pomocą metody setTransform oraz obiektu colorTransform.

Wskazówka! Podobnie jak metoda getRGB pobiera wartości przypisane poprzednio metodą setRGB, tak też metoda getTransform może przyjąć właściwości przypisane wcześniej przy użyciu metody setTransform.

Obsługa dźwięku w języku ActionScript

Flash 5 oferuje wiele nowych rodzajów obiektów. Jednym z bardziej interesujących jest obiekt typu Sound. Jak większość z nich, obiekt typu Sound posiada predefiniowane metody, które mogą zostać użyte do sterowania obiektami dźwiękowymi. W tabeli 19.6 znajdziesz opis obiektu Sound oraz jego metod.

Tabela 19.6. Metody obiektu Sound

Metoda	Definicja	Opcje
attachSound	Tworzy nowy klon pliku dźwiękowego (.AIF lub .WAV) dostępnego w bibliotece. Nowy klon staje się częścią obiektu Sound i jest dostępny dla metod tego obiektu.	obiektSound.attachSound(identyfikator w bibliotece); gdzie: obiektSound odpowiada nazwie obiektu Sound, identyfikator jest identyfikatorem dźwięku , podanym w oknie Symbol Linkage Properties (otwieranym w bibliotece za pomocą polecenia Linkage)
start	Odtwarza dźwięk powiązany z obiektem Sound. Przed odtwarzaniem dźwięk musi zostać przypisany do obiektu Sound.	obiektSound.start(odkąd, ile razy); gdzie: odkąd oznacza miejsce (podawane w sekundach), od którego będzie odtwarzany dźwięk, ile razy określa ile razy dźwięk ma zostać odtworzony. Obydwa parametry są opcjonalne i mogą zostać pominięte.
stop	Zatrzymuje odtwarzanie dźwięku powiązanego z obiektem Sound. Gdy nie jest określony docelowy dźwięk, program zatrzymuje odtwarzanie wszystkich dźwięków. Pamiętaj, że nie jest to równoważne pauzie. Jeśli zatrzymany dźwięk zostanie wznowiony, program odtworzy go od początku (lub od wskazanego miejsca — patrz metoda start).	obiektSound.stop(identyfikator w bibliotece); gdzie: identyfikator jest identyfikatorem dźwięku w bibliotece, ustalonym w oknie Symbol Linkage Properties
setVolume	Zmienia głośność odtwarzania określonego obiektu Sound. Dopuszczalne są wartości z zakresu od 0 do 100 (jednostką są procenty). Nie możesz wpisać wartości większej niż 100, czyli dźwięk nie może być odtwarzany głośniej niż został nagrany.	obiektSound.setVolume(głośność); gdzie: głośność jest wartością z przedziału od 0 do 100
getVolume	Zwraca wartość głośności ustawioną za pomoca ostatniego polecenia setVolume. Jeśli chcesz zmienić głośność innego obiektu Sound, użyj tej metody.	obiektSound.getVolume(); Ta metoda nie wymaga żadnych argumentów.
setPan	Zmienia położenie dźwięku na panoramie stereo.	obiektSound.setPan(rozłożenie); gdzie: rozłożenie jest wartością z przedziału od -100 (odtwarzanie dźwięku tylko w lewym kanale) do 100 (odtwarzanie dźwięku tylko w prawym kanale). Użyj wartości 0, aby dźwięk był kierowany z jednakową intensywnością do obydwu kanałów.
getPan	Zwraca wartość ustawioną przy użyciu ostatniego polecenia setPan. Użyj tej metody do zmiany panoramy stereo dla wielu obiektów lub zapamiętania ustawienia.	obiektSound.getPan(); Ta metoda nie wymaga żadnych argumentów.
setTransform	Zmienia głośność osobno dla każdego kanału stereo obiektu Sound. Metoda ta pozwala także na odtwarzanie danych prawego kanału w lewym kanale i na odwrót.	obiektSound.setTransform(soundTransformObject); gdzie: soundTransformObject jest nazwą obiektu, który zawiera wartości procentowe odtwarzania danych prawego i lewego kanału stereo w prawym i lewym głośniku.
getTransform	Zwraca wartość ustawioną za pomocą ostatniego polecenia setTransform. Używaj tej metody do przekształcania nowych obiektów Sound lub do zapamiętywania wartości setTransform.	obiektSound.getTransform(); Ta metoda nie wymaga żadnych argumentów.

Powody, dla których warto używać obiektu Sound zamiast tradycyjnych klipów filmowych z dźwiękiem lub dźwięków w ujęciach kluczowych, są następujące:

• dynamiczne zdarzenia dźwiękowe mogą być odtwarzane w kolejności wybranej przez użytkownika lub losowo,

• możesz precyzyjnie sterować głośnością i panoramą dźwięku,

• możesz usunąć obiekt dźwiękowy, gdy nie jest już potrzebny.

Uwaga! Wszystkie obiekty Sound są traktowane jako dźwięki typu Event (czyli zdarzenia dźwiękowe). Nie możesz używać obiektów Sound dla dźwięków typu Stream (czyli dźwięków strumieniowych). Typy dźwięków są związane z ich synchronizacją. Więcej informacji na temat synchronizacji znajdziesz w rozdziale 15., „Import i edycja dźwięku we Flashu”.

W odróżnieniu od obiektu Color, który odnosi się do klonów klipów filmowych, obiekt Sound może sterować dźwiękami pochodzącymi bezpośrednio z biblioteki filmu. Nie możesz użyć obiektu Sound do bezpośredniego sterowania dźwiękami, które są przypisane do ujęć kluczowych listwy czasowej za pomocą panelu Sound.

W następnej sekcji dowiesz się, jak tworzyć obiekty dźwiękowe, używając konstruktora obiektów oraz metod attachSound i start.

Tworzenie bibliotek dźwięków w skryptach

W poprzednim rozdziale dowiedziałeś się, jak utworzyć w klipie filmowym bibliotekę dźwięków, która przechowuje kilka różnych klonów klipów dźwiękowych. Pokazaliśmy tam, jak odnosić się do dźwięków w celu ich odtwarzania (lub wyciszania). Z punktu widzenia projektanta ręczne tworzenie poszczególnych klipów filmowych z dźwiękami ułatwia operowanie nimi. Możesz jednak znacznie szybciej tworzyć biblioteki dźwięków, używając języka ActionScript.

W tej sekcji skorzystamy z klipu filmowego z biblioteką dźwięków, którą utworzyliśmy w poprzednim rozdziale. Możesz także otworzyć plik pianoKeys_complete.fla znajdujący się w katalogu ch18\pianoKeys na CD-ROM-ie.

1. Wybierz polecenie Open As Library z menu File i otwórz bibliotekę pliku pianoKeys_complete.fla, który utworzyłeś w poprzednim rozdziale. Otwarcie biblioteki filmu Flasha w taki sposób, umożliwia przeniesienie jej elementów do aktualnego filmu.

Ostrzeżenie! W pierwszym kroku nie używaj polecenia Open As Shared Library. Jest to specjalna komenda, którą omówimy w następnym rozdziale.

2. Jeśli nie utworzyłeś jeszcze nowego filmu, zrób to teraz (Ctrl+N lub Command+N). Przeciągnij klip filmowy soundLib z biblioteki pianoKeys na obraz nowego filmu. Gdy teraz otworzysz bibliotekę nowego filmu, to zobaczysz, że wszystkie elementy, zawarte w klipie filmowym soundLib, także zostały zaimportowane do nowego filmu. Zamknij okno Library filmu pianoKeys_complete i zapisz nowy film w pliku soundLib_ActionScript.fla.

3. Zaznacz na obrazie klon zawierający bibliotekę dźwięków i otwórz panel Instance. Nadaj klonowi nazwę soundLib. Naciśnij klawisz Enter lub Tab, aby potwierdzić wpisaną nazwę.

4. Kliknij dwukrotnie klon z biblioteką dźwięków na obrazie. Program przejdzie do trybu edycji symbolu. W trybie tym utwórz nową pustą warstwę i usuń wszystkie warstwy z dźwiękami. (W klipie filmowym zawsze musi istnieć co najmniej jedna warstwa). Na pustej warstwie narysuj ikonę reprezentującą klip filmowy biblioteki dźwięków. My narysowaliśmy biały prostokąt z czarnym tekstem soundLib. Elementy ikony umieść na środku obrazu klipu filmowego.

5. Powróć do głównej listwy czasowej (kliknij zakładkę Scene 1 w lewym górnym narożniku okna dokumentu lub wybierz z menu polecenie Edit/Movie). Zanim będziemy mogli dołączyć do klonu biblioteki dźwięki, musimy każdemu z nich w bibliotece nadać unikalną nazwę, dzięki czemu będziemy mogli identyfikować dźwięki w skryptach. Otwórz bibliotekę (klawisze Ctrl+L lub Command+L) i zaznacz dźwięk key_1.aif (lub key_1.wav). Kliknij prawym klawiszem (na Mac'u Control+kliknięcie) podświetlony dźwięk i z podręcznego menu wybierz polecenie Linkage. W oknie Symbol Linkage Properties zaznacz opcję Export this symbol i wpisz nazwę sound_1 w pole Identifier, jak pokazano na rysunku 19.4. Kliknij przycisk OK.

Rysunek 19.4. Metoda attachSound może używać tylko dźwięków, które zostały ustawione do eksportu w pliku .SWF Flasha

6. Powtórz operacje z 5. kroku dla każdego dźwięku z biblioteki, by nadać mu identyfikującą nazwę. Zwiększaj liczbę wpisywaną po tekście sound_ dla każdego następnego dźwięku (na przykład sound_2 dla key_2.aif, sound_3 dla key_3.aif, itd.).

7. Teraz musimy dodać skrypt, który utworzy nasz obiekt Sound. Zdefiniujemy funkcję, która wykreuje tablicę zawierającą klony dźwięków. Utwórz nową warstwę, nazwij ją actions i kliknij dwukrotnie jej pierwsze ujęce. Spowoduje to otwarcie edytora skryptów (okna Frame Actions). W trybie Expert Mode wpisz następujący kod:

function createLib(num){

for(i=1;i<=num;i++){

Pierwsza linia określa nazwę funkcji, createLib. Chcemy mieć możliwość dynamicznego ustalenia liczby dźwięków kreowanych przez funkcję, dlatego utworzyliśmy parametr (argument) num, który zostanie przekazany do funkcji i będzie zawierał liczbę tworzonych dźwięków.

Druga linia rozpoczyna pętlę for, która powtarza zagnieżdżone w niej akcję do momentu niespełnienia warunku i<=num. Zmienna i przyjmuje początkową wartość 1. Natomiast i++ oznacza, że po każdej iteracji pętli wartość i będzie zwiększana o 1.

W następnym kroku zamierzamy: stworzyć tablicę przechowującą odwołania do klonów dźwięków, wykreować obiekt Sound dla każdego dźwięku z biblioteki, przypisać poszczególne dźwięki z biblioteki do odpowiednich obiektów Sound.

Uwaga! W tym ćwiczeniu nie omawiamy ogólnej struktury ani zasad działania funkcji, tablic ani warunków. Niemniej jednak używany tych mechanizmów.

8. W edytorze skryptów dodaj następujące akcje do kodu napisanego w kroku 6.:

if(i==1){

this.snd = new Array();

trace("stworzono nowa tablice.");

trace("this = " + this);

}

this.snd[i] = new Sound(this);

this.snd[i].attachSound("sound_"+i);

}

}

Pierwsza linia dodanego kodu sprawdza, czy i jest równe 1. W czasie pierwszej iteracji pętli for jest to prawdą (true), a więc warunek if zostanie spełniony.

Następna linia kodu jest już zagnieżdżona w akcji if. Linia ta powoduje utworzenie nowej tablicy (obiektu typu Array) o nazwie snd, która zostanie osadzona na listwie czasowej this. Ścieżka this odpowiada w tym przypadku obiektowi, który wywoła funkcję createLib. Ponieważ definiujemy funkcję i nie wiemy, z jakiego miejsca zostanie wywołana, nie podajemy żadnej konkretnej nazwy klonu klipu filmowego. Linia ta zostanie wykonana tylko jeden raz, gdy i będzie równe 1. Przy następnej iteracji pętli i będzie już większe od 1 i linia zostanie zignorowana.

Trzecia linia zawiera akcję trace, która powoduje wyświetlenie komunikatu w oknie Output (w środowisku testowym). Akcja ta powiadomi nas, że tablica została utworzona a warunek if spełniony.

Czwarta linia także zawiera akcję trace, która poinformuje nas, jaki obiekt wywołał funkcję createLib.

Piąta linia tworzy nowy element w tablicy snd. Element ten jest obiektem typu Sound, osadzonym na listwie czasowej this. Jak się za chwilę okaże, obiekt Sound zostanie powiązany z klonem klipu filmowego soundLib. Każdy element tablicy posiada numer (indeks), który identyfikuje jego położenie w tablicy. Ponieważ wartość i zwiększa się przy następnej iteracji pętli for, każdy obiekt Sound otrzymuje unikalne położenie w tablicy snd.

W szóstej linii znajdziesz metodę attachSound, która pobiera element z biblioteki i łączy go z obiektem Sound z tablicy snd. Obiekt dla metody attachSound określony jest jako "sound_"+i. W kolejnych iteracjach pętli program przekazuje do metody attachSound argumenty "sound_1", "sound_2" i tak dalej, aż do wartości num.

Cały kod dla pierwszego ujęcia kluczowego warstwy actions powinien teraz wyglądać następująco:

function createLib(num){

for(i=1;i<=num;i++){

if(i==1){

this.snd = new Array();

trace("stworzono nowa tablice.");

trace("this = " + this);

}

this.snd[i] = new Sound(this);

this.snd[i].attachSound("sound_"+i);

}

}

9. Gdy już mamy zdefiniowaną funkcję tworzącą obiekty Sound w obiekcie (lub listwie czasowej) this, możemy zająć się obiektem, do którego będzie odnosiło się słowo kluczowe this, i który odwoła się do funkcji createLib. Poniżej definicji funkcji createLib, w pierwszym ujęciu warstwy actions, dodaj następujący kod:

soundLib.createLib = createLib;

soundLib.createLib(7);

Pierwsza linia kodu definiuje metodę o nazwie createLib, która używa funkcji createLib jako wartości. Ponieważ createLib jest funkcją, zdefiniowana metoda przy każdym wywołaniu wykona funkcję createLib.

Druga linia kodu wywołuje metodę createLib — nawiasy() po nazwie metody sprawiają, że jest wykonywana, a nie definiowana. Poza samym wykonaniem metody createLib nadaliśmy argumentowi num wartość 7, ponieważ chcemy utworzyć siedem obiektów Sound.

10. Zapisz film Flasha i przetestuj go (Ctrl+Enter lub Command+Enter). Powinno otworzyć się okno Output z następującym tekstem:

new array created.

this = _level0.soundLib

11. Zamknij okno testowe filmu i powróć do środowiska edycyjnego. Kliknij dwukrotnie pierwsze ujęce warstwy actions i dodaj ostatni fragment kodu:

this.soundLib.snd[1].start();

this.soundLib.snd[2].start();

Pierwsza linia kodu odwołuje się do pierwszego zadeklarowanego elementu tablicy snd i rozpoczyna odtwarzanie dźwięku. Pamiętaj, że pierwszym elementem listy jest obiekt Sound, który odwołuje się do identyfikatora sound_1 z biblioteki.

Druga linia kodu odwołuje się do drugiego zadeklarowanego elementu tablicy snd i rozpoczyna odtwarzanie tego dźwięku.

12. Zapisz film i przetestuj go. Obydwie linie zostaną uruchomione praktycznie równocześnie. Dlatego też dźwięki sound_1 (czyli key_1.aif lub key_1.wav) oraz sound_2 (czyli key_2.aif lub key_2.wav) zostaną odtworzone w tym samym czasie.

Powinieneś już teraz wiedzieć, jak używać obiektów Sound z klonami przycisków oraz ujęciami kluczowymi. Aby odtworzyć inny dźwięk, wystarczy po prostu zmienić liczbę w nawiasach kwadratowych. W następnym rozdziale dowiesz się, jak ładować filmy Flasha (pliki .SWF) do innych filmów tego programu. Za pomocą akcji loadMovie możesz umieścić tę bibliotekę dźwięków w innym filmie.

Na CD-ROM-ie! Ukończony film z biblioteką dźwięków znajduje się w katalogu ch19 na CD-ROM-ie i nosi nazwę soundLib_AS.fla.

Następne ćwiczenie dotyczy metod obiektu Sound związanych ze sterowaniem panoramą dźwięku i demonstruje zastosowania obiektów Sound w interaktywnych projektach.

Ostrzeżenie! W czasie testowania Flasha 5 oraz metod obiektu Sound przekonaliśmy się, że nie powinno się dołączać więcej niż jednego dźwięku do listwy czasowej (lub klonu klipu filmowego). Gdy na jednej listwie czasowej znajdzie się więcej niż jedna kopia obiektu Sound, nie będziesz mógł używać metody setVolume do sterowania głośnością poszczególnych dźwięków — głośność będzie zmieniana jednocześnie we wszystkich obiektach Sound na danej listwie czasowej.

Szare tło!

Ćwiczenie eksperta:
Sterowanie dźwiękiem
Autor: Jay Vanian

Ćwiczenie Jay'a dotyczy metody setPan i jest szczególnie interesujące ze względu na zastosowanie obiektów Sound wraz z przeciąganymi klipami filmowymi, które dokładniej zostaną omówione pod koniec tego rozdziału. Zauważ, że w tym ćwiczeniu Jay używa jeszcze składni z Flasha 4 — niektóre ścieżki są zapisane przy użyciu notacji ukośnikowej; pojawia się też akcja getProperty. Z tego też powodu ćwiczenie może pomóc niektórym osobom przejść z akcji Flasha 4 na język ActionScript Flasha5.

Dźwięk znacznie rozszerza możliwości projektowania filmów Flasha, ponieważ pozwala uzupełnić grafikę i interaktywność filmu. Jest jednak najmniej docenianym aspektem filmów Flasha. Miejmy nadzieję, że zmieni się to po wprowadzeniu we Flashu 5 nowych opcji dotyczących obsługi dźwięku. Aby jednak z nich skorzystać (i rozpocząć to ćwiczenie), musimy znaleźć dobry powód, dla którego będziemy musieli pobawić się głośnością oraz panoramą dźwięku. Przypadkowymi ustawieniami dźwięku nie przyciągniesz niczyjej uwagi i nie zwiększysz w ten sposób oglądalności Twojej strony. Z tego powodu jako temat ćwiczenia wybrałem odbijającą się piłkę do koszykówki, dzięki której w dosyć realistycznych warunkach zapoznamy się z obsługą dźwięku.

Dopiero we Flashu 5 umożliwiono dynamiczną zmianę parametrów dźwięku w filmie przy użyciu nowego obiektu Sound, który steruje zarówno głośnością, jak i panoramą dźwięku.

1. Na początku pragnę udzielić małej rady: zawsze ustal wymiary obrazu filmu, zanim zaczniesz robić coś innego. Wymiary te możesz ustalić w oknie Movie Properties. Być może przekonałeś się już, że inna droga jest błędna i zwykle zmusza do późniejszego przeskalowania całego filmu. Po takiej przygodzie nikt nie popełnia drugi raz podobnego błędu. W tym projekcie ustal wymiary obrazu na 500×300 pikseli. Nie zapomnij także o częstym zapisywaniu pliku przy tworzeniu filmu!

2. Po ustaleniu wymiarów filmu zaimportuj tło. Znajduje się ono w pliku floor.jpg. Umieść je w pierwszej warstwie, a następnie zmień jej nazwę na Floor.

3. Następnie zaimportuj wektorowy rysunek piłki do koszykówki, gfx_basketball.ai, przekonwertuj go na symbol graficzny i nazwij gfx_basketball. Tak samo postąp z cieniem gfx_shadow. Utwórz teraz klip filmowy i nazwij go mov_basketball; następnie przeciągnij klon symbolu gfx_basketball do klipu filmowego i utwórz animację odbijającej się piłki (wraz z cieniem), używając automatycznej animacji ruchu (Motion Tween). Użyj parametru Easing (przyspieszeń), aby odbicie było bardziej realistyczne. (Więcej informacji na temat tworzenia animacji odbijającej się piłki znajdziesz w przeglądowym rozdziale na początku książki, „Flash w pigułce”).

Uwaga autora. Pliki .FLA oraz wszystkie inne materiały potrzebne do tego ćwiczenia znajdziesz w katalogu ch19\jay_vanian na CD-ROM-ie.

4. Musimy jeszcze zaimportować dźwięk odbijającej się piłki; nazwij go ballbounce. W bibliotece kliknij dwukrotnie ikonę dźwięku, aby otworzyć okno Sound Properties, gdzie możesz dostosować i przetestować właściwości dźwięku oraz ustalić jego jakość i wielkość przy eksporcie. Kliknij przycisk OK i powróć do biblioteki. Teraz kliknij na dźwięku prawym klawiszem myszy i z podręcznego menu wybierz Linkage. W oknie Symbol Linkage Properties uaktywnij opcję Export this symbol i w polu Identifier wpisz nazwę ballbounce.

5. Nadal pracując nad klipem filmowym z piłką, dodaj ujęcie kluczowe w 6. klatce. Dźwięk musi być zsynchronizowany z odbiciem piłki. Dla naszego dźwięku 6. klatka jest najbardziej odpowiednia. Z zaznaczonym ujęciem kluczowym otwórz edytor skryptów (klawisze Ctrl+Alt+A lub Command+Option+A). W nim utworzymy skrypt, który połączy to ujęcie kluczowe z dźwiękiem ballBounce dodanym w poprzednim kroku.

Rysunek: Gdy piłka odbija się i podąża za kursorem, odgłos odbicia musi odpowiadać zmianom położenia piłki — staje się głośniejszy lub cichszy, gdy piłka porusza się do przodu lub w głąb „parkietu”, a proporcja głośności dźwięku w obu głośnikach (panorama) zależy od tego, czy piłka znajduje się po lewej, czy po prawej stronie boiska

6. Pracując w trybie Normal Mode, umieść w skrypcie pierwszą akcję. Rozwiń podkategorię Objects/Sound i utwórz przypisanie s = new Sound.

7. Nadal w tej samej podkategorii Objects/Sound kliknij dwukrotnie metodę attachSound i w polu idName wpisz identyfikator ballbounce. Na początku linii w skrypcie umieść nazwę obiektu s oraz kropkę.

8. Dodamy jeszcze jedną metodę z tej podkategorii. Kliknij metodzę start i usuń tekst znajdujący się w nawiasie. Znowu dodaj na początku akcji nazwę s oraz kropkę. Kod w 6. ujęciu klipu filmowego piłki powinien wyglądać teraz następująco:

s = new Sound();

s.attachSound("ballbounce");

s.start();

9. Powróć do głównej listwy czasowej, przeciągnij klip filmowy z piłką na scenę i wyśrodkuj go, używając panelu Align (klawisze Ctrl+K lub Command+K). Klonowi nadaj nazwę basketball. Zapisz film.

10. Aby piłka reagowała na ruchy myszy, będziemy musieli utworzyć przeciągalny obiekt. Aby powstał, zaznacz pierwsze ujęcie górnej warstwy (noszącej nazwę actions) i dodaj akcję startDrag z podkategorii Objects/Movie Clip znajdującej się po lewej stronie okna Actions. Celem będzie klip filmowy piłki /basketball. Zaznacz opcje Constrain to rectangle oraz Lock mouse to center znajdujące się na dole okna. Współrzędne ograniczające prostokątne pole ruchu obiektu powinny być następujące, L: 10, T: 10, R: 490, B: 200. Ustawienia te spowodują wyśrodkowanie klipu filmowego względem kursora myszy oraz ograniczenie ruchu myszy do prostokąta określonego przez współrzędne. Akcja w pierwszym ujęciu głównej listwy czasowej powinna wyglądać następująco:

startDrag ("/basketball", true, 10, 10, 490, 200);

Uwaga autora. Ponieważ ten film korzysta z języka ActionScript Flasha 5, możesz stosować notację kropkową w ścieżkach adresowych. W kroku 10. zamiast ścieżki /basketball możesz napisać _root.basketball.

11. W drugim ujęciu warstwy actions dodaj następujące akcje:

basketball.s.getVolume();

basketball.s.getPan();

Akcje te używane są do pobierania (a następnie zapamiętywania) głośności oraz panoramy dźwięku odtwarzanego przez klip filmowy z piłką.

12. Następnie nadaj zmiennej n wartość współrzędnej Y klipu filmowego (właściwość _y). Zmienna ta używana jest do skalowania piłki przy ruchu myszy w przód lub w tył. Aby piłka nie robiła się zbyt mała, warunek if (n<=25) używany jest do ustawienia zmiennej n z powrotem na 25, jeśli wartość tej zmiennej będzie mniejsza lub równa 25. Kod jest następujący:

n = getProperty("/basketball", _y);

if (n<=25) {

n = 25;

}

Uwaga autora. Przypisanie wartości n w kroku 12. może zostać także zapisane tak: n = _root.basketball._y; (ścieżka dostępu przy użyciu notacji kropkowej).

13. Po ustaleniu wartości zmiennej n, musimy przypisać właściwościom _xscale oraz _yscale klipu /basketball wartość tej zmiennej n. Przy ustawianiu tych właściwości ważne jest zaznaczenie opcji Expression obok pola Value; w przeciwnym wypadku film będzie przypisywał wartość tekstową "n", a nie wartość wynikającą z położenia kursora myszy na osi Y (bo taką właśnie wartość posiada n). Oto kod:

setProperty ("/basketball", _xscale, n);

setProperty ("/basketball", _yscale, n);

Uwaga autora. Możesz także napisać te akcje następująco: _root.basketball._xscale = n; oraz _root.basketball._yscale = n;.

14. (Przypominamy o konieczności zapisywania pliku podczas pracy). Aby głośność zmieniała się dynamicznie, dźwięk musi „poruszać się” zgodnie z położeniem myszy. Mechanizm ten będzie podobny do zastosowanego przy skalowaniu piłki. Ponieważ zmiennej n przypisaliśmy już położenie _y, możemy go użyć także do zmiany głośności. Potrzebujemy też zmiennej reprezentującej panoramę dźwięku. Przypiszemy zatem zmiennej s1 położenie _x klipu filmowego piłki:

s1 = (getProperty ("/basketball",_x));

Uwaga autora. Możesz także napisać tak: s1 = _root.basketball._x;.

15. Zmienna s1, która jest równa położeniu _x, zostanie użyta do ustalenia wartości zmiennej określającej panoramę dźwięku. Jednak przed ustaleniem tej wartości powiedzmy kilka słów na temat argumentu metody odpowiadającej panoramie. Argument ten musi zmieniać się w zakresie od -100 do 100, gdzie 0 odpowiada równowadze lewego i prawego kanału. Wszystko jest w porządku, gdy szerokość pola ruchu klipu filmowego wynosi dokładnie 200 pikseli. Jednak w filmach, gdzie wartość _x może być większa od 200, rozbieżność pomiędzy wartościami przyjmowanymi przez _x a panoramą wymaga korekty. Musimy znaleźć współczynnik, który pozwoli nam przeliczyć szerokość filmu na skalę panoramy. Aby otrzymać jego wartość, wystarczy podzielić szerokość filmu przez 200. W tym przypadku 500 podzielimy przez 200 i otrzymamy 2,5.

16. Teraz, aby ustalić zmienną s2, która zostanie użyta do sterowania panoramą, podzielimy s1 (położenie myszy na osi X) przez 2,5. Spowoduje to przeliczenie szerokości filmu do skali panoramy. Na przykład, gdy położenie _x myszy wynosi 350 (film ma szerokość 500 pikseli) dzielimy tę wartość przez 2,5 i otrzymujemy 140. Zawsze odejmujemy od wyniku wartość 100, ponieważ skala rozpoczyna się od -100 (panorama przesunięta maksymalnie w lewo), a kończy na +100 (panorama przesunięta maksymalnie w prawo). Ostatecznie zmienna s2 przyjmuje wartość 40; daje to 40% przesunięcie panoramy w kierunku prawego kanału. Jeśli _x będzie równe 50, s2 przyjmie wartość -80%, co spowoduje przesunięcie panoramy w kierunku lewego kanału ((50/2,5 = 20) - 100) = -80. Więc:

s2 = ((s1/2.5)-100);

Jeśli Twój film ma mniej niż 200 pikseli szerokości, zastąp dzielenie mnożeniem. Innymi słowy, jeśli film ma szerokość 100 pikseli, a _x jest równe 50, pomnożysz wartość 50 przez 2 (jest to liczba, która po pomnożeniu przez szerokość filmu daje 200). Po odjęciu 100 od wyniku mnożenia otrzymasz 0, czyli utrzymasz w tym wypadku równowagę lewego i prawego kanału.

17. Teraz, aby mieć pewność, że wartość panoramowania zawsze będzie znajdowała się w przedziale od -100 do 100, dodamy akcję if, która w razie potrzeby dokona odpowiednich poprawek:

if (s2<=-100) {

s2 = -100;

}

if (s2>=100) {

s2 = 100;

}

18. Ostatnie akcje w tym ujęciu kluczowym przypisują głośności obiektu dźwiękowego s w klipie /basketball wartość n, a panoramie wartość s2. A więc:

basketball.s.setVolume(n);

basketball.s.setPan(s2);

19. W trzecim i ostatnim ujęciu kluczowym dodamy akcję, która będzie wykonywała powrót do drugiego ujęcia, gdzie ponownie będą liczone wszystkie zmienne, a właściwościom nadawane nowe wartości:

gotoAndPlay(2);

20. Skrypty są gotowe. Zapisałeś już film? Jeśli nie, to go zapisz, opublikuj i poodbijaj sobie trochę piłkę!

Przypis do szarego tła!

Jay Vanian najbardziej lubi trzy rzeczy, ale najważniejszą z nich jest „robienie zdjęć budynków”. Ma także skłonność do „obmyślania globalnych strategii”. Bawi go także Krav Maga, co powoduje, że jest częstym gościem pogotowia. Prawdopodobnie te zainteresowania wyjaśniają, dlaczego nie ma żadnych wspomnień dotyczących roku 1992, w którym ukończył szkołę średnią w swoim rodzinnym mieście Newport Beach w Kalifornii. Jay jest zatrudniony jako grafik w Pixelmushers Inc. Do zajęcia się Flashem skusiło go „zobaczenie dwóch witryn, które rzucały się w oczy — Balthaser oraz Shiny Entertainment”. Pracował przy wielu witrynach, między innymi: 11th Hour (www.hourtogo.com), THQ/Evil Dead (www.evildeadgame.com), Rhytmcraft (www.rhythmcraft.com), Crave Entertainment (www.cravegames.com), 2thebiz (www.2thebiz.com), Irvine Barclay Theatre (www.thebarclay.org), Ghosts (www.vanian.com/ghosts) oraz Alien Dog (www.alien-dog.com).

Koniec szarego tła!

Wykorzystaj metodę getPan do odczytania wartości przypisywanych metodzie setPan. W powyższym ćwiczeniu możesz utworzyć ruchomy obiekt, który podąża za piłką przy każdym przeciągnięciu. Zamiast powielania wartości przypisywanej właściwości setPan, mógłbyś użyć właściwości getPan do odczytania aktualnej wartości panoramy dla dźwięku odbijającej się piłki. W następnej sekcji omówimy metody służące do sterowania dźwiękiem, setTransform oraz getTransform, posiadające największe możliwości.

Tworzenie obiektu soundTransform

Ostatnie dwie metody obiektu Sound, setTransform oraz getTransform, działają bardzo podobnie do metod modyfikujących kolor w obiekcie Color. Musisz utworzyć ogólny obiekt używając konstruktora obiektów, zanim będziesz mógł posłużyć się metodą setTransform z obiektem Sound. Ogólny obiekt stanie się obiektem soundTransform, gdy przypiszesz mu właściwości odnoszące się do poszczególnych kanałów dźwięku.

Na szczęście obiekt soundTransform zawiera mniej właściwości niż obiekt colorTransform; jego działanie jest też łatwiejsze do przewidzenia podczas eksperymentowania. Właściwości obiektu soundTransform są następujące:

• ll — procent lewego kanału odtwarzany w lewym głośniku,

• lr — procent prawego kanału odtwarzany w lewym głośniku,

• rr — procent prawego kanału odtwarzany w prawym głośniku,

• rl — procent lewego kanału odtwarzany w prawym głośniku.

Pierwsza litera nazwy właściwości oznacza fizyczny głośnik. Druga określa, który kanał (lub jego głośność) jest odtwarzany w określonym przez pierwszą literę głośniku. Każda właściwość może przyjmować wartości z przedziału od -100 do 100.

Kroki wymagane do utworzenia obiektu soundTrnasform są prawie takie same jak przy obiekcie colorTransform. Jedyna różnica polega na tym, że określasz ścieżkę do obiektu Sound, a nie obiektu klipu filmowego dla metod setTransform oraz getTransform. Zajrzyj do omówienia obiektu colorTransform we wcześniejszej części tego rozdziału.

Wskazówka! Użyj obiektu soundTransform do urozmaicenia dźwięków z biblioteki soundLib utworzonej w tym rozdziale. Podobnie jak w przykładzie z setTransform dla obiektu Color wykreuj przyciski, które będą powodowały różne modyfikacje odtwarzanych dźwięków.

Tworzenie przeciągalnych klipów filmowych

We Flashu 4 została wprowadzona technologia „przeciągnij i upuść”, która pozwalała użytkownikowi na przeciąganie obiektów w obrębie sceny za pomocą myszy. We Flashu 5 technika ta została wzbogacona przez dodanie detektora zdarzeń pliku filmowego onClipEvent. Przeciąganie i upuszczanie dotyczy we Flashu wyłącznie klipów filmowych. Myszą można przeciągać tylko klony klipu filmowego. Więc, jeśli chcesz, aby użytkownik mógł przeciągnąć trójkąt, musisz go umieścić w klipie filmowym, a kopię klipu wprowadzić na obraz. Przeciąganie i upuszczanie jest we Flashu dosyć proste, ale bardziej skomplikowane zachowania wymagają pewnej wiedzy na temat języka ActionScript. Technikę przeciągania klipów filmowych omówimy w części „Podstawy przeciągania”.

Podstawy przeciągania

W większości interfejsów bazujących na myszy technika „przeciągnij i upuść” działa mniej więcej tak: użytkownik umieszcza kursor myszy nad elementem, wciska klawisz myszy, aby rozpocząć przeciąganie, i zwalnia go, aby je zakończyć. We Flashu 4 przeciąganie można było uzyskać w filmie tylko umieszczając klon przycisku w symbolu klipu filmowego. Dlaczego? Tylko symbol przycisku reagował na kliknięcia. Ponieważ przycisku nie można było zaadresować tak, jak klipu filmowego, klon przycisku musiał znaleźć się wewnątrz klipu filmowego, aby było możliwe przeciąganie. Potem akcja przeciągania klipu filmowego (we Flashu 4) była dodawana do klonu przycisku. Metoda ta nadal działa we Flashu 5 (z użyciem metody lub akcji startDrag), lecz teraz wymaga tworzenia znacznie krótszych skryptów. Oto sposób na utworzenie przeciąganego klipu.

1. Otwórz nowy film. Utwórz nowy klip filmowy i nazwij go dragObject.

2. Opracuj prosty przycisk i umieść go w pierwszym ujęciu pierwszej warstwy utworzonego przed chwilą klipu filmowego.

3. Powróć do głównej sceny wybierając polecenie Edit/Edit Movie (Ctrl+E lub Command+E). Umieść klon klipu filmowego na obrazie i, z nadal zaznaczonym klonem, otwórz panel Instance (Ctrl+I lub Command+I). W polu Name wpisz dragObject, a potem naciśnij klawisz Enter lub Tab. Tym samym nadasz nazwę klonowi klipu, wiec będzie się do niego mogła odwołać akcja startDrag.

4. Powróć do trybu edycji symbolu klipu filmowego dwukrotne klikając klon. Zaznacz klon przycisku i otwórz okno Actions. Upewnij się, że załączony jest tryb Normal Mode — rozwiń menu z opcjami w prawym górnym narożniku okna i zobacz, czy jest zaznaczona opcja Normal Mode.

5. Naciśnij przycisk z plusem (+) w lewym górnym narożniku edytora skryptów i z menu wybierz Actions/startDrag. W polu Target wpisz _root.dragObject. Tu adresujesz obiekt, który ma być przeciągany, gdy wykonana zostanie akcja startDrag. Zapamiętaj, że chociaż przypisaliśmy akcję startDrag do tego samego klipu filmowego, który zawiera klon przycisku, akcja ta może dotyczyć jakiegokolwiek klipu filmowego i zostać wywołana z jakiegokolwiek przycisku lub z dowolnego ujęcia kluczowego.

Uwaga! Możesz także określić pusty ciąg znaków (innym słowy, pozostawić pole Target puste), aby odnieść się do aktualnej listwy czasowej, na której znajduje się klon przycisku. Innym sposobem na wybranie aktualnej listwy czasowej (lub obiektu klipu filmowego) jest użycie słowa kluczowego this.

6. Pamiętaj, że chcemy, aby nasz klip filmowy zaczął się poruszać, gdy tylko użytkownik kliknie przycisk. Zmień więc detektor zdarzenia dla przycisku z on (release) na on (press), zaznaczając linię on (release) w edytorze skryptów, wyłączając opcję Release i wciskając opcję Press.

7. W tym momencie, gdy przycisk zostanie naciśnięty, sprawi, że klon klipu filmowego zacznie podążać za kursorem myszy. Musimy teraz spowodować, żeby przestał gonić za kursorem, gdy użytkownik zwolni klawisz myszy. Z zaznaczonym zamykającym nawiasem klamrowym (}) w edytorze skryptów, kliknij ikonę z plusem i z menu wybierz Actions/stopDrag. Domyślnie program dodaje detektor zdarzenia on (release), a takiego właśnie polecenia potrzebujemy. Akcja stopDrag powoduje „upuszczenie” klonu klipu filmowego.

Ostrzeżenie! Do zakończenia przeciągania możesz użyć przycisku, który nie jest zawarty w przeciągalnym klipie filmowym. Jeśli używasz przycisku w ten sposób, pamiętaj, że gdy jedynym detektorem zdarzenia będzie on (release), akcja nie zostanie wykonana, jeśli klawisz myszy zwolnisz poza obszarem przycisku (dzieje się tak często, gdy użytkownik coś przeciąga). Powinieneś wtedy dodać obsługę zdarzenia on (releaseOutside), aby wykryć wszystkie dotyczące zwolnienia klawisza myszy.

8. Przetestuj film, używając polecenia File/Publish Preview/Flash lub Control/Test Movie (Ctrl+Enter lub Command+Enter).

Zadziałało? Wspaniale! Możemy teraz powiedzieć co nieco o pozostałych opcjach akcji startDrag.

Opcja Constrain to rectangle

Zaznacz tę opcję, aby ograniczyć prostokątny obszar ruchu klonu klipu filmowego. Po jej wybraniu, wpisz współrzędne czterech krawędzi prostokąta. Współrzędne pikseli liczone są od lewego górnego narożnika obrazu, na którym znajduje się klon. Na przykład startDrag ("przeciagnij-mnie", false, 0 ,0 , 300, 300) spowoduje ograniczenie pola ruchu klonu klipu filmowego o nazwie przeciągnij-mnie do kwadratu o boku 300 pikseli, leżącym w lewym górnym narożniku głównego obrazu.

Uwaga! Jeśli w chwili wykonania akcji startDrag przeciągalny klon klipu filmowego znajduje się poza obszarem ruchu, program automatycznie umieszcza klon w punkcie należącym do tego obszaru, ale jak najbliżej wskaźnika myszy.

Opcja Lock mouse to center

Ta opcja powoduje wyśrodkowanie klonu klipu filmowego względem kursora myszy w czasie przeciągania. Jeśli w chwili rozpoczęcia przeciągania klon klipu nie znajduje się pod kursorem myszy, zostaje automatycznie przeniesiony w to miejsce, o ile wskaźnik znajduje się wewnątrz obszaru ruchu określonego przez opcję Constrain to rectangle. Włączenie tej opcji spowoduje umieszczenie wartości logicznej true jako argumentu akcji startDrag.

Sprawdzanie miejsca upuszczenia: _dropTarget

W podrozdziale „Podstawy przeciągania” pokazaliśmy, jak tworzyć klony klipów filmowych, które mogą być przeciągane przez użytkownika. Ale co zrobić, gdy chcemy, by użytkownik umieścił klip filmowy w określonym miejscu, zanim go upuści? Rozważmy dziecięcą zabawę z dopasowywaniem kształtów, gdzie małe koło, kwadrat oraz trójkąt ma zostać umieszczony wewnątrz takich samych, ale większych kształtów. Jeśli dziecko upuści małe koło wewnątrz dużego kwadratu lub trójkąta, koło powróci do swego oryginalnego położenia. Z drugiej strony, gdy dziecko upuści małe koło wewnątrz dużego koła, kształt ten powinien pozostać w miejscu upuszczenia, a dziecko powinno zobaczyć komunikat „Prawidłowo!” We Flashu można napisać taką grę, ale wymaga to zrozumienia właściwości klipu filmowego.

Oto zasada działania — omówimy ją na przykładzie koła. Najpierw stwórz przeciągalny klon klipu filmowego z małym kołem tak, jak to robiłeś wcześniej w sekcji „Podstawy przeciągania” (w klipie filmowym umieść przycisk, na scenie umieść nazwany klon klipu filmowego i dodaj akcje startDrag oraz stopDrag do przycisku). Następnie wykreuj duże koło, umieść je w innym klipie filmowym i jego klon umieść na głównym obrazie. Duże koło nazwij circleBig. W tym miejscu zaangażujemy właściwości klipu filmowego: gdy użytkownik upuści jakikolwiek klon klipu filmowego, program uaktualnia właściwość klipu o nazwie _droptarget. Właściwość _droptarget zawiera nazwę ostatniego klipu filmowego, na który został upuszczony przeciągany klon. Jeśli więc użytkownik upuścił małe koło wewnątrz dużego, to właściwość _dropTarget małego koła przyjmie wartość /circleBig. Wiedząc o tym, możemy dodać warunek if...else, aby sprawdzić, czy małe koło zostało upuszczone na duże. Jeśli tak, to pozostawimy je w tym miejscu i wyświetlimy komunikat „Prawidłowo!”, wysyłając klip filmowy do odpowiedniego ujęcia z napisem. Jeśli małe koło nie zostało puszczone na duże, umieścimy małe koło w miejscu, z którego zostało przeciągnięte (przypisując nowe wartości właściwościom _x oraz _y klipu filmowego małego koła). Oto kod przycisku umieszczonego w małym kole (pamiętaj, że akcja stopDrag musi być wykonana przed sprawdzeniem właściwości _droptarget):

on (press) {

startDrag ("_root.circle");

}

on (release) {

stopDrag ();

if (_root.circle._droptarget == "/circle-big") {

_root.status.gotoAndPlay ("correct");

} else {

_root.circle._x = 112;

_root.circle._y = 316;

}

}

Na CD-ROM-ie! Dla późniejszej nauki na kompakcie umieściliśmy prostą wersję opisywanej przed chwilą gry. Znajdziesz ją w katalogu ch19 pod nazwą dragndrop.fla.

Suwaki sterujące przeźroczystością i skalą obiektu

Interesującym przeciągalnym klipem filmowym jest suwak, który może zmieniać właściwości innych obiektów. Na podstawie położenia klipu (jego współrzędnych X oraz Y) możesz modyfikować właściwości innych klipów filmowych. W tej sekcji utworzymy dwa suwaki — jeden sterujący przeźroczystością, a drugi skalą obiektu. Za ich pomocą użytkownik będzie mógł interaktywnie zmieniać przeźroczystość i skalę klonu klipu filmowego na obrazie. Wielkie podziękowania dla Sandro Corsaro z spanktoons.com za dostarczenie rysunku psa Roberta, Stelli oraz drogowskazu.

Na CD-ROM-ie! Musisz skopiować plik slider_basic_starter.fla z katalogu ch19 znajdującego się na CD-ROM-ie. Utworzona wcześniej grafika pomoże w omawianiu działania metod startDrag, stopDrag, duplicateMovieClip oraz obiektu colorTransform.

Łączymy elementy

W tej sekcji zdefiniujemy podstawową kompozycję projektu, używając elementów z biblioteki pliku slider_basic_starter.fla. W filmie umieścimy klon rysunku psa oraz drogowskazu. Rysunek psa zostanie zduplikowany za pomocą metody duplicateMovieClip i to właśnie jego właściwości będą modyfikowane przy użyciu suwaków utworzonych w następnej sekcji. Drogowskaz posłuży do usunięcia zduplikowanego klonu. W tym celu użyjesz właściwości _dropTarget oraz metody removeMovieClip.

1. Otwórz utworzoną przez siebie kopię pliku slider_basic_starter.fla. Zmień nazwę pierwszej warstwy na dog_1.

2. Otwórz bibliotekę filmu, naciskając klawisze Ctrl+L (Command+L). W bibliotece otwórz folder dogElements i przeciągnij symbol klipu filmowego dog na obraz. Klon umieść w lewym górnym narożniku obrazu.

3. Gdy klon jest zaznaczony, otwórz panel Instance. W polu Name wpisz nazwę klonu dog_1, jak pokazano na rysunku 19.5.

Rysunek 19.5. Klon dog_1 zostanie użyty jako wzorcowy rysunek psa. Rozmiar ani przeźroczystość tego klonu nie zostanie zmieniona

4. Używając narzędzia Text, dodaj napis „Original Dog” poniżej rysunku psa. Nie musisz tworzyć nowej warstwy.

5. Wykreuj nową warstwę i nazwij ją parkSign. Przenieś ją poniżej warstwy dog_1. Przeciągnij symbol klipu filmowego parkSign znajdującego się w folderze parkSignElements w bibliotece do lewego dolnego narożnika obrazu. W panelu Instance nadaj klonowi nazwę parkSign. W panelu Transform zmniejsz skalę drogowskazu do 50% (rysunek 19.6).

Rysunek 19.6. Klon znaku zostanie użyty do usunięcia zduplikowanego klonu psa

6. Utwórz nową warstwę i nazwij ją actions. Umieść ją powyżej pozostałych warstw. Kliknij dwukrotnie pierwsze ujęcie tej warstwy. W edytorze skryptów w trybie Expert Mode wpisz następujący kod:

_root.dog_1.duplicateMovieClip ("dog_2",1);

_root.dog_2._x = 350;

_root.dog_2._y = 175;

Pierwsza linia kodu duplikuje klon psa, nadaje nowemu klonowi nazwę dog_2 i umieszcza go na pierwszym poziomie w warstwie głębokości na listwie czasowej _root.

Druga i trzecia linia zmienia współrzędne nowego klonu na: 350 na osi X (350 pikseli na prawo od lewej krawędzi głównego obrazu) oraz 175 na osi Y (175 pikseli od górnej krawędzi).

7. Zapisz film w nowym pliku .FLA i przetestuj go (klawisze Ctrl+Enter lub Command+Enter). Powinieneś zauważyć zduplikowany klon psa po prawej stronie obrazu (rysunek 19.7).

Rysunek 19.7. Metoda duplicateMovieClip tworzy nowy klon klipu filmowego. Jeśli nie zmienisz położenia nowego klonu, będzie się on znajdował dokładnie nad pierwotnym

Teraz na scenie mamy już trochę grafiki, więc możemy pobawić się klipem filmowym za pomocą suwaków.

Tworzenie suwaków

W tej sekcji utworzymy dwa suwaki: jeden będzie zmieniał skalę, a drugi przeźroczystość obiektu. Musimy opracować tylko jeden symbol klipu filmowego. Potem utworzymy jego dwa klony, które będą naszymi suwakami. Podstawowymi „problemami” interaktywnych suwaków są: uzyskanie położenia obiektu na suwaku (nazwiemy go paskiem suwaka) i ustalenie wartości innego obiektu na podstawie położenia (przeważnie trzeba określić pewien przelicznik). Określenie położenia paska suwaka jest w miarę proste. Problemem jest natomiast odpowiednie dobranie skali dla przeliczenia położenia suwaka na odpowiednie wartości parametrów.

Ponieważ wiemy już, jakie właściwości będziemy zmieniać (skalę oraz przeźroczystość), musimy określić przedziały wartości przyjmowanych przez nie. Na szczęście zarówno skala klipu filmowego (w języku ActionScript reprezentowana przez właściwości _xscale oraz _yscale), jak i przeźroczystość (właściwość _alpha) podawane są w procentach. Jednakże skalą może być każda liczba większa od 0 i mniejsza od 3200, natomiast przeźroczystość może się zmieniać tylko w przedziale od 0 do 100 procent. Jeśli chcemy używać jednego symbolu dla każdego suwaka, musimy inaczej przeliczać położenie dla każdej właściwości. Rozpocznijmy tworzenie podstawowego suwaka.

1. Utwórz nowy symbol klipu filmowego (klawisze Ctrl+F8 lub Command+F8). Nazwij go slider. W trybie edycji symbolu zmień nazwę pierwszej warstwy na sliderRule. Dla tej warstwy przeciągnij symbol graficzny sliderRule (znajduje się on w bibliotece w folderze sliderElements) na obraz klipu filmowego.

Uwaga! „Prowadnica” suwaka składa się z linii o długości 200 pikseli zakończonej kółkiem na każdym z końców. Długość tej linii określa zakres ruchu suwaka. Z tego też powodu bezwzględny zakres zawiera się w przedziale od 0 do 200.

2. Z zaznaczoną grafiką suwaka otwórz panel Info. Po prawej stronie panelu (ikona z dziewięcioma małymi kwadratami) upewnij się, że wybrany jest punkt odniesienia w lewym górnym narożniku. W pole X wpisz wartość -28,4, a w pole Y wartość 12,4 (rysunek 19.8).

Rysunek 19.8. Początek prowadnicy suwaka (po prawej stronie pierwszego kółka) musi się znajdować dokładnie w tym samym miejscu, w którym współrzędna X klipu filmowego jest równa 0

3. Utwórz nową warstwę dla klipu filmowego i nazwij ją position (położenie). Przeciągnij klon klipu filmowego slideBar (znajdującego się folderze sliderElements w bibliotece) do klipu filmowego suwaka.

4. Z zaznaczonym paskiem suwaka otwórz panel Transform. W polu Rotation wpisz 90 i naciśnij klawisz Enter. W panelu Info kliknij środkowy kwadracik (po prawej stronie panelu) i w pole X wpisz wartość 100, a w pole Y wartość -0.3.

5. Aby móc odczytywać położenie paska suwaka, musimy nadać unikalną nazwę klonowi. Zaznacz pasek suwaka i w polu Name panelu Instance wpisz position, jak na rysunku 19.9.

Rysunek 19.9. Początkowe położenie klonu klipu filmowego paska suwaka wynosi 100. Gdy program rozpocznie odtwarzanie filmu, właśnie ta wartość zostanie przypisana skali oraz przeźroczystości zduplikowanego klonu psa na głównej listwie czasowej

6. Musimy teraz umożliwić przeciąganie klonu filmowego position. We wcześniejszych sekcjach tego rozdziału dowiedziałeś się, jak dołączać niewidzialne przyciski do przeciąganych klipów filmowych, aby mieć dostęp do zdarzeń press oraz release. W tym przykładzie utworzymy przeciągalny klip, który nie będzie potrzebował przycisku, ponieważ skorzysta z procedury obsługi onClipEvent dla obiektów klipów filmowych. Zaznacz pasek suwaka i otwórz okno Actions. Wpisz następujący kod:

onClipEvent (mouseDown) {

if(this.hitTest(_root._xmouse,_root._ymouse, TRUE)){

this.startDrag (TRUE, 10, 0, 200, 0);

_root.state = "down";

}

}

Aby klon mógł być przeciągany, musimy wykrywać zdarzenie mouseDown. Każdy klip filmowy zawierający detektor zdarzenia onClipEvent (mouseDown) zareaguje na każde kliknięcie myszy. Tak też będzie w tym przypadku, dlatego musimy sprawdzić, czy kliknięcie nastąpiło w przestrzeni zajmowanej przez pasek suwaka na głównej scenie.

W pierwszej linii kodu znajduje się detektor onClipEvent, wykrywający zdarzenie mouseDown (naciśnięcie lewego klawisza myszy). Gdy ono nastąpi, program wykona akcje zagnieżdżone wewnątrz detektora onClipEvent.

W drugiej linii kodu znajduje się akcja if, która sprawdza, czy kliknięcie nastąpiło w obszarze zajmowanym przez pasek suwaka. Metoda hitTest może sprawdzać nakładanie się obszarów na dwa sposoby: przez porównanie określonych współrzędnych X oraz Y z miejscem zajmowanym przez klon klipu lub porównując przestrzeń zajmowaną przez jeden klon klipu z miejscem zajmowanym przez drugi klon klipu filmowego. Jeśli dla metody hitTest używany jest pierwszy sposób, możesz także sprawdzić, czy współrzędne pokrywają się z prostokątem zajmowanym przez klon (false), czy też z samym kształtem klonu (true). W tym przykładzie do metody hitTest przekazujemy aktualne współrzędne kursora myszy (_root._xmouse oraz _root._ymouse), by porównać je z obszarem zajmowanym przez obiekt this, który w tym wypadku jest klonem klipu filmowego position. Jeśli w chwili kliknięcia kursor myszy znajduje się nad paskiem suwaka, metoda hitTest zwraca wartość true. Powoduje to wykonanie akcji zagnieżdżonych w wyrażeniu warunkowym if.

Ostrzeżenie! Nie myl argumentu true metody hitTest z wartością zwracaną przez tę metodę. W tym przykładzie pominęliśmy część porównującą wartość zwracaną przez hitTest z true. Warunek zawarty w akcji if zostanie spełniony, gdy metoda hitTest zwróci wartość true.

Trzecia linia zostanie wykonana tylko wtedy, gdy warunek if z drugiej linii będzie równy true (czyli spełniony). W tym miejscu rozpoczynamy przeciąganie klonu position, używając metody startDrag dla obiektu this. Ponieważ użyliśmy tego polecenia jako metody, a nie akcji, nie musimy określać obiektu docelowego jako argumentu. Podane argumenty metody powodują wyśrodkowanie obiektu względem kursora myszy i ograniczenie pola ruchu do prostokąta o wierzchołkach w punktach (10, 0) oraz (200, 0). Całe pole ruchu suwaka pokrywa się więc z linią jego prowadnicy.

Uwaga! Przesunęliśmy lewą krawędź pola ruchu do współrzędnej X wynoszącej 10. Uniemożliwi to zejście wartości parametru poniżej 10 procent. Jeśli spróbujesz do skali przypisać wartość zerową lub ujemną, Flash zacznie ponownie powiększać klon w nieprzewidywalny sposób.

Czwarta linia przypisuje zmiennej state, znajdującej się na głównej listwie czasowej (_root), wartość tekstową down. Ponieważ będziemy używać dwóch klonów symbolu klipu filmowego suwaka, musimy wiedzieć, czy któryś z klonów zarejestrował zdarzenie mouseDown. W następnych krokach zobaczysz, dlaczego wprowadziliśmy tę zmienną.

7. Musimy także mieć możliwość zakończenia przeciągania obiektu suwaka, gdy lewy klawisz myszy zostanie zwolniony. Do tego celu ponownie użyjemy detektora onClipEvent. Otwórz edytor skryptów dla klonu paska suwaka i wpisz skrypt:

onClipEvent (mouseUp) {

if(this.hitTest(_root._xmouse,_root._ymouse, TRUE)){

this.stopDrag ();

_root.state = "up";

}

}

Ten kawałek kodu działa w taki sam sposób jak kod z kroku 6. Gdy zdarzenie mouseUp (zwolnienie lewego klawisza myszy) zostanie wykryte (1. linia), sprawdzamy, czy wystąpiło na obszarze zajmowanym przez pasek suwaka (2. linia). Jeśli tak, to kończymy przeciąganie rozpoczęte w kroku szóstym (3. linia). Ponadto przypisujemy zmiennej state z głównej listwy czasowej (_root) wartość tekstową up.

Teraz na głównym obrazie umieścimy dwa klony symbolu klipu filmowego suwaka; jeden będzie sterował skalą, a drugi przeźroczystością obiektu.

8. Opuść tryb edycji symbolu i powróć do listwy czasowej pierwszej sceny (Scene 1). Utwórz nową warstwę i nazwij ją scaleSlider. Z biblioteki przeciągnij klon klipu filmowego slider na scenę. Używając panelu Instance, nadaj klonowi nazwę scaleSlider.

9. Obróć klon o 180° tak, aby punkt odniesienia znajdował się po prawej stronie suwaka. Umieść klon suwaka na dole po prawej stronie sceny.

10. Utwórz jeszcze jedną warstwę. Nazwij ją alphaSlider. Przeciągnij jeszcze jeden klon suwaka na scenę i nazwij go alphaSlider. Obróć klon o -90° i umieść blisko prawej krawędzi sceny (rysunek 9.10).

Rysunek 9.10. W tym momencie na obrazie powinien znajdować się rysunek psa, drogowskazu oraz dwa klony symbolu klipu filmowego suwaka

11. Zapisz film i przetestuj go. Powinieneś mieć możliwość przeciągania obu suwaków.

Sprawdzanie położenia suwaków

Utworzyliśmy już przeciągalne suwaki. Musimy teraz odczytać położenie suwaka i użyć tej wartości do zmiany właściwości klonu dog_2. Aby to zrobić, potrzebujemy klipu filmowego, którego jedynym zadaniem będzie sprawdzanie współrzędnej X suwaka. W tej sekcji nauczysz się tworzyć klip filmowy korzystający z detektora onClipEvent (enterFrame).

1. Utwórz nową warstwę na głównej listwie czasowej i nazwij ją checkPosition. W bibliotece znajdziesz symbol klipu filmowego o takiej samej nazwie. Jeśli klikniesz dwukrotnie symbol w bibliotece, przekonasz się, że w symbolu znajduje się tylko grafika z nazwą symbolu oraz jedno ujęcie kluczowe.

2. Używając panelu Instance, nowy klon symbolu nazwij checkPosition. Zaznacz klon i otwórz edytor skryptów. Wpisz następujący kod:

onClipEvent(enterFrame){

_root.dog_2._xscale = _root.scaleSlider.position._x;

_root.dog_2._yscale = _root.scaleSlider.position._x;

_root.dog_2._alpha = _root.alphaSlider.position._x;

}

Ponieważ powyższy detektor OnClipEvent reaguje na zdarzenie enterFrame, ten fragment kodu będzie wykonywany przez cały czas trwania filmu. Dlaczego? Każda listwa czasowa ciągle odtwarza klatki, nawet jeżeli akcja stop() zostanie wywołana dla wszystkich listew czasowych. Częstotliwość, z jaką występuje zdarzenie enterFrame, zależy od ustalonej prędkości odtwarzania klatek (możesz ją zmienić w oknie Movie Properties otwieranym za pomocą polecenia Modify/Movie). W używanym przez Ciebie przykładowym filmie prędkość odtwarzania klatek wynosi 20. Z tego też powodu powyższy fragment kodu będzie wykonywany 20 razy w ciągu sekundy.

Co dokładnie dzieje się w chwili wykrycia zdarzenia enterFrame? Druga i trzecia linia przypisuje skali klonu dog_2 aktualną wartość współrzędnej X klonu position (w układzie współrzędnych klipu filmowego suwaka).

Zauważ, że ścieżki adresowe klonu position w linii drugiej oraz trzeciej zawierają nazwę klonu scaleSlider (czyli suwaka sterującego skalą). Czwarta linia przypisuje przeźroczystości klonu dog_2 wartość współrzędnej X klonu position z klonu alphaSlider (czyli suwaka sterującego przeźroczystością).

3. Zapisz i przetestuj film. Kiedy przeciągniesz pasek dolnego suwaka, zauważ, jak powiększa się klon dog_2 przy przeciąganiu w lewo. Pamiętaj o tym, że obróciliśmy klon o 180°, więc powiększanie odbywa się od prawej do lewej, a nie od lewej do prawej. Gdy przeciągniesz pasek prawego suwaka, zobaczysz, że zwiększa się przeźroczystość klonu dog_2.

Uwaga! Zastanawiasz się zapewne dlaczego odczytywane jest położenie na osi X, a nie Y. Istotnie, pasek przeciągasz w pionie, a nie w poziomie. Jednak położenie klonu paska obliczane jest względem układu współrzędnych symbolu klipu filmowego suwaka, który w trybie edycji symbolu ma orientację poziomą. Współrzędna X dotyczy obrazu w trybie edycji symbolu i nie zależy od położenia klonu na głównym obrazie.

Teraz suwaki sterują już skalą oraz przeźroczystością klonu dog_2. Jednak nic się nie dzieje, gdy przeciągniemy w górę suwak odpowiedzialny za przezroczystość. Jest to spowodowane tym, że początkowe położenie klonu na osi X wynosi 100, a zwiększanie parametru przeźroczystości powyżej 100% nie powoduje żadnej zmiany w wyglądzie. Najniższą wartością dla suwaka przeźroczystości jest 10% — wynika to z ograniczenia pola ruchu w metodzie startDrag. Lepiej byłoby, gdyby położenie suwaka było przeliczane do zakresu od 0 do 100.

Musimy więc opracować równanie, które zmieni skalę suwaka na zakres od 0 do 100. Wiemy, że najniższym położeniem klonu jest 10, a najwyższym 200. Jeśli chcemy, aby najwyższe położenie odpowiadało 100%, musimy podzielić 200 przez pewną liczbę i w wyniku otrzymać 100. Podzielenie 200 przez 2 daje 100. Czy będzie to działało także dla najniższej wartości? Jeśli położenie paska na osi X będzie wynosiło 10, najniższą wartością krycia będzie 5%.

4. Otwórz edytor skryptów dla klonu checkPosition i zmodyfikuj piątą linię:

_root.dog_2._alpha = (_root.alphaslider.position._x)/2;

5. Zapisz i przetestuj film. Teraz przeciągniecie paska w górę powoduje zwiększenie krycia (odwrotność przeźroczystości), a w dół jego zmniejszenie.

Jak dotąd wszystko idzie dobrze. Jednak przydałoby się, aby położenie paska suwaka przeźroczystości miało początkowe położenie 200. Spowoduje to wyświetlenie klonu psa ze stuprocentową wartością krycia. Moglibyśmy po prostu przesunąć ręcznie suwak w symbolu w odpowiednie miejsce, ale wpłynęłoby to również na wyświetlenie klonu psa w dwa razy większej skali. Aby zmienić położenie paska suwaka przeźroczystości tylko jeden raz, użyjemy detektora onClipEvent (load)i za jego pomocą ustawimy klon position w odpowiednim miejscu symbolu klipu filmowego. Zdarzenie load zachodzi w chwili, gdy tylko obiekt klipu filmowego pojawia się na obrazie. W bloku akcji wewnątrz detektora onClipEvent sprawdzimy, czy klon position znajduje się w klonie alphaSlider. Jeśli tak, zmienimy położenie klonu; w przeciwnym razie niczego nie zmienimy.

6. W bibliotece kliknij dwukrotnie symbol klipu filmowego slider. W trybie edycji symbolu zaznacz klon paska. Otwórz edytor skryptów i dodaj następujący kod:

onClipEvent (load){

if(_parent._name == "alphaSlider"){

this._x = 200;

}

}

Ten fragment kodu zostanie wykonany tylko wtedy, gdy klon position (obiekt klipu filmowego suwaka) pojawi się po raz pierwszy (zostaje załadowany) na obrazie. Pamiętaj, że klon suwaka jest użyty dwa razy: w suwaku sterującym skalą oraz przeźroczystością. W drugiej linii sprawdzamy, który klon suwaka wykonuje ten kod. Za pomocą ścieżki _parent odnosimy się do właściwości rodzicielskiego klipu filmowego, czyli tego, który zawiera klon paska suwaka. Potem pobieramy jego nazwę (_name) i sprawdzamy, czy jest równa alphaSlider. Jeśli tak, to w trzeciej linii zmieniamy współrzędną X (_x) obiektu this (który w tym przypadku jest klonem paska) na 200.

7. Zapisz i przetestuj film. Tym razem suwak przeźroczystości pojawi się na samej górze skali.

Usuwanie klipów filmowych

Mamy już teraz dwa suwaki interaktywnie zmieniające skalę oraz przeźroczystość klonu klipu filmowego psa na obrazie. A co, jeśli będziesz chciał usunąć klon dog_2? Jak możesz go skasować? Jedynym sposobem na usuniecie zduplikowanego klipu filmowego jest użycie metody lub akcji removeMovieClip. W tej sekcji pokażemy, jak używać właściwości _dropTarget w połączeniu z metodą removeMovieClip obiektu klipu filmowego.

1. Zaznacz klon psa znajdujący się w lewym górnym narożniku obrazu i otwórz edytor skryptów. Wpisz następujący kod:

onClipEvent (mouseDown) {

if(this.hitTest(_root._xmouse,_root._ymouse, true) ¬

&& this._name != "dog_1"){

this.startDrag (TRUE, 0, 0, 550, 400);

}

}

onClipEvent (mouseUp) {

if(this.hitTest(_root._xmouse,_root._ymouse, true)){

this.stopDrag ();

}

if(eval(this._dropTarget) == _root.parkSign){

this.removeMovieClip();

}

}

Większość tego kodu powinna być dla Ciebie zrozumiała. Chcemy, aby można było przeciągać tylko zduplikowany klon psa (dog_2). Nie mamy zamiaru usuwać oryginalnego klonu. Nawet, jeśli chcielibyśmy, nie byłoby to możliwe, gdyż oryginalny pies znajduje się fizyczne na scenie filmu. Tylko zduplikowane klony klipów filmowych mogą zostać usunięte za pomocą skryptu.

Gdy program wykryje zdarzenie mouseDown, metoda hitTest sprawdzi, czy wskaźnik myszy znajduje się nad klonem psa wywołującym metodę (this) i czy ten klon (this) nosi nazwę dog_1. Jeśli obydwa warunki będą prawdziwe, skrypt wywoła metodę startDrag dla aktualnego klonu psa (this) i obszar przeciągania zostanie ograniczony do powierzchni całego obrazu.

Gdy zostanie wykryte zdarzenie mouseUp dla klonu psa, skrypt wywoła metodę stopDrag. Ostatni warunek if sprawdza, czy właściwość _dropTarget aktualnego klonu psa jest równa ścieżce klonu drogowskazu. Jeśli w chwili zwolnienia klawisza myszy klon psa znajdzie się nad klonem drogowskazu, aktualny klon psa zostanie usunięty.

Uwaga! Używamy akcji eval() dla właściwości _dropTarget, ponieważ sama właściwość _dropTarget zwraca ścieżkę w notacji ukośnikowej (ze względu na zgodność z Flashem 4). Dzięki akcji eval() możemy skonwertować tę ścieżkę na notację kropkową.

2. Zapisz i przetestuj film. Gdy przeciągniesz zduplikowany klon psa nad klon drogowskazu, zduplikowany pies zniknie.

Duplikowanie klipów filmowych o zmienionych kolorach

Co zrobimy po usunięciu klonu dog_2? Jak utworzyć więcej klonów psów w filmie? Ta sekcja omówi użycie metody duplicateMovieClip dodanej do symbolu przycisku. Nie tylko zduplikujemy klon psa, ale zmienimy także jego kolory, używając obiektu colorTransform.

Odsyłacz! We wcześniejszej części tego rozdziału znajdziesz dokładne omówienie obiektu colorTransform.

1. Na głównej listwie czasowej utwórz nową warstwę o nazwie duplicateButton. Przeciągnij symbol crossHairsButton z biblioteki na obraz. Umieść go w prawym dolnym narożniku pomiędzy suwakami (rysunek 19.11).

Rysunek 19.11. Przycisk crossHairsButon zawiera akcje, które duplikują klon i przypisują mu nowe kolory

2. Z zaznaczonym klonem krzyżyka otwórz edytor skryptów i wpisz następujący kod:

on (release) {

_root.dog_1.duplicateMovieClip ("dog_2", 1);

_root.dog_2._x = 350;

_root.dog_2._y = 175;

dogColor = new Color(_root.dog_2);

colorTransform = new Object();

colorTransform = {

ra: randomPercent(),

rb: randomOffset(),

ga: randomPercent(),

gb: randomOffset(),

ba: randomPercent(),

bb: randomOffset()

}

dogColor.setTransform(colorTransform);

}

Ponieważ już wcześniej opisaliśmy obiekt colorTransform, nie będziemy się teraz przy nim zatrzymywać. Omówimy jednak zastosowania dwóch definiowanych przez nas funkcji, randomPercent() oraz randomOffset(). Obydwie dodamy w następnym kroku do głównej listwy czasowej (_root). Zamiast przypisywać określone wcześniej wartości dla kolorów, będziemy je losować przy każdym kliknięciu przycisku.

3. Powróć do głównej listwy czasowej i zaznacz pierwsze ujęcie kluczowe warstwy actions. Otwórz edytor skryptów i dodaj następujący kod definiujący funkcje randomPercent() oraz randomOffset():

function randomPercent(){

newPercent = Math.round(Math.random()*100 + 1);

return newPercent;

}

function randomOffset(){

newOffset = Math.round(Math.random()*255 + 1);

return newOffset;

}

Obydwie funkcje działają w ten sam sposób. Po wywołaniu zwracają losową wartość procentową lub losowe przesuniecie (wartości te posłużą do zmiany składowych koloru). Każda właściwość procentowa (ra, ga, ba) korzysta z funkcji randomPercent(), natomiast każda właściwość dotycząca przesunięcia (rb, gb, bb) korzysta z funkcji randomOffset(). Obydwie funkcję różnią się tylko mnożnikiem dla liczby zwracanej przez metodę Math.random(). Dla wartości procentowych losujemy liczbę z przedziału od 1 do 100, a dla przesunięcia liczbę z przedziału od 1 do 255.

4. Zapisz i przetestuj film Flasha. Kliknij przycisk Duplicate, a klon dog_2 zostanie zastąpiony przez inny klon o tej samej nazwie. Nowy klon będzie miał losowo zmienione kolory.

Użycie obiektu Mouse

Gdy zamiast klonu przycisku realizujesz operację przeciągania za pomocą detektora onClipEvent(mouseDown), możesz zauważyć jedną małą różnicę: kursor myszy nie zmienia kształtu na rączkę, gdy znajdzie się nad klipem filmowym.

We Flashu 4 można było zastępować kursor myszy za pomocą metody startDrag (z włączonym wyśrodkowaniem klipu względem kursora) — wystarczyło w miejsce kursora wyświetlić klip filmowy z rysunkiem, który zastępował ten kursor. Nie powodowało to jednak ukrycia oryginalnego kursora myszy — znajdował się on cały czas nad przeciąganym klonem klipu filmowego. We Flashu 5 pojawił się obiekt Mouse zawierający dwie proste metody:

• show() — ta metoda powoduje wyświetlenie kursora myszy, domyślnie kursor myszy jest wyświetlany na obrazie,

• hide() — ta metoda ukrywa kursor myszy. Aby pojawił się ponownie, użyj metody show().

Kiedy obiekt Mouse (kursor myszy) jest ukryty, możesz w jego miejscu umieścić klon klipu filmowego (zawierający zastępczy kursor). Jeśli mamy tylko jeden klip filmowy, który działa jako symbol przycisku, dołączenie klonu klipu filmowego do kursora myszy jest stosunkowo proste. Jednak w naszym przykładzie mamy dwa suwaki. Jeśli chcemy zdefiniować własny kursor, musimy wiedzieć, nad którym suwakiem znajduje się rzeczywisty kursor myszy.

1. Na głównej listwie czasowej zaznacz klon klipu filmowego checkPosition. Otwórz edytor skryptów i wpisz następujący kod:

onClipEvent(load){

overSlider = FALSE;

}

onClipEvent(mouseMove){

scaleSliderOver = _root.scaleSlider.position.¬

hitTest(_root._xmouse,_root._ymouse,TRUE);

alphaSliderOver = _root.alphaSlider.position.¬

hitTest(_root._xmouse,_root._ymouse,TRUE);

if (scaleSliderOver == TRUE || alphaSliderOver == TRUE){

if (overSlider != TRUE){

_root.attachMovie("fingerIcon","fingerIcon",2);

Mouse.hide();

overSlider = TRUE;

}

_root.fingerIcon._x = _root._xmouse;

_root.fingerIcon._y = _root._ymouse;

} else {

if(_root.state != "down"){

Mouse.show();

_root.fingerIcon.removeMovieClip();

overSlider = FALSE;

} else {

_root.fingerIcon._x = _root._xmouse;

_root.fingerIcon._y = _root._ymouse;

}

}

}

Pierwszy detektor onClipEvent wykrywa zdarzenie load. Przypominamy, że zdarzenie to zachodzi wówczas, gdy klon klipu filmowego pojawia się po raz pierwszy na obrazie. Kiedy klon klipu filmowego chceckPosition pojawia się na obrazie, zmienna overSlider przyjmuje wartość false. Zmienna ta przechowuje informację o tym, czy aktualnie kursor myszy znajduje się nad jednym z klonów suwaka.

Drugi detektor onClipEvent wykrywa dowolny ruch myszy na obrazie, sprawdzając zdarzenie mouseMove. Dwie zmienne, scaleSliderOver oraz alphaSliderOver, przyjmują wartości true lub false, w zależności od wartości zwróconej przez metodę hitTest, sprawdzającą wzajemne położenie wskaźnika myszy i paska suwaka.

Pierwszy warunek if sprawdza, czy metoda hitTest zwróciła wartość true. Operator || powoduje, że wystarczy tylko jedna wartość true, aby całe wyrażenie było prawdziwe i program wykonał akcje zagnieżdżone w warunku if.

Jeśli kursor myszy znajduje się nad jednym z suwaków, następny warunek if sprawdza, czy zmienna overSlider nie jest równa true. Ponieważ po załadowaniu klonu checkPosition zmienna overSlider jest równa false, zostaną wykonane akcje zagnieżdżone wewnątrz drugiego warunku if.

Gdy zmienna overSlider jest równa false, program wykonuje metodę attachMovie z głównej listwy czasowej (_root). W tym przykładzie umieszczamy na obrazie klip filmowy fingerIcon z biblioteki i nadajemy nowemu klonowi taką samą nazwę. Nowy klon jest osadzony na listwie czasowej _root i umieszczany na drugim poziomie warstwy — klon dog_2 znajduje się na pierwszym poziomie warstwy. Po umieszczeniu zastępczego kursora na głównej listwie czasowej, musimy ukryć oryginalny wskaźnik myszy. Robi to właśnie linia Mouse.hide(). Następnie zmieniamy wartość zmiennej overSlider na true, aby powyższe akcje nie były powtarzane, aż do opuszczenia i ponownego znalezienia się kursora nad obszarem suwaka.

Uwaga! Aby użyć metody attachMovie dla dowolnego symbolu klipu filmowego z biblioteki, musisz wcześniej nadać temu symbolowi odpowiedni identyfikator. Możesz go dodać klikając prawym klawiszem symbol w bibliotece i z podręcznego menu wybierając polecenie Linkage. W naszym przykładzie już wcześniej nadaliśmy odpowiedni identyfikator ikonie rączki. Okno Linkage Properties omawiamy dokładnie w rozdziale 20., „Doczytywanie filmów i biblioteki współdzielone.”

Musimy określić położenie rączki tak, aby pokrywało się z położeniem kursora myszy — położenie kursora myszy możemy śledzić nawet wtedy, gdy jest ukryty. Następne dwie linie kodu przypisują ikonie rączki współrzędne niewidocznego kursora myszy.

Jeśli kursor myszy nie znajduje się nad suwakami, wtedy wykonywane są akcje zawarte w części else: gdy mysz nie przeciąga paska suwaka (_root.state != "down"), program wyświetla kursor myszy, usuwa klon klipu filmowego fingerIcon, zaś zmienna overSlider przyjmuje wartość false. Gdy podczas przeciągania suwaka użytkownik wysunie kursor myszy poza obszar suwaka (patrz poniższa wskazówka), kursor ten nadal powinien być wyświetlany w postaci rączki.

Wskazówka! Dlaczego musimy sprawdzać zmienną state, gdy mysz nie znajduje się już nad żadnym z suwaków? Podczas przeciągania suwaka wskaźnik myszy może wyjść poza obszar tego suwaka. W takiej sytuacji nie powinien pojawiać się oryginalny kursor myszy, lecz nadal powinna być wyświetlana zastępująca go rączka.

2. Zapisz film Flasha i przetestuj go. Gdy kursor myszy znajdzie się nad którymś z suwaków, powinieneś zobaczyć rączkę zamiast oryginalnego kursora.

Może Ci się wydawać, że ukrycie kursora myszy wymaga mnóstwa pracy, ale w tym samym czasie nauczyłeś się także zastępować ten kursor własnymi ikonami. Jeśli chcesz posiadać więcej klonów klipów filmowych używających ikony rączki, możesz je dodać do pierwszego warunku if, który sprawdza, czy wskaźnik znajduje się nad odpowiednimi klonami.

Drukowanie za pomocą skryptów

W tabeli 19.4 we wcześniejszej części tego rozdziału znalazł się opis akcji języka ActionScript związanych z drukowaniem. Akcje print oraz printAsBitmap umożliwiają drukowanie grafiki, tekstu oraz bitmap za pomocą skryptów. Używając tych akcji możesz wykonać, wymienione poniżej, zadania.

• Tworzyć reklamy, które umożliwiają drukowanie opisów produktów sprzedawanych przez Internet. Wyobraź sobie, że reklama samochodu na Twojej ulubionej stronie internetowej automatycznie wydrukuje adresy dealerów oraz mapy dojazdowe, a Ty nawet nie zajrzysz na stronę producenta samochodu.

• Tworzyć kupony we Flashu. Możesz zaprojektować kupony dla internetowych sprzedawców, które będą drukowane i później używane w normalnych sklepach.

• Zautomatyzować generowanie formularzy oraz paragonów ze sklepów internetowych. We Flashu 5 możesz formatować zamówienia i interaktywnie dodawać dane do drukowalnych arkuszy.

• Drukować czysto wektorowe ilustracje lub realistyczne obrazy wprost ze strony WWW. Możesz zaprojektować internetową galerię, która drukuje przykładowe prace lub tworzyć spersonalizowane grafiki wektorowe, które będą drukowane inaczej dla każdego odwiedzającego.

• Wysyłać pocztą elektroniczną wydrukowane próbki filmów klientom. Gdy następnym razem będziesz potrzebował ostatecznego zatwierdzenia Twojego pomysłu lub grafiki, możesz posłać klientowi plik .SWF lub samodzielny wykonywalny plik z filmem.

• Projektować strony z informacjami kontaktowymi. Czy nie denerwują Cię HTML-owe tabele, które w każdej przeglądarce drukują się inaczej, choć są pięknie sformatowane? Drukowalne ujęcia z filmu Flasha zawsze wychodzą w druku tak samo dobrze. Możesz nawet dodać informacje kontaktowe do interaktywnej bazy danych i je wydrukować.

Chociaż nie możemy opisać w tym rozdziale wszystkich zastosowań, powiemy Ci, jak zacząć w przypadku ostatniego z wymienionych pomysłów. Następne ćwiczenie eksperta, napisane przez Mike'a Richardsa pokaże ci, jak dodać funkcje print oraz printAsBitmap do jego wspaniałego kreatora papierowych samolocików.

Uwaga! Ponieważ Flash wewnętrznie używa grafiki wektorowej, najlepiej jest ona reprodukowana na drukarkach postscriptowych. Mimo tego obydwie akcje print oraz printAsBitmap tworzą wysokiej jakości wydruki zarówno na drukarkach postscriptowych, jak i nie korzystających z tego języka.

Szare tło!

Ćwiczenie eksperta:
Drukowanie papierowych samolocików
Autor: Mike Richards

Samouczek Mike'a jest wspaniałym przykładem rozpowszechniania interesujących materiałów w sieci i udostępnienia ich do druku. Zamiast formatowania, drukowania tekstów oraz typowych zasad budowy dokumentu, ten samouczek pokaże Ci, jak drukować papierowe samolociki. Na CD-ROM-ie w katalogu ch19/mike_richards znajdziesz plik paperplane_starter.fla, który zawiera materiały potrzebne do wykonania tego ćwiczenia. Zachęcamy do przejrzenia zawartości pliku oraz struktury listwy czasowej i skopiowania pliku na dysk twardy przed rozpoczęciem wykonywania tego ćwiczenia.

Ten samouczek omawia drukowanie przy użyciu akcji print oraz printAsBitmap, które mogą wydrukować każde ujęcie każdej listwy czasowej filmu Flasha. Te akcje są użytecznym narzędziem, które umożliwia tworzenie drukowalnych materiałów na stronach internetowych.

Drukowanie zawartości głównej listwy czasowej za pomocą akcji print

W tej sekcji dowiesz się, jak wydrukować zawartość głównej listwy czasowej za pomocą akcji print. Dodatkowo będziemy określać obszar druku przy użyciu ramki ograniczającej film Flasha i specjalnych etykiet #b oraz #p.

1. Najpierw ustalimy obszar druku dla instrukcji dotyczących składania papierowego samolotu. Załaduj utworzoną przez siebie kopię pliku papreplane_starter.fla i zaznacz ujęcie numer 54 na warstwie print_content.

2. Z zaznaczonym ujęciem numer 54 przeciągnij symbol graficzny o nazwie bounding_box z biblioteki na obraz. W panelu Frame w polu Label wpisz etykietę #b. Ta specjalna etykieta wskazuje ujęcie w filmie Flasha, definiujące obszar druku.

3. Teraz określimy ujęcie, które będzie drukowane. Z zaznaczonym ujęciem numer 55 warstwy print_content przeciągnij symbol paper_wing na obraz. Wpisz etykietę #p w polu Label panelu Frame. Pamiętaj o tym, że jeśli żadna z klatek nie zawiera etykiety o nazwie #p, program wydrukuje wszystkie klatki głównej listwy czasowej.

4. Ponieważ określiliśmy obszar drukowania, ważne jest wyśrodkowanie obydwóch klonów symboli. W dolnej części listwy czasowej kliknij ikonę Edit Multiple Frames i zaznacz symbole umieszczone przed chwilą na obrazie. Z zaznaczonymi klonami użyj panelu Align do wyrównania środków obydwu klonów symboli. Po wyrównaniu kliknij ponownie ikonę Edit Multiple Frames, aby ją wyłączyć.

5. Jesteśmy teraz gotowi do dodania akcji print do przycisku. W listwie czasowej przeciągnij wskaźnik czasu do klatki numer 65 i zaznacz przycisk drukowania znajdujący się w prawym dolnym narożniku obrazu. Wybierz z menu Window polecenie Actions, aby wyświetlić edytor skryptów dla klonu przycisku. Przy otwartym edytorze skryptów w lewym oknie rozwiń kategorię Actions. Kliknij dwukrotnie akcję print, aby dodać je do skryptu, jak pokazano na poniższym rysunku. Nie drukujemy efektów przeźroczystości, możesz więc z listy Print wybrać opcję As vectors. Ponieważ chcemy wydrukować ujęcie głównej listwy czasowej, wybierz opcję Frame z listy Location i w polu obok wpisz _root. Ponieważ określiliśmy obszar druku na głównej listwie czasowej, z listy Bounding box wybierz opcję Movie.

6. Zapisz film i wybierz polecenie Control/Test Movie, aby go przetestować. W trybie testowym wybierz podstawowy rodzaj samolotu i kliknij ikonę druku w prawym dolnym narożniku obrazu, aby wydrukować instrukcje dotyczące składania papierowego samolotu.

Drukowanie klonu klipu filmowego za pomocą akcji printAsBitmap

W tej sekcji dowiesz się, jak wydrukować ujęcie znajdujące się wewnątrz klipu filmowego, przy użyciu akcji printAsBitmap. Obszar druku będzie określony przez obszar, który zajmuje ramka otaczająca ujęcie. Określenie takiego obszaru druku będzie powodowało przeskalowywanie każdego ujęcia do obszaru zajmowanego przez ramkę otaczającą zawartość tego ujęcia. Każde ujęcie będzie zatem drukowane w maksymalnym powiększeniu. Pamiętaj, że klon klipu filmowego może być drukowany zarówno za pomocą akcji print, jak i printAsBitmap. Wybór akcji zależy od zawartości klipu filmowego. My tym razem użyjemy akcji printAsBitmap.

1. Z wybraną klatką numer 27 warstwy print_content przeciągnij symbol klipu filmowego paper_shuttle z biblioteki na obszar roboczy po prawej stronie obrazu. Z nadal zaznaczonym klonem wpisz w pole Name panelu Instance nazwę shuttle. Nie musimy określać klatek przeznaczonych do druku za pomocą etykiet #p, ponieważ chcemy wydrukować wszystkie ujęcia listwy czasowej klipu filmowego.

2. Możemy teraz przypisać akcje przyciskowi rozpoczynającemu druk. Przejdź do klatki numer 27 głównej listwy czasowej i zaznacz przycisk druku w prawym dolnym narożniku obrazu. Otwórz edytor skryptów i kliknij kategorię Actions w lewym oknie. Dwukrotnie kliknij akcję print, aby dodać ją do skryptu w prawym oknie. Z listy Print wybierz opcję As bitmap, ponieważ klip filmowy w drugiej klatce zawiera efekt przeźroczystości. Z listy Location wybierz opcję Target. Drukowany materiał znajduje się w klonie shuttle na głównej listwie czasowej, dlatego w pole obok listy Location wpiszemy _root.shuttle, jak pokazano na rysunku poniżej. Wreszcie z listy Bounding box wybierz opcję Frame, by każde ujęcie było drukowane z jak największym powiększeniem na kartce papieru.

3. Zapisz film i wybierz polecenie Control/Test Movie, aby go przetestować. W trybie testowym wybierz pierwszy rodzaj samolotu i ustaw elementy pojawiające się na skrzydłach samolotu. Kliknij ikonę druku w prawym dolnym narożniku obrazu, aby wydrukować instrukcje dotyczące składania papierowego samolotu.

Drukowanie załadowanego pliku .SWF

Ostatni przykład dotyczy drukowania materiałów, które zostały wczytane do głównego filmu. Ta metoda jest najlepsza wówczas, gdy materiały przeznaczone do druku mieszczą się w dużym pliku. W tej książce zagadnienie ładowania plików .SWF omówione jest w rozdziale 20., „Doczytywanie filmów i biblioteki współdzielone”.

1. Przejdź do klatki numer 47 głównej listwy czasowej i zaznacz przycisk drukowania w prawym dolnym narożniku obrazu. Wybierz z menu polecenie Window/Actions, aby otworzyć edytor skryptów dla przycisku. W tym przykładzie używamy akcji loadMovie do wczytania pliku .SWF, classic_instructions.swf, który zawiera dwa ujęcia.

2. Gdy jest otwarty edytor skryptów, zaznacz słowo „Placeholder”, które znajduje się poza prawym górnym narożnikiem obrazu. W trakcie odtwarzania filmu ukrywamy zawartość klipu z użyciem detektora onClipEvent(load)oraz przypisania this._visible = 0. Chociaż klip filmowy jest ukryty, nadal można go wydrukować. Ponieważ klip musi być w całości załadowany przed drukowaniem, za pomocą zdarzenia data oraz metod getBytesTotal i getBytesLoaded potwierdzamy załadowanie klipu przed drukowaniem. Na liście Print wybrana jest opcja As vector, ponieważ klip nie zawiera żadnych efektów przeźroczystości. Program wczytuje film do klonu klipu filmowego o nazwie classic_placeholder. Dlatego też ścieżka do niego ma postać _root.classic_placeholder, co widać na poniższym rysunku. Natomiast na liście Bounding box wybrana jest opcja Frame, ponieważ chcemy, aby każde ujęcie było drukowane w maksymalnym powiększeniu.

3. Zapisz film i wybierz polecenie Control/Test Movie, aby go przetestować. W trybie testowym wybierz środkowy samolot i ustaw elementy ozdobne. Kliknij ikonę druku w prawym dolnym narożniku obrazu, aby wydrukować instrukcje dotyczące składania papierowego samolotu oraz sam samolot.

Przypis do szarego tła!

Mike Richards twierdzi, że jego ulubionym zajęciem jest „używanie Flasha”. Zapewne wyjaśnia to, dlaczego przeprowadził się do San Francisco w zeszłym roku i zaczął pracować dla Macromedia. Przed przeprowadzką pracował dla American Gretings (americangreetings.com), tworząc animowane flashowe pocztówki oraz gry. Pracując tam, odkrył Flasha, „gdy poszukiwał alternatywy dla programu Macromedia Director, której artysta mógłby się łatwo nauczyć i używać”. Od ukończenia szkoły średniej w Cleveland w Ohio jego ulubionym filmem były „Czekoladowe wojny.” Poza pracą dla Macromedia zajmuje się także prowadzeniem witryny www.hipid.com.

Koniec szarego tła!

Podsumowanie

• Obiekt klipu filmowego posiada specyficzne właściwości, metody oraz detektory zdarzeń. Używając ścieżek dostępu, możesz mieć dojście do wszystkich właściwości obiektu typu Movie Clip.

• Możesz zmieniać położenie, skalę oraz stopień obrotu klonu klipu filmowego za pomocą skryptów. Większość fizycznych atrybutów jest dostępna dzięki określeniu ścieżki od klipu filmowego, po której podawana jest nazwa właściwości, na przykład _root.klonklipu._rotation.

• Obiekt Color może przechowywać nowe wartości kolorów i stosować je dla klonów klipów filmowych dzięki metodom setRGB oraz setTransform.

• Biblioteki dźwięków można szybko tworzyć za pomocą skryptów oraz obiektu Sound. Obiekty Sound łączymy z dźwiękami z biblioteki przy użyciu identyfikatorów, definiowanych w oknie Linkage Properties.

• Flash 5 pozwala na zmianę głośności oraz panoramy stereo każdego obiektu Sound w każdym miejscu filmu Flasha.

• Możesz umożliwić użytkownikom filmu przeciąganie klipów filmowych, i to na dwa różne sposoby: przez użycie klonu przycisku lub używając detektora onClipEvent (mouseDown) w połączeniu z metodą hitTest.

• Właściwość _dropTarget klonu klipu filmowego (klon A) wskazuje ścieżkę do klonu klipu filmowego (klon B), na który został upuszczony klon klipu filmowego (klon A).

• Z przykładu z suwakami dowiedziałeś się, że możesz użyć wartości właściwości jednego klonu klipu filmowego do zmiany właściwości innego klonu klipu filmowego.

• Detektor zdarzenia onClipEvent(mouseMove) nie zmienia wyglądu kursora myszy po umieszczeniu go nad klonem klipu filmowego. Obiekt Mouse (kursor myszy) może zostać ukryty, a klon klipu filmowego może być przypisany do współrzędnych kursora myszy, zastępując tym samym oryginalny kursor.

• Za pomocą funkcji print oraz printAsBitmap możesz drukować wysokiej jakości grafikę na drukarkach postscriptowych oraz innych.

Należy odróżnić poziomy wewnątrz warstwy, na których program umieszcza poszczególne obiekty i grupy, od poziomów filmowych, na których są umieszczane doczytywane filmy (przyp. tłum.).

Oczywiście w tym przypadku chodzi o poziomy filmowe, a nie wspominane wcześniej poziomy wewnątrz warstwy (przyp. tłum.).

Wartość podawana w metodzie setRGB nie musi być zapisywana szesnastkowo. Wpisanie w setRGB 255, zamiast 0x0000FF spowoduje taki sam efekt. Jednak drugi zapis będzie bardziej zrozumiały dla osoby czytającej kod (przyp. tłum.).

W zasadzie istotna jest nie szerokość całego obrazu, lecz szerokość pola, w którym może się poruszać klip filmowy sterujący panoramą. W tym przypadku pole to jest ograniczone współrzędnymi (10, 10, 490, 200), więc nie pokrywa się z szerokością całego obrazu. Jednak w dalszej części ćwiczenia dla uproszczenia zignorowano to ograniczenie i wzięto pod uwagę szerokość całego obrazu (przyp. red.).

5% krycia to wartość akceptowalna, można jednak przeliczyć skalę suwaka tak, aby w najniższym położeniu dawał 0% krycia. W tym celu od początkowej wartości współrzędnej odejmujemy 10, aby przesunąć do zera początek skali. Następnie wynik odejmowania dzielimy przez 1,9, aby koniec skali (200 - 10 = 190) dawał wartość 100% (przyp. red.).

W tym wyrażeniu wyrażenie scaleSliderOver == true można zamienić po prostu na scaleSlideOver, ponieważ wartością tej zmiennej jest true lub false. Nie ma więc potrzeby sprawdzania, czy zmienna jest równa true, gdyż sama zwróci true, gdy będzie taką właśnie wartość zawierać. A więc całą linię można napisać następująco i nie zmieni to działania warunku: if (scaleSlideOver || alphaSlideOver) (przyp. tłum.).

2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)

2 C:\helion\popf5b\r19-05.doc

Strona: 1
DLA SKŁADU: Ten znak jest znakiem kontynuacji linii przy listingach w tabeli!

---