Уроки Flash. Плывущие облака с помощью ActionScript 3.0

Недавно возникла необходимость создать flash анимацию плывущих по небу облаков, после ее решения возникла идея поделиться способом ее реализации. Итак приступим!

Photoshop

Рисуем облака в Photoshop и экспортируем их в png формате с прозрачным фоном. Для решения этой задачи понадобятся кисти облаков и небольшая фантазия. Подробно этот процесс описывать не буду, на просторах интернета полно уроков по фотошопу, суть в следующем, скачиваем и устанавливаем кисти, рисуем облако, обрезаем лишнее и экспортируем его в png. Повторяем эту операцию для всех облаков, которые планируется запустить по небу. Облака рисуйте разные и по фактуре и по размеру.

Flash и AS 3.0.

Сначала коротко о том как это все будет работать.
Первым делом считываем XML файл, который содержит список облаков
с необходимыми параметрами для анимации, затем с помощью TextField
и тега img загрузим облака и применим tween анимацию из библиотеки greensock.

Как подключить Document Class в AS 3.0

Хотел сослаться на готовый пример как подключить Document Class но под руку на русском не попалось ничего путного, опишу своими словами. Прежде всего, все свои наработки с ActionScript лучше всего оформлять в виде классов, заключать их в пакеты и сохранять в виде отельных файлов. При таком подходе будет всегда удобно подключить нужный пакет к проекту и воспользоваться своими или чужими классами не изобретая каждый раз велосипед методом копи паст.
Название пакета определяет местоположение его файлов относительно flash документа. Также название самого .as файла должно быть точно таким-же как название класса. В моем примере файловая структура выгляди так:

\com\cloud\cloud.as

Теперь в созданном флеш-документе (File->New->Flash File (ActionScript 3.0) измените параметры Frame Rate: 36 fps, определите нужный размер документа и задайте небесный цвет фона. Теперь в поле Document Class нужно указать тот класс, конструктор которого должен выполняться при запуске ролика. В моем случае это com.cloud.cloud и если все указано верно, то при нажатии кнопки Edit Class Definition откроется .as файл с нужным классом.
cloud.as

package  com.cloud { 
 import flash.text.*; 
 import flash.display.*;
 import flash.events.*;
 import flash.net.*;
 import com.greensock.*;
 import com.greensock.easing.*;   
 public class cloud extends Sprite {  
  /*Значение по умолчанию для файла с облаками*/
  private var XML_PATH:String = 'cloud.xml';
  private var xml:XML;
  private var urlLoader:URLLoader;    
 
  /*Конструктор*/
  public function cloud() {
   /*
    Передаем путь к файлу через параметр. Чтобы исключить кеширование к пути следует добавить
    случайный параметр в javascript коде, который запускает flash
   */
   if (root.loaderInfo.parameters.xmlpath != null) {
    XML_PATH = root.loaderInfo.parameters.xmlpath;
   }
   /*Создаем загрузчик*/
   urlLoader = new URLLoader();   
   /*Загружаем XML файл*/ 
   urlLoader.load(new URLRequest(XML_PATH));
   /*На событие окончания загрузки файла вешаем функцию loadXML*/
   urlLoader.addEventListener(Event.COMPLETE, loadXML);     
  }
  /*Функция, которая вызывается после загрузки XML файла*/
  private function loadXML(e:Event):void {   
   /*Получим данные об облаках из XML-файла*/
   xml = new XML(e.target.data);   
   /*Облака вперед!*/
   moveCloud();   
  }
  /*
   Функция движения облаков
   Для наглядности все параметры, считываемые из XML-файла поместим в переменные
  */
  private function moveCloud(){
   var mc:MovieClip = null;
   var sec:Number = 0;
   var w:int = 0;
   var h:int = 0;
   var shifty:int = 0;
   var effect:String = null;    
   var src:String = null;  
   /*Запускаем цикл по всем облакам*/
   for (var i:int = 0; i < xml.clouds.cloud.length(); i++) {
    /*Длительность полета*/
    sec = xml.clouds.cloud[i].@sec;
    /*Ширина картинки с облаком*/
    w = xml.clouds.cloud[i].@width;
    /*Высота картинки с облаком*/
    h = xml.clouds.cloud[i].@height;    
    /*Эффект ease*/
    effect = xml.clouds.cloud[i].@effect;
    /*Сама картинка с облаком*/
    src = xml.clouds.cloud[i];
    /*Создаем MovieClip*/
    mc = addCloud(src,w,h);
    /*Запускаем облако. Подробно об этой функции читаем на сайте разработчиков*/
    TweenMax.to(mc, sec, {x:stage.stageWidth, ease:EaseLookup.find(effect), repeat:-1, startAt:{x:-w}});
   }
  }
  /*
   Функция, создающая облако
   src - Код для картинки с облаком в формате <img src='ссылка_на_картинку'>
   w - Ширина картинки с облаком
   h - Высота картинки с облаком
  */ 
  private function addCloud(src:String,w,h):MovieClip {
   /*Создаем текстовое поле*/
   var txt:TextField = new TextField();
   txt.multiline = false;
   txt.wordWrap = true;    
   /*Загрузим картинку*/
   txt.htmlText = src;
   txt.width = w;   
   txt.height = h;
   /*Положим текстовое поле в MovieClip*/
   var mc:MovieClip = new MovieClip();         
   mc.addChild(txt);      
   /*Добавим клип на сцену*/
   addChild(mc);   
   /*Начальное положение клипа с облаком*/
   mc.y = Math.random() * ( stage.stageHeight - h);
   mc.x = -w;
   /*
    Определяет способ наложения объекта с облаком,
    Использование этого параметра наргужает CPU но облака так выглядят лучше
   */    
   mc.blendMode = "screen";   
   return mc;
  }
 } 
}

Теперь необходимо создать XML файл с нашими облаками
cloud.xml

<?xml version="1.0" encoding="UTF-8"?>
<IMAGES>
    <clouds>
        <cloud width="337" height="188" sec="20" effect="Quad.easeInOut">
            <![CDATA[<img src='cloud_000.png'>]]>
        </cloud>                                    
    </clouds>
    <clouds>
        <cloud width="460" height="246" sec="30" effect="Sine.easeInOut">
            <![CDATA[<img src='cloud_001.png'>]]>
        </cloud>                                    
        <cloud width="150" height="150" sec="11" effect="Sine.easeOut">
            <![CDATA[<img src='cloud_003.png'>]]>
        </cloud>
        <cloud width="150" height="150" sec="10" effect="Circ.easeOut">
            <![CDATA[<img src='cloud_004.png'>]]>
        </cloud>
    </clouds>
</IMAGES>