Флэш Потрошитель этот | тот | 1.0

Пишет Семен Фриш:

Очень давно собирался начать писать статьи цикла: как начать разработку флэш игр.

Последние 5-6 лет наша студия выпустила около 40 игр многие клонированные, но более 10 разных типов. Так получилось, что весь ActionScript 2 и 3 код во всех, кроме одной, я написал сам. Я пытался привлечь многих разработчиков, но не сумел. Были Flex Enterprise, Flash IDE, серверные PHP/db программисты, Java, low level C++ и так далее, но никак.

Всем выдавался следующий набор:

0. Get FlashDevelop

1. Getting Started with FlashDevelop

2. as3 with FlashDevelop overview

3. Моя презентация «Flash Games with Freeware»  и простая демо игра сделанные для конференции FlashGAMM #2. Все материалы собраны вместе в на форуме FlashDevelop

4. Исходный код игры Jumpin J также на форуме FlashDevelop

Задача была простой: настроить среду разработки и компилировать игру. Удивительно, но никто этого  не сделал. Я не знаю, почему и в чем была моя ошибка.

К счастью, неделю назад я поставил эту задачу, моему другу, который искал сезонную работу. Он не программист и не имеет технического диплома, но он легко справился с задачей ^) На самом деле я не был готов к этому и не подготовил следующую задачу. Так что в поисковой системе Google и нашел подходящие методические материалы: Creating a Asteroids Flash Game Part 1: Setting up FlashDevelop and Planning

Неделю спустя, задав некоторые вопросы по специфике Flash/ActionScript такие как Sprite, stage and //entry point в новом as3 проекте ему удалось запустить игру и внести некоторые изменения в графику игры.

Сейчас он читает книгу Colin Moock's Essential ActionScript 3.0, O'Reilly, 2007, которую, я думаю, нет необходимости представлять.

А я модифицировал essential game framework от 8bitrocket из книги The Essential Guide To Flash Games  и собрал коммерческую игру на его основе, о процессе разработки которой тоже расскажу, после релиза. Собираюсь использовать его для следующей игры, по теории второй игры из книги и привлечь новых членов команды в процесс: одного, который уже прошел туториал и другого, который собирается попробовать, что и заставило меня написать эту статью, в конце концов.

Source in English: Want to Make Games part 1: Start Up Kit

21 июля Adobe выпустила в Open Source разработку Open Source Media Framework (OSMF. Ранее проект носил рабочее название Strobe). Что этот фреймворк собой представляет и чем он может пригодиться нам, профессиональным бездельникам, в смысле, разработчикам?

Open Source Media Framework — открытая, многоуровневая, слабо связанная, гибкая и целостная система для разработки мультимедийных проектов любой сложности, использующих преимущества современной информационной насыщенности и связанности сети, или не использующих. Архитектура AS3-фреймворка OSMF создана специально для работы с медиа-данными любых типов и объемов.

От несложной фотогалереи до многопользовательского видео-портала с подключенной социальной сетью, наноблогами, блекджеком и эффективными менеджерами — вот спектр применения OSMF.

Цели Open Source Media Framework

• Снизить для разработчиков входной баръер в технологию сетевого видео.
• Дать набор легко совместимых и расширяемых компонентов, сфокусированных вокруг качества открытого видео-проигрывателя OVP: минимальный стартовый буфер для начала проигрывания, гибкая логика соединения, динамические потоки.
• Создать стандарт для работы с медиа-информацией, но дать место и нестандартным решениям.
• Независимость от фреймворков. OSMF написан на AS3, работает во Flash и во Flex проектах.
• Свести к минимуму избыточность в проекте: оптимизация архитектуры, объема кода, веса SWF-файлов и т.п. Фреймворк OSMF высокогранулирован. Конкретные проекты могут использовать необходимые им гранулы — части OSMF (swc), не таща в проект ненужный код и ресурсы.
• Интеграция с инструментарием Adobe — от FMS 3.5 до Flash Catalyst и Illustrator.
• Создать удобные способы подключения медиа-партнеров, поставщиков контента, сервисов монетизации и рекламных служб к медиа-проектам.

Но, как реальный проект на OSMF может выглядеть в жизни?

Пример: разработчик и/или дизайнер создает медиа-плейер во Flex, Flash или Catalyst. Потоковое вопроизведение обеспечивается установленными у поставщиков контента серверами типа Red5 или FMS, а фреймворк дает средства интеграции с разными системами, есть плагины и можно делать свои. Платформа Flash обеспечивает проигрывание видео и других типов контента. Компании типа DoubleClick предоставляют элементы рекламы для показа в заданной позиции видео, плейлиста, или реализующие распределенную рекламную кампанию внтутри медиа-системы, рекламу, которая подстраивается под метаданные. Приложения от компаний типа KickApps помогают встроить плейер в социальные сети типа Facebook. Компании типа Level(3) занимаются синдикацией потоков данных для выдачи их внешним API. И ко всему этому можно подключить еще много разных сервисов и датапровайдеров, да хоть кофеварку на USB.

