Rozdział 28.
Zastosowania Generatora

W tym rozdziale:

• Tworzenie wykresów za pomocą Generatora

• Tworzenie dynamicznych list i przewijanych tekstów

• Publikacja szablonów Generatora

• Wczytywanie szablonów do innych filmów Flasha

• Wykorzystanie obrazów z kamer internetowych

W poprzednim rozdziale dowiedziałeś się, czym jest Generator i kiedy należy go używać. Teraz zapoznasz się z niektórymi obiektami Generatora i utworzysz kilka szablonów wykorzystywanych przez aplikację Generator Server. W tym rozdziale poznasz następujące obiekty Generatora: Basic Charts, List, Scrolling List, Ticker, Table, Multipage List i Insert MP3 File. Zakładamy, że przeczytałeś poprzedni rozdział i potrafisz opracować prosty szablon, który czerpie dane z pliku tekstowego i umieszcza je w polu tekstowym.

Chcemy bardzo gorąco podziękować Christianowi Bucholtzowi za pomoc okazaną przy pisaniu tego rozdziału. Christan jest także autorem ćwiczenia eksperta o obiekcie Multipage List.

Struktura danych wejściowych

W przykładzie z poprzedniego rozdziału z wstawianiem tekstu dowiedziałeś się, że dane można pobierać z dokumentu tekstowego (lub danych wyjściowych skryptu czy aplikacji) w postaci zmienna, wartość. Dane do szablonu Generatora można przesyłać, wykorzystując następujące struktury organizacji zmiennych: Name/Value i Column Name/Value.

Struktura Name/Value

W tej strukturze nazwa zmiennej i jej wartość występuje w tej samej linii dokumentu tekstowego. Ta struktura przypomina przesyłanie zmiennych za pomocą kodowania URL (więcej informacji na ten temat znajdziesz w rozdziale 24., „Wyprowadzanie i pobieranie danych we Flashu”), w którym po nazwie zmiennej podawana jest jej wartość. Na przykład zmienne podane w kodzie URL:

imie=Derek&nazwisko=Fullerton

lub zadeklarowane w skrypcie Flasha 5:

imie = "Derek";

nazwisko = "Fullerton";

w źródle danych dla Generatora będą wyglądały następująco:

name, value

imie, Derek

nazwisko, Fullerton

Taka struktura danych jest przydatna, gdy nazwy zmiennych nie powtarzają się. Jeśli miałbyś kilka zmiennych imie i kilka zmiennych nazwisko, musiałbyś każdej z nich nadać numer (na przykład imie_1, imie_2, itd.). W takim przypadku lepiej skorzystać ze struktury Column Name/Value.

Struktura Column Name/Value

W tej strukturze pierwsza linia tekstu określa nazwy zmiennych, a w pozostałych liniach znajdują się ich wartości. Położenie i liczba linii określa odpowiednio kolejność danych i ich ilość. Zapewne zauważyłeś, że ta struktura przypomina obiekt Array Flasha 5.

Poniższe obiekty Array:

imie = new Array("Derek","Cathy","Alonzo","Sean");

nazwisko = new Array("Fullerton","Jones","Silver","Nicks");

w strukturze Column Name/Value można zapisać następująco:

imie, nazwisko

Derek, Fullerton

Cathy, Jones

Alonzo, Silver

Sean, Nicks

Jak widać, ta struktura pozwala szybko dopisywać nowe wartości dla tej samej zmiennej. W poniższym przykładzie bez żadnych problemów możesz dodać następne nazwiska.

Generator wykorzystuje obydwie struktury. Niektóre obiekty, na przykład obiekt Basic Charts, wymagają korzystania ze struktury Column Name/Value. Jednak do dynamicznego wstawiania danych w pola tekstowe możesz używać struktury Name/Value (zademonstrowaliśmy to w poprzednim rozdziale).

Obiekt Basic Charts

Generator pozwala tworzyć kilka rodzajów najczęściej używanych wykresów. Korzystając z obiektu Basic Charts, możesz wywrzeć na odwiedzających wrażenie, wyświetlając im dane w postaci wykresu — poza tym zrobisz to łatwo i szybko.

Obiekt Basic Charts pozwala tworzyć cztery typy wykresów (każdy typ ma dwie odmiany):

• Bar (słupkowy),

• Line (liniowy),

• Area (warstwowy),

• Scattered (nieomawiany w tej książce).

Obiekt Basic Charts, jak większość obiektów Generatora, wymaga własnego źródła danych. Jednak w panelu Generator ten obiekt posiada znacznie więcej właściwości niż pozostałe obiekty. Na rysunku 28.1 pokazujemy je wszystkie.

Rysunek 28.1. Właściwości wszystkich obiektów Generatora znajdują się w panelu Generator. Zależą one od wybranego typu obiektu

Zanim zdecydujesz się, jaki typ wykresu (Bar, Line lub Area) chcesz utworzyć, powinieneś przeanalizować dane, które za jego pomocą chcesz przekazać użytkownikowi. Na podstawie tej analizy wybierz najdogodniejszy typ wykresu.

• Wykres typu Bar idealnie nadaje się do wyświetlania jednej wartości zmieniającej się w czasie. Na przykład możesz go wykorzystać do utworzenia wykresu przedstawiającego porównanie sprzedaży produktu w rozbiciu na miesiące. Ponieważ jest określona zarówno liczba sprzedanych egzemplarzy, jak i zakres obliczeń (podzielony na miesiące), słupkowy wykres sprzedaży ułatwi analizę danych. Jak każdy obiekt Generatora, wykres typu Bar wymaga kolumny o nazwie value w źródle danych. Na podstawie wartości z tej kolumny określana jest wysokość poszczególnych słupków. Nazwy kolumn w strukturze Column Name/Value (znajdującej się w pliku tekstowym) mogą być następujące:

value, color, url

Zmienna value określa wysokość słupków, zmienna color ich kolor, a zmienna url adres URL, do którego zostanie „zabrany” użytkownik, gdy kliknie słupek.

• Wykres typu Line lub Area przydaje się do wyświetlania ciągłych danych w pewnym okresie czasu z zaakcentowaniem wahań wartości. Na przykład na tego typu wykresie możesz przedstawiać cenę akcji na przestrzeni tygodnia, miesiąca czy roku wraz z wahaniami ich kursu. Właściwości wykresów typu Line i Area są podobne do tych z wykresu typu Bar, ale wymagają tylko kolumny value określającej wysokość linii. Na wykresie typu Line możesz umieścić kilka linii, jeśli określisz więcej niż jedno źródło danych. Kolejne źródła danych oddzielaj średnikiem (;), na przykład wykres_1.txt;wykres_2.txt;wykres_3.txt spowoduje narysowanie na wykresie trzech linii wykorzystujących trzy źródła danych.

• Wykres typu Stacked Bar, Stacked Line i Stacked Area wymaga kolumny color oraz kilku kolumn value (value1, value2, itd.). Tego typu wykres przypomina wielowymiarową tablicę, ponieważ z jednego źródła danych pobierasz wartości kilku elementów. Na przykład możesz użyć wykresu typu Stacked Bar do porównania sprzedaży Twoich produktów ze sprzedażą konkurencji (w określonym przedziale czasu) lub porównać sprzedaż jednego produktu ze sprzedażą innego produktu.

Właściwości wykresów Basic Charts znajdziesz na stronach 41 - 44 podręcznika „Using Generator” dostarczanego wraz z Generatorem. Jeśli korzystasz z wersji testowej aplikacji Generator Server, podręcznik w formacie PDF możesz pobrać ze strony dotyczącej pomocy technicznej dla Generatora (www.macromedia.com/support/generator).

My opiszemy tylko kilka ważniejszych właściwości obiektu Basic Charts.

• Data Source — wszystkie wykresy wymagają źródła danych o strukturze Column Name/Value, w którym określono wartość każdego węzła (na przykład słupka lub punktu na linii) wykresu.

• Plot Symbol — zanim jeszcze we Flashu pojawiła się metoda attachMovie, Generator umożliwiał określenie, jaki symbol ma zostać użyty jako grafika dla punktów na wykresie typu Scatter.

• Depth — ta właściwość pozwala tworzyć trójwymiarowe wykresy. Jedna jednostka jest równa 1/20 piksela (20 jednostek = 1 piksel). Właściwość Depth nie ma wpływu na wykresy typu Scatter.

• External Symbol File — obiekty dotyczące wykresów mogą korzystać z zewnętrznych szablonów Generatora zawierających symbole wykorzystywane jako etykiety i wartości wykresu.

• Instance Name — obiektowi Basic Charts (jak i większości obiektów Generatora) możesz nadać identyfikator, aby umożliwić jego modyfikację w skryptach (obiekt jest wtedy traktowany jak klon klipu filmowego).

Uwaga! W odróżnieniu od obiektów List, Table lub Ticker wykres typu Bar nie wymaga dodatkowych klipów filmowych definiujących jego szatę graficzną. Wykres typu Bar generowany jest w całości na podstawie źródła danych i właściwości z panelu Generator.

Tworzenie wykresu typu Bar

Pamiętając o podanych właściwościach, utworzymy pierwszy szablon wykresu typu Bar. W tym ćwiczeniu wykreujesz wykres przedstawiający liczbę ludności w kilku znanych miastach. Dane będą pobierane z prostego pliku tekstowego.

1. Utwórz nowy katalog na dysku twardym i nadaj mu nazwę barchart.

