Preloader w ActionScript 3

Autor: Grzegorz Róg, dodano: 22-09-2010
Kategoria: Programowanie i tworzenie

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 kolejno File -> 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 odznaczamy Automatically declare stage instances (GFX -> Publish Settings). Ustawmy jeszcze katalog publikacji wybieramy kolejno: File -> Publish Settings zakładka Formats w polu Flash(.swf) wpisujemy bin/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 plik File -> 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 klasy
public 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 kolejno Control -> 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 natomiast
stage.addEventListener(Event.RESIZE, onResize);
onResize(null);
loader = new Loader();
configureListeners(loader.contentLoaderInfo);
loader.load(new URLRequest("szablon.swf"));
dopiszemy deklarację klasy URLRequest
import flash.net.URLRequest;
zdefiniujemy metodę onResize() która uaktualnia pozycję pola tekstowego podczas zmiany rozmiaru sceny np.: podczas zmiany rozmiaru okna przeglądarki
private 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 jako Math.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 sceny addChild(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ć napis dodaj flashVars ‘xmlURL’ w kodzie HTML.


Aby zasymulować proces pobierania pliku SWF, a tym samym zobaczyć postęp procentowy preloadera należy opublikować plik wybierając Control -> Test Movie (Ctrl+Enter), następnie ustawiamy prędkość pobierania danych View -> Download Settings i zaznaczamy np.: 14.4 (1.2 KB/s), na końcu uruchamiamy symulację pobierania danych wybierając View -> 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 kursie Nowoczesne Strony Flash na eduweb.pl.

 

Pliki źródłowe do tego tutoriala możesz pobrać tutaj >> 

Ocena 2.46/5 (49.23%) (505 głosów)

Komentarze:

  • źródła
    Dodał: Bartosz Bilicki, godmode.biz data: 2010-10-18
    link ze źródłami nie działa ;)
  • niedziala link
    Dodał: Gość data: 2010-12-05
    Link ze źrodłami nie dziala Panowie!!!!

  • Dodał: Gość data: 2011-02-01
    link nie działa :)
  • Link nie działa
    Dodał: Gość data: 2011-02-18
    Jak ktoś ma plik źródłowy to proszę 1718000

    Zapraszam: milionerzy.9l.pl


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.