Урок 4. MovieClip, функции и классы

Урок 4
MovieClip, функции и классы

Зная, что такое EventListener, к концу урока вы сможете сделать такой эффект.





Для того, чтобы создать такой эффект мы должны узнать, для чего нужна функция. Функцию можно использовать для выполнения множества однотипных операций. Короче говоря, это код, который может быть не однократно вызван. Например, можно написать функцию, которая будет выводить на экран “Функция работает!” для этого необходимо написать:

function my_funct(){
 trace("Функция работает!");
}

Что бы вызвать функцию, нужно написать имя функции и скобки (в скобках могут быть параметры, но об этом чуть позже).

my_funct()//Функция работает!

У функции есть необязательные параметры:
1. входные параметры.
2. возврат значений(return).
Пример, в котором функции передаётся число и функция возвращает число, увеличенное на 1.

var Num, end_Num:Number;
Num=3;
trace("Num="+Num);
end_Num=my_funct(Num);
trace("end_Num="+end_Num);
function my_funct(num:Number){
 return num+1;
}

В num будет записываться то, что в скобках, то есть Num, то есть 3.
В ответ будет выводиться num+1, то есть Num+1, то есть 3+1, то есть 4. А ответ уходит в end_Num)))
На этом про функции всё, кому не понятно – спрашивайте.

Но приступим к созданию этого эффекта.
1. Рисуем квадрат. Выбираем инструмент Rectangle Tool или нажимаем R. Предположим квадрат нарисовали. Запоминаем его размеры (Width или Height). Теперь выделяем его инструментом Selection Tool (нажимаем V). Дальше жмём F8. Появляется окошко

Дальше пишем в Name – square, Type – MovieClip, Registration – по центру. Это ещё не всё) Если есть кнопка Advanced, то нажимаем её. Вылезает куча буков, но нам нужно Export for ActionScript ставим галочку, в поле Class появляется наше имя square. И только теперь жмём Ok. Вылезает левое сообщение, но не пугайтесь, это всего лишь флеш говорит нам о том, что у нас нет класса square, но мы это скоро исправим ;)

Открываем окно Actions и пишем следующий код:

//архиумная формула для расчёта координат квадратов, что бы заполнить ими весь экран))
var square_width:Number=25;// Размер вашего квадрата, который вы надеюсь запомнили
var sizeX:int=Math.floor(stage.stageWidth/square_width);
var sizeY:int=Math.floor(stage.stageHeight/square_width);
var X,Y:Number;
X=-square_width/2;
Y=square_width/2;
for (var i:int=0; i<sizeX*sizeY; i++) {
 var Square=new square();
 if (X!=sizeX*square_width-square_width/2) {
  X+=square_width;
 } else {
  Y+=square_width;
  X=square_width/2;
 }
 Square.x=X;
 Square.y=Y;
 addChildAt(Square,0);
}

Ничего непонятного не должно быть, кроме Square.x=X; , addChildAt(Square,0); , var Square=new square(); и Math.floor

1. Math.floor – берёт целую часть числа
2. var Square=new square(); похоже на var array:Array=new Array(); так вот, мы переменной Square присваиваем новый экземпляр класса square, который мы сейчас напишем.
3. Square.x=X, так как Square у нас уже квадратик (экземпляр класса square), то у него появились некоторые свойства, например, x и y – координаты.
4. addChild(Square); - добавляем наш квадрат на сцену, что бы его нам было видно.

Наш долгожданный класс square)
Что такое класс? Класс – это как бы маленькая программка, выполняемая только для себя) *Хочу заметить, что в классах перед переменными и функциями пишется слово private или public. Private – это значит, что эта функция или переменная доступна только в этом классе. Public – доступна и в других классах.

Создаём новый проект (ActionScript 3.0).
Что бы создать новый класс, нас нужно нажать File -> New или ctrl+N и выбрать ActionScript File.
*сам класс и *.fla должны быть в одной папке.
Копипастим код:

package{
 //импортируем всё, что нам надо
 import flash.display.MovieClip;
 import flash.events.*;
 //создаём класс типа мувиклип
  public class square extends MovieClip{
   //объявляем переменную, она будет доступна только в этом классе
    private var koficent:Number;
   public function square(){
    //ставим прозрачность в 0
    this.alpha=0;
    // коэффициент изменения прозрачности ставим в 0.04 
    koficent=0.04;
    //добавляем слушатель событий мышки, то есть когда мышка находится над этим квадратиком, то будет выполняться функция mouseover
    this.addEventListener(MouseEvent.MOUSE_OVER,mouseover);
   }
   private function mouseover(e:MouseEvent){
    //если прозрачность равна 0, то есть прозрачность сейчас не изменяется
    if(this.alpha==0){
     //добавляем слушатель, который каждый фрейм (если fps 24, то 1/24 секунды) будет вызывать функцию alpha_pluse
     this.addEventListener(Event.ENTER_FRAME,alpha_pluse);
    }
   }
   private function alpha_pluse(e:Event){
    //если прозрачность ещё не 1 (т.к. alpha измеряется в процентах, то 1 это 100%),    
    if(this.alpha<1 0.04="0.04" 0="0" 1="1" alpha="alpha" alpha_minuse="alpha_minuse" alpha_pluse="alpha_pluse" e:event="e:event" else="else" function="function" if="if" koficent="koficent" private="private" this.addeventlistener="this.addeventlistener" this.alpha="this.alpha" this.removeeventlistener="this.removeeventlistener" vent.enter_frame="vent.enter_frame">0){
     //то уменьшаем её
     this.alpha-=koficent;
    }
    //иначе 
    else{
     //удаляем и этот слушатель
     this.removeEventListener(Event.ENTER_FRAME,alpha_minuse);
     //и ставим для порядка прозрачность в 0
     this.alpha=0;
    }
   }
  }
}

Очень важно!
public class square extends MovieClip{
public function square(){
и имя файла .as тоже должно быть square.


По идее, в этом коде всё, чего не было в предыдущих уроках, объяснено в комментариях.
Но на всякий случай вот вам исходник.
Успехов вам!)