2. Wewnątrz tego katalogu utwórz katalog o nazwie data. Gdy korzystasz z Generatora, wszystkie pliki z danymi umieszczaj w jednym katalogu.

3. Uruchom prosty edytor tekstu, na przykład Notatnik (Windows) lub SimpleText (MacOS) i utwórz nowy plik tekstowy.

4. W edytorze tekstu wpisz następującą linię (uważaj na składnię):

value, color, hlabel

5. Zapisz dokument tekstowy w katalogu data pod nazwą barchart.txt.

6. Uruchom Flasha 5 i utwórz nowy projekt.

7. Wybierz polecenie File/Publish Settings i w oknie, które się pojawiło, zaznacz opcję Generator Template z zakładki Formats.

Uwaga! Obiekt Basic Charts możesz wyeksportować jako statyczny obraz, ale nie będziesz mógł korzystać z interaktywnych możliwości formatu .SWF.

8. Otwórz okno z obiektami Generatora (Window/Generator Objects) i przeciągnij obiekt Basic Charts na obraz.

9. Zaznacz obiekt i, korzystając z modyfikatora Scale narzędzia Arrow Tool, zmień skalę obiektu, aby zajmował on mniej więcej dwie trzecie obrazu. Obiekt Basic Charts można dowolnie skalować.

Wskazówka! Jeśli chcesz, aby na wykresie słupki znajdowały się w poziomie, po prostu obróć obiekt zgodnie ze wskazówkami zegara o 90 stopni i zmień wartość właściwość Horizontal Label Orientation (z panelu General) na Vertical.

10. Kliknij dwukrotnie obiek Basic Charts, aby otworzyć panel Generator. Właściwości z panelu ustaw tak, jak na rysunku 28.2. Pamiętaj, aby określić źródło danych jako data/barchart.txt.

Rysunek 28.2. Możesz kontrolować wygląd wykresu za pomocą właściwości z panelu Generator

11. Zapisz plik .FLA w katalogu barchart.

12. Otwórz plik tekstowy i zmodyfikuj go tak, aby zawierał poniższe linie (pamiętaj o składni):

COLOR, HLABEL, VALUE#ffcc33, "Sydney", 3.71#33ff00, "New York", 7.33#00c9ff, "London", 6.96#ff6633, "Berlin", 3.47#ff3399, "Tokyo", 8.12

Kolory możesz podać jako wartości szesnastkowe lub wymienić ich nazwy (Red, Green, itp.). Kolumna value musi zawierać wyłącznie liczby; inne wartości są ignorowane lub powodują błąd.

13. Zapisz plik tekstowy barchart.txt w katalogu data.

14. Powróć do Flasha i przetestuj film (polecenie Control/Test Movie). Powinieneś zobaczyć wykres przedstawiony na rysunku 28.3.

Rysunek 28.3. Ukończony wykres typu Bar znajdujący się w wygenerowanym pliku .SWF

Możesz poeksperymentować z innymi kolorami lub głębią wykresu (właściwości z panelu Generator), aby zmienić jego wygląd.

Obiekty List i Ticker

Od Flasha 4 projektanci mogą tworzyć dynamiczne, przewijane listy, wczytując zmienne z pliku tekstowego za pomocą akcji loadVariable(). Dlaczego więc ktoś chciałby korzystać z obiektów Generatora takich jak List, Scolling List lub Ticker?

Dlatego, że Generator tworzy listy (wykorzystując dane z bazy danych lub pliku tekstowego) na serwerze, a nie na komputerze użytkownika, jak akcja loadVariable(). Jednak najważniejsze jest to, że Generator umożliwia znacznie prostsze i efektywniejsze formatowanie list oraz pozwala umieszczać w listach obrazki i łącza do innych stron.

Szare tło!

Zmienne Generatora jako wartości właściwości

Dla obiektu Basic Charts (oraz innych obiektów Generatora) możesz przypisać właściwościom bezwzględne wartości, wykorzystując zmienne Generatora wywoływane z oddzielnego globalnego źródła danych. Na przykład w poprzednim ćwiczeniu z wykresem mogłeś właściwość Max Y-Pos Type ustawić na Absolute (z Relative Percent), a następnie jako wartość właściwości Max Y-Pos wpisać:

{max_ypos}

W ten sposób wartość zmiennej Generatora nazwanej max_ypos będzie określała maksymalne położenie góry słupka wykresu na osi Y. W pliku tekstowym (w strukturze Name/Value) ustalasz wartość tej zmiennej. Pamiętaj, aby pozostawić odstęp między maksymalną wartością na wykresie i końcem skali — w ten sposób uzyskasz lepszą przejrzystość danych na wykresie. Odstęp, jaki powinieneś pozostawić, zależy od wyświetlanych danych. Na wykresie z poprzedniego ćwiczenia największą wartością jest 8,31. Najlepiej więc jako maksymalną na skali wybrać wartość 10. W pliku tekstowym służącym jako źródło danych wpisz następujące linie:

name, value

max_ypos, 10

Tę samą technikę możesz wykorzystać do przypisywania wartości innym właściwościom obiektu Basic Charts z panelu Generator. Nie zapomnij określić źródła danych w oknie Set Environment (okno otwiera się po kliknięciu ikony Generatora z prawego górnego narożnika okna z listwą czasową).

Koniec szarego tła!

Teraz dowiesz się, jak tworzone są obiekty List oraz Ticker. Generator umożliwia tworzenie czterech różnych rodzajów list:

• List (prosta lista),

• Scrolling List (lista z możliwością przewijania),

• Multipage List (pozwala podzielić długie listy na strony),

• Ticker (automatycznie przewijająca się lista).

Wszystkie cztery rodzaje list posiadają te same właściwości w panelu Generator. Obiekty Scrolling List i Ticker mają jeszcze dodatkowy parametr Step Size (rysunek 28.4).

Rysunek 28.4. Właściwości obiektu Scrolling List

Jak działają obiekty List i Ticker? Generator na podstawie danych ze źródła danych tworzy odpowiedni klon klipu filmowego. Nie musisz pisać skryptu sterującego przesuwaniem zawartości listy ani projektować przycisków!

Szare tło!

Plik .SWF a plik .SWT

W każdym z ćwiczeń (także poprzednim) opublikujesz dwa pliki: .SWT i .SWF. Jeśli korzystasz z serwera zawierającego aplikację Generator Server, na serwerze umieszczasz tylko plik .SWT. Flash tworzy plik .SWF w czasie publikacji po to, abyś mógł zobaczyć, jak dane ze źródła danych zostaną umieszczone w szablonie .SWT. Jak już wcześniej wspomnieliśmy, możesz korzystać ze statycznych plików .SWF, nawet jeśli na serwerze Generator nie został zainstalowany. Jednak zmiana danych ze źródła danych nie spowoduje zmiany pliku .SWF — tylko aplikacja Generator Server umożliwia wypełnianie szablonów danymi i tworzenie plików .SWF „w locie”.

Koniec szarego tła!

Obiekt List

W tym ćwiczeniu użyjemy obiektu List. Nie posłużymy się skryptem Flasha 5, który wykorzystuje akcję loadVariables() do uzyskania dynamicznej listy. Skorzystamy z listy tworzonej przez Generator pobierającej dane z pliku tekstowego — użytkownik nie będzie zmuszony czekać na wczytanie danych przez akcję loadVariable(). Najpierw utworzymy plik tekstowy będący źródłem danych, a następnie wykreujemy szablon Generatora wykorzystujący obiekt List.

1. Na dysku twardym otwórz nowy katalog o nazwie list.

2. Wewnątrz tego katalogu utwórz katalog o nazwie data.

3. Teraz utworzymy źródło danych dla listy. Uruchom edytor tekstu, opracuj nowy plik tekstowy i zapisz go w katalogu data pod nazwą basicList.txt.

4. W pliku tekstowym jedna z kolumn musi nosić nazwę clip. W tej kolumnie umieszczasz nazwy symboli, które mają pojawić się na liście. Symbol może zawierać elementy graficzne oraz tekst. Pozostałym kolumnom nadaj opisowe nazwy, które łatwo zapamiętasz. My użyliśmy następujących nazw kolumn:

clip, header, textvalue, url

Poza wymaganą zmienną clip użyjemy jeszcze trzech innych zmiennych. Wykorzystamy je wewnątrz symbolu klipu filmowego (określonego zmienną clip).

5. Zapisz plik tekstowy w katalogu data, uruchom Flasha 5 i utwórz nowy film. Plik .FLA zapisz w katalogu list.

6. Zaznacz opcję Generator Template z zakładki Formats okna Publish Settings. Przeważnie ta opcja jest włączana automatycznie, gdy film Flasha zawiera obiekty Generatora, ale zawsze powinieneś to sprawdzić.

7. Przeciągnij obiekt List z okna Generator Objects na obraz. Zaznacz obiekt i, korzystając z modyfikatora Scale narzędzia Arrow Tool, przeskaluj obiekt tak, aby był prawie tak wysoki jak obraz i szeroki na około 210 pikseli.

Wskazówka! Jeśli zdecydujesz się zmienić rodzaj listy w czasie pracy nad projektem, możesz po prostu zmienić rodzaj obiektu za pomocą rozwijanej listy z panelu Generator. Nie będziesz musiał zmieniać wielkości ani położenia obiektu, wpiszesz tylko nowe źródło danych (i prawdopodobnie właściwości).

