Системные требования: 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. Создайте кнопки позволяющие изменить цвет рисуемых фигур.