Flash AS 3.0 - Урок 4: Создание AS во внешних файлах
Добавлено: Вт апр 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. В первой строке введите следующее:
Все файлы ActionScript начинаются с ключевого слова package. Пакет можно рассматривать, как описание пути к файлу AS. Например, если бы файл Ellipse.as находится в папке scripts, a папка scripts - в папке abc, то первая строка в файле AS будет выглядеть так:
2. В файле ActionScript необходима импортировать все внешние файлы классов, которые будут использоваться. Так как мы будем использовать MovieClip, то необходимо импортировать его класс. Добавим следующую строку между фигурных скобок.
Так вы создадите новый класс ActionScript.
3. Пропустите одну строку и добавьте следующий код, чтобы создать новый класс:
Теперь код выглядит так:
5. В фигурных скобках добавьте следующий код:
6. Сохраните файл, теперь весь класс должен выглядеть следующим образом:
Создание экземпляров файла класса во Flash
Теперь приступим к работе по использованию нашего класса.
1. Откройте файл Lesson04_start.fla
2. Обратите внимание, что в файле есть только фоновая картинка. Откройте панель Actions при выдеоенном 1-ом кадре слоя actions и выберите первую строчку, куда вы будете добавлять код.
3. Чтобы создать один экземпляр класса Ellipse, введите следующий код:
4. Чтобы добавить эллипс на сцену введите следующий код:
5. Сохраните и протестируйте ролик, вы должны увидеть один красный эллипс в верхнем левом углу сцены.
6. Вырежьте существующий код на панели Actions в буфер обмена.
7. В первую строку панели Actions, где теперь нету никакого кода, добавьте слушатель события MOUSE_MOVE. Это событие вызывается, когда пользователь перемещает указатель мыши. При его перемещении будет вызываться функция makeShapes().
8. На новой строке создайте функцию makeShapes():
9. Вставьте код из буфера внтури скобок функции makeShapes():
Если вы сейчас протестируете ролик, то увидете, что эллипсы размещаются в одном и томже месте. Чтобы новый эллипс размещался там где находится указатель мыши, нужно использовать свойства: mouseX и mouseY.
10. Добавьте две строки в функцию makeShapes():
11. Сохраните и протестируйте ролик.
Изменение параметров каждого экземпляра эллипса
1. Найдите в функции makeShapes() строку:
и замените на:
2. Сохраните и протестируйте ролик.
Включение и выключение функции makeShapes()
Сейчас мы реализуем добавление эллипсов только при нажатой мыши.
1. На панели Actions в самом начале добавьте следующий код:
2. В строках под слушателями событий напишите следующий код:
3. Найдите в коде следующую строку и вырежьте её:
4. Найдите функцию startDrawing и вставьте в неё выше скопированный код:
5. Найдите функцию stopDrawing и вставьте в неё выше скопированный код:
6. Сохраните и протестируйте ролик.
Случайный выбор цвета эллипсов
Для генерации случайных чисел используется метод random класса Math. Он вызывается кодом Math.random(). Этот код вернёт случайное число от 0 до 1.
В случае если вам, например нужно случайное число от 0 до 100, то вам нужно умножить получившийся результат на 100 следующим образом:
А если вам нужно сгенерировать случайный цвет из всего отрезка шестнадцатиричных цветов, то можно написать так:
1. Добавьте в самое начало кода переменную в которой будет храниться цвет.
2. Затем найдите функцию startDrawing() и добвьте в неё код, чтобы она приняла следующий вид:
3. Перейдите к функции makeShapes() и измените строку:
На строку:
4. Сохраните и протестируйте ролик.
Готовый код должен выглядеть следующим образом:
Самостоятельные задания:
1. Измените код так, чтобы вместо эллипсов рисовались прямоугольники.
2. Создайте кнопки, позволяющие переключаться между прямоугольниками и эллипсами.
3. Создайте кнопки позволяющие изменить размер рисуемых фигур.
4. Создайте кнопки позволяющие изменить цвет рисуемых фигур.
Системные требования: 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. Создайте кнопки позволяющие изменить цвет рисуемых фигур.