8. Teraz przygotujemy szablon listy wyświetlany w filmie Flasha. Musimy utworzyć klip filmowy, z którego będzie korzystał obiekt List. Wybierz polecenie Insert/New Symbol. Nadaj symbolowi nazwę clip_1 i pozostaw domyślną opcję Movie Clip. Symbolom możesz nadawać dowolne nazwy, ale najlepiej jeśli będą one opisowe, ponieważ musisz je jeszcze podać w pliku tekstowym służącym jako źródło danych.

9. Wejdź do trybu edycji symboli clip_1 i wpisz poniższy tekst w dwa pola tekstowe (pierwszą zmienną, header, pogrub):

{header}

{textvalue}

Pola tekstowe umieść poniżej i po prawej stronie punktu odniesienia. Jeśli tak zrobisz, nie będziesz musiał zmieniać domyślnych wartości właściwości z panelu Generator. Im więcej miejsca pozostawisz między punktem odniesienia i pierwszą linią tekstu, tym większy odstęp uzyskasz między górą listy i pierwszym elementem. Zmień także szerokość pola tekstowego, by odpowiadała szerokości listy (rysunek 28.5), aby Generator nie przenosił części tekstu do następnej linii.

Rysunek 28.5. Powinieneś rozszerzyć pole tekstowe na osi X do 210. piksela, ponieważ taka jest szerokość obiektu List na głównej listwie czasowej. Pamiętaj, aby rozszerzyć wszystkie pola tekstowe

Zapewne zauważyłeś, że teraz w zasadzie robisz to samo co w przykładzie z zastępowaniem tekstu z poprzedniego rozdziału. Jednak tym razem zastępujesz zmienne tekstem w klipie filmowym, a nie na głównej listwie czasowej.

Dwie z trzech zmiennych źródła danych umieściliśmy w symbolu klipu filmowego clip_1. Ostatnią zmienną, url, użyjemy w skrypcie przycisku.

Teraz jeszcze bardziej skomplikujemy klip filmowy, abyś mógł dokładniej poznać możliwości Generatora. Dodamy niewidoczny klon przycisku do pliku filmowego. Przycisk będzie zawierał skrypt korzystający ze zmiennej Generatora url. To samo można wykonać za pomocą skryptu i akcji loadVariables() — ale wtedy musiałbyś się martwić o to, czy dane zostały wczytane. Jeśli korzystasz z Generatora, wszystko znajduje się już w pliku .SWF, więc nie musisz się martwić o pobieranie danych.

Szczerze mówiąc, niewidoczne przyciski nie są wymagane przez obiekt List. Jeśli chcesz dla tekstu utworzyć przyciski typu rollover, możesz to zrobić. W tym ćwiczeniu użyjemy niewidocznych przycisków do utworzenia łączy do adresów URL.

10. Utwórz nowy symbol przycisku (klawisze Ctrl+F8 lub Command+F8) i nadaj mu nazwę invisibleButton.

11. Wstaw ujęcie kluczowe w klatce Hit.

12. Narysuj na obrazie wypełniony prostokąt o szerokości około 200 pikseli i wysokości 50 pikseli. Skorzystaj z panelu Info, aby zmienić wielkość prostokąta.

13. Przełącz się do trybu edycji symbolu clip_1.

14. Dodaj nową warstwę o nazwie button i przenieś ją na dół stosu.

15. Przeciągnij klon symbolu invisibleButton na obraz i umieść go nad polem tekstowym zawierającym tekst {header}. Przeskaluj przycisk tak, aby jego wysokość odpowiadała wysokości pola tekstowego {header} (rysunek 28.6).

Rysunek 28.6. Zakryj pole tekstowe z tekstem {header} klonem przycisku invisibleButton. Jeśli to konieczne, przeskaluj klon przycisku

16. Zaznacz klon przycisku i otwórz edytor skryptów (okno Object Actions).

17. Aby utworzyć dynamiczne łącze URL, musisz umieścić zmienną Generatora w skrypcie. Właśnie w skrypcie użyjemy zmiennej url, której wartość jest pobierana z pliku tekstowego stanowiącego źródło danych. Klonowi przycisku przypisz poniższy skrypt:

