WebMIEM
ВебМИЭМ

Flash AS 3.0 - Урок 4: Создание AS во внешних файлах

Flash AS 3.0 - Урок 4: Создание AS во внешних файлах

Сообщение PETERs602 » Вт апр 20, 2010 15:33

Adobe Flash ActionScript 3.0 - Урок 4: Создание ActionScript во внешних файлах
Системные требования: Adobe Flash CS3 или CS4

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

1. Во Flash выберите File -> New.

2. На вкладке General диалогового окна New Document выберите ActionScript File, затем нажмите кнопку OK.

3. Сохраните созданный файл под именем Ellipse.as в папку где у вас лежит .fla файл к этому уроку.

Основная структура файла класса ActionScript 3.0

Язык ActionScript 3.0, в общем представляет собой всего лишь набор классов.
Файл класса - это набор кода, который обычно связан с частью задачи, задачей или набором похожих задач.
ActionScript, который вводится в файл AS, практически индентичен ActionScript, вводимому на временной шкале.

1. В первой строке введите следующее:
Код: Выделить всё
package {
   
}


Все файлы ActionScript начинаются с ключевого слова package. Пакет можно рассматривать, как описание пути к файлу AS. Например, если бы файл Ellipse.as находится в папке scripts, a папка scripts - в папке abc, то первая строка в файле AS будет выглядеть так:

Код: Выделить всё
package abc.scripts {

}


2. В файле ActionScript необходима импортировать все внешние файлы классов, которые будут использоваться. Так как мы будем использовать MovieClip, то необходимо импортировать его класс. Добавим следующую строку между фигурных скобок.

Код: Выделить всё
import flash.display.MovieClip;


Так вы создадите новый класс ActionScript.

3. Пропустите одну строку и добавьте следующий код, чтобы создать новый класс:

Код: Выделить всё
public class Ellipse extends MovieClip {
      
   }

Теперь код выглядит так:

Код: Выделить всё
package {
   import flash.display.MovieClip;
   
   public class Ellipse extends MovieClip {
      
   }
}



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

Название класса, создаваемого в файле AS, должно совпадать с названием самого файла

Давайте теперь разберем строку:

