W tym tutorialu pokaże jak stworzyć plik SWF wczytujący inny plik SWF posiadający graficzną wizualizację postępu pobierania danych, czyli tzw. preloader. Wykorzystamy do tego ActionScript 3.
1. Wstęp
Otwieramy program Flash CS3/4/5 wybieramy kolejnoFile -> New… -> Flash File (ActionScript 3.0)
Zapisujemy plik fla,File -> Save i nadajemy nazwę np.: preloader.
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.: Preloader.
Dobrym stylem programowania jest aby nazwa klasy była pisana z dużej litery.Więcej na temat klasy dokumentu znajdziesz w lekcji Klasa dokumentu.Podsumowując nasza klasa dokumentu, będzie początkowo miała następującą postać:
package{import flash.display.MovieClip;public class Preloader extends MovieClip{//konstruktor klasypublic function Preloader() {}}}
Umieścimy na scenie dynamiczne pole tekstowe i nadamy mu nazwę percent w zakładce Properties, które będzie obrazowało procentowy postęp pobieranych danych(GFX -> Percent).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 percent w Preloader.Wymusza to dodanie zmiennej typu publicznego w naszej klasie, a zatem dodajmy ją:
public var percent:TextField;
oraz uzupełniamy naszą klasę o 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ę:
percent.autoSize = TextFieldAutoSize.CENTER;
oraz dopiszemy:
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 deklaracje klasy TextFieldAutoSize:
import flash.text.TextFieldAutoSize;
Deklarujemy 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;}
dodajemy deklarację klas
import flash.display.StageAlign;import flash.display.StageScaleMode;
opublikujmy jeszcze raz nasz plik (Ctrl+enter), teraz w zakładce OUTPUT nie powinno być już żadnego komunikatu o błędzie.Dodajmy kolejno kod odpowiedzialny za wczytanie pliku SWF, dopiszemy zmienną klasy Loader:
private var _loader:Loader;
oraz dwie metody służące do ustalania oraz zwracania wartości przechowywanej w tej zmiennej tzw setter getter:
public function get loader():Loader { return _loader; }public function set loader(value:Loader):void {_loader = value; }w metodzie init() dopiszemy natomiaststage.addEventListener(Event.RESIZE, onResize);onResize(null);loader = new Loader();configureListeners(loader.contentLoaderInfo);loader.load(new URLRequest("szablon.swf"));dopiszemy deklarację klasy URLRequestimport flash.net.URLRequest;zdefiniujemy metodę onResize() która uaktualnia pozycję pola tekstowego podczas zmiany rozmiaru sceny np.: podczas zmiany rozmiaru okna przeglądarkiprivate function onResize(e:Event):void {percent.x = (stage.stageWidth - percent.width) / 2;percent.y = (stage.stageHeight - percent.height) / 2;}
oraz zdefiniujmy metodę configureListeners()
private function configureListeners(dispatcher:IEventDispatcher):void {dispatcher.addEventListener(Event.COMPLETE, completeHandler);dispatcher.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);dispatcher.addEventListener(Event.INIT, initHandler);dispatcher.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);dispatcher.addEventListener(Event.OPEN, openHandler);dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);dispatcher.addEventListener(Event.UNLOAD, unLoadHandler);}
dodajmy deklaracje użytych klas czyli:
import flash.events.IEventDispatcher;import flash.events.Event;import flash.events.HTTPStatusEvent;import flash.events.IOErrorEvent;import flash.events.ProgressEvent;
Kolejno deklarujemy metody:
Metoda httpStatusHandler zawiera określone informacje o zdarzeniach dotyczących stanu HTTP.
private function httpStatusHandler(event:HTTPStatusEvent):void {trace("httpStatusHandler: " + event);}
Metoda initHandler() wywoływana jest po zajściu zdarzenia init, które jest wywoływane po udostępnieniu właściwości i metod załadowanego pliku SWF, co umożliwia jego manipulację. Zdarzenie jest wywoływane przed procedurą zdarzenia complete. Przy strumieniowaniu plików SWF zdarzenie init może pojawić się znacznie wcześniej niż zdarzenie complete:
private function initHandler(event:Event):void {trace("initHandler: " + event);}
Metoda openHandler() wywoływana jest przy rozpoczęciu ładowania.
private function openHandler(event:Event):void {trace("openHandler: " + event);}
Metoda unLoadHandler() jest wywoływana, gdy załadowany SWF jest usuwany metodą unload().
private function unLoadHandler(event:Event):void {trace("unLoadHandler: " + event);}
Metoda ioErrorHandler() jest wywoływana, w sytuacji gdy plik nie może być załadowany lub przy wystapieniu błedu w trakcie ładowania.
private function ioErrorHandler(e:IOErrorEvent):void {throw new Error(e.text);trace("ioError");}
Metoda progressHandler() jest wywoływana ciągle w trakcie ładowania pliku. W tej metodzie możemy odczytać zarówno ilość już pobranych danych event.bytesLoaded jak i ich całkowitą ilość event.bytesTotal w bajtach. Dzięki czemu w prosty sposób możemy obliczyć stosunek procentowy ilości danych już pobranych do ilości całkowitej zapisany jakoMath.round((event.bytesLoaded / event.bytesTotal) * 100)
i wyświetlić go użytkownikowi w polu tekstowym percent.
private function progressHandler(event:ProgressEvent):void {trace("progressHandler: bytesLoaded=" + event.bytesLoaded + " bytesTotal=" + event.bytesTotal);percent.text = Math.round((event.bytesLoaded / event.bytesTotal) * 100) + "%";}
Metoda completeHandler() jest wywoływana w momencie zakończenia ładowanego pliku. W tej metodzie dodamy pobrany kontent do scenyaddChild(LoaderInfo(e.target).content);
oraz usuniemy ze sceny niepotrzebne już pole tekstowe percent:
removeChild(percent);private function completeHandler(e:Event):void {addChild(LoaderInfo(e.target).content);trace("załadowano plik swf");removeChild(percent);}
Na końcu dodajmy jeszcze tylko deklarację klasy LoaderInfo
import flash.display.LoaderInfo;
i na tym zakończyliśmy tworzenie preloadera wczytującego plik SWF.Plik SWF który jest wczytywany pochodzi z lekcji Klasa dokumentu, a zatem po jego wczytaniu powinniśmy ujrzeć napisdodaj flashVars ‘xmlURL’ w kodzie HTML.
Aby zasymulować proces pobierania pliku SWF, a tym samym zobaczyć postęp procentowy preloadera należy opublikować plik wybierającControl -> Test Movie (Ctrl+Enter), następnie ustawiamy prędkość pobierania danychView -> Download Settings i zaznaczamy np.: 14.4 (1.2 KB/s),na końcu uruchamiamy symulację pobierania danych wybierającView -> Simulate Download (Ctrl+Enter),(GFX -> Simulate Download).
3. Podsumowanie
W ten sposób poznaliśmy jak wczytać plik SWF do innego pliku SWF, oraz zobrazować postęp pobierania danych w nim zawartych. Przedstawiona metoda świetnie nadaje się jako główny preloader strony obrazując postęp wczytywania jej elementów wyświetlanych w pierwszej kolejności osobie odwiedzającej daną witrynę.
Więcej informacji na temat ładowania plików Flash a także tworzenia stron internetowych we Flashu znajdziesz w obszernym .
Pliki źródłowe do tego tutoriala możesz pobrać
