Архив

Архив раздела ‘Анимация’

Игра про Ёлочку

25 декабря 2008 Нет комментариев

Игра про Ёлочку гарантирует несколько часов хорошего настроения.
С наступающим Новым годом, друзья!!! 🙂

elka

Кстати, игра родилась по мотивам "прототипа казуальной игры Ballance", про который я писал ранее.

Изучаем ActionScript API для Flash Player 10

27 августа 2008 3 комментария

Буду краток. Вот демка, использующая новые возможности ActionScript API для Flash Player 10. Подробнее о них рассказывает Mike Chambers. Ах, да... Для просмотра необходим Flash Player 10 RC из лаборатории.

А вот исходник... буду рад, если возникнут вопросы 🙂

  1. package com.yesutin {
  2. import flash.display.MovieClip;
  3. import flash.events.Event;
  4.  
  5. public class Ring extends MovieClip {
  6. private var numPics : int = 0;
  7. private var speed : Number = 0;
  8. private var radius:Number=500;
  9. private var numPic:int=0;
  10.  
  11. public function Ring(_numPics : int = 16, _speed:Number = 1) {
  12. super();
  13. numPics = _numPics;
  14. speed = _speed;
  15.  
  16. addPics();
  17. this.addEventListener(Event.ENTER_FRAME, redraw);
  18. }
  19.  
  20. private function addPics():void{
  21. var pic : PictureContainer;
  22. var angel:Number = 0;
  23. for (var i : Number = 0;i < numPics; i++) {
  24. angel = 360 / (numPics) * i;
  25.  
  26. // pic - любой DisplayObject.
  27. numPic = Math.floor(Math.random()*11);
  28. pic = new PictureContainer(numPic);
  29.  
  30. pic.rotationY = 90+360-angel;
  31. pic.x = Math.cos(angel*Math.PI/180)*radius;
  32. pic.z = Math.sin(angel*Math.PI/180)*radius;
  33.  
  34. addChild(pic);
  35.  
  36. }
  37. }
  38.  
  39. private function redraw(event : Event) : void {
  40. this.rotationY += speed;
  41. }
  42. }
  43. }

Карта проезда с яйцами… с “пасхальными яйцами”

20 марта 2008 6 комментариев

map.jpgВот он, креативный подход к созданию банальной карты проезда к офису. Разработчики сделали карту с яйцами... с "пасхальными яйцами" 🙂

Для того чтобы посмотреть полную драматургии сцену, сначала нужно нажать в нижнем левом углу кнопку "Как пройти", посмотреть как пару раз человечек пройдет,
потом "Как проехать", посмотреть как пару раз машинки проедут. А как полюбуетесь, жмите прямо на надпись "Центр каминов", куда человечки ходили и машинки ездили и следите за развитием событий. Звук не забудьте включить 😀

Ах, да... все это чудо размещено на сайте "Центр Каминов". Удачного просмотра!!!

Пример простой 3D визуализации

11 марта 2008 1 комментарий

Прочитав туториал "Simple 3D Drawing in Flash CS3", я решил разобраться в исходниках и немного их "классифицировать" (для большей универсальности). И у меня получились следующие классы:

  • Object3D - прототип 3D объекта;
  • Sphere - параметрически описанный объект сферы
  • View3D - класс, рисующий 3D объект
  • Main - основной класс документа

Смотреть результат.

Читать далее...

Растрирование текста или “Per aspera — ad astra”

6 октября 2007 10 комментариев

Под впечатлением анонса нового Flash Player-а под кодовым именем "Astra" я вспомнил свою старую публикацию, в которой я демонстрировал эффект появления текста из звездочек. Но там это было реализовано под ActionScript 2. И вот решил я сделать что-то подобное под ActionScript 3.

Давайте смотреть что получилось.

Сначала создаем класс, реализующий эффект собирания текстовой строки из точек:

  1. package
  2. {
  3. import flash.display.BitmapData;
  4. import flash.display.Sprite;
  5. import flash.geom.Point;
  6. import flash.text.TextField;
  7. import flash.text.TextFormat;
  8.  
  9. public class StarText extends Sprite
  10. {
  11. public function StarText(text:String)
  12. { // передаем в виде параметра текстовую строку
  13. var textWidth:int
  14. var textHeight:int
  15. var tf:TextField = new TextField();
  16. var bmp:BitmapData;
  17. var tformat:TextFormat = new TextFormat("_sans", 12); // задаем формат текста
  18. tf.autoSize="left"; // текстовое поле будет автоматически расширяетmcz
  19. tf.text=text; // заполняем текстовое поле текстом
  20. tf.setTextFormat(tformat); // присваеваем формат текста
  21.  
  22. bmp = new BitmapData(tf.width, tf.height, false); // создаем растр с размерами текста
  23. bmp.draw(tf); // растрируем текст
  24. textWidth = bmp.width; // ширина растровой картинки
  25. textHeight = bmp.height; // высота растровой картинки
  26. for (var x:int=0; x<textWidth; x++){ // прямым перебором
  27. for (var y:int=0; y<textHeight; y++){ // вылавливаем все точки
  28. var volume:uint= bmp.getPixel(x,y); // цвет которых равен 0
  29. if (volume==0){ // то есть 0x000000 ...
  30.  
  31. addChild(new Star(new Point(x,y))) // ... и добавляем "звездочку"
  32. } // смотри в следующем листинге.
  33. }
  34. }
  35.  
  36. }
  37. }
  38. }