public class Ellipse extends MovieClip {

public(общедоступный) - является модификатором доступа. Если вы сделаете класс общедоступным, то к нему можно будет обращаться из других файлов. Есть другие модификаторы доступа:
private(частный) - методы и свойства, отмеченные этим словом, доступны только в файле класса;
protected(защищённый) - методы и свойства, отмеченные этим словом, доступны только в файле класса и наследующих от него классах;
internal(внутренний) - методы и свойства, отмеченные этим словом, доступны в файле класса и всем другим файлам в томже пакете.

А теперь второе слово - extends.
Когда с помощью одного класса расширяется другой, у нового класса появляются все возможности первоначального родительского класса, а также новые возможности, описанные в файле класса.


5. В фигурных скобках добавьте следующий код:

Код: Выделить всё
public function Ellipse(w:Number=40,h:Number=40, color:uint=0xff0000) {
         graphics.beginFill(color);
         graphics.drawEllipse(0, 0, w, h);
         graphics.endFill();


О функциях конструкторах
Хотя в файле класса содержится давольно много функций, но в каждом классе есть только одна функция-конструктор, это особый вид функции.
Функция конструктор называется также, как и сам класс, в данном случае Ellipse.
В первой строке значения параметров w, h и color означают ширину, высоту и цвет. Три строчки внутри фигурных скобок вызывают методы для работы с векторной графикой.


6. Сохраните файл, теперь весь класс должен выглядеть следующим образом:

Код: Выделить всё
package {
   import flash.display.MovieClip;
   
   public class Ellipse extends MovieClip {
      
      public function Ellipse(w:Number=40,h:Number=40, color:uint=0xff0000) {
         graphics.beginFill(color);
         graphics.drawEllipse(0, 0, w, h);
         graphics.endFill();
      }
   }
}


Создание экземпляров файла класса во Flash
Теперь приступим к работе по использованию нашего класса.

1. Откройте файл Lesson04_start.fla

2. Обратите внимание, что в файле есть только фоновая картинка. Откройте панель Actions при выдеоенном 1-ом кадре слоя actions и выберите первую строчку, куда вы будете добавлять код.

3. Чтобы создать один экземпляр класса Ellipse, введите следующий код:

Код: Выделить всё
var ellipse:Ellipse = new Ellipse();


4. Чтобы добавить эллипс на сцену введите следующий код:

Код: Выделить всё
addChild(ellipse);


О addChild() и списке отображения
В любом файле Flash, все визуальные объекты на сцене хранятся в так называемом списке отображения. В этом списке хранятяся абсолютно все объекты, как созданные инструментами в графическом редакторе Flash, так и импортированные или созданные средствами ActionScript. Если визуальный объект создаётся средствами ActionScript он может хранится в коде, но не будет отображаться на сцене, пока не будет добавлен в список отображения с помощью addChild().


5. Сохраните и протестируйте ролик, вы должны увидеть один красный эллипс в верхнем левом углу сцены.

6. Вырежьте существующий код на панели Actions в буфер обмена.

7. В первую строку панели Actions, где теперь нету никакого кода, добавьте слушатель события MOUSE_MOVE. Это событие вызывается, когда пользователь перемещает указатель мыши. При его перемещении будет вызываться функция makeShapes().
Код: Выделить всё
stage.addEventListener(MouseEvent.MOUSE_MOVE, makeShapes);


8. На новой строке создайте функцию makeShapes():

Код: Выделить всё
function makeShapes(e:MouseEvent):void {

}


9. Вставьте код из буфера внтури скобок функции makeShapes():

Код: Выделить всё
function makeShapes(e:MouseEvent):void {
      var ellipse:Ellipse = new Ellipse(10, 10, 0xFFFFFF);
      addChild(ellipse);
}


Если вы сейчас протестируете ролик, то увидете, что эллипсы размещаются в одном и томже месте. Чтобы новый эллипс размещался там где находится указатель мыши, нужно использовать свойства: mouseX и mouseY.

10. Добавьте две строки в функцию makeShapes():

Код: Выделить всё
function makeShapes(e:MouseEvent):void {
      var ellipse:Ellipse = new Ellipse(10, 10, 0xFFFFFF);
      addChild(ellipse);
      ellipse.x = mouseX;
      ellipse.y = mouseY;
}


11. Сохраните и протестируйте ролик.

Изменение параметров каждого экземпляра эллипса

1. Найдите в функции makeShapes() строку:

Код: Выделить всё
var ellipse:Ellipse = new Ellipse();


и замените на:

Код: Выделить всё
var ellipse:Ellipse = new Ellipse(10, 10, 0x00FF00);


2. Сохраните и протестируйте ролик.

Включение и выключение функции makeShapes()
Сейчас мы реализуем добавление эллипсов только при нажатой мыши.

1. На панели Actions в самом начале добавьте следующий код:
Код: Выделить всё
stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);


2. В строках под слушателями событий напишите следующий код:

Код: Выделить всё
function startDrawing(e:MouseEvent):void {
}
function stopDrawing(e:MouseEvent):void {
}


3. Найдите в коде следующую строку и вырежьте её:

Код: Выделить всё
stage.addEventListener(MouseEvent.MOUSE_MOVE, makeShapes);


4. Найдите функцию startDrawing и вставьте в неё выше скопированный код:

Код: Выделить всё
function startDrawing(e:MouseEvent):void {
   stage.addEventListener(MouseEvent.MOUSE_MOVE, makeShapes);
}


5. Найдите функцию stopDrawing и вставьте в неё выше скопированный код:

Код: Выделить всё
function stopDrawing(e:MouseEvent):void {
   stage.removeEventListener(MouseEvent.MOUSE_MOVE, makeShapes)
}


6. Сохраните и протестируйте ролик.

Случайный выбор цвета эллипсов
Для генерации случайных чисел используется метод random класса Math. Он вызывается кодом Math.random(). Этот код вернёт случайное число от 0 до 1.
В случае если вам, например нужно случайное число от 0 до 100, то вам нужно умножить получившийся результат на 100 следующим образом:

Код: Выделить всё
Math.random() * 100;


А если вам нужно сгенерировать случайный цвет из всего отрезка шестнадцатиричных цветов, то можно написать так:

Код: Выделить всё
Math.random() * 0xFFFFFF;


1. Добавьте в самое начало кода переменную в которой будет храниться цвет.

Код: Выделить всё
var color:Number;


2. Затем найдите функцию startDrawing() и добвьте в неё код, чтобы она приняла следующий вид:

Код: Выделить всё
function startDrawing(e:MouseEvent):void {
   stage.addEventListener(MouseEvent.MOUSE_MOVE, makeShapes);
   color = Math.random() * 0xFFFFFF;
}


3. Перейдите к функции makeShapes() и измените строку:

Код: Выделить всё
var ellipse:Ellipse = new Ellipse(10, 10, 0xFFFFFF);


На строку:

Код: Выделить всё
var ellipse:Ellipse = new Ellipse(10, 10, color);


4. Сохраните и протестируйте ролик.

Готовый код должен выглядеть следующим образом:

Код: Выделить всё
var color:Number;

stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);

