My First ActionScript 3 Application

Все уже знают о выходе последнего бета-релиза Flex 3. Давайте вспомним что же будет представлять собой Flex 3 в конечном варианте. Особенности Flex 3 можно условно поделить на четыре основные группы: Рабочий процесс дизайнера/разработчика, работа с данными, работа с Adobe AIR и эвалюция платформы.

Кратко можно выделить следующее:

• Встроенная поддержка Adobe AIR – Flex 3 имеет средства для разработки Adobe AIR, встроенные в SDK и Builder.
• Постоянный кэш фреймворка – Вы можете создавать Flex 3 приложения размером менее 50К за счет новой возможности Flash Player - кэша для компонентов Adobe platform.
• Увеличение производительности Flex Builder – Flex Builder 3 имеет поддержку рефакторинга, новый профайлер для настройки производительности и использования памяти, а также генератор кода для доступа к источникам данных.
• Интеграция с Creative Suite 3 – Flex Component Kit для Flash CS3 позволяет пользователям Flash CS3 создавать компоненты, которые чётко интегрируются во Flex-приложения, в то время как Flex Builder 3 импортирует спины из CS3 приложений с помощью новых визардов.

а также некоторые другие особенности, о которых писалось много...

Однако хотелось бы обратить особое внимание на интеграцию конечного продукта. Всем известно, что Flex-приложения в большинстве случаев не живут сами по себе. Чаще всего они являются частью большого HTML-приложения. И разработчики прилагают много усилий для улучшения взаимодействия Flex-приложения и его обертки с помощью нескольких функционалов.

Во-первых библиотека Flex-Ajax Bridge, с недавних пор являющаяся официальной частью Flex SDK, доступна как часть включаемого фреймворка.

Во-вторых, Flex Builder может сам генерировать JavaScript для совершения вызовов во Flex-приложение. Теперь Flex-разработчик может показывать свойства и методы приложения для того, чтобы JavaScript разработчик мог их вызвать не зная внутренностей приложения. И, наконец, использование класса BrowserManager, поможет в разработке кросс-браузерных приложений.

Класс BrowserManager может также обновлять адресную строку браузера, что дает пользователю возможность делать закладки и в случае перехода по этим ссылкам, сообщать приложению информацию для переключения состояния.

Написано под впечатлением от обновленного обзора "What's new in Flex 3".

Грант Скиннер опубликовал интересный компонент для Flash CS3, который позволяет создать эффект горения мувика, а при изменении некоторых настроек, и прочие эффекты:

Те, кто заинтересовался возможностью исследовать код, могут скачать компонент и исходники.

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

Как и принято, начнем знакомство с языком с простейшей программы, которая выводит фразу "Hello, World!". Но прежде чем начать работу, нужно убедиться, что на Вашем компьютере установлена программа Flash CS3. Программу (бесплатную пробную версию) можно скачать с сайта производителя. Надеюсь с установкой программы ни у кого не возникнет проблем.

Итак, открываем Flash IDE и создаем новый исходный файл:

То же самое можно сделать, нажав Ctrl-N (или выбрав пункт "New..." из меню "File") и выбрав из списка "Flash File (ActionScript 3.0)"

Сохраняем созданный файл в нужный каталог, например c:\\tutorial\\helloworld.fla

Основной файл нашего приложения создан, но среди современных flash программистов считается "дурным тоном" писать программный код прямо в нем (позже мы рассмотрим и такой вариант, потому как иногда это бывает полезно), поэтому мы создадим специальный ActionScript файл, в котором и будет описан весь программный код.

Для этого мы поступаем точно так же как и в случае с fla-файлом:

Нажимаем Ctrl-N и выбрав из списка "ActionScript File" создаем его и сохраняем под именем helloworld.as в тот же каталог что и helloworld.fla

Теперь пишем в файле helloworld.as следующее:

package {
   import flash.display.Sprite;
   public class HelloWorld extends Sprite {
      public function HelloWorld() {
         trace("hello, World!!!"); // Выводит фразу "hello, World" в окно вывода Flash IDE
      }
   }
}

То есть мы создали базовый класс нашего мувика. Сохраняем helloworld.as и затем прописываем этот класс в helloworld.fla:

Теперь нажимаем Ctrl+Enter для того чтобы протестировать наш мувик. В окне вывода ("Output") должна появиться надпись "hello, World!"

Мне кажется проще программки не придумаешь 🙂