Теперь собственно "Звездочка", которая летит-летит и прилетает куда нужно.

  1. package {
  2. import flash.display.Bitmap;
  3. import flash.display.BitmapData;
  4. import flash.display.Sprite;
  5. import flash.events.Event;
  6. import flash.geom.Point;
  7.  
  8. public class Star extends Sprite {
  9. private var starCoord:Point;
  10. public function Star(coord:Point):void { // в параметрах передаем координаты
  11. starCoord=coord; // в которые наша точка дожна прилететь
  12. var bmpStarSrc:BitmapData = new BitmapData(1,1,false,0x00ff00); // рисуем точку зеленую
  13. var bmpStar:Bitmap = new Bitmap (bmpStarSrc);
  14. bmpStar.x = Math.random()*300-Math.random()*150; // помещаем в случайные координаты
  15. bmpStar.y = Math.random()*300-Math.random()*150;
  16. bmpStar.addEventListener(Event.ENTER_FRAME, fly); // добавляем вызов периодической функции
  17. addChild(bmpStar); // возвращаем созданый объект
  18. }
  19. private function fly(e:Event):void { // эта функция будет двигать точку в нужные координаты
  20. var trgt = e.target;
  21. var tox:Number = (trgt.x - starCoord.x)/16; // вычисляем смещение
  22. var toy:Number = (trgt.y - starCoord.y)/16;
  23. if (Math.abs(tox)>0.5 || Math.abs(toy)>0.5) { // если смещение не очень маленькое
  24. trgt.x-=tox; // смещаем точку
  25. trgt.y-=toy;
  26. }
  27. else // иначе
  28. {
  29. trgt.removeEventListener(Event.ENTER_FRAME, fly); // убираем повторение
  30.  
  31. trgt.x=starCoord.x; // выставляем точку в конечные координаты
  32. trgt.y=starCoord.y;
  33.  
  34. }
  35. }
  36. }
  37. }

теперь базовый класс:

  1. package {
  2. import flash.display.Sprite;
  3. public class Main extends Sprite
  4. {
  5. public function Main()
  6. {
  7. var st:StarText = new StarText("БОЛЬШАЯ ИСТОРИЯ СОЗДАНИЯ МАЛЕНЬКОГО ПРИЛОЖЕНИЯ")
  8. st.x=100
  9. st.y=170
  10. addChild(st)
  11. }
  12. }
  13. }

ну с ним, наверное, все понятно?... если нет, милости просим в комментарии 😉

Использование символов из библиотеки

30 сентября 2007 8 комментариев

Некоторые программисты напрочь отвергают использование Flash IDE за неудобный редактор кода, который на самом деле не очень подходит для написания больших приложений с использованием элементов пользовательского интерфейса (GUI).

Тем не менее рано или поздно каждому программисту приходится работать с SWF файлами ( с так называемым "дизайном", который так не любят программисты 🙂 ), которые были созданы именно во Flash CS3 IDE. И очень часто возникают трудности в работе с такими флэшками из-за их несовместимости с "правильным" кодом.

Итак. Постановка задачи: Нужно создать два символа фигур (квадрат и круг) в библиотеке и назначить им одинаковую модель поведения. То есть любой из этих символов, добавленный на сцену, должен при нажатии на них кнопкой мышки переместиться на передний план и "прилипнуть" к курсору. При отпускании мышки - "отлипнуть" от курсора. Короче говоря, когда посмотрите результат - поймете что я имел в виду 😀

Первое, что мы сделаем, это создадим класс, описывающий поведение наших фигур.

  1. package {
  2. import flash.display.MovieClip;
  3. import flash.events.Event;
  4. import flash.events.MouseEvent;
  5.  
  6. class Figure extends MovieClip {
  7. public function Figure() {
  8. addEventListener(MouseEvent.MOUSE_DOWN, StartDrag);
  9. addEventListener(MouseEvent.MOUSE_UP, StopDrag);
  10. }
  11. private function StartDrag(e:Event) {
  12. var trgt = e.target
  13. var mc_parent = trgt.parent
  14. mc_parent.removeChild(trgt)
  15. mc_parent.addChild(trgt)
  16. trgt.startDrag();
  17. }
  18. private function StopDrag(e:Event) {
  19. e.target.stopDrag();
  20. }
  21. }
  22. }