on(release){

getURL("{url},"_blank");

}

Ostrzeżenie! W skryptach zawsze umieszczaj zmienne Generatora w cudzysłowach, nawet jeżeli używasz ich w wyrażeniu; w przeciwnym wypadku Generator nie rozpozna tych wartości jako zmiennych Generatora i edytor skryptów zgłosi błąd w składni.

Możesz w ten sam sposób jak zmienną url, przypisać pozostałe argumenty akcji getURL jako zmienne Generatora. Wystarczy, że w pliku tekstowym umieścisz dwie dodatkowe kolumny:

clip, header, textvalue, url, window, method

i zmodyfikujesz skrypt na następujący:

on(release){

getURL("{url},"{window}","{method}");

}

Jesteśmy gotowi utworzyć listę, której nie można uzyskać za pomocą akcji loadVariables().

18. Zaznacz symbol klipu filmowego clip_1 i z rozwijanego menu Options (znajdującego się w lewym górnym narożniku okna biblioteki) wybierz polecenie Duplicate. Zduplikowanemu symbolowi nadaj nazwę clip_2.

19. Usuń pole tekstowe {header} i klon symbolu invisibleButton, ale pozostaw pole tekstowe {textvalue}.

20. Powróć na główną listwę czasową, zaznacz obiekt List i otwórz panel Generator.

21. W polu Data Source określ źródło danych. Możesz skorzystać z ikony obok pola i wskazać plik lub użyć następującej relatywnej ścieżki dostępu do pliku:

data/basicList.txt

22. W polu Orientation określ kierunek listy, wybierając opcję Vertical (lista pionowa).

23. Opcja Mask to Box pozwala określić, czy lista ma być maskowana. Pozostaw domyślną wartość true, chyba że chcesz, aby lista wychodziła poza ustalony dla niej obszar. W tym ćwiczeniu pozostaw wartość domyślną.

24. Z listy Spacing można wybrać opcję Fixed lub Automatic. Jeśli zdecydujesz się na opcję Fixed, odstęp pomiędzy klipami będzie określony przez wartość z pola Item space (jednostką są piksele). Jeśli wybierzesz opcję Automatic, wartość odległości między klipami jest pobierana ze źródła danych. Z listy Spacing wybierz opcję Fixed.

25. Parametr Item space określa odstęp pomiędzy klipami (w pikselach). Ustaw go na wartość 40.

26. Listy Horizontal Alignment i Vertical Alignment pozwalają określić wyrównywanie klipów wewnątrz listy. Wyrównywanie zawsze odbywa się względem punktu odniesienia klipu filmowego. Nie zmieniaj wartości tych pól.

27. W polu Instance name możesz określić identyfikator obiektu. W ten sposób będziesz miał do niego dostęp w skryptach, więc może być docelowym obiektem akcji with() lub print(). Nadaj klonowi identyfikator basicList.

Wskazówka! Zawsze nadawaj obiektom Generatora identyfikatory, aby były one „widoczne” w skryptach.

Po ustawieniu wszystkich właściwości obiektu List panel okno Generator powinien wyglądać tak jak na rysunku 28.7.

Rysunek 28.7. Ustawiliśmy właściwości obiektu List, aby odpowiednio sformatować dane

28. Plik .SWF jest już gotowy, ale w pliku tekstowym jeszcze nie wpisaliśmy wartości! Otwórz plik tekstowy będący źródłem danych i wpisz w nim następujące linie:

clip, header, textvalue, url

clip_1, "Nagłówek1", "Tekst1", "http://adresURL1.com"clip_2, "Nagłówek2", "Tekst2", "http://adresURL2.com"

clip_1, "Nagłówek3", "Tekst3", "http://adresURL3.com"

Zapewne dziwi Cię, że dwa razy użyliśmy klipu clip_1. Zaletą list tworzonych w Generatorze jest to, że możesz wielokrotnie korzystać z tych samych klipów znajdujących się w szablonie, ale wypełniać je inną zawartością. Jeśli przetestujesz film, zauważysz, że pierwsza i trzecia linia wygląda dokładnie tak samo (w sensie formatowania), ale zawiera inny tekst.

Wskazówka! Możesz utworzyć całą bibliotekę klipów filmowych o różnym wyglądzie, przyciskach, itp. i korzystać tylko z tych klipów, które są potrzebne do utworzenia odpowiedniej listy w pliku .SWF. Jest to szczególnie przydatne, jeśli masz długą przewijaną listę (na przykład statystyki graczy drużyny sportowej) i chcesz wyróżnić niektóre jej elementy. Jeśli tekst nie mieści się w przeznaczonym dla niego polu tekstowym, jego część znajdzie się w następnej linii. Generator poprzesuwa klipy, aby nic na siebie nie nachodziło.

Jeśli któryś z klipów nie korzysta ze wszystkich zmiennych (w naszym przypadku ze zmiennych header i url), plik tekstowy będący źródłem danych może wyglądać następująco:

clip, header, textvalue, url

clip_1, "Nagłówek1", "Tekst1", "http://adresURL1.com"clip_2, " ", "Tekst2", " "

clip_1, "Nagłówek3", "Tekst3", "http://adresURL3.com"

Nadal musisz umieszczać te pola, ale możesz w nie nic wpisywać, ponieważ są ignorowane.

Przekonasz się, że przewaga obiektu List nad przewijaną listą w tradycyjnych filmach Flasha korzystającą z akcji loadVariables() polega na możliwości innego formatowania każdego elementu listy i wstawiania różnych elementów graficznych. Jeśli elementy listy należą do kilku kategorii, możesz każdą kategorię formatować inaczej.

Uwaga! Dynamiczne tworzenie listy zawierającej różne formatowania jest także możliwe przy wykorzystaniu metody attachMovie i akcji loadVariables(). Jednak taka metoda tworzenia listy jest bardzo czasochłonna. Poza tym nie możesz w tradycyjnym filmie Flasha dynamicznie umieszczać obrazów .JPEG (ani obrazów w innych formatach rastrowych). Wykorzystując Generator, możesz wstawiać obrazy .JPEG do symbolu klipu filmowego umieszczanego na liście.

Obiekt Scrolling List

Skoro wiesz już, jak obiekt List korzysta ze struktury Colum Name/Value, możemy przejść do omawiania obiektu Scrolling List. Podstawowa różnica między tymi obiektami polega na tym, że lista wyświetlana za pomocą obiektu List na skończoną długość (określoną przez wielkość obiektu List na obrazie), natomiast obiekt Scrolling List potrafi wyświetlać listy praktycznie nieskończonej długości — aby zobaczyć całą, korzystasz z przycisków przewijania listy.

Przewijaną listę tworzy się podobnie jak podstawową listę (opisaną w poprzedniej sekcji), poza paroma wyjątkami:

• korzystasz z obiektu Scrolling List, a nie List;

• przewijana lista posiada dodatkową właściwość, Step Size, którą ustawiasz w panelu Generator;

• przewijana lista wymaga dodatkowych klonów symboli przycisków, które są wykorzystywane do przewijania listy.

Wykonaj poniższe kroki, aby utworzyć przewijaną listę za pomocą obiektu Scrolling Text.

1. Przeciągnij obiekt Scrolling List z okna Generator Objects na obraz. Plik tekstowy (źródło danych) powinien wyglądać podobnie jak plik tekstowy dla listy z poprzedniej sekcji. Właściwości obiektu z panelu Generator ustaw jak dla obiektu List. Utwórz symbole klipów filmowych, za pomocą których sformatujesz (i dodasz interaktywność) elementy listy.

2. Utwórz nowy symbol przycisku zawierający strzałkę w dół i umieść dwa klony tego symbolu na scenie. Obróć jeden z klonów, aby wskazywał w górę. Te przycisku posłużą do przewijania listy.

3. Klony przycisków umieść obok obiektu Scrolling List.

4. Za pomocą panelu Generator obiektowi Scrolling List nadaj identyfikator scroll_down.

5. Aby utworzyć prostą przewijaną listę, zaznacz klon przycisku ze strzałką w dół, otwórz edytor skryptów i przypisz klonowi poniższy skrypt:

kompatybilny z Flashem 5:

on(release){

with(scroll_down){

nextFrame();

}

}

kompatybilny z Flashem 4:

on(release){

tellTarget("scroll_down"){

nextFrame();

}

}

Utworzyłeś przycisk, którego kliknięcie powoduje przesunięcie listy w górę.

Ostrzeżenie! Akcja with() obsługiwana jest tylko przez odtwarzacz Flash 5 Player lub nowszy! Jeśli tworzysz film kompatybilny z odtwarzaczem Flash 4 Player, skorzystaj z akcji tellTarget().

6. Zaznacz klon przycisku ze strzałką w górę, otwórz edytor skryptów i przypisz klonowi poniższy skrypt:

kompatybilny z Flashem 5:

on(release){

with(scroll_down){

prevFrame();

}

}

kompatybilny z Flashem 4:

on(release){

tellTarget("scroll_down"){

prevFrame();

}

}

Teraz masz już przyciski pozwalające przewijać listę w obydwie strony.

Wskazówka! Do przycisków możesz przypisać różnego rodzaju skrypt, ale zawsze musisz odwołać się do identyfikatora obiektu Scrolling List.

Obiekt Ticker

Obiekt Ticker działa prawie tak samo jak obiekt Scrolling List, ale:

• lista przewijana jest automatycznie przez cały czas trwania filmu, więc nie są potrzebne żadne przyciski;

• z okna Generator Objects przeciągasz na obraz obiekt Ticker, a nie obiekt Scrolling List.

Obiekty Ticker i Scrolling Text posiadają te same właściwości. Także format źródła danych jest identyczny.

Szare tło!

Ćwiczenie eksperta
Obiekt Multipage List
Autor: Christian Buchholz

Ten rozdział powstał przy współpracy z Christianem. W ćwiczeniu zapoznasz się z obiektem Multipage List wprowadzonym we Flashu 5 i drugim wydaniu aplikacji Generator Server 2.

W najnowszej wersji Generatora wprowadzono obiekty Multipage List i Radio Button. Aby wypełniać je danymi i dynamicznie tworzyć pliki .SWF, musisz na serwerze WWW zainstalować aplikację Generator Server.

Czym obiekt Multipage List różni się od innych obiektów typu List? Obiekt Multipage List dzieli długą listę na strony i pozwala ją przeglądać za pomocą przycisków dalej, wstecz i początek. Na przykład możesz utworzyć listę ze statystykami zawodników drużyny piłkarskiej, w której każdy zawodnik znajduje się na osobnej stronie. Korzystasz z obiektu Multipage List, aby osobno nie tworzyć strony dla każdego zawodnika.

W tym ćwiczeniu w filmie Flasha umieścimy obiekt Multipage List.

1. Na dysku twardym utwórz nowy katalog o nazwie multipage, a wewnątrz niego utwórz katalog data. W katalogu data umieścimy źródłowe pliki danych dla szablonów .SWT.

2. Podobnie jak obiekty List, Scrolling List i Ticker omówione w poprzednich sekcjach, obiekt Multipage List także wymaga źródła danych. Jednak struktura tego źródła jest bardziej rozbudowana. Utwórz nowy plik tekstowy o nazwie multiList.txt i w pierwszej linii wpisz następujące nazwy kolumn:

text, symbol, channel, show, times, description, image

Obiekt Multipage List wymaga kolumny text w odróżnieniu od innych list, które wymagają kolumny clip. Możesz jeszcze dodać kolumny o nazwach url, window i method. Za pomocą kolumny url możesz określić adres URL, który zostanie załadowany, gdy użytkownik kliknie element listy (podobnie jak w ćwiczeniu z obiektem List). Kolumna window może zawierać nazwę okna (_parent, _blank, _self), do którego zostanie załadowany adres URL.

3. Zapisz plik tekstowy w pliku multiList.txt w katalogu data.

4. Uruchom Flasha i utwórz nowy film. Upewnij się, że w zakładce Formats okna Publish Settings włączona jest opcja Generator Template. Zapisz plik .FLA w katalogu multilist.

5. Otwórz okno z obiektami Generatora (polecenie Window/Generator Objects) i przeciągnij obiekt Multipage List na obraz. Nie musisz zmieniać wielkości obiektu — jeśli to zrobisz, uzyskasz dziwną szatę graficzną — więc na razie pozostaw domyślną wielkość obiektu Multipage List.

6. Utwórz nowy symbol klipu filmowego i nadaj mu nazwę info.

7. W trybie edycji symbolu wpisz dwie zmienne Generatora w osobne pola tekstowe. Pola tekstowe umieść poniżej i po prawej stronie punktu odniesienia. Zapewne zauważyłeś, że te zmienne nazywają się dokładnie tak samo jak kolumny z pliku tekstowego będącego źródłem danych:

{times}

{description}

8. Utwórz drugi symbol klipu filmowego i nadaj mu nazwę header.

9. Na obrazie symbolu header umieść poniższe zmienne Generatora (w tym samym miejscu, co zmienne z kroku 7.):

{channel}

{show}

10. Przeciągnij obiekt Insert JPEG File na obraz symbolu header i umieść go poniżej pól tekstowych ze zmiennymi.

11. Kliknij dwukrotnie obiekt Insert JPEG File, aby otworzyć panel Generator. Wartość parametru File Name ustaw na:

{image}

12. Na potrzeby tego ćwiczenia w katalogu data powinieneś umieścić kilka niewielkich obrazów w plikach .JPEG (wielkość obrazów około 200 × 200 pikseli). W pliku tekstowym (multiList.txt) w kolumnie image podaj ścieżki dostępu i nazwy plików z obrazami, na przykład:

data/obraz1.jpg

Uwaga autora. Możesz użyć obrazów znajdujących się na Twoim serwerze WWW lub na jakimkolwiek innym. Jest to ogromna zaleta obiektów Generatora dotyczących obrazów. Jeśli musisz korzystać z materiałów znajdujących się na innym serwerze (na którym nie umieściłeś plików .SWT), Generator pobierze te obrazy i wstawi do szablonu.

Teraz w bibliotece powinny znajdować się dwa symbole: info i header. Podobnie jak przy obiekcie List, nie musisz fizycznie umieszczać klonów symboli na głównej listwie czasowej filmu Flasha. Obiekt Multipage List automatycznie pobierze symbole z biblioteki (ponieważ przekazaliśmy ich nazwy poprzez źródło danych), podobnie jak akcja attachMovie pobiera klipy filmowe z biblioteki. Jednak Generator, w odróżnieniu od akcji attachMovie, nie korzysta z identyfikatora symbolu, ale jego nazwy w bibliotece.

13. Powróć na główną listę czasową i zaznacz obiekt Multipage List. W panelu Generator ustaw właściwości Data Source, Items Per Page, Text Symbol i Instance Name na wartości, które widzisz na poniższym rysunku. Dla pozostałych właściwości pozostaw wartości domyślne. Omówienie wszystkich właściwości obiektu Multipage List znajdziesz w podręczniku „Using Generator” na stronach 36-38.

Domyślnym kolorem „wbudowanych” w obiekt przycisków początek, wstecz i dalej jest czerń. Jeśli używasz czarnego koloru tła w filmie Flasha, powinieneś utworzyć własne przyciski i nazwy symboli przycisków wpisać jako wartości właściwości Home Symbol (przycisk początek), Next Symbol (przycisk dalej) i Previous Symbol (przycisk wstecz) w panelu Generator. Symbole przycisków możesz nawet umieścić w innym pliku .SWT; wtedy w polu właściwości External Symbol File wpisz ścieżkę dostępu i nazwę pliku .SWT zawierającego symbole.

Przyciski początek, wstecz i dalej obiektu Multipage List zawsze znajdują się w lewym górnym narożniku listy. Nie możesz zmienić ich położenia.

14. Teraz w pliku tekstowym musimy określić kilka danych, które wyświetlimy za pomocą listy. Otwórz plik multiList.txt i wpisz w nim poniższe dane (znak ¬ oznacza kontynuację tej samej linii, nie umieszczaj go w pliku tekstowym):

text, symbol, channel, show, times, description, image,,header,CHANNEL 1,The Movie,4.15 PM ,A movie about¬

Nothing,data/image1.jpg,,header,CHANNEL 2,The Movie,6.15 PM ,A movie about¬

Something,data/image2.jpg,,header,CHANNEL 3,The Movie,8.15 PM ,A movie about¬

Everything,data/image3.jpg

Zapewne zastanawiasz się, dlaczego każda linia oprócz pierwszej rozpoczyna się od przecinka. Musimy tak pisać, ponieważ kolumna text jest wymagana — jednak nie chcemy nic jej przypisywać, gdyż w panelu Generator właściwość Text Symbol ustawiliśmy na symbol info, więc przed pierwszym przecinkiem nie musimy niczego umieszczać. Istnieje jednak możliwość zdefiniowania innego symbolu z tekstem dla każdego elementu listy za pomocą źródła danych i kolumny text.

15. Zapisz plik tekstowy i film Flasha (plik .FLA). Przetestuj film. W filmie .SWF zobaczysz listę podzieloną na kilka stron.

W tym momencie możesz powrócić do środowiska edycyjnego i nadać odpowiednie formatowanie polom tekstowym znajdującym się w symbolach klipów filmowych info i header. Możesz też zmienić formatowanie obiektu Insert JPEG File lub nawet dodać więcej takich obiektów.

Przypis do szarego tła!

Christian Buchholz urodził się w Moskwie (Rosja) a dorastał w NRD. Po zburzeniu muru berlińskiego przeniósł się do Monachium, gdzie przez dziewięć lat studiował balet, a następnie trzy lata spędził na fotografice i reklamie. Kończył szkołę, gdy hitem był film Nagi instynkt. Twierdzi, że „Flash jest narzędziem, które pozwala mu tworzyć wysoce interaktywne i eleganckie witryny”. Oto kilka adresów tworzonych przez niego witryn: www.elle.com.au, www.toyota.com.au, www.news.com.au, www.bromide73.com. Christian aktualnie mieszka w Sydney (Australia) i uwielbia gotować.

Koniec szarego tła!

Korzystanie z szablonów Generatora na witrynie

Dowiedziałeś się już, jak tworzyć szablony Generatora i sprawdzić wygląd generowanego na ich podstawie pliku .SWF, wykorzystując eksport Flasha 5 do statycznego pliku .SWF. Jednak do tej pory nie powiedzieliśmy, jak umieścić i wykorzystać szablony .SWT na prawdziwej witrynie. W tej sekcji dowiesz się, jak używać szablonów Generatora w dokumentach HTML i filmach Flasha.

Publikacja szablonu Generatora (pliku .SWF)

Jeśli umieścisz obiekt Generatora na obrazie lub ustawisz zmienną środowiska Generatora, wtedy szablon Generatora (plik .SWT) będzie automatycznie tworzony przy każdej publikacji filmu Flasha. Gdy używasz dynamicznie zmieniającej się grafiki lub źródła danych, musisz opublikować plik .SWT i umieścić go na serwerze z zainstalowaną aplikacją Generator Server. Zaznacz opcję Generator Template z zakładki Formats okna Publish Settings (polecenie File/Publish Settings) i określ parametry publikacji z zakładki Generator. Większość ustawień odpowiada ustawieniom z zakładki Flash okna Publish Settings i okna Movie Properties (polecenie Modify/Movie).

Rysunek 28.8. Ustawienia formatu Generator Template z okna Publish Settings

Parametry Dimensions

Możesz określić w pikselach szerokość (Width) i wysokość (Height) filmu Flasha wygenerowanego na podstawie szablonu Generatora. Jeśli jest wybrana opcja Match Movie (domyślnie), te parametry odpowiadają aktualnym ustawieniom z okna Movie Properties (polecenie Modify/Movie).

Parametr Background

W polu tego parametru możesz wpisać wartość koloru w postaci szesnastkowej lub wybrać próbkę koloru z podręcznego okna wywoływanego kliknięciem podglądu koloru. W pole parametru możesz także wpisać nazwę koloru z palety „bezpiecznej” dla stron WWW, na przykład blue, black lub white.

Parametr Frame Rate

W tym polu możesz określić prędkość odtwarzania klatek, która różni się do ustawień z okna Movie Properties. Ten parametr steruje szybkością odtwarzania filmu. Im wyższą wartość wpiszesz, tym szybciej film będzie odtwarzany.

Lista Load Order

Za pomocą tej listy określasz kolejność wczytywania warstw filmu do odtwarzacza Flash Player. Domyślne ustawienie (Bottom up) powoduje wczytywanie warstw od dołu do góry, czyli najniższa warstwa wczytywana jest pierwsza, a najwyższa ostatnia. Jeśli wybierzesz opcję Top down, wczytywanie rozpoczyna się od najwyższej warstwy i sukcesywnie przechodzi w dół stosu warstw.

Lista Data Encoding

Przy użyciu tej listy możesz określić format kodowania źródła danych dla Generatora. Jeśli wybierzesz opcję Default, Flash ustali kodowanie danych na takie, jakiego używa system operacyjny, na którym korzystasz ze środowiska edycyjnego Flasha. Większość źródeł danych wykorzystuje kodowanie ASCII (standardowe kodowanie tekstu w systemach Windows i UNIX). Jeśli jednak korzystasz z Flasha na systemie MacOS, opcja Default jest równoznaczna opcji MacRoman. Kodowanie UTF8 jest odmianą kodowania Unicode; z tego kodowania korzysta wiele aplikacji. Kodowania SJIS i EUC_JP dotyczą źródeł danych zawierających tekst japoński.

Opcja Create External Font Files

Po zaznaczeniu tej opcji w czasie publikacji szablonu Generatora (pliku .SWT) są tworzone także pliki .FFT. Każda czcionka wykorzystywana w polach tekstowych jest zapisywana w osobnym pliku. Pliki .FFT powinieneś umieścić na serwerze w tym samym katalogu, co plik .SWT. Jeśli używasz zmiennych Generatora do wstawiania tekstu do filmu Flasha, zawsze powinieneś zaznaczać tę opcję.

Parametr External Media

Za pomocą tego parametru możesz określić jeden lub więcej plików .SWT zawierających symbole, które chcesz wykorzystać w aktualnie edytowanym filmie. W ten sposób możesz tworzyć szablony .SWT służące jako biblioteki symboli i korzystać z symboli w kilku szablonach Generatora.

Parametr Parameters

Możesz przetestować zmienne środowiska Generatora, wpisując je w pola Parameters zakładki Generator. Wpisz nazwę zmiennej i jej wartość w odpowiednie pola i kliknij przycisk Add. Gdy opublikujesz plik .SWT, tworzony w tym samym czasie plik .SWF skorzysta z tych zmiennych, jakby były one pobierane ze źródła danych. Pamiętaj, aby z tego parametru korzystać tylko w procesie testowania filmu — później używaj standardowego źródła danych do określania zmiennych Generatora.

Osadzanie szablonów Generatora w dokumencie HTML

Szablon Generatora w dokumencie HTML osadzasz w ten sam sposób jak plik .SWF —wykorzystując znaczniki <EMBED> i <OBJECT>. Integrację filmów Flasha z zawartością dokumentów HTML omawiamy w rozdziale 41., „Osadzanie filmu Flasha w dokumencie HTML”. Flash 5 może automatycznie utworzyć kod HTML pozwalający na osadzenie szablonu Generatora.

Nowość! We Flashu 5 dodano cztery nowe szablony HTML do wykorzystania przy szablonach Generatora: Generator Ad Any Banner (do dynamicznego tworzenia banerów reklamowych), Generator Image Output (kreowanie statycznych obrazów .JPEG, .GIF lub .PNG), Generator Only (Default) (tworzy plik .SWF) i Generator QuickTime (do tworzenia filmów QuickTime Flash na podstawie szablonu Generatora). Szablony omawiamy w rozdziale 40., „Publikowanie filmów Flasha”.

Aby utworzyć dokument HTML wykorzystujący szablon Generatora (plik .SWT), wykonaj poniższe kroki.

1. Otwórz okno Publish Settings i z zakładki Formats zaznacz opcję HTML.

2. Z rozwijanej listy Template zakładki HTML wybierz opcję Generator Only (Default). Jeśli chcesz, aby film .SWF został tak przeskalowany, by wypełnił całe okno przeglądarki, z rozwijanej listy Dimensions wybierz opcję Percent. Wartości parametru Width i Height zostały automatycznie zmienione na 100%.

3. Kliknij przycisk Publish z okna Publish Settings. Flash opublikuje trzy pliki: .SWT, .SWF i dokument HTML. Na serwerze WWW z zainstalowaną aplikacją Generator Server musisz umieścić tylko plik .SWT i dokument HTML.

Jeśli otworzysz w edytorze tekstu dokument HTML opublikowany przez Flasha 5, zauważysz, że odnosi się on do pliku .SWT, a nie pliku .SWF (zmieniliśmy oryginalne formatowanie dokumentu HTML, aby było bardziej przejrzyste; znak ¬ oznacza kontynuację tej samej linii kodu):

<OBJECT

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs¬

/flash/swflash.cab#version=5,0,0,0"

WIDTH=100% HEIGHT=100%>

<PARAM NAME=movie VALUE="basicList.swt?type=swf">

<PARAM NAME=quality VALUE=high>

<EMBED src="basicList.swt?type=swf"

quality=high

WIDTH=100% HEIGHT=100%

TYPE="application/x-shockwave-flash"

PLUGINSPAGE="http://www.macromedia.com/shockwave/download/¬

index.cgi?P1_Prod_Version=ShockwaveFlash">

</EMBED>

</OBJECT>

Zapewne zauważyłeś, że Flash po nazwie pliku .SWF umieścił zapytanie do serwera (znak zapytania i tekst zakodowany w kodzie URL):

basicList.swt?type=swf

Zapytaniem po nazwie szablonu Generatora jest ?type=swf. Aplikacja Generator Server otrzyma żądanie pliku basicList.swt wraz z ciągiem znaków type=swf. Spowoduje to przesłanie do przeglądarki pliku w formacie .SWF. Możliwe są następujące wartości zmiennej type:

• type=swf, który powoduje wysłanie pliku .SWF;

• type=jpg, który powoduje wysłanie pliku .JPEG; w dokumencie HTML użyj znacznika <IMG> z atrybutem SRC odnoszącym się szablonu Generatora zamiast znaczników <OBJECT> i <EMBED>, jeśli z listy Template zakładki HTML wybierzesz opcję Generator Image Output, Flash automatycznie utworzy odpowiedni dokument HTML;

• type=gif, który powoduje wysłanie pliku .GIF, przeczytaj opis dla obrazu w formacie .JPEG;

• type=png, który powoduje wysłanie pliku .PNG, przeczytaj opis dla obrazu w formacie .JPEG;

• type=mov, który do przeglądarki przekaże film w formacie QuickTime Flash; jeśli samemu wpisujesz to zapytanie, pamiętaj, aby dla pliku .SWT użyć znacznika <EMBED>, jeśli z listy Template zakładki HTML wybierzesz opcję Generator QuickTime, Flash automatycznie utworzy odpowiedni dokument HTML.

Ostrzeżenie Ponieważ Generator na podstawie zmiennej type wybiera format generowanej zawartość witryny, nie używaj tej zmiennej w szablonie, chyba że chcesz pokazać wartość zmiennej type w polu tekstowym.

Używanie szablonów Generatora w innych filmach Flasha

Możesz także wczytywać szablony Generatora do filmów Flasha w formacie .SWF. W rzeczywistości nie musisz nawet pobierać pliku .SWT (już o tym wspominaliśmy) — Generator na podstawie szablonu .SWT tworzy plik .SWF i wysyła go do przeglądarki lub filmu Flasha, który zażądał pliku .SWT.

W V części tej książki dowiedziałeś się, że do wczytywania filmów .SWF do głównego filmu używa się akcji loadMovie(). W podobny sposób do każdego filmu Flasha możesz wczytać zawartość filmu wygenerowanego z szablonu przez Generator. Na przykład:

loadMovie("basicList.swt", "movieHolder");

powoduje wczytanie wygenerowanego na podstawie pliku basicList.swt filmu .SWT do klonu klipu filmowego nazwanego movieHolder.

Za pomocą akcji loadMovie() do generowanego szablonu Generatora możesz także przesyłać zmienne z filmu Flasha (działanie jest podobne do określania zmiennych w dokumencie HTML):

imie = "Robert";

loadMovie("welcome.swt", "movieHolder", "GET");

Spowoduje to wysłanie do aplikacji Generator Server żądania szablonu z następującym zapytaniem:

welcome.swt?imie=Robert;

Zapewne pamiętasz z rozdziału 24., „Wyprowadzanie i pobieranie danych we Flashu”, że metoda GET powoduje umieszczenie par zmienna-wartość na końcu adresu URL. Jeśli nie chcesz korzystać z metody GET, możesz użyć następującego skryptu:

imie = "Robert";

loadMovie("welcome.swt?imie=" + imie, "movieHolder");

Ponieważ sami dołączamy zapytanie do adresu URL, Flash nie musi tego robić za nas. Ostatni sposób przydaje się, gdy zamierzasz przesyłać tylko niektóre zmienne z aktualnej listwy czasowej. Akcja loadMovie() wykorzystująca metodę GET wysyła wszystkie zmienne zadeklarowane na aktualnej listwie czasowej.

Możesz wykorzystać metodę loadMovie() do wczytania szablonu Generatora zawierającego obiekt Insert MP3 File. W projekcie szablonu Generatora zaznacz obiekt Insert MP3 File, otwórz panel Generator i ustaw wartość właściwości File Name na {soundURL}. Zapisz projekt (plik .FLA) i opublikuj plik .SWT (na przykład pod nazwą mp3.swt). Teraz w innym filmie Flasha (plik .FLA) — tym, który będzie wczytywał szablon Generatora — dodaj poniższy skrypt do ujęcia lub klonu przycisku:

muzykaURL = "/data/muzyka_1.mp3";

loadMovie("mp3.swt?muzykaURL=" + muzykaURL, "movieHolder");

Pamiętaj, aby na tej samej listwie czasowej co skrypt umieścić klon klipu filmowego o nazwie movieHolder. Po wykonaniu skryptu w filmie Flasha odtwarzacz zażąda od serwera WWW szablonu Generatora o nazwie mp3.swt. Aplikacja Generator Server poza nazwą otrzyma zmienną muzykaURL i wartość tej właściwości umieści w parametrze File Name obiektu Insert MP3 File. W czasie generowania pliku mp3.swf z katalogu data zostanie pobrany plik sound_1.mp3 i umieszczony w obiekcie Generatora. W klonie movieHolder zostanie umieszczony wygenerowany przez Generatora plik .SWF.

W następnym ćwiczeniu eksperta Mike Jones, ekspert od spraw związanych z Generatorem, pokaże inny sposób użycia akcji loadMovie w filmie Flasha, za pomocą którego na witrynie będziesz mógł umieszczać obrazy pochodzące z kamer.

Szare tło!

Ćwiczenie eksperta
Flash, Generator i kamera internetowa
Autor: Mike Jones

W tym ćwiczeniu zajmiemy się wykorzystaniem Generatora do umieszczania obrazów pochodzących z kamery internetowej w filmie Flasha. W tym ćwiczeniu zakładam, że masz dostęp do serwera WWW z zainstalowaną aplikacją Generator Server i zainstalowałeś we Flashu rozszerzenie Generator Authoring Extension. Ale zanim zaczniemy, musimy odpowiedzieć na dwa pytania: jakiego rodzaju kamerę zastosować i jakiego serwera użyć?

W tym ćwiczeniu korzystałem z kamery Logitech Quickcam Pro (wersja USB). Można jej użyć w systemach Windows 95, 98 i 2000. (Aby wykorzystać ją w systemie Windows 2000, musisz pobrać z witryny firmy Logitech najnowsze sterowniki). Niestety ta kamera internetowa nie działa na komputerach Macintosh. Oczywiście nie musisz korzystać dokładnie z tej kamery — po prostu ja z niej korzystałem, pisząc to ćwiczenie. Oprogramowanie dla kamery internetowej musi mieć możliwość automatycznego umieszczania obrazów o tej samej nazwie na serwerze WWW.

Serwer WWW musi udostępniać także serwer FTP — oprogramowanie kamery internetowej umieszcza obrazy na serwerze WWW przy użyciu protokołu FTP, nawet jeżeli jest uruchomione na tym samym komputerze co serwer. Niestety systemy Windows 95 i 98 zawierają okrojoną wersję aplikacji Personal Web Server, która nie obsługuje protokołu FTP. Oznacza to, że musisz mieć dostęp do aplikacji NT lub 2000 Web Server (Windows) albo Apache Server (Linux). Serwer z kamerą internetową nie musi być tym samym serwerem, na którym znajduje się aplikacja Generator Server — jednak lepiej umieścić wszystko na jednym serwerze, ponieważ czasy pobierania i umieszczania danych będą najkrótsze.

Ustawienia kamery internetowej

Po wstępie pora zabrać się do pracy. Najpierw zajmiemy się ustawieniem parametrów oprogramowania kamery internetowej, aby generowane przez nią obrazy trafiały do serwera WWW. Nie będę tutaj omawiał instalacji samej kamery oraz oprogramowania do niej, ponieważ informacje na ten temat znajdziesz w podręczniku dostarczanym z kamerą! Jeśli korzystasz z kamery Logitech Quickcam Pro (wersja USB), możesz bez żadnych modyfikacji wykonać poniższe kroki; w przeciwnym wypadku będziesz musiał poszukać odpowiednich opcji i zmodyfikować je w sposób podany w krokach.

1. Uruchom oprogramowanie kamery internetowej.

2. Z paska menu wybierz polecenie Create a Webcam (uruchom kamerę). Powinieneś zobaczyć dwa nowe okna w głównym oknie programu.

3. W lewym oknie zobaczysz aktualny obraz z kamery, a w prawym informacje o stanie kamery i jej działaniu.

4. Zacznijmy od lewego okna, ponieważ musimy określić, jak chcemy przechwytywać obraz. Znajdź przycisk Settings — na dole po prawej stronie obok dużego przycisku Start — i kliknij go.

5. Pojawi się okno dialogowe z czterema zakładkami: Web Page, Image, Schedule i General. Nie będziemy nic zmieniać z zakładki General, ponieważ interesują nas tylko trzy pierwsze.

6. Kliknij zakładkę Web Page i wyłącz opcję Create and Upload a Web page... (Utwórz i umieść na serwerze stronę WWW). Jeśli chcesz, kliknij zakładkę Image, aby zwiększyć stopień kompresji obrazów (jednocześnie zmniejszając ich jakość) — w tym wypadku wybór należy do Ciebie. Zalecam, abyś pozostawił domyślną nazwę pliku obrazu (image.jpg).

7. Teraz musimy ustalić, co jaki czas będzie aktualizowany obraz z kamery. Kliknij zakładkę Schedule i ustal czas aktualizacji — na potrzeby tego ćwiczenia ustaw ten czas na pięć sekund.

8. Kliknij przycisk OK na dole okna Settings, aby wprowadzić zmiany w życie.

Prawie ukończyliśmy ustawianie opcji dotyczących przechwytywania obrazu. Pozostało jeszcze ustawienie rozdzielczości przechwytywanego obrazu. Aby ją zmienić, musisz odnaleźć ikonę kamery (Webcam Live View) w lewym oknie — znajduje się powyżej przycisku Settings. Dla kamery, której używałem, możliwe było ustawienie następujących rozdzielczości:

• mała — 160×120,

• średnia — 320×240,

• duża — 640×480.

Aby uzyskać optymalny czas pobierania obrazu, zalecam rozdzielczość małą lub średnią. Pozostałe ustawienia z tego panelu możesz zignorować.

Ustawienia oprogramowania kamery dotyczące serwera WWW

Do ustawienia pozostały jeszcze opcje dotyczące umieszczania obrazu na serwerze i będziemy mogli zacząć pracę we Flashu. W głównym oknie oprogramowania kamery kliknij inny niż poprzednio przycisk Settings — znajdziesz go na pasku stanu głównego okna. Najpierw zajmiemy się ustawieniami dotyczącymi połączenia z serwerem. Z rozwijanego menu wybierz polecenie Internet Connection. Zawiera ono dwie opcje: Modem i LAN.

Wybierz odpowiednie dla siebie połączenie i kliknij przycisk OK. Pozostały jeszcze ustawienia dotyczące serwera, na którym oprogramowanie ma umieszczać obrazy z kamery. W rozwijanym menu Web z okna Status znajdziesz polecenie Internet Connection. Otworzy się okno dialogowe z trzema polami do wypełnienia: FTP, HTTP i Optional directory.

• FTP — tutaj wpisujesz ustawienia połączenia FTP z serwerem WWW, na którym chcesz umieszczać obrazy z kamery (na przykład ftp.mojserwer.pl). Wpisz nazwę serwera FTP. Zostaniesz także zapytany o nazwę użytkownika i hasło dostępu do serwera.

• HTTP — tutaj wpisz adres URL serwera WWW wraz z ewentualnym katalogami (na przykład http://www.mojserwer.pl/mojkatalog).

• Optional directory — wpisz w to pole katalog, w którym chcesz umieścić obrazy na serwerze. Teraz pozostaw to pole puste.

Zanim klikniesz przycisk OK, przetestuj, czy działa połączenie z serwerem. Kliknij przycisk Test — jeśli korzystasz z modemu, pamiętaj o wcześniejszym połączeniu z Internetem. Gdy wszystko będzie w porządku, oprogramowanie kamery połączy się z serwerem FTP i po chwili zobaczysz uśmiechniętą twarz i komunikat o prawidłowym połączeniu. Jeśli zobaczyłeś komunikat o sukcesie, zakończyłeś na razie „zabawę” z oprogramowaniem kamery. (Gdy połączenie się nie powiodło, przejrzyj poprzednie kroki i sprawdź, w którym miejscu popełniłeś błąd; w jego znalezieniu pomoże Ci zapewne komunikat wskazujący prawdopodobną przyczynę braku połączenia).

Wczytywanie obrazów z kamery do filmu Flasha

Uruchom Flasha, ponieważ nadszedł czas tworzenia plików, które umieścimy na serwerze WWW z Generatorem. Utworzymy stronę wykorzystującą dwa pliki:

• główny film — będzie to film Flasha zawierający interfejs strony i wczytujący wygenerowany plik .SWF;

• obraz z kamery — będzie to szablon Generatora, w którym Generator będzie umieszczał przechwycone obrazy.

Główny film

Utwórz nowy plik Flasha i umieść w nim cztery warstwy o następujących nazwach (pierwszą z podanych warstw umieść na górze stosu, a ostatnią na dole): Graphics (elementy graficzne), Variables (zmienne), Actions (skrypty) i Labels (etykiety). Po utworzeniu warstw i nadaniu im nazw zapisz film! Dobrze, jeśli w czasie pracy korzystasz z często niedocenianej zasady: do nazwy zapisywanego pliku dodawaj numer wersji. Tym sposobem, jeśli coś się stanie (na przykład Flash wyłączy się z błędem), stracisz co najwyżej ostatnio wprowadzone modyfikacje projektu. Zapisz projekt pod nazwą flashcam_01.fla — przy każdym następnym zapisie zwiększaj numer w nazwie pliku. Dlaczego powinieneś zapisywać kilka wersji? Ponieważ czasami najnowsza wersja może okazać się uszkodzona; jeśli masz kilka wersji pliku, możesz stracić tylko część pracy, a nie całość. Za pomocą polecenia Modify/Movie otwórz okno Movie Properties i zmień następujące ustawienia:

• Frame Rate na 12 fps,

• Stage Size na 800×600.

Po zmianie tych ustawień możemy zaczynać pracę.

1. Na listwie czasowej powinno znajdować się tylko jedno ujęcie.

2. Zablokuj wszystkie warstwy poza warstwą Label. Pierwsze ujęcie oznacz etykietą default.

3. Odblokuj warstwę Variables i zablokuj pozostałe warstwy. Na tej warstwie zadeklaruj zmienną image_num i nadaj jej wartość 1.

4. W pierwszym ujęciu warstwy Actions umieść akcję stop().

5. Zablokuj wszystkie warstwy poza warstwą Graphics. Na niej narysuj prostokąt o wymiarach 320×240. W panelu Info w pole W wpisz wartość 320 a w pole H wartość 240.

6. Zaznacz prostokąt i w panelu Info w pole X wpisz wartość 400 a w pole Y wartość 300.

7. Prostokąt będzie podstawowym oknem interfejsu, więc skonwertujemy go do symbolu. Przy konwersji nadaj symbolowi opisową nazwę — sugeruję nazwać symbol Cam Interface (interfejs kamery).

8. Pozostaw domyślną opcję Movie Clip. Zaznacz klon symbolu na scenie, jeśli nie jest zaznaczony.

9. Otwórz edytor skryptów i przypisz klonowi następujący skrypt:

onClipEvent(load){

loadMovie("image_" + _root.image_num + ".swt", 1);

}

Po wczytaniu klipu filmowego zostanie wykonana akcja loadMovie — nie wpisaliśmy bezpośrednio nazwy wczytywanego filmu (na przykład image_1.swt); od samego początku korzystamy ze zmiennej image_num.

10. Zapisz film. Utworzyliśmy główny film, więc powoli zbliżamy się do końca pracy!

11. Wyeksportuj film do pliku .SWF o nazwie flashcam.swf. Wyeksportowany plik umieść w katalogu, z którego będziesz umieszczał pliki na serwerze WWW po zakończeniu pracy nad szablonem .SWT.

Szablon zawierający obraz z kamery

W tym filmie potrzebujemy takich samych ustawień początkowych jak w głównym filmie. Utwórz cztery warstwy i nadaj im nazwy (pierwszą z podanych warstw umieść na górze, a ostatnią na dole stosu): Graphics, Variables, Actions i Labels. Po utworzeniu i nazwaniu warstw zapisz film w pliku webimage_01.fla. Otwórz okno Movie Properties i zmień następujące ustawienia:

• Frame Rate na 12 fps,

• Stage Size na 800×600.

Teraz możemy przystąpić do dodania zawartości filmu.

1. Główna listwa czasowa musi zawierać 91 ujęć.

2. Zablokuj wszystkie warstwy poza warstwą Label. Pierwsze ujęcie oznacz etykietą default.

3. W pierwszym ujęciu warstwy Actions umieść akcję stop().

4. Odblokuj warstwę Variables i zablokuj pozostałe warstwy. W pierwszym ujęciu tej warstwy zadeklaruj zmienną image_num o wartość równej level0.image_num. (Przenosimy zmienną z głównego do wczytanego filmu). W 49. ujęciu warstwy Variables umieść następujący skrypt:

if (image_num == 1){

loadMovie ("image_" + image_num + ".swt", 2);

_level0.image_num = 2;

} else {

loadMovie ("image_" + image_num + ".swt", 1);

_level0.image_num = 1;

}

Ten skrypt sprawdza, czy wartość zmiennej image_num jest równa 1. Jeśli tak, wczytuje film image_1.swt na samego siebie i ustawia zmienną z głównego filmu na wartość 2. W przeciwnym wypadku wczytuje film image_2.swt i ustawia zmienną z głównego filmu na 1.

5. Zablokuj wszystkie warstwy poza warstwą Graphics i otwórz okno z obiektami Generatora.

6. Zapisz film.

Obiekty Generatora

Wkraczamy na terytorium Generatora, wiec przydałoby się krótkie wprowadzenie. Czym są obiekty Generatora? Są to obiekty pozwalające na połączenie źródła danych z grafiką Flasha. W ten sposób możesz tworzyć elastycznie elementy wielokrotnego użytku przy minimalnym nakładzie pracy. (Pozwalają też urzeczywistniać szalone pomysły lub wykonać to, co chcesz, jeśli jesteś tak szalony, jak ja). Jakiego z tych obiektów użyjemy? W tym wypadku nie mamy dużego wyboru — obiektu Insert JPEG File.

1. Przeciągnij obiekt Insert JPEG File z okna na obraz. Zaznacz obiekt na obrazie. Za pomocą panelu Info tak zmień wymiary i położenie obiektu Insert JPEG File, aby odpowiadały one wymiarom prostokąta z głównego filmu.

2. Kliknij dwukrotnie obiekt, aby otworzyć panel Generatora. Właściwości obiektu są następujące.

• File Name — ścieżka dostępu i nazwa pliku wykorzystywanego jako źródło danych (w tym wypadku obrazu). Wpisz w to pole ścieżkę dostępu i nazwę obrazu umieszczonego na serwerze (na przykład www.mojserwer.pl/webcam/mojeobrazy/image.jpg).

• Cache — wybierz opcję true, jeśli chcesz, aby aplikacja Generator Server buforowała ten element. W przeciwnym wypadku pozostaw domyślną wartość właściwości.

• Scale to Fit — ustaw tę właściwość na true, dzięki czemu obraz będzie skalowany do wielkości obiektu Image JPEG File.

• Export as — ustaw na opcję JPEG.

• JPEG Quality — im wyższa wartość, tym większy rozmiar pliku i lepsza jakość obrazu — tutaj sam wybierz;

• Instance name — nie musisz tu niczego wpisywać. Ta właściwość pozwala określić identyfikator obiektu, aby był on widziany w skryptach.

3. Po ustawieniu właściwości musimy umieścić obiekt w symbolu. Nadaj mu opisową nazwę, abyś pamiętał, czego dotyczy ten symbol, gdy wnuki zechcą mieć wersję demonstracyjną. Ja proponuje nazwać symbol Generator Image Template (szablon obrazu). Zachowanie symbolu ustaw na Graphic.

4. Skoro mamy już element graficzny, możemy zacząć go animować. Upewnij się, że na warstwie Graphics nie znajduje się nic innego, a klon symbolu obiektu jest w pierwszym ujęciu tej warstwy. Utwórz animację, w której parametr Alpha klonu symbolu zmienia się od 0 do 100% pomiędzy ujęciami numer 1 i 31. (Parametr Alpha znajdziesz w panelu Effect.)

5. Teraz utwórz zanikanie klonu pomiędzy ujęciami numer 61 i 91 (parametr Alpha zmienia się od 100 do 0%).

6. Powinieneś otrzymać animację, w której klon symbolu powoli pojawia się na obrazie (ujęcia od 1. do 31.) a później zanika (ujęcia od 61. do 91.). Obraz z obiektu Generatora jest w całości widoczny pomiędzy ujęciami numer 31 i 61.

7. Zapisz film — skończyliśmy!

Wyeksportuj projekt do dwóch plików .SWT o nazwach image_1.swt i image_2.swt. Wyeksportowane szablony wraz z utworzonym wcześniej plikiem flashcam.swf umieść na serwerze WWW z zainstalowaną aplikacją Generator Server. Gdy to zrobisz, uruchom oprogramowanie kamery i rozpocznij przechwytywanie obrazu oraz jego umieszczanie na serwerze. Uruchom przeglądarkę internetową, wpisz adres URL głównego filmu i rozkoszuj się tym, co zobaczysz.

Uwaga końcowa: możliwe, że będziesz musiał zmodyfikować ustawienia jakości obrazu w ustawieniach przechwytywania i obiektu Insert JPEG File oraz długość trwania animacji, w czasie której jest pobierany plik z obrazem. Modyfikacje zależą od kilku czynników, na przykład: czy obrazy umieszczasz na innym serwerze, czy masz powolne połączenie przez tradycyjny modem albo szybkie połączenie ADSL. Tych modyfikacji nie możesz przewidzieć, więc uporaj się z nimi kreatywnie i inteligentnie.

Gdy strona z kamerą internetową działa, rozkoszując się nią, pomyśl o paru ulepszeniach:

• uruchom kilka kamer internetowych i pozwól je wybierać za pomocą systemu przeciągnij i upuść — w ten sposób umożliwisz użytkownikowi dynamicznie przełączać się pomiędzy obrazami z różnych kamer;

• zastosuj wczytywanie szablonów .SWT do klipów filmowych, dzięki czemu uzyskasz znacznie lepszą kontrolę nad ich rozmieszczeniem i interakcją w filmie — przeciąganie, właściwości, itp.;

• rozważ użycie funkcji getTimer() do określania czasu, kiedy należy wczytywać pliki. W ten sposób możesz oddać sterowanie aktualizacją użytkownikowi (na przykład, tworząc suwak) i nie zmuszać go do z góry ustalonego interwału między aktualizacjami.

Przypis do szarego tła!

Mike Jones, twórca FlashGen.com (www.flashgen.com), używa Flasha, od kiedy pojawił się on jako mało znany program Splash Animator firmy FutureWave. Jako założyciel Spooky and the Bandit (www.spookyandthebandit.com) twierdzi, że „bez Generatora czuje się jak ryba wyjęta z wody, dlatego spędził zbyt wiele nocy, męcząc się z Flashem i Generatorem, a mógł w tym czasie malować ściany sprayem lub przechadzać się po alejkach”! Zapewne dlatego o szkolnych czasach mówi tylko jedno: „Max Headroom był wtedy filmem roku... jest naprawdę wspaniały”! Poza Generatorem pasją Mike'a jest picie piwa w pubie z członkami Spooky — Chrisem Glaublitzem (www.testbild.com) i Dave'em Williamsonem (www.oldskoolflash.com) — i wymyślanie szalonych pomysłów na film Flasha. Aktualnie Mike i Dave pracują w Quidnunx (www.quidnunx.com), więc Chris stał się jedynym członkiem Spooky. Mike oraz Dave grożą, że wyjadą z Wielkiej Brytanii do Stanów Zjednoczonych, aby żyć i pracować w San Francisco. Skoro biografię już napisałem, najwyższa pora iść do pubu...

Koniec szarego tła!

Podsumowanie

• Informacje w źródle danych można przekazać do Generatora w dwóch strukturach: Name/Value lub Column Name/Value. W pierwszej strukturze zmienna generatora oraz jej wartość znajduje się w tej samej linii. Struktura Column Name/Value przypomina tablicę — położenie w linii (kolumnie) określa, do jakiej zmiennej przypisywana jest wartość.

• Za pomocą Flasha 5 i rozszerzeń Generatora możesz tworzyć różnego rodzaju wykresy. Wykres może być słupkowy, liniowy, warstwowy lub punktowy.

• Obiekt List pozwala wyświetlać dynamiczną grafikę i tekst w sekwencyjnej liście. Możesz także tworzyć listy przewijane przez użytkownika lub automatycznie.

• Jeśli publikujesz lub testujesz film Flasha zawierający obiekty lub zmienne Generatora, zostanie utworzony plik .SWF, abyś mógł zobaczyć, jak informacje ze źródła danych zostaną umieszczone w szablonie Generatora (pliku .SWT). Aby tworzyć dynamiczną zawartość za pomocą aplikacji Generator Server, na serwerze musisz umieścić tylko pliki .SWT (i źródła danych).

• Szablony Generatora w dokumencie HTML lub akcji loadMovie() są traktowane jak standardowe pliki .SWF. Zmienne do szablonu Generatora możesz także przekazywać jako zapytania w kodzie URL po nazwie pliku .SWT.

Tylko angielskie nazwy kolorów (przyp. tłum.).

Tylko angielskie nazwy kolorów (przyp. tłum.).

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

2 C:\0-praca\Flash 5. Biblia\r28-t.doc

---