И получается, что если ты еще вчера работал на дядьку, которому делал видео-портал (мы знаем, как это "легко"), а он тебе как-то нехотя платил, не забывая покупать себе новые машины, то сегодня ты с парой своих друзей можешь оставить его на произвол судьбы и сделать все сам. Фреймворк такой.

Заканчивая это славное маркетинговое вступление, отметим: некоторые объясняют действия Adobe по открытию исходников OSMF как попытку выиграть в борьбе за стандарты сетевого видео. Не станем спорить, ведь любая здоровая компания стремится быть первой, и при должном усилии и хорошей карме (да-да) становится ею. И тут же мы станем утверждать, что OSMF родился естественным образом, как ответ Flash на современное состояние той экосферы, ключевой частью которой Flash является. Сегодня во Flash — огромное количество медиа-информации и систем управления ею, разработчиков и дизайнеров, библиотек и фреймворков, рекламных сервисов и решений для монетизации, медиа-площадок и поставщиков контента, социальных сетей, систем аггрегирования и рейтинга — всего того, что неоднозначно называется Web 2.0, и в формировании чего Flash Player сыграл и играет важную роль.

Так много всего, как с этим можно работать? Как студии, компании, поставщики контента и разработчики могут применить богатство технологий Веб 2.0 на практике? Используя Open Source Media Framework, а конкретно — интегрируя OSMF в свой проект на необходимом им уровне. Основных уровней интеграции три, и они строятся вокруг трех аспектов архитектуры OSMF.

Три аспекта архитектуры Open Source Media Framework

OSMF реализует три функциональных аспекта как части триединства MVC:

• Модель: медиа-элемент (IMediaElement).
  Медиа-элементами могут быть видео, аудио, swf-файлы, картинки и другие типы медиа. Элементы являются атомами фреймворка OSMF. Они имеют такие свойства, как тип медиа и жизненный цикл. Также каждый элемент обладает одним или несколькими свойствами признаков (IMediaTrait: "качество", "черта", "особенность медиа").

  Что такое медиа-признак элемента? Это указание на его конкретные характеристики. Примеры признаков: IPlayable (ЯИграбельный), IViewable (ЯВизуальный), IPausible (ЯПаузабельный) и т.д:

  

  Признаки элемента играют важную роль при работе с ним вашей медиа-системы. Например, у загруженного в ваше приложение видео-элемента обнаружен признак IPlayable. Значит можно показать пользователю кнопки "Play" и другие, реализующие этот признак, ЯИграбельный. Когда видео проиграно до конца, загружается следующий элемент, картинка, у которой нет признака IPlayable, а есть признак IViewable. Значит, теперь можно скрыть или деактивировать кнопки для проигрывания контента, и просто показать картинку. Так мы получаем гибкую подстройку системы под тип медиа-контента.

