14 ноября 2011

Прелоадер как во FlashDevelop

Столкнулся с проблемой отображения загрузки больших флешек с большим количеством контента, Загрузка которых не укладывалась в секунду и вызывало беспокойство, грузится она или нет.
Случайно увидел что во FlashDevelop можно создавать проект с прелоадером, но не мог разобраться как с ним работать, и просто принял как данность. Спустя время разобрался и решил написать об этом.

Допустим главный класс у нас будет Main и лежать будет в Main.as, а прелоадер будет лежать тут Preloader.as Что бы подключить прелоадер к главной флешке нужно прописать его там же где и свойства самой флешки: 

// Параметры SWF-файла
[SWF(width="550", height="380")]
// Интегрирование прелоадера, лежащего в Preloader.as
[Frame(factoryClass="Preloader")]

А дальше основная флешка будет выглядеть как обычно:

package 
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.events.Event;
// Параметры SWF-файла
[SWF(width="550", height="380")]
// Интегрирование прелоадера, лежащего в Preloader.as
[Frame(factoryClass="Preloader")]

// Основной класс программы
public class Main extends Sprite 
{
  // Конструктор основного класса
  public function Main():void 
  {
    if (stage) init(); 
    else addEventListener(Event.ADDED_TO_STAGE, init);
  }

  // Точка входа, после того как загрузился весь ролик
  public function init(e:Event = null):void
  {

    // Отключение обслуживания прелоадера
    removeEventListener(Event.ADDED_TO_STAGE, init);
    
    //показываем, что загрузка готова
    var text:TextField = new TextField();
    text.text = 'loadComlplite';
    addChild(text);
  }
}
}

Теперь приступим к самому прелоадеру, тут все еще проще:

package 
{
import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.utils.getDefinitionByName;
import flash.text.TextField;
import flash.display.LoaderInfo;
 public class Preloader extends MovieClip 
 {

   //Текст для отслеживания процента загрузки 
   private var preloader_text:TextField;
   
   // Инициализация загрузчика
   public function Preloader() 
   {
     if (stage) 
       {
          stage.scaleMode = StageScaleMode.NO_SCALE;
          stage.align = StageAlign.TOP_LEFT;
       }

     //так будем проверять загрузилось или нет, 
     //Event.COMPLITE в данном случае срабатывает плохо и не всегда
     addEventListener(Event.ENTER_FRAME, checkFrame);

     //так будем смотреть сколько загрузилось
     loaderInfo.addEventListener(ProgressEvent.PROGRESS, progress);

     //так будем смотреть ошибки
     loaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioError);

     // Текст о состоянии загрузки выводится на экран
     // либо здесь можно задать фигуру которую будет менять в функции progress
     preloader_text = new TextField();
     preloader_text.text = "Load 0 % ";
     addChild(preloader_text);
   }
   private function ioError(e:IOErrorEvent):void 
   {
     trace(e.text);
   }

   // Метод, вызываемый при изменении количества загруженных байт
   private function progress(e:ProgressEvent):void 
   {
     // Обновляется текст загрузчика
     preloader_text.text = 
       "Load "+ (Math.round((loaderInfo.bytesLoaded * 100) / loaderInfo.bytesTotal)) + " %";
   }
   private function checkFrame(e:Event):void 
   {
     if (currentFrame == totalFrames) 
       {
          stop();
          loadingFinished();
       }
   }
   
   // Завершение загрузки
   private function loadingFinished():void 
   {
     removeEventListener(Event.ENTER_FRAME, checkFrame);
     loaderInfo.removeEventListener(ProgressEvent.PROGRESS, progress);
     loaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, ioError);
     startup();
   }
    
   private function startup():void 
   {

     //сокрытие текста и вывод главного класс в нашем случае Main
     preloader_text.visible = false;
     var mainClass:Class = getDefinitionByName("Main") as Class;
     if (parent == stage) stage.addChildAt(new mainClass() as DisplayObject, 0);
     else addChildAt(new mainClass() as DisplayObject, 0);
   }
 }
}

И все работает, правда вместо текста обычно используют какой-нибудь графический элемент, который можно прописать в конструкторе прелоадера, и менять ее в функции progress.

Теперь осталось только придумать сам прелоадер, а точнее как он будет выглядеть и изменяться, а вся техническая сторона уже готова...

2 комментария:

  1. Отличная статья! вот бы еще Вы написали как сделать универсальный прелоадер, которому стоит только подсунуть ссылки и он все сам загрузит, базируясь на примере, изложенном выше.

    ОтветитьУдалить
  2. Отличное предложение в ближайшее время обязательно напишу...

    ОтветитьУдалить

Поделиться своими мыслями...