Архив

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

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

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

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

elka

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

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

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

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

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

package com.yesutin {
	import flash.display.MovieClip;
	import flash.events.Event;

	public class Ring extends MovieClip {
		private var numPics : int = 0;
		private var speed : Number = 0;
		private var radius:Number=500;
		private var numPic:int=0;

		public function Ring(_numPics : int = 16, _speed:Number = 1) {
			super();
			numPics = _numPics;
			speed = _speed;

			addPics();
			this.addEventListener(Event.ENTER_FRAME, redraw);
		}

		private function addPics():void{
			var pic : PictureContainer;
			var angel:Number = 0;
			for (var i : Number = 0;i < numPics; i++) {
				angel = 360 / (numPics) * i;

				// pic - любой DisplayObject.
				numPic = Math.floor(Math.random()*11);
				pic = new PictureContainer(numPic);

				pic.rotationY = 90+360-angel;
				pic.x = Math.cos(angel*Math.PI/180)*radius;
				pic.z = Math.sin(angel*Math.PI/180)*radius;

				addChild(pic);

			}
		}

		private function redraw(event : Event) : void {
			this.rotationY += speed;
		}
	}
}

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

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.

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

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

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)
		}
	}
}

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

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

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

Некоторые программисты напрочь отвергают использование 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();
		}
	}
}

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

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

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);
		}

При нажатии левой кнопки мыши вызывается функция 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);
		}
	}
}

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

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

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

Итак, приступим. Наш базовый класс 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();
 		}
	}
}

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

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