Встроенный прелоадер (AS3)

Первую запись хочу посвятить этой многозначительной и мучительной теме, сколько я не искал материалов в сети всегда натыкался только на одну ссылку.

Прочитав данный материал, освоив его, я приступил к делу.
К моему большому удивлению, проделав все описанное в статье, для своего проекта, я обнаружил, что результат неудовлетворительный — полоса загрузки появлялась буквально под конец, и стоит учесть, что у меня использовалась конструкция [Embed] (благо CS4 позволяет это), вероятно я что-то сделал неверно, но факт остался фактом – реорганизация проекта получилась крайне замороченной и неудобной.

Я некоторое время бился с этой проблемой и решил поэкспериментировать. На деле же всё оказалось очень просто.

Начну с того что класс который используется у человека с ником etc (ссылку на его блог я привел выше) отлично подойдет и для нас. Прописываем его в качестве класса документа.

И далее производим следующие махинации: в Publish Settings (вкладка Flash) мы жмем Settings и прописываем экспорт классов на второй кадр. При этом на таймлайне у нас должно быть три пустых кадра.

Если у вас в проекте имеются компоненты, то для ассетов этих компонентов все свойства надо оставить такими как они есть — то есть галочка на экспорт класса во второй кадр должна быть отключена.

Теперь самое интересное – я думаю вы наделали уже своих спрайтов, мувиклипов и т.д. и присвоили им при необходимости классы? Если да то поздравляю, вам нужно чтобы в свойствах данных мувиклипов стояли галочки – экспортировать во второй кадр. А теперь магия чисел.

Создаем мувиклип с названием MainClass, где в качестве Base Class прописываем наш базовый класс (то есть класс основного действия вашей флэшки), и… Внимание! И тоже ставим галочку экспортировать во второй кадр.

Никаких дополнительных мувиклипов создавать не нужно.

А давайте посмотрим как же будет выглядеть у нас класс прелоадера?
А вот и он:

package com.preloader {
   import flash.display.MovieClip;
   import flash.display.Sprite;
   import flash.events.Event;
   import flash.events.ProgressEvent;
   import flash.utils.getDefinitionByName;
 
   /**
    * @author Ilya Malanin (designer@pastila.org)
    */
   public class Preloader extends MovieClip {
 
      private var progressBar : Sprite;
      private static const ENTRY_FRAME : int = 3;
 
      public function Preloader() : void {
          super();
          stop();
          progressBar = new Sprite();
          progressBar.y = stage.stageHeight / 2 - 2;
          with (progressBar.graphics) {
              beginFill(0x0, 1);
              drawRect(0, 0, stage.stageWidth, 4);
              endFill();
          }
 
          addChild(progressBar);
 
          loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
          loaderInfo.addEventListener(Event.COMPLETE, completeHandler);
      }
 
      private function completeHandler(event : Event) : void {
          play();
          addEventListener(Event.ENTER_FRAME, enterFrameHandler);
      }
 
      private function enterFrameHandler(event : Event) : void {
          if (currentFrame >= ENTRY_FRAME) {
              removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
              stop();
              var main : Class = loaderInfo.applicationDomain.getDefinition("MainClass") as Class;
              addChild(new main());
          }
      }
 
      private function progressHandler(event : ProgressEvent) : void {
          progressBar.scaleX = 1 / event.bytesTotal * event.bytesLoaded;
      }
   }
}

Поздравляю, вы стали обладателем внутреннего прелоадера, который не будет взрывать вам мозг.

p.s.
Не забудьте пожалуйста, что в главном классе вашей флэшки в конструкторе необходимо использовать такую конструкцию:

  public function SupaClass() {
      super();
      addEventListener(Event.ADDED_TO_STAGE, initSupaClass);
  }
 
  private function initSupaClass(event : Event) : void {
      ...
  }

Исходники вы можете взять тут (чтобы скомпилировать и проверить работоспособность, после распаковки архива положите в папочку images любую картинку (желательно большого размера) и назовите файл logo.jpg, теперь можно компилировать).


Tags: , , , ,

 
 
 