function startDrawing(e:MouseEvent):void {
   stage.addEventListener(MouseEvent.MOUSE_MOVE, makeShapes);
   color = Math.random() * 0xFFFFFF;
}

function stopDrawing(e:MouseEvent):void {
   stage.removeEventListener(MouseEvent.MOUSE_MOVE, makeShapes)
}

function makeShapes(e:MouseEvent):void {
      var ellipse:Ellipse = new Ellipse(10, 10, color);
      addChild(ellipse);
      ellipse.x = mouseX;
      ellipse.y = mouseY;
}


Самостоятельные задания:
1. Измените код так, чтобы вместо эллипсов рисовались прямоугольники.
2. Создайте кнопки, позволяющие переключаться между прямоугольниками и эллипсами.
3. Создайте кнопки позволяющие изменить размер рисуемых фигур.
4. Создайте кнопки позволяющие изменить цвет рисуемых фигур.
Аватара пользователя
PETERs602
Site Admin
 
Сообщения: 810
Зарегистрирован: Ср сен 06, 2006 0:42
Откуда: Д123

Re: Flash AS 3.0 - Урок 4: Создание AS во внешних файлах

Сообщение PETERs602 » Вт апр 20, 2010 15:36

Управление типом кисти с помощью клавиатуры.

Rect.as
Код: Выделить всё
package {
   import flash.display.MovieClip;
   
   public class Rect extends MovieClip {
      
      public function Rect(w:Number = 40,h:Number = 40, color:Number = 0xff0000) {
         graphics.beginFill(color);
         graphics.drawRect(0, 0, w, h);
         graphics.endFill();
      }
   }
}


Основной код в Flash-файле
Код: Выделить всё
var shapeType:String = "ellipse";
var color:Number;

stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler );

function keyDownHandler(e:KeyboardEvent):void {
   if (e.keyCode == "E".charCodeAt()) {
      shapeType = "ellipse";
   } else if (e.keyCode == "R".charCodeAt()) {
      shapeType = "rectangle";
   }
}
function startDrawing(e:MouseEvent):void {
   stage.addEventListener(MouseEvent.MOUSE_MOVE, makeShapes);
   color = Math.random() * 0xFFFFFF;
}

function stopDrawing(e:MouseEvent):void {
   stage.removeEventListener(MouseEvent.MOUSE_MOVE, makeShapes)
}

function makeShapes(e:MouseEvent):void {

   if(shapeType == "ellipse") {
      var ellipse:Ellipse = new Ellipse(10, 10, color);
      addChild(ellipse);
      ellipse.x = mouseX;
      ellipse.y = mouseY;
   }else if (shapeType == "rectangle") {
      var rectangle:Rect = new Rect(5, 15, color);
      addChild(rectangle);
      rectangle.x = mouseX;
      rectangle.y = mouseY;
   }
}
Аватара пользователя
PETERs602
Site Admin
 
Сообщения: 810
Зарегистрирован: Ср сен 06, 2006 0:42
Откуда: Д123

Re: Flash AS 3.0 - Урок 4: Создание AS во внешних файлах

Сообщение PETERs602 » Вт апр 20, 2010 15:38