Разберемся по порядку

импортируем необходимые библиотеки:

  1. package {
  2. import flash.display.MovieClip;
  3. import flash.events.Event;
  4. import flash.events.MouseEvent;

Объявляем класс и инициирующий метод. При создании экземпляра класса к нему добавляются два слушателя событий, реагирующих на нажатие и отпускание левой кнопки мыши:

  1. class Figure extends MovieClip {
  2. public function Figure() {
  3. addEventListener(MouseEvent.MOUSE_DOWN, StartDrag);
  4. addEventListener(MouseEvent.MOUSE_UP, StopDrag);
  5. }

При нажатии левой кнопки мыши вызывается функция StartDrag (не путать с методом startDrag) в которой мувик удаляется со сцены, потом снова добавляется на нее (таким образом перемещается наверх) и включается startDrag()
При отпускании левой кнопки мыши вызывается функция StopDrag

  1. private function StartDrag(e:Event) {
  2. var trgt = e.target
  3. var mc_parent = trgt.parent
  4. mc_parent.removeChild(trgt)
  5. mc_parent.addChild(trgt)
  6. trgt.startDrag();
  7. }
  8. private function StopDrag(e:Event) {
  9. e.target.stopDrag();
  10. }
  11. }
  12. }

Теперь нужно создать два символа и присвоить им класс Figure в роли базового. Для этого рисуем на сцене круг, и превращаем его в символ нажатием клавиши [F8]

Теперь подобным же образом создаем квадрат.

Следующий шаг - создаем базовый класс мувика в котором берем символы из библиотеки и помещаем их на сцену:

  1. package {
  2. import flash.display.Sprite;
  3.  
  4. public class Main extends Sprite {
  5. public function Main() {
  6. var a:Square = new Square();
  7. var b:Circle = new Circle();
  8. addChild(a);
  9. addChild(b);
  10. }
  11. }
  12. }

А вместо сердца — пламенный мотор

29 сентября 2007 5 комментариев

Сегодня попробуем усложнить вчерашний пример, и вместо квадратика нарисуем сердечко. И... заставим его биться в такт нашему. Конечно, ваше сердце должно биться от восторга, как у меня...

Итак, приступим. Наш базовый класс Main будет выглядить вот так:

  1. package {
  2. import flash.display.Sprite;
  3. import flash.display.Shape;
  4. import fl.motion.Animator;
  5. import fl.motion.MotionEvent;
  6.  
  7. public class Main extends Sprite {
  8. public var kv_animator:Animator;
  9. public function Main() {
  10. var h = Heart(300,0xFF1010);
  11. addChild(h);// Добавляем Красное сердечко на основную сцену
  12. h.x=100;
  13. h.y=30;
  14. setAnim(h);
  15. }
  16.  
  17. public function Heart(w:Number, col:uint) {// Функция, рисующая квадрат
  18. var heart:Shape = new Shape();
  19. var Width=w;
  20. with (heart.graphics) {
  21. beginFill(col, 0.80);
  22. moveTo(Width/2,Width/2);
  23. curveTo(Width*0.75,0,Width,Width/2);
  24. curveTo(Width,Width*0.75,Width/2,Width);
  25. curveTo(0,Width*0.75,0,Width/2);
  26. curveTo(Width*0.25,0,Width/2,Width/2);
  27. endFill();
  28. }
  29. return heart;
  30. }
  31. private function setAnim(obj) {
  32. var kv_xml:XML =
  33. <motion duration="40" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
  34. <source>
  35. <source>
  36. <transformationPoint><geom:Point x="0.5" y="0.5"/></transformationPoint>
  37. </source>
  38. </source>
  39. <keyframe index="0">
  40. <tweens><simpleEase ease="0"/></tweens>
  41. </keyframe>
  42. <keyframe index="14" scaleX="1.1" scaleY="1.1">
  43. <tweens><simpleEase ease="0"/></tweens>
  44. </keyframe>
  45. <keyframe index="19" scaleX="1" scaleY="1">
  46. <tweens><simpleEase ease="0"/></tweens>
  47. </keyframe>
  48. <keyframe index="24" scaleX="1.1" scaleY="1.1">
  49. <tweens><simpleEase ease="0"/></tweens>
  50. </keyframe>
  51. <keyframe index="39" scaleX="1" scaleY="1">
  52. <tweens><simpleEase ease="0"/></tweens>
  53. </keyframe>
  54. </motion>;
  55.  
  56. kv_animator = new Animator(kv_xml, obj);
  57. kv_animator.addEventListener(MotionEvent.MOTION_END,afterMotion);
  58. kv_animator.play();
  59. }
  60. function afterMotion(e:MotionEvent) {
  61. e.target.play();
  62. }
  63. }
  64. }

В следующей публикации попробую рассказать как работает этот скрипт.

UPD: Посмотреть на результат можно здесь. Исходники здесь.