Архив

Архив раздела ‘Графика’

Растрирование текста или “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: Посмотреть на результат можно здесь. Исходники здесь.

Знакомство с графическими примитивами

28 сентября 2007 15 комментариев

В этом уроке мы познакомимся с графическими примитивами. То есть научимся рисовать линии и делать заливки. Сразу скажу, что мои примеры далеки от канонов объектно-ориентированного стиля... просто таким образом оформленные примеры мне кажутся... более простыми в понимании основной мысли. Да простят меня взрослые и умные дяденьки. 🙂

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

Вот его содержимое:

package {
	import flash.display.Sprite;
	import flash.display.Shape;

	public class Main extends Sprite {
		public function Main() {
			var k1 = Kvadrat(100,0xFF0000); // Красный квадрат 100 на 100
	 		var k2 = Kvadrat(200,0x00FF00); // Зеленый квадрат 200 на 200

			addChild(k1); // Добавляем Красный квадрат на основную сцену
		 	k1.x=50;
	 		k1.y=50;

			addChild(k2); // Добавляем Зеленый квадрат на основную сцену
	 		k2.x=100;
		 	k2.y=100;
		 }

		private function Kvadrat(w:Number, col:uint) { // Функция, рисующая квадрат
	 		var kvadrat:Shape = new Shape();
 			var Width=w;
 			with (kvadrat.graphics) {
 				beginFill(col, 0.80); // Закрашиваем квадрат, непрозрачность  - 80%
	 			lineTo(0,Width);
 				lineTo(Width,Width);
 				lineTo(Width,0);
 				lineTo(0,0);
	 			endFill();
 			}
 			return kvadrat;
		}
	}
}

В принципе, я думаю и так все понятно... Но на всякий случай рассмотрим алгоритм выполнения этой маленькой программы:

  • Вызывается основная функция Main().
  • С помощью вызова функции Kvadrat() создаем 2 квадрата:
    • beginFill() - задать цвет заливки
    • lineTo() - рисовать линию до координат, указанных в параметрах
    • endFill() - закончить заливку (кстати, многие "взрослые" программеры часто забывают выключить заливку, что порой приводит к непредвиденным ситуациям
  • Добавляем квадраты на сцену командой AddChild()
  • Изменяем координаты с помощью параметров .x и .y

Ну вот, вроде бы и все на сегодня...'