Управление типом кисти с помощью клавиатуры и кнопок в ролике

1. Создайте две кнопки rect_btn и ellipse_btn.

2. Файл Rect.as остаётся без изменений.

3. Отредактируйте код в основном файле.

Код: Выделить всё
var shapeType:String = "ellipse";
var color:Number;

stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler );
rect_btn.addEventListener(MouseEvent.CLICK, setRect);
ellipse_btn.addEventListener(MouseEvent.CLICK, setEllipse);

function keyDownHandler(e:KeyboardEvent):void {
   if (e.keyCode == "E".charCodeAt()) {
      shapeType = "ellipse";
   } else if (e.keyCode == "R".charCodeAt()) {
      shapeType = "rectangle";
   }
}

function setRect(e:MouseEvent):void {
   shapeType = "rectangle"
}

function setEllipse(e:MouseEvent):void {
   shapeType = "ellipse"
}

function startDrawing(e:MouseEvent):void {
   stage.addEventListener(MouseEvent.MOUSE_MOVE, makeShapes);
   color = Math.random() * 0xFFFFFF;
}

function stopDrawing(e:MouseEvent):void {
   stage.removeEventListener(MouseEvent.MOUSE_MOVE, makeShapes)
}

function makeShapes(e:MouseEvent):void {

   if(shapeType == "ellipse") {
      var ellipse:Ellipse = new Ellipse(10, 10, color);
      addChild(ellipse);
      ellipse.x = mouseX;
      ellipse.y = mouseY;
   }else if (shapeType == "rectangle") {
      var rectangle:Rect = new Rect(5, 15, color);
      addChild(rectangle);
      rectangle.x = mouseX;
      rectangle.y = mouseY;
   }
}
Аватара пользователя
PETERs602
Site Admin
 
Сообщения: 810
Зарегистрирован: Ср сен 06, 2006 0:42
Откуда: Д123

Re: Flash AS 3.0 - Урок 4: Создание AS во внешних файлах

Сообщение xkw » Чт май 05, 2011 20:24

Созданно 2 кнопки
btnup,btnd которые увеличивают и уменьшают размер кисти

Код: Выделить всё
var shapeType:String = "ellipse";
var color:Number;

stage.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler );
rect_btn.addEventListener(MouseEvent.CLICK, setRect);
ellipse_btn.addEventListener(MouseEvent.CLICK, setEllipse);
btnd.addEventListener(MouseEvent.CLICK, sizeup);
btnup.addEventListener(MouseEvent.CLICK, sizedown);
var s1 = 10;
function sizeup(e:MouseEvent):void {
s1 = s1+1;
}
function sizedown(e:MouseEvent):void {
   s1 = s1-1;
}


function keyDownHandler(e:KeyboardEvent):void {
   if (e.keyCode == "E".charCodeAt()) {
      shapeType = "ellipse";
   } else if (e.keyCode == "R".charCodeAt()) {
      shapeType = "rectangle";
   }
}

function setRect(e:MouseEvent):void {
   shapeType = "rectangle"
}

function setEllipse(e:MouseEvent):void {
   shapeType = "ellipse"
}

function startDrawing(e:MouseEvent):void {
   stage.addEventListener(MouseEvent.MOUSE_MOVE, makeShapes);
   color = Math.random() * 0xFFFFFF;
}

function stopDrawing(e:MouseEvent):void {
   stage.removeEventListener(MouseEvent.MOUSE_MOVE, makeShapes)
}

function makeShapes(e:MouseEvent):void {

   if(shapeType == "ellipse") {
      var ellipse:Ellipse = new Ellipse(s1, s1, color);
      addChild(ellipse);
      ellipse.x = mouseX;
      ellipse.y = mouseY;
   }else if (shapeType == "rectangle") {
      var rectangle:Rect = new Rect(5, 15, color);
      addChild(rectangle);
      rectangle.x = mouseX;
      rectangle.y = mouseY;
   }
}

Аватара пользователя
xkw
 
Сообщения: 3
Зарегистрирован: Чт мар 24, 2011 21:14


Вернуться в Общий

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2

cron
line
www.WebMIEM.ru © 2006-2010