Rozpoczęcie programowania w ActionScript nie jest wcale takie trudne. Zapraszamy do lektury artykułu, który pomoże Wam na rozpoczęcie prac z AS3.
Zamiast wstępu
Otwieramy program Flash CS3/4/5 wybieramy kolejno:
File -> New… -> Flash File (ActionScript 3.0)Zapisujemy plik flaFile -> Save i nadajemy nazwę np.: szablon
2. Klasa dokumentu
Klasa dokumentu reprezentuje główny timeline pliku fla, konstruktor tej klasy jest pierwszą metodą która jest wywoływana zaraz po pobraniu SWF przez przeglądarkę i posiada zawsze taką samą nazwę jak deklarowana klasa.Ustawmy jeszcze aby wszystkie elementy sceny, które posiadają identyfikator w zakładce Properties musiały być jawnie deklarowane za pomocą zmiennej publicznej w klasie dokumentu wybieramy kolejno:File -> Publish Settings -> Flash -> Settings i odznaczamyAutomatically declare stage instances(GFX -> Publish Settings)Ustawmy jeszcze katalog publikacji wybieramy kolejno:File -> Publish Settings zakładka Formats w polu Flash(.swf) wpisujemybin/szablon.swf oraz tworzymy w katalogu naszego projektu folder o nazwie bin oraz odznaczamy HTML (.html)(GFX -> Formats)Utwórzmy teraz plik actionScript (as) który będzie reprezentował naszą klasę dokumentu wybieramy kolejno:File -> New … -> ActionScript File Zapisujemy plikFile -> Save i nadajemy mu nazwę np.: MainDobrym stylem programowania jest aby nazwa klasy była pisana z dużej litery.Każda deklaracja klasy rozpoczyna się słowem package, które określa do jakiego pakietu należy deklarowana klasa. Nasza klasa nie będzie należała do żadnego pakietu dlatego, że jest to klasa dokumentu czyli najwyższego poziomu, nie mniej jednak moglibyśmy ją umieścić np.: w folderze o nazwie com, wtedy deklaracja wyglądałaby następująco package com co oznaczałby, że deklarowana klasa należy do pakietu com.Następnie piszemy nazwę klasy po słowach public class pamiętając o tym, że nazwa klasy musi być identyczna z nazwą zapisanego pliku as, a zatem u nas będzie to nazwa Main.Klasa dokumentu musi ponadto rozszerzać klasę MovieClip lub klasę Sprite z pakietu flash.display, służy do tego słowo extends po którym piszemy nazwę klasy bazowej czyli nazwę klasy po jakiej będą dziedziczone jej atrybutyi metody. W końcowej fazie należy jeszcze dopisać deklaracjęimport flash.display.MovieClip, aby kompilator wiedział gdzie szukać kodu klasy bazowej MovieClip.Podsumowując nasza klasa dokumentu, będzie początkowo miała następującą postać:
package { import flash.display.MovieClip; /** * ... * @author Zenon Chrobot */ public class Main extends MovieClip {//konstruktor klasy public function Main() { } }}
Skojarzymy teraz klasę dokumentu z naszym plikiem fla wybieramy kolejno w zakładce Properties ( jeśli nie jest ona widoczna w prawym panelu wybieramy Window -> Properties ), PUBLISH i w polu Class: wpisujemy nazwę naszego pliku czyli Main, dodatkowo klikając na symbol ołówka możemy od razu otworzyć podany plik ActionScript do edycji.Innym sposobem powiązania klasy dokumentu z plikiem fla jest wybórFile -> Publish Settings -> Flash -> Settings i wpisanie w polu Document class: nazwy naszej klasy czyli Main.(GFX -> Publish Settings)Uzupełniamy konstruktor klasy Main o kolejny wpis
if (stage) init(null);else addEventListener(Event.ADDED_TO_STAGE, init);
dzięki czemu zabezpieczymy się na wypadek gdyby wartość stage posiadała wartość null.oraz dodajemy metodę init(), w której ustalamy sposób wyświetlania elementów sceny oraz ilość odtwarzanych klatek na sekundę stage.frameRate. Wszystkie elementy nie będą skalowane wraz ze zmianą rozmiaru sceny, oraz cała zawartość sceny będzie zawsze wyrównana do jej górnego lewego rogu.
private function init(e:Event):void { removeEventListener(Event.ADDED_TO_STAGE, init); stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; stage.frameRate = 25;}
Umieścimy na scenie dynamiczne pole tekstowe i nadamy mu nazwę label w zakładce Properties.Spróbujmy teraz opublikować nasz plik wybieramy kolejnoControl -> Test Movie (Ctrl+Enter)Dzięki temu, że odznaczyliśmy Automatically declare stage instances otrzymamy błąd typu:ReferenceError: Error #1056: Nie można utworzyć właściwości label w Main.(GFX -> Label)Wymusza to dodanie zmiennej typu publicznego w naszej klasie, a zatem dodajmy jąpublic var label:TextField; oraz dopiszemy deklarację klasy TextField
import flash.text.TextField;
Ustalimy także sposób w jaki pole tekstowe ma wyświetlać tekst, a mianowicie ustawmy aby szerokość pola tekstowego zawsze dopasowywała się do podanej treści dopiszemy zatem linię
label.autoSize = TextFieldAutoSize.LEFT;
oraz dodamy deklarację klasy TextFieldAutoSize
import flash.text.TextFieldAutoSize;
opublikujmy jeszcze raz nasz plik (Ctrl+enter), teraz w zakładce OUTPUT nie powinno być już żadnego komunikatu o błędzie.Kolejnym krokiem będzie dodanie obsługi flashVarsów czyli zmiennych przekazywanych podczas osadzania SWF na stronie HTML.
// flashVarstry {var keyStr:String; var paramObj:Object = LoaderInfo(stage.loaderInfo).parameters; for (keyStr in paramObj) { if(keyStr=="xmlURL"){xmlURL = (String(paramObj[keyStr]) != "") ? String(paramObj[keyStr]) : null; }}} catch (error:Error) {trace("Error: "+error);}if (xmlURL) { label.text = "xmlURL: " + xmlURL; trace("xmlURL: ", xmlURL); }else { label.text = "dodaj flashVars 'xmlURL' w kodzie HTML"; trace("dodaj flashVars 'xmlURL' w kodzie HTML"); }}
Przekazywana wartość do flasha będzie umieszczona w zmiennej o nazwie xmlURL. Na początku pobieramy tablicę ze wszystkimi zmiennymi jakie zostaną przekazane do flasha i umieszczamy je w obiekcie typu Object w następujący sposób:
var paramObj:Object = LoaderInfo(stage.loaderInfo).parameters;
Następnie przeszukujemy w pętli for.. in szukanej przez nas wartości czyli xmlURL co zapewnia nam warunek if(keyStr==”xmlURL”), i wkońcu sprawdzamy czy przekazana wartość jest różna od wartości pustego stringa czyli „”
xmlURL = (String(paramObj[keyStr]) != "") ? String(paramObj[keyStr]) : null;
jeśli jest różna od pustego stringa to wartość ta jest przekazywana do naszej prywatnej zmiennej _xmlURL, w innym wypadku do zmiennej przypiszemy wartość null, później sprawdzimy jaką wartość ma nasza zmienna i w zależności od tego ustalimy odpowiedni komunikat w polu tekstowym.
if (xmlURL) { label.text = "xmlURL: " + xmlURL; trace("xmlURL: ", xmlURL); }else { label.text = "dodaj flashVars 'xmlURL' w kodzie HTML"; trace("dodaj flashVars 'xmlURL' w kodzie HTML"); }
Poza powyższym kodem musimy dodać deklarację klasy LoaderInfo:
import flash.display.LoaderInfo;
oraz deklarację zmiennej prywatnej _xmlURL:
private var _xmlURL:String;
na końcu dodamy dwie metody specjalne służące do odczytu i zapisu dowolnej wartości dla zmiennej _xmlURL tzw. setter i getter:
public function get xmlURL():String { return _xmlURL; }public function set xmlURL(value:String):void { _xmlURL = value; }
Po opublikowaniu SWF powinnyśmy zobaczyć napis:dodaj flashVars 'xmlURL’ w kodzie HTML
3. Osadzenie pliku SWF w dokumencie html biblioteka SWFObject
Do osadzenia SWF w dokumencie HTML użyjemy biblioteki SWFObject.Pobieramy irozpakowujemy archiwum i kopiujemy plik swfobject.js do katalogu bin.Utwórzmy teraz w katalogu bin plik index.html i uzupełnijmy go o następujący wpis:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <title>SWFObject 2 dynamic publishing example page</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/css"></script> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = { xmlURL:"assets/data/data.xml" };var params = {allowFullScreen:true, wmode:"window", allowScriptAccess:"always"}; var attributes = {};swfobject.embedSWF("szablon.swf", "flash", "550", "400", "10.0.0", "", flashvars, params, attributes); </script> </head> <body> <div id="flash"> <h1>Alternative content</h1><p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div> </body></html>
W zmiennej flashvars ustawiamy zmienne oraz wartości z nimi powiązane które mają zostać przekazane do flasha zaraz po jego załadowaniu, my przekażemy ścieżkę do nie istniejącego plik xml w następujący sposób
var flashvars = { xmlURL:"assets/data/data.xml" };
teraz otwórzmy nasz plik index.html w dowolnej przeglądarce internetowej powinniśmy zobaczyć w polu tekstowym to co przekazaliśmy do zmiennej xmlURL czyli xmlURL: assets/data/data.xml(GFX -> IndexHTML).
4. Osadzenie pliku SWF w dokumencie html (File -> Publish)
Możemy także nie wykorzystywać biblioteki SWFObject co jednak zalecam, a sprawić aby flash sam utworzył nam potrzebny dokument HTML w tym celu wybieramy kolejno:File -> Publish Settings zakładka Formats zaznaczamy HTML (.html) oraz wpisujemy bin/szablon.html(GFX -> Formats)Teraz wystarczy opublikować nasz plik ponownieFile – > Publish (Shift+F12),a następnie otworzyć plik szablon.html z folderu bin w przeglądarce lub bezpośrednio otworzyć plik w przeglądarce zaraz po publikacji wybierającFile -> Publish Preview -> Default – (HTML) (F12)Teraz wystarczy jeszcze dodać flashVars w znacznikach EMBED oraz OBJECT w dokumencie html. Otwieramy dokument szablon.html do edycji znajdujemy
<script language="JavaScript" type="text/javascript">
oraz dodajemy nowy parametr w metodzie AC_FL_RunContent, a zatem mamy AC_FL_RunContent( 'FlashVars’, 'xmlURL=assets/data/data.xml’, …W przypadku braku zainstalowanego JavaScriptu na komputerze użytkownika zostanie obsłużony kod znajdujący się pomiędzy znacznikami <noscipt></noscript> znajdujemy zatem także tą sekcję i pomiędzy znacznikami <object></object> wstawiamy tag hml:
<param name=FlashVars value="xmlURL=assets/data/data.xml">
Modyfikujemy także znacznik <embed> dopisując w nim FlashVars=”xmlURL=assets/data/data.xml”
<embed src="szablon.swf" FlashVars="xmlURL=assets/data/data.xml" quality="high" bgcolor="#cccccc" width="550" height="400" name="szablon" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
Po tych zmianach pamiętajmy odznaczyć HTML (.html) wybierając kolejno:File -> Publish Settings zakładka Formats odznaczamy HTML (.html), aby podczas ponownej publikacji nie nadpisać sobie zmian które właśnie wprowadziliśmy. Otwórzmy teraz nasz plik szablon.html w przeglądarce powinniśmy zobaczyć w polu tekstowym to co przekazaliśmy do zmiennej xmlURL czyli xmlURL: assets/data/data.xml
5. Podsumowanie
W ten sposób poznaliśmy jak powiązać plik actionScript z główną listwą czasową dokumentu fla jak odebrać wartości ze zmiennych przekazywanych do flasha podczas jego osadzania w dokumencie html, oraz jak osadzić plik SWF w dokumencie HTML wykorzystując samego flasha lub korzystając z biblioteki SWFObject oraz gdzie ustalić wartości zmiennych przekazywanych do flasha.