17 комментариев to “Встроенный прелоадер (AS3)”

  1. Gravatar of GalexUA GalexUA
    9. Октябрь 2009 at 22:36

    Спасибо за статью. Если не трудно, выложи пожалуйста архивчик с исходниками…

  2. Gravatar of admin admin
    13. Октябрь 2009 at 08:08

    Добавил.

  3. Gravatar of Sobcha Sobcha
    30. Октябрь 2009 at 18:19

    -Теперь самое интересное – я думаю вы наделали уже своих спрайтов, мувиклипов и т.д. и присвоили им при необходимости классы? Если да то поздравляю, вам нужно чтобы в свойствах данных мувиклипов стояли галочки – экспортировать во второй кадр. А теперь магия чисел.
    А как это сделать?? а то у меня только Export in First Frame есть?

  4. Gravatar of admin admin
    1. Ноябрь 2009 at 21:27

    Sobcha:

    А как это сделать?? а то у меня только Export in First Frame есть?

    Из статьи:

    И далее производим следующие махинации: в Publish Settings (вкладка Flash) мы жмем Settings и прописываем экспорт классов на второй кадр.

    File -> Publish Settings -> Вкладка «Flash» -> Settings… -> Export classes in frame
    И вместо единцы пишите 2

  5. Gravatar of zooluerorgo zooluerorgo
    10. Ноябрь 2009 at 00:22

    Отличный сайт и материалы очень познавательные

  6. Gravatar of алексей алексей
    26. Декабрь 2009 at 08:47

    не могу скачать исходник
    перезалейте пожалуйста .

  7. Gravatar of i1 i1
    5. Январь 2010 at 05:30

    тоже не могу скачать исходники. пожалуйста поправте линк и… если Вам не трудно, киньте на пошту, чтобы не надо было заглядывать сюда каждый день ).
    спасибо.

  8. Gravatar of zaidite zaidite
    13. Январь 2010 at 23:42

    Не работает ссылка на пример прелоадера. Не совсем понятны некоторые места в описании создания. Могу я попросить сбросить пример на почту? Или перезалейте его пожалуйста. Очень нужно разобраться с этим вопросом.
    Спасибо.

  9. Gravatar of Илья Маланьин Илья Маланьин
    14. Январь 2010 at 11:49

    Исправил ссылку на исходник.

  10. Gravatar of FlyingCianid FlyingCianid
    25. Февраль 2010 at 17:20

    Спасибо за статью. К сожалению не получается скомпилировать и посмотреть на работу – при попытке открытия fla – unexpected file format. Не могли бы вы дополнить статью описанием того, что присутствует во fla – файле? А пока буду курить ваш код…

  11. Gravatar of Detected Detected
    16. Март 2010 at 01:27

    Лично я считаю такой проелоудер не хорошим….предлагаю свою концепцию прелоудера(особенно необходимо с внутреним врапером среды(вконтакте, фейсбук))…исходники не дам)))
    1) Загружается прелоудер…грузит свои ассеты….инициализируется
    2)Грузит ассет игры(или что там у вас) + ассеты для игры + хмл + че там еще нобходимо для инициализации игры(или что там у вас)
    3)инициализирует игру

    Я думаю это самое верное решение!

  12. Gravatar of Илья Маланьин Илья Маланьин
    18. Март 2010 at 02:28

    Detected, концепция эта не ваша к сожалению.
    И вы немножко не по теме, в статье разбирается частный случай а именно «встроенный прелоадер», а не внешний. Статья именно этому и посвящена.

  13. Gravatar of Artemiy Artemiy
    18. Март 2010 at 23:00

    Спасибо, очень понравилось

  14. Gravatar of lublushokolad lublushokolad
    26. Март 2010 at 21:56

    Спасибо! Спас мне жизнь. И не взорвал мозг ))
    Если увидимся на какой-нибудь конференции виски с меня!

  15. Gravatar of cx717 cx717
    2. Сентябрь 2010 at 15:29

    Я скачал зип архив, поместил в папку images картинку logo.jpg. Что делать дальше? Если нажать ctr+Enter, используя профилировщик пропускной способности, то никакого прелодера не видно.
    Что нужно сделать что бы посмотреть ваш прелодер в действии?

  16. Gravatar of cx717 cx717
    2. Сентябрь 2010 at 15:35

    Фотография – 2М. При публикации и проверке локально прелодера не видно.

  17. Gravatar of cx717 cx717
    2. Сентябрь 2010 at 15:40

    а, мигнул, видел

Добавить комментарий