В этом простом уроке мы покажем, как создать эффект калейдоскопа в Flash CS4. Мы будем использовать новый AS3 метод, доступный в Flash Player 10, 'copyFrom'. 'copyFrom' -это метод класса Graphics, который дает возможность копировать рисунки, заливки, а в нашем случае содержимое битмапов из одного дисплей объекта в другой. Пример Флешки Тут!
Загрузите файлы, относящиеся к уроку.
Файл 'fla', соответствующий примеру выше, называется kal_main.fla. Простой код на главной временной шкале содержит создание экземпляра настраиваемого AS3 класса 'Kaleidoscope' (вы найдете его также в архиве). Ниже мы покажем код на временной шкале с комментариями. Далее мы обсудим класс Kaleidoscope. Класс также довольно простой. Размер Kaleidoscope небольшой, поскольку картинка битмапа находится не в нем, а выбирается извне. (архив в прикреплениях)
Code
/*
Мы импортируем наш настраиваемый AS3 класс Kaleidoscope. Папка flashandmath должна быть в той же папке, где находится ваш fla файл для компиляции. Мы создаем экземпляр класса и запоминаем его в переменной 'kal'.
*/
import flashandmath.as3.Kaleidoscope;
/*
Конструктор класса Kaleidoscope принимает два параметра: URL картинки, которая используется для заполнения битмапа и радиус калейдоскопа в пикселах. Третий необязательный параметр - это количество клиньев в калейдоскопе. Дефолтное значение равно 20 клиньям.
*/
/*
Вы можете поэкспериментировать с различными значениями для радиуса и использовать вашу собственную картинку. Размер картинки не имеет значения, так как битмап заполняется в классе и используется 'повтор'. Разные картинки дадут очень разный эффект. Попробуйте использовать файл Okno.jpg, содержащийся в архиве, вместо Sea.jpg.
*/
/*
Файл картинки загружается во время выполнения, поэтому его URL должен быть установлен как относительная ссылка в html странице, которая содержит ваш апплет. В нашем случае html-страница, swf - файл и jpeg -файл- все расположены в одной и той же директории на сервере.
*/
var kal:Kaleidoscope=new Kaleidoscope("Sea.jpg",200);
/*
Класс Kaleidoscope расширяет Sprite. Мы добавляем его в Display List и позиционируем в основном мувике.
*/
this.addChild(kal);
kal.x=stage.stageWidth/2;
kal.y=stage.stageHeight/2;
/*
Кнопка 'btnSpin' вызывает паблик метод doSpin в классе Kaleidoscope, вместо кнопки вы можете использовать экземпляр класса Timer и задать ему вызов 'doSpin' автоматически в каждый установленный интервал времени.
*/
btnSpin.addEventListener(MouseEvent.CLICK,spin);
function spin(e:MouseEvent):void {
kal.doSpin();
}
Замечание
Мы получили идею для апплета выше, и мы изучили все о методе 'copyFrom' из новой и превосходной книги автора Todd Yard 'ActionScript 3.0 Image Effects' (выпуск 2009). Смотрите нашу статью на нашей страничке ресурсов:
Resources and Reviews. здесь
Далее мы рассмотрим класс Kaleidoscope.
Методы Public
Класс Kaleidoscope имеет следующие public методы.
Конструктор вызывается с помощью ключевого слова 'new':
•new Kaleidoscope (url: String, r: Number, n: Number=20)
Конструктор принимает два параметра плюс один необязательный параметр. Первый параметр - это строка с URL, который указывает на файл картинки на вашем сервере. Этот файл картинки будет давать BimapData для вашего экземпляра Kaleidoscope. Файл картинки будет загружаться в рантайме. Второй параметр- это радиус в пикселах вашего экземпляра. Последний необязательный параметр устанавливает число клиньев в вашем калейдоскопе. Дефолтное значение: 20.
•doSpin( ): void
Паблик метод 'doSpin' перерисовывает калейдоскоп. Так как матрица для beginBitmapFill, вызываемая в функции, которая производит отрисовку, содержит рандомные параметры, картинка будет изменяться каждый раз при вызове метода 'doSpin'.
Вдобавок класс имеет паблик метод 'destroy( )', который вы можете вызвать, если вы захотите удалить экземпляр класса в рантайме.
Код в Kaleidoscope.as хорошо откомментирован и легок для понимания. Основная идея - это использовать bitmapFill (с рандомной матрицей) для одного клина в калейдоскопе, и затем использовать метод 'copyFrom', чтобы скопировать содержимое в другие клинья. Ниже мы покажем часть кода, который расскажет, как использовать новый метод 'copyFrom'.
Graphics.copyFrom метод в действии
Ниже - приватный метод класса Kaleidoscope drawWedges, который выполняется каждый раз при вызове 'doSpin'. Каждый элемент вектора wedgesVec - это спрайт, который мы создаем заранее.
Code
private function drawWedges():void {
var i:int;
var mat:Matrix=new Matrix();
mat.translate(picWidth/2,picHeight/2);
mat.rotate(Math.random()*2*Math.PI);
mat.scale(Math.random()*0.5+0.5,Math.random()*0.5+0.5);
for(i=0;i<numWedges;i++){
wedgesVec[i].graphics.clear();
}
//Мы заполняем первый клин, используя BitmapData нашей картинки. 'beginBitmapFill'
//вызывает использование матрицы mat, которая содержит рандомные параметры.
//По этой причине каждый раз картинка будет разной при вызове метода.
//По умолчанию beginBitmapFill установлено на 'повтор'.
//Это означает, что если ваша картинка маленькая, она будет просто повторяться.
wedgesVec[0].graphics.lineStyle();
wedgesVec[0].graphics.beginBitmapFill(imageData,mat);
wedgesVec[0].graphics.moveTo(0,0);
wedgesVec[0].graphics.lineTo(-sideLen/2,-wedgeHeight);
wedgesVec[0].graphics.lineTo(sideLen/2,-wedgeHeight);
wedgesVec[0].graphics.lineTo(0,0);
wedgesVec[0].graphics.endFill();
//Ниже мы используем метод 'copyFrom' класса Graphics, чтобы скопировать содержимое
//из первого клина во все другие клинья. Метод copyFrom - новый в FP10.
//Он копирует все отрисовки, созданные посредством команд класса Graphics,
//из одного DisplayObject в другой.
for(i=1;i<numWedges;i++){
wedgesVec[i].graphics.copyFrom(wedgesVec[0].graphics);
}
}
Комментарии, касающиеся возможных модификаций
Когда вы проэкспериментируйте с разными картинками, вы заметите, как разительно влияет изменение картинки на изменение вашего экземпляра класса Kaleidoscope.
В этом примере мы имеем кнопку, на которую кликает пользователь, чтобы повернуть калейдоскоп. Вы можете просто создать таймер, который будет автоматически поворачивать калейдоскоп через каждый установленный интервал времени.
Вы можете создать несколько экземпляров класса Kaleidoscope внутри вашего мувика. И экземпляры будут мирно сосуществовать.
Вместо использования содержимого битмапа, вы можете позволить пользователю нарисовать что-то в одном из клиньев и затем использовать 'copyFrom', чтобы сдублировать отрисованное в другие клинья. Это создаст другой эффект калейдоскопа.
Загрузка
•Загрузите все файлы, относящиеся к этому уроку
[/hide]
