Вот он, креативный подход к созданию банальной карты проезда к офису. Разработчики сделали карту с яйцами... с "пасхальными яйцами" 🙂
Для того чтобы посмотреть полную драматургии сцену, сначала нужно нажать в нижнем левом углу кнопку "Как пройти", посмотреть как пару раз человечек пройдет,
потом "Как проехать", посмотреть как пару раз машинки проедут. А как полюбуетесь, жмите прямо на надпись "Центр каминов", куда человечки ходили и машинки ездили и следите за развитием событий. Звук не забудьте включить 😀
Ах, да... все это чудо размещено на сайте "". Удачного просмотра!!!
Под впечатлением я вспомнил свою , в которой я демонстрировал . Но там это было реализовано под ActionScript 2. И вот решил я сделать что-то подобное под ActionScript 3.
Давайте смотреть что получилось.
Сначала создаем класс, реализующий эффект собирания текстовой строки из точек:
package
{
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFormat;
public class StarText extends Sprite
{
public function StarText(text:String)
{ // передаем в виде параметра текстовую строку
var textWidth:int
var textHeight:int
var tf:TextField = new TextField();
var bmp:BitmapData;
var tformat:TextFormat = new TextFormat("_sans", 12); // задаем формат текста
tf.autoSize="left"; // текстовое поле будет автоматически расширяетmcz
tf.text=text; // заполняем текстовое поле текстом
tf.setTextFormat(tformat); // присваеваем формат текста
bmp = new BitmapData(tf.width, tf.height, false); // создаем растр с размерами текста
bmp.draw(tf); // растрируем текст
textWidth = bmp.width; // ширина растровой картинки
textHeight = bmp.height; // высота растровой картинки
for (var x:int=0; x
Теперь собственно "Звездочка", которая летит-летит и прилетает куда нужно.
package {
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;
public class Star extends Sprite {
private var starCoord:Point;
public function Star(coord:Point):void { // в параметрах передаем координаты
starCoord=coord; // в которые наша точка дожна прилететь
var bmpStarSrc:BitmapData = new BitmapData(1,1,false,0x00ff00); // рисуем точку зеленую
var bmpStar:Bitmap = new Bitmap (bmpStarSrc);
bmpStar.x = Math.random()*300-Math.random()*150; // помещаем в случайные координаты
bmpStar.y = Math.random()*300-Math.random()*150;
bmpStar.addEventListener(Event.ENTER_FRAME, fly); // добавляем вызов периодической функции
addChild(bmpStar); // возвращаем созданый объект
}
private function fly(e:Event):void { // эта функция будет двигать точку в нужные координаты
var trgt = e.target;
var tox:Number = (trgt.x - starCoord.x)/16; // вычисляем смещение
var toy:Number = (trgt.y - starCoord.y)/16;
if (Math.abs(tox)>0.5 || Math.abs(toy)>0.5) { // если смещение не очень маленькое
trgt.x-=tox; // смещаем точку
trgt.y-=toy;
}
else // иначе
{
trgt.removeEventListener(Event.ENTER_FRAME, fly); // убираем повторение
trgt.x=starCoord.x; // выставляем точку в конечные координаты
trgt.y=starCoord.y;
}
}
}
}
теперь базовый класс:
package {
import flash.display.Sprite;
public class Main extends Sprite
{
public function Main()
{
var st:StarText = new StarText("БОЛЬШАЯ ИСТОРИЯ СОЗДАНИЯ МАЛЕНЬКОГО ПРИЛОЖЕНИЯ")
st.x=100
st.y=170
addChild(st)
}
}
}
ну с ним, наверное, все понятно?... если нет, милости просим в комментарии 😉
Некоторые программисты напрочь отвергают использование Flash IDE за неудобный редактор кода, который на самом деле не очень подходит для написания больших приложений с использованием элементов пользовательского интерфейса (GUI).
Тем не менее рано или поздно каждому программисту приходится работать с SWF файлами ( с так называемым "дизайном", который так не любят программисты 🙂 ), которые были созданы именно во Flash CS3 IDE. И очень часто возникают трудности в работе с такими флэшками из-за их несовместимости с "правильным" кодом.
Итак. Постановка задачи: Нужно создать два символа фигур (квадрат и круг) в библиотеке и назначить им одинаковую модель поведения. То есть любой из этих символов, добавленный на сцену, должен при нажатии на них кнопкой мышки переместиться на передний план и "прилипнуть" к курсору. При отпускании мышки - "отлипнуть" от курсора. Короче говоря, когда посмотрите результат - поймете что я имел в виду 😀
Первое, что мы сделаем, это создадим класс, описывающий поведение наших фигур.
package {
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
class Figure extends MovieClip {
public function Figure() {
addEventListener(MouseEvent.MOUSE_DOWN, StartDrag);
addEventListener(MouseEvent.MOUSE_UP, StopDrag);
}
private function StartDrag(e:Event) {
var trgt = e.target
var mc_parent = trgt.parent
mc_parent.removeChild(trgt)
mc_parent.addChild(trgt)
trgt.startDrag();
}
private function StopDrag(e:Event) {
e.target.stopDrag();
}
}
}
Объявляем класс и инициирующий метод. При создании экземпляра класса к нему добавляются два слушателя событий, реагирующих на нажатие и отпускание левой кнопки мыши:
class Figure extends MovieClip {
public function Figure() {
addEventListener(MouseEvent.MOUSE_DOWN, StartDrag);
addEventListener(MouseEvent.MOUSE_UP, StopDrag);
}
При нажатии левой кнопки мыши вызывается функция StartDrag (не путать с методом startDrag) в которой мувик удаляется со сцены, потом снова добавляется на нее (таким образом перемещается наверх) и включается startDrag()
При отпускании левой кнопки мыши вызывается функция StopDrag
private function StartDrag(e:Event) {
var trgt = e.target
var mc_parent = trgt.parent
mc_parent.removeChild(trgt)
mc_parent.addChild(trgt)
trgt.startDrag();
}
private function StopDrag(e:Event) {
e.target.stopDrag();
}
}
}
Теперь нужно создать два символа и присвоить им класс Figure в роли базового. Для этого рисуем на сцене круг, и превращаем его в символ нажатием клавиши [F8]
Теперь подобным же образом создаем квадрат.
Следующий шаг - создаем базовый класс мувика в котором берем символы из библиотеки и помещаем их на сцену:
package {
import flash.display.Sprite;
public class Main extends Sprite {
public function Main() {
var a:Square = new Square();
var b:Circle = new Circle();
addChild(a);
addChild(b);
}
}
}
Сегодня попробуем усложнить , и вместо квадратика нарисуем сердечко. И... заставим его биться в такт нашему. Конечно, ваше сердце должно биться от восторга, как у меня...
Итак, приступим. Наш базовый класс Main будет выглядить вот так:
package {
import flash.display.Sprite;
import flash.display.Shape;
import fl.motion.Animator;
import fl.motion.MotionEvent;
public class Main extends Sprite {
public var kv_animator:Animator;
public function Main() {
var h = Heart(300,0xFF1010);
addChild(h);// Добавляем Красное сердечко на основную сцену
h.x=100;
h.y=30;
setAnim(h);
}
public function Heart(w:Number, col:uint) {// Функция, рисующая квадрат
var heart:Shape = new Shape();
var Width=w;
with (heart.graphics) {
beginFill(col, 0.80);
moveTo(Width/2,Width/2);
curveTo(Width*0.75,0,Width,Width/2);
curveTo(Width,Width*0.75,Width/2,Width);
curveTo(0,Width*0.75,0,Width/2);
curveTo(Width*0.25,0,Width/2,Width/2);
endFill();
}
return heart;
}
private function setAnim(obj) {
var kv_xml:XML =
;
kv_animator = new Animator(kv_xml, obj);
kv_animator.addEventListener(MotionEvent.MOTION_END,afterMotion);
kv_animator.play();
}
function afterMotion(e:MotionEvent) {
e.target.play();
}
}
}
В следующей публикации попробую рассказать как работает этот скрипт.
