Flex tipy a triky – vlastní preloader

30.11.2006· Autor: Ondřej Brichta· Počet komentářů: 2

Vytvoření vlastního preloaderu, který se bude zobrazovat během inicializace a stahování, bude patřit mezi časté kroky při vývoji těchto aplikací. Dnes si ukážeme jeden z možných postupů v přípravě vlastního preloaderu.

Rozšíření třídy DownloadProgressBar

Za zobrazení preloaderu před spuštěním samotné aplikace je zodpovědný objekt třídy DownloadProgressBar. Proto, pokud chceme využít již připravené třídy, použijeme právě tuto. Vlastn třídu vytvoříme volbou v hlavní menu: File - New - ActionScript Class

 

V zobrazeném okně doplníme název balíčku(adresáře), kde chceme mít novou třídu uloženou -"preloaders" a dále doplníme název třídy - „Preloader_1".

Automaticky se nám vytvoří příslušný adresář se souborem s koncovkou „as". Tyto soubory obsahují samotný ActionScript - třídy, nebo externí ActionScript příkazy.

Pokračujeme vytvořením vlastní třídy preloaderu:

package preloaders
{
import flash.net.*;
import flash.display.*;
 import flash.text.*;
 import flash.utils.*;
 import flash.events.*;
 import mx.preloaders.*;
 import mx.events.*;
import mx.effects.Fade;
public class Preloader_1 extends DownloadProgressBar {
 private var textPole:TextField;
 private var efekt:Fade = new Fade(this);
 public function Preloader_1() {
 //inicializace 
 super();
 //umístění preloaderu na scéně
 this.x = 400;
 this.y = 300;
 //nastavení vlastností efektu zmizení
 efekt.alphaFrom = 1.0;
 efekt.alphaTo = 0.0;
 efekt.duration = 2000;
 //obrázek preloaderu
 var pict:Loader = new Loader();
 var url:URLRequest = new URLRequest("pict.jpg");
 pict.load(url);
 addChild(pict);
 //vytvoření textového pole
 textPole = new TextField();
 textPole.y = 100;
 textPole.width = 200;
 textPole.height = 50;
 addChild(textPole);
 }
 //detektory jedotlivých událostí
 override public function set preloader(preloader:Sprite):void {
 preloader.addEventListener(ProgressEvent.PROGRESS,_Progress); 
 preloader.addEventListener(Event.COMPLETE,_Complete);
 preloader.addEventListener(FlexEvent.INIT_PROGRESS,_InitProgress);
 preloader.addEventListener(FlexEvent.INIT_COMPLETE,_InitEnd);
 }
 //detekce stažení aplikace
 private function _Progress(event:ProgressEvent):void {
 textPole.text = "Načteno: " + event.bytesLoaded +" z celkových: " + event.bytesTotal;
 }
 //detekce dokončení stahování
 private function _Complete(event:Event):void {
 textPole.text = "Hotovo";
 }
 //detekce inicializace aplikace
 private function _InitProgress(event:Event):void {
 textPole.text = "Příprava aplikace";
 }
 //detekce hotové inicializace aplikace
 private function _InitEnd(event:Event):void {
 textPole.text = "Aplikace připravena";
 //spuštění efektu
 efekt.play();
 //spoždění 2s pro zobrazení efektu
 var timer:Timer = new Timer(2000,1);
 timer.addEventListener(TimerEvent.TIMER, dispatchComplete);
 timer.start();
 }
 //spuštění události COMPLETE pro odstranění preloaderu
 private function dispatchComplete(event:TimerEvent):void {
 dispatchEvent(new Event(Event.COMPLETE));
 }
 }
}

 

Na začátku jsme si uvedli, že naše třída rozšiřuje původní třídu DownloadProgressBar, proto musíme při její deklaraci použít výraz „extends". Následuje samotná metoda stejného názvu, která vytvoří objekt této třídy. Vlastní preloader se pak skládá z obrázku a textového pole, které informuje o stavu načítání a inicializaci aplikace.

Jednotlivé stavy načítání detekujeme příslušnými listenery, které je nutné přiřadit konkrétním událostem objektu preloaderu a které se starají o aktualizaci textu v poli „textPole".

Po dokončení (inicializaci) aplikace vyčkáme dvě vteřiny, ve kterých necháme samotný preloader zmizet. Samotný efekt zmizení se ovšem aplikuje pouze na načtený obrázek, zatímco textové pole zůstává efektem nedotčené. Pokud bychom chtěli aplikovat efekt i na textové pole, musíme společně se SWF souborem exportovat příslušný font. Vložení fontu se provede zápisem:

[Embed(source='Verdana.ttf', fontName='verdana', mimeType='application/x-font')] 
private var verdana_font:Class;

 

Přiřazení fontu k textovému poli musíme provést přes objekt třídy TextFormat:

var format:TextFormat = new TextFormat();
format.font = "verdana";
format.color = 0x000000;
format.size = 10;
textPole.autoSize = TextFieldAutoSize.CENTER;
textPole.embedFonts = true;
textPole.defaultTextFormat = format;

 

Po této úpravě bude animován i text samotného textového pole preloaderu. Posledním krokem pak bude přiřazení nové třídy k preloaderu celé aplikace:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" preloader="preloaders.Preloader_1"> ...

Komentáře k článku
Přiřazení textu	KillPrd | 1.5.2007 20:48
Re: Přiřazení textu	OBr | 1.5.2007 21:00