Для комфортной работы с ActionScript3 нужно установить и настроить программу FlashDevelop (http://www.flashdevelop.org).
Далее качаем последнюю сборку Adobe Flex 4 SDK , содержащую компиляторы под Flash Player 9/10. Для удобства, распаковываем содержимое архива в папку, в C:\flex_4_sdk\.
Далее заменяем следующие узлы в файле C:\flex_4_sdk\frameworks\flex-config.xml:
| <path-element>libs/player</path-element> |
| <path-element>libs/player/{targetPlayerMajorVersion}.{targetPlayerMinorVersion}</path-element> |
на:
| <path-element>libs/player/{targetPlayerMajorVersion}</path-element> |
| <path-element>libs/player/{targetPlayerMajorVersion}/playerglobal.swc</path-element> |
возможно уже исправили, но это нам должно позволить свободно переключаться между 9 и 10 целевыми версиями создаваемых роликов.
Теперь скачиваем автономный Flash Player 10 . Запускаем FlashDevelop и прописываем полный путь к плееру в параметре Tools → Program Settings → FlashViewer → External Player Path.
Конфигурируем проект: создаем новый ActionScript 3 проект (Project ⇒ New Project… ⇒ ActionScript 3 ⇒ Default Project) и называем его. Щелкаем правой клавишей по названию проекта в панели «Project» и в появившемся меню выбираем пункт «Properties…». В закладке «Output» в качестве целевой версии плеера выставляем «Flash payer 10» и выбираем пункт «Play in external player». Тут же переходим на закладку «Compiler Options» и в параметре «Custom Path to Flex SDK» задаем полный путь к папке с Flex 4 SDK, в нашем случае значением этого параметра будет строкаC:\flex_4_sdk\. Затем здесь же задаем полный путь к библиотеке C:\flex_4_sdk\frameworks\libs\player\10\playerglobal.swc в параметре «External Libraries». Нажимаем последовательно кнопки «Apply» и «OK». На этом все. Мы имеем настроенную IDE, с поддержкой новых классов и конструкций языка, появившихся в Flash Player 10 , а так же возможность компилировать ролики под эту версию плеера.
Можно приступать к работе над классами рисования с использованием только языка ActionScript3.
Открываем FlashDevelop, если закрыли, создаем проект (Project ⇒ New Project… ⇒ ActionScript 3), что бы можно было к нему быстро обращаться и подключать внешние библиотеки, назовём его DrawingwithAS3. Заходим в папку ...\DrawingwithAS3\src\ и открываем файл нашего основного класса Main.as.
В языке ActionScript3 элементарные векторы, фигурки или линии рисуются с помощью класса Graphics и представляет к нему доступ через переменную экземпляра graphics.
=|=Объекты Shape потребляют меньше памяти, чем объекты Sprite и MovieClip. И, что бы уменьшить потребление памяти, векторное содержимое лучше рисовать в объектах Shape, когда нет необходимости в контейнерных и интерактивных возможностях классов Sprite и MovieClip. НО такого практически не бывает.=|=
Инструменты рисования класса Graphics можно разбить на пять категорий:
1. Рисование линии: corveTo(), lineTo().
2. Рисование фигур: beginBitmapFill(), beginFill(), beginGradientFill(),
drawEllipse(), drawRect(), drawRoundRect(),
drawRoundRectComplex(), drawCircle(), endFill().
3. Определение стилей линии: lineGradientStyle(), lineStyle().
4. Перемещение чертежного пера: moveTo().
5. Удаление графики: clear().
По существу, в языке ActionScript линии и кривые рисуются гипотетически "чертёжным пером". И для всех новых объектов Sprite, MovieClip и Shape перо первоначально устанавливается в положение по оси x и по оси y (0; 0). По мере рисования линий и кривых ( с помощью методов corveTo() и lineTo() ) перо перемещается по координатному пространству объекта, останавливаясь в конечной точке последней нарисованной линии или кривой. Текущая позиция пера всегда обозначает начальную точку следующей рисуемой линии или кривой. Что бы установить начальную точку линии или кривой в произвольную позицию, используем метод moveTo(), который "поднимает" чертёжное перо и перемещает его в новую позицию, не рисуя линии к указанной точке.
Для рисования прямых линий используется метод lineTo(), который рисует линию из текущей позиции чертёжного пера в указанную точку (x, y). Например, следующий код создает объект Shape и рисует линию из точки (0, 0) в точку (25, 35):
package
{
import flash.display.Shape;
import flash.display.Sprite;
// Устанавливаем высоту, ширину, частоту обновления и цвет нашей сцены
[SWF(width="500", height="400", frameRate="24", backgroundColor="#FFFFFF")]
public class Main extends Sprite
{
public function Main():void
{
var canvas: Shape = new Shape();
canvas.graphics.lineTo(25, 35);
addChild(canvas);
}
}}
Однако если вы попытаетесь выполнить этот код таким, как есть, то можете быть удивлены, обнаружив , что на экране не появилось никакой линии! По умолчанию все рисуемые линии и фигуры - не имеют контура. Что бы отобразить нам контур, мы должны использовать метод lineStyle(), устанавливающий визуальные характеристики (толщина, цвет и т.д.) для всех линий или фигур, которые будут нарисованы в дальнейшем. Для справки представляю сигнатуру метода lineStyle(), которая демонстрирует доступные визуальные параметры и их значения по умолчанию. Подробную информацию по каждому параметру можно найти в справочнике по языку ActionScript3 корпорации Adobe.
lineStyle( thickness:Number = 1.0,
color:uint = 0, alpha:Number = 1.0,
pixelHinting:Boolean = false,
scaleMode:String = "normal",
caps:String = null,
joints:String = null,
miterLimit:Number = 3)
Метод lineStyle() должен вызываться явно для каждого нового объекта Sprite, MovieClip и Shape, иначе никакой контур отображен не будет (хотя заполняемые области могут рисоваться без контуров - это тоже важно, и можно использовать). Итак добавим один из кодов в проект :
canvas.graphics.lineStyle(); - нарисованные в дальнейшем линии, кривые и заливки не будут иметь контура.
canvas.graphics.lineStyle(1); - этот код устанавливает для стиля линии толщину 1 пиксел и сплошной черный цвет.
canvas.graphics.lineStyle(1, 0x00FF00); - этот толщину 1 пиксел и сплошной зеленый цвет.
canvas.graphics.lineStyle(2, 0x00FF00, 0.5); - толщина 2 пиксела и сплошной зеленый цвет с прозрачностью 50%.
Ну смотрим теперь основной код, но уже с использованием контура:
package
{
import flash.display.Shape;
import flash.display.Sprite;
// Устанавливаем высоту, ширину, частоту обновления и цвет нашей сцены
[SWF(width="500", height="400", frameRate="24", backgroundColor="#FFFFFF")]
public class Main extends Sprite
{
public function Main():void
{
var canvas: Shape = new Shape();
canvas.graphics.lineStyle(3, 0x0000FF);//Толщина 3 пиксела и контур синий
canvas.graphics.lineTo(25, 35);
addChild(canvas);
}
}}
При рисовании нескольких линий стиль контура можно установить для каждой в отдельности , вызывая метод lineStyle() перед рисованием каждой линии.
Что бы переместить перо, не рисуя при этом вообще никаких линий, используем метод moveTo(). Попробуем нарисовать в нашем проекте ещё одну линию , но с другой стороны сцены с использованием метода moveTo(), если вы заметили в начале нашего кода есть код [SWF(width="500", height="400", frameRate="24", backgroundColor="#FFFFFF")] - от сюда мы и берём числа для наших расчётов. Можно создать новый объект для рисования var canvas2:Shape = new Shape();, а можно продолжить рисовать в нашем объекте canvas:
package
{
import flash.display.Shape;
import flash.display.Sprite;
// Устанавливаем высоту, ширину, частоту обновления и цвет нашей сцены
[SWF(width="500", height="400", frameRate="24", backgroundColor="#FFFFFF")]
public class Main extends Sprite
{
public function Main():void
{
var canvas: Shape = new Shape();
canvas.graphics.lineStyle(3, 0x0000FF);//Толщина 3 пиксела и контур синий
canvas.graphics.lineTo(25, 35);// Рисуем синюю линию
canvas.graphics.moveTo(500, 0);//Двигаем перо в правый верхний угол сцены
canvas.graphics.lineStyle(4, 0xFF0000, 1);//Толщина 4 пиксела и контур красный
canvas.graphics.lineTo(475, 35);// Рисуем красную линию
addChild(canvas);
}
}
}
Дальше рассмотрим рисование кривых.