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

Если вы до сих пор думаете, что модули во Flex — это нечто трудное и недоступное, то следующее восьмиминутное видео может вам пригодиться: модули — это просто.

Я не большой поклонник видео-туториалов, но этот действительно быстр и понятен.

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?

Завершенная недавно группой ниндзя-добровольцев документация к PureMVC на русском языке "Идиомы реализации и лучшие практики" PureMVC принята автором PureMVC Клиффом Холлом к публикации и уже размещена на официальном сайте. Клифф сообщил об этом отдельным анонсом: Russian Translation of '[PureMVC] Best Practices' Now Available. Русский язык стал пятым после английского, немецкого, китайского и французского.

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

PureMVC.TV: смотрим и слушаем FAQ

Автор фреймворка тоже не сидит сложа руки. Он открыл новый ресурс PureMVC.tv с уроками по PureMVC и смежным темам, например, конечные автоматы и PureMVC.

Хочу отметить элегантность самого проекта PureMVC.TV. Это приложение, сделанное на базе PureMVC Multicore. Его содержимым является набор слайдов. Один слайд — это картинка плюс голос диктора к ней. Каждый слайд самодостаточен и является завершенной единицей информации. Слайды можно объединять в презентации, типа упоминавшегося выше урока по конечным автоматам. Так из отдельных слайдов-модулей создаются целые темы, не препятствующие при этом и восприятию отдельных слайдов.

Получается уникальный движок для презентаций, где голос докладчика не записан одним неделимым часовым куском, но наоборот, каждому слайду-картинке соответствует кусочек голоса.

При этом поддерживаются ссылки вглубь контента, что позволяет легко показывать отдельные слайды, например, диаграмму конечного автомата на примере закрывающейся двери.

Сейчас там всего четыре презентации, и последняя рассказывает о том, как был создан PureMVC.TV, и как при его создании возникла новая библиотека MediaTurbine, позволяющая создавать сайты подобного формата с минимальными усилиями: расшираем один класс, задаем конфигурацию в CSS и XML, и готовим медиа-ассеты в картинках и звуке. Отличная демонстрация фреймворка!

Приветствую вас, RIA-люди!
В этот замечательный день, выходит первый выпуск моего видео-журнала Flash Skill Tokita Edition. Мой видео-журнал не учит, он просто показывает, как делаются всякие интересные штуковины на Flash/Flex/AIR. Конечно, оформление видео-журнала очень страдает, а это я объясню нехваткой времени, т.к. текущий месяц у меня очень наряжен в плане учебы (экзамены, ЦТ), но очень хотелось сделать первый выпуск) Следующие выпуски будут более интересные и лучше оформлены, т.к. рассказать есть еще много чего.
Содержание FSTE №1:
1) Приём Firk Animation(анимация)
2) Анимация Флага (анимация)
3) Интересные фильтры (анимация)
4) Определение области лица на видео (AS3)
Первый выпуск моего видео-журнала, так сказать тестовый, хочу посмотреть на реакцию людей, получить достойную критику, дабы улучшить его в будущем. Хочется, чтобы он был интересен не только кодерам, но и аниматорам. Честно, я старался)))

Скачать
Если не хотите скачивать, открывайте Adobe Media Player и дайте ему верхнюю ссылочку.
Смотреть его онлайн

P.S. Следующие выпуски будут уже с поясняющим текстом, интервью с интересными людьми, обзорами новых технологий.

Дебаггер-монстр De MonsterDebugger оказался так хорош, что вот уже и сам Ли Бримелоу показывает, как им пользоваться.

Пока думали-гадали, какой плагин станет лидером видеотехнологий, следили за схватками флешей и сильвэрлайтов, Firefox 3.5 beta 4 выходит с поддержкой тэга video (там еще много всего). С этого момента вопрос о том как вставлять видеоролики в страницы, звучит иначе, и с каждым месяцем ответ на этот вопрос будет меняться.

Пройдет менее года, и вставлять видео в html-страницы сможет любой. Для Файерфокса напишут пару сотен видео-плагинов. Майкрософт тоже что-то сделает и не даст никому заскучать. А затем Гуглохром быстро и очевидно ассимилирует лучшие наработки html-video в своей новой версии, и гугловский же юТюб выпустит тестовую версию своего сервиса, работающую на голом теге video без всяких плагинов. В Chrome эта версия будет работать лучше, чем везде. Флэш, как самая старая видеотехнология, будет меняться медленнее остальных, да ему это уже и не нужно.

Все вышеописанное может проистекать в тысяче других вариантов. Сейчас ясно: дни полного доминирования плагинного видео в сети сочтены. Обновите свои бизнес-планы.

Update: оказывается, многие не в курсе, что

в стандарте HTML 5 есть такие новые элементы: section, video, progress, nav, meter, time, aside, canvas. Эй.

В четверг, 12 февраля 2009 г., в 7:00 PM (PST/GMT +8), что равно 6 утра 13 февраля в Москве и 5 утра 13 февраля в Киеве, состоятся дебаты Кевина Хойта (Adobe) и Сэма Стоукса (Microsoft).

Два евангелиста будут сражаться в словесном бою за контроль над будущим компьютеров в Bronco Student Center (Ursa Minor) Калифорнийского Политехнического Университета в Помоне. Microsoft Corp. и Adobe Systems Inc. представят своим противникам доказательства собственного доминирования. Adobe (создатели Photoshop, Flash и Dreamweaver) подстрекают разработчиков на создание богатых медией настольных компьютерных приложений, работающих независимо от наличия интернета в Adobe Integrated Runtime (AIR). Microsoft предлагает разработчикам создавать богатые медией приложения, которые могут работать онлайн через технологию Silverlight.

Дебаты будут транслироваться онлайн в двух вариантах:

1. Для пользователей каналов со средней пропускной способностью.
2. Для пользователей с низким бандвихом (Low Bandwidth).

Кстати, сейчас там показывают весьма достойный балет (update: показывают с перерывами).

Ли радует вторым выпуском видео-журнала ФЛЭШЕР! c Даг Маккуном, скачать MP4 (396 Мб).

В журнале применяется гениальный в своей простоте прелоадер — надпись "Just Wait". // via Nicolas

Вышел первый выпуск видео-журнала Flasher Magazine:

В пилотном выпуске:

• Разговор с Chuck Freedman из Ribbit.
• Обсуждение Flash Catalyst с Ryan Stewart из Adobe.
• Путешествие по юго-западу США.
• Как делать видео-туториалы для сайта GotoAndLearn.

Можно скачать весь выпуск целиком (331 Мб), а также исходники видео-проигрывателя, используемого в этом онлайновом журнале. Автор этой красоты, Ли Бримелоу, лишь просит изменять графический стиль проигрывателя, если вы будете использовать его в своих проектах.

Update, 3 октября 2009: исходники к этому видео — LagrangeApproximatorSample.

В 16-минутном видео с RAFPUG-12 в Самаре математик Александр Сергеев рассказывает, чем люди его профессии могут пригодиться флэш-разработчикам:

Александр Сергеев имеет идеи и нередко их реализует. Является соучастником проекта Bezier.ru (в видео он касается темы кривых) и создателем построенного на флэш-виджете сервиса прозрачной авторизации OneFace.ru, снискавшего в рунете популярность среди авторов блогов. Может и советом по скайпу помочь.

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