• Управление: медиа-композиция (Media Composition, IMediaFactory.
  Медиа-композиция — это набор медиа-элементов. Правила композиции указывают, как ведут себя ее элементы, исходя из их типов, жизненных циклов и признаков. Каждый медиа-элемент композиции может быть отрендерен в определенном медиа-регионе. Композиции могут быть динамическими.
• Представление: медиа-конфигурация (Media Configuration).
  Медиа-конфигурация является набором медиа-регионов. Каждый из них имеет свойства, типа ширина-высота-играбельность-слушабельность, соответствующие определенным медиа-признакам. Каждый медиа-регион может рендерить медиа-элементы определенного типа. Также задаютья отношения между медиа-регионами, например, их позиционирование и поведение относительно друг друга.

Три уровня интеграции в Open Source Media Framework

Описанные выше три аспекта в реальной разработке превращаются в богатый выбор уровней взаимодействия с OSMF, которые можно описать тремя простыми тактическими схемами. Простыми до того, что укравший их медиа-шпион все равно ничего в них не поймет, потому что они — только для своих, опенсорсных ребят. Медитируя на эти схемы, можно постичь суть всех фреймворков мира (краткое пояснение будет ниже):

Вот и завершено изучение интересных и познавательных схем. Припоминаем теперь, что ранее мы рассмотрели три аспекта OSMF: медиа-элемент, медиа-композиция и медиа-конфигурация. Архитектура OSMF устроена так, что можно работать с любым аспектом, исходя из сложности проекта.

Это один из самых гибких моментов фреймворка OSMF. Вы можете перебирать атомы медиа-элементов, а можете ворочать вселенными медиа-конфигураций. Все зависит от задачи: вы берете из фреймворка нужные элементы и используете. За счет этого оптимизируется также размер SWF. И при этом вы сможете в будущем расшириться на использование других аспектов, когда это понадобится.

Итак, три уровня интеграции вашего проекта с фреймворком OSMF

Уровень 1. Фреймворк Медиа. Строится вокруг медиа-элементов, как правило, однотипных. По большому счету, обычный видео-плейер. Включает в себя, например, открытый видео-проигрыватель OVP, работает с парой поставщиков контента. Есть возможность использовать виджеты рейтинга и рекомендации друзьям. Визуальный интерфейс подстраиваете под себя. Указываете, какие кнопки хотите показать, задаете настройки и т. п. Есть возможность подключения ко второму уровню.

Уровень 2. Фреймворки Медиа + Компоновка. Это уже скорее мультимедиа-проигрыватель, в отличие от проигрывателя однотипных данных, что был на уровне 1. Здесь есть все, что было и на первом уровне, плюс интеграция с метаданными, метками (cue points) и языком разметки презентаций SMIL, что выливается в возможность встраивания в приложение плагинов для монетизации, то есть подключения к статистике, рекламе, рекламщикам, и прочим полезным проходимцам.

Уровень 3. Фреймворки Медиа + Компоновка + Конфигурация. Полномасштабная машина для автоматической сборки и переработки разнообразного контента в лулзы и / или денежную массу. Приложение размечено на медиа-регионы: тут у нас логотип спонсора данного клипа, тут баннер его друзей, а тут виджеты пока неизвестных третьих лиц, но тоже обещали заплатить. В дополнение к уровням 1 и 2 добавляется синдикация контента и динамический интерфейс. Здесь же — ваши плагины и плагины сети партнеров.

Да, и все это уже кое-как работает. Примеры в Adobe, как вы понимаете, делались не для демонстрации эффекта мокрого пола, а для показа неброских, но важных программных решений:

Пример приложения Open Source Media Framework на Flex, 406 Кб:

Source: CompositionPlayer.zip

Пример OSMF-приложения на Flash, 24 Кб:

Source: FlashMediaPlayerTest.zip

Как это выглядит в коде: Flash-проект на OSMF, Actionscript

Ниже приведены важные относительно OSMF части кода из второго примера (Flash), остальное можно скачать и посмотреть (но осталось там немного). Итак, сначала мы создаем два медиа-спрайта типов MediaElementSprite и MediaPlayerSprite соответственно. Первый, MediaElementSprite, рассчитан на отображение медиа-элементов с признаками IViewable и ISpatial, т.е. ЯСмотрибельный и ЯСоСвоимиРазмерами. Годится для использования как во Flash, так и во Flex. Второй, MediaPlayerSprite, умеет автоматически создавать для себя MediaPlayer и проигрывать его содержимое:

package {

		public function FlashMediaPlayerTest()
		{
			elementPlayer = new MediaElementSprite();
			mediaPlayer = new MediaPlayerSprite();
            

Когда мы жмем на кнопку "1. Создать Media Element", вызывается метод onMediaElementTest. Он создает элемент простого типа — ImageElement (картинка типа JPG, PNG, GIF) и присваивает его свойству elementPlayer.element. А elementPlayer не загружает его автоматически, а ждет события, например, нажатия на "2. Загрузи Media Element" чтобы обработать признаки элемента и решить, что с ним делать.

А когда жмем на "3. Создай Media Player", то вызывается onMediaPlayerTest. Он создает элемент типа VideoElement и присваивает его свойству mediaPlayer.element. VideoElement по умолчанию обладает признаками IAudible, IBufferable, IPlayable, ISeekable, ISpatial, и IViewable. Так что наш mediaPlayer автоматически загружает и проигрывает его.

Функция testWrapper переключает отображение на экране наших двух плейеров: elementPlayer и mediaPlayer. А также задает размеры медиа-элемента и указывает его ориентацию, в данном случае это ScaleMode.LETTERBOX, что тоже есть константа из OSMF.

		private function onMediaElementTest(event:Event):void
		{			
			testWrapper(elementPlayer);
			elementPlayer.element = createImageElement();
		}

		private function onMediaPlayerTest(event:Event):void
		{			
			testWrapper(mediaPlayer);
			mediaPlayer.element = createMediaElement();
		}

		private function createImageElement():MediaElement
		{
			return new ImageElement(new ImageLoader(), new URLResource("http://webzoom.freewebs.com/sunnycooker/Fun-Panel%20LAS%20Image.JPG"));; 
		}

		private function createMediaElement():MediaElement
		{
			return new VideoElement(new NetLoader(), new URLResource("http://flash-ripper.com/tests/osmf-composition-player/video/Bad_Vlad_-_Encyclopedia_Dramatica.flv"));; 
		}
        
		private function testWrapper(wrapper:ScalableSprite):void
		{
			if(currentSprite)
			{
				removeChild(currentSprite);
			}
			 
			wrapper.scaleMode = ScaleMode.LETTERBOX;
			addChildAt(wrapper, 0);			
			currentSprite = wrapper;
			currentSprite.y = 60;
			currentSprite.setAvailableSize(stage.stageWidth, 340);
		}	

Как в коде обрабатываются признаки медиа-элементов

При нажатии на кнопку "2. Загрузи Media Element" происходит работа с признаками элемента MediaElementSprite. Мы определяем, имеет ли данный элемент признак ЯЗагружабельный и если да, то готов ли он к загрузке, и если он готов, то загружаем его:

		
		//MediaPlayer загрузится сам, а вот MediaElement - нет.
		private function load(event:MouseEvent):void
		{	
			if (currentSprite is MediaElementSprite)
			{
				if (elementPlayer.element.hasTrait(MediaTraitType.LOADABLE) && (elementPlayer.element.getTrait(MediaTraitType.LOADABLE) as ILoadable).loadState == LoadState.CONSTRUCTED)
				{
					(elementPlayer.element.getTrait(MediaTraitType.LOADABLE) as ILoadable).load();
				}
			}
		}

		private var currentSprite:ScalableSprite;
		
		private var mediaPlayer:MediaPlayerSprite;
		private var elementPlayer:MediaElementSprite;
	}
}        

Как видите, ничего военного в OSMF нет, это всего лишь гениальный по своей архитектуре конструктор. Если этот пример кажется вам простым, то гляньте в исходник флексового CompositionPlayer.zip. В этой вводной статье мы для лаконичности ограничимся малым кодом, а в следующих статьях по OSMF рассмотрим более сложные примеры.

ОК. Я готов положить свою жизнь на алтарь медиапотока. Куда платить членские взносы?

Никуда. Все это я даю вам сегодня бесплатно:

• Качайте фреймворк OSMF c ужасными примерами
• Читайте доку по OSMF, а хотите — допишите ее
• Требуйте нужных вам фич или багов (список фич)
• Спрашивайте дурацкие вопросы и отвечайте на форумах
• Знакомьтесь с открытым видео-плейером OVP.
• Осваивайте разметку презентаций на SMIL.
• Исходники из этой статьи: Flex CompositionPlayer.zip и Flash MediaPlayerTest.zip
• Медитируйте на спеке и напишите продолжение этой статьи (опенсорс ведь!)
• Бросайте все и делайте новый YouTube
• Или не делайте

Целую,
Рострошитель

P.S. Продолжим тему в Крыму, на ITSea-2009?

Cозданный на основе фреймворков Degrafa и Flex 3 бесплатный движок для визуализации данных Axiis можно применять в любых проектах (лиценизя — MIT).

Ссылки: примеры, документация, исходный код, скачать Axiis.

1 июня выйдет Flash Builder 4

Если хотите оценить новые возможности четвертого билдера как можно скорее, не планируйте важных дел на первое июня 2009 года: выходят публичные беты FlashBuilder4 и LiveCycle Data Services (LCDS).

По инициативе Дениса "mrJazz" Шереметова, при поддержке Дениса "Хитрого" Романко в качестве бета-тестера, Роман Павленко, Денис "Barmaleychik" Волох, Ростислав "RostislavR" Сирык и Дмитрий "Reijii" Кочетов перевели на русский язык официальную документацию по одному из самых стройных и строгих фреймворков для создания приложений в AcrionScript и не только:

PureMVC на русском: реализация, идиомы и лучшие практики.doc (450 Кб).

Надеемся, документ окажется полезным для многих, кто его ждал, и нужным сюрпризом для тех, кто впервые сталкивается с подобным безобразием. Приятного чтения!

Мой бывший коллега по цеху spreadshirt Jens Struwe решил завести блог на своем сайте Russischer Bär. И его первый пост Why we need a collection framework in ActionScript говорит о довольно неплохом начале.

Содержание статьи:

• Introduction to collections
  From built-in containers …
  … to collections
  Classification of collections
• 10 reasons for a collection framework
• Requirements to a collection framework
  Software requirements
  Acceptance criteria
• Existing solutions
• Lite Collections for ActionScript

Статья очень легко читается и будет полезна пользователю с любым уровнем программирования на actionScript.

Кто-то должен был сравнить в одной статье самые популярные MCV-фреймворки для Flex и он это сделал: статья "Choosing a Flex framework" от Jeremy Wischusen (+ComparingFlexFrameworks.pdf).

Update: FrameworkQuest 2008