Злобрый волшебник ([info]pajasu) wrote,
@ 2008-05-23 16:12:00
Previous Entry  Add to memories!  Tell a Friend  Next Entry
Entry tags:td-promo

Бонусы • Обзор флэш для создания промо-сайтов

Adobe Flash в промо-сайтах
Сергей «00--00» Кулинкович


Этот ТД-Промовский бонус предназначен для тех, кто еще не работал с флэш самостоятельно (мне, например, пока удавалось только через медиума), так что пусть будет открыт для всех.

Flash широко используется при создании современных промо-сайтов. Атмосфера – одна из важнейших характеристик, определяющих эффектность и, соответственно, эффективность промо-сайта. Использование интерактивности, анимационных эффектов, видео и звука открывает новые возможности в создании ярких, атмосферных работ.

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

Ознакомиться с лучшими образцами flash промо-сайтов можно по адресу http://www.thefwa.com.


Краткий обзор технологии flash

Технология flash основана на интерпретации swf файлов flash плеером. Flash плеер – специальная программа, предназначенная для просмотра мультимедийного содержимого. Flash плеер может быть встроен в браузер в виде Flash плагина, либо установлен на компьютер или мобильное устройство в виде отдельной программы.

Сами flash–ролики представляют собой swf файлы, которые могут быть созданы в среде разработки Adobe Flash. Последняя версия – Adobe Flash CS3. Ряд пакетов сторонних разработчиков поддерживает экспорт в формат swf (Например, Adobe Illustrator, Corel Draw). С помощью Flash Player могут быть воспроизведены любые ролики, формата swf, вне зависимости от среды разработки.

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

Adobe Flash обладает встроенным редактором векторной графики. Векторные иллюстрации могут быть созданы прямо в пакете Adobe Flash, либо импортированы из файлов других векторных форматов (File – Import).

Flash-содержимое может быть встроено в веб-страницы. Для этого используются специальные HTML таги, описывающие свойства flash-ролика, адрес swf файла и другие параметры.



Версии Flash Player

История пакета Flash насчитывает уже 13 лет. C развитием технологии выходили новые версии Flash Player. Текущая версия – Flash Player 9. В ближайшее время, готовится к выходу Flash Player 10.

Каждая последующая версия Flash плеера поддерживает новые технологии. Так, swf файл, созданный с применением новых эффектов или возможностей последней версии flash может не проигрываться должным образом в старых flash-плеерах.

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

Официальная статистика использования различных версий Flash Player пользователями Интернета доступна тут. Следует отметить, что существуют основания ставить под сомнение достоверность результатов такой статистики. По крайней мере, существуют альтернативные источники данных, свидетельствующие о несколько более низком распространении flash плееров последних версий.

Adobe Flash CS3 позволяет публиковать flash-ролики для конкретной версии flash player(File – Publish Setings). Последнюю версию flash плеера можно скачать.


Action Script

Flash обладает встроенным языком программирования Action Script (AS). Action Script позволяет создавать впечатляющие программные анимационные эффекты, добавлять интерактивные элементы, программно управлять объектами ролика, взаимодействовать с серверными скриптами и базами данных.

Каждой версии языка присущи свои особенности. Последняя версия языка — AS 3.0 — обладает большими возможностями и производительностью по сравнению с предыдущими, но в то же время, требует более глубоких знаний основ объектно-ориентированного программирования для эффективного применения. Action Script 2.0 отлично подходит для тех, кто только начинает изучать flash. С помощью AS 2.0 решается большинство практических задач, которые могут возникнуть при создании промо-сайта.
Версия AS связана с версией Flash Player. Так, AS 3.0 код не будет корректно выполняться в старых версиях Flash Player.


Основы Adobe Flash

Мы будем работать с пакетом Adobe Flash CS3. Демонстрационную версию среды разработки Adobe Flash CS3 можно скачать по адресу
http://www.adobe.com/go/tryflash.

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


Анимация в Flash

Временная шкала

В верхней части Adobe Flash CS3 расположена временная шкала, содержащая набор кадров. По аналогии с кинопленкой, каждый кадр временной шкалы представляет собой изображение текущего положения объектов в соответствующий момент времени. При быстром переходе между кадрами образуется некоторая анимационная последовательность. Скорость воспроизведения (количество кадров в секунду, FPS = Frames Per Second) может быть задана вручную. Modify – Document – FPS. Увеличивая значение FPS, частота обновления ролика увеличивается, что позволяет добиваться плавных переходов, но в то же время растет и требовательность ролика к вычислительным ресурсам. Таким образом, значение FPS чаще всего определяется опытным путем.

Motion Tween

Автоматическая анимация объекта. Этот тип анимации основан на автоматическом построении анимации перехода одного состояния объекта в другое. Для создания Motion Tween достаточно задать лишь начальный и конечный кадры анимации. Все остальное Flash сделает сам. В Motion Tween объект не изменяется. Может измениться только одно или несколько его свойств, например, положение, размер, цвет.

Видео создания Motion Tween (2.79 Мб). Скачать исходник (47 Кб).


Shape Tween

Анимация формы. Flash позволяет создавать анимационные последовательности перехода одной формы в другую. Форма, здесь – некоторый векторный примитив. Принцип создания анимации Shape Tween аналогичен Motion Tween – последовательность создается автоматически, на основе содержания начального и конечного кадров анимации.

Видео создания Shape Tween (2.33 Мб). Скачать исходник (48 Кб).


Покадровая анимация

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

Видео создания покадровой анимации (4 Мб). Скачать исходник (69 Кб).


Программная анимация

Этот тип анимации основан на программном управлении объектами во времени с помощью Action Script. Замечательными особенностями программной анимации являются:

Производительность
Программная анимация зачастую требует гораздо меньше вычислительных ресурсов, чем другие типы анимации в Flash. Программное управление объектами отлично подходит для создания сложных анимационных сцен.

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

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

Подробнее с программной анимацией можно ознакомиться здесь.


Интерактивность

В основе интерактивности — Action Script. C помощью AS можно отслеживать текущее положение курсора мыши, клик, нажатие клавиш, звук в микрофоне, изображение принимаемое с вебкамеры пользователя. Данные, полученные таким образом, связываются с переменными, которые затем могут быть использованы для определения свойств объектов.


Flash-техдизайн

Замечательной особенностью flash является возможность использовать как векторный, так и растровый тип графики в одном flash ролике. Известно, что векторный тип графики основан на математическом описании графических примитивов, а не на описании каждой точки матрицы пикселей как это реализуется в случае растрового изображения.
Таким образом, проблема «лесенок» может быть решена заменой проблемных частей растрового изображения векторными эквивалентами.

Использование векторной графики при построении градиентов позволяет сократить количество jpg артефактов – вечных спутников техдизайнера. Обычный линейный градиент в векторной графике описывается только вектором распространения и цветами начальной и конечной точки, само изображение формируется интерпретатором автоматически на основе этих данных. Таким образом, использование векторной графики для создания градиентов позволяет получать цветовые переходы максимального качества.


Видео в flash

Flash открывает новые возможности создания атмосферных промо-сайтов с использованием видео. Технология flash отлично подходит для трансляции видео через Интернет. В промо-сайтах видео используется чаще всего для добавления визуальных эффектов, созданных в сторонних программах (After Effects, 3D MAX) и для проигрывания видео-фрагментов, посвященных продвигаемой продукции или услуге. Так, сайты современных голливудских фильмов содержат трейлер – короткий ролик о фильме, который можно посмотреть прямо на сайте.

Для воспроизведения видео в flash роликах, используется видео, формата flv. В комплекте с Adobe Flash CS3 идет пакет Adobe Flash CS3 Video Encoder, предназначенный для перевода в формат flv обычных видео файлов.

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


ГОРАЗДО больше про флэш — тут: http://00--00.livejournal.com.


(12 comments) - (Post a new comment)


[info]skillup
2008-05-23 01:55 pm UTC (link)
Круто :)

(Reply to this)


[info]frais_web
2008-05-23 03:08 pm UTC (link)
Спасибо :)

(Reply to this)


[info]ashergie
2008-05-23 07:48 pm UTC (link)
о! продолжим. спасибо

(Reply to this)


[info]l1r
2008-05-24 09:41 pm UTC (link)
Спасибо, хороший обзор.

(Reply to this)


[info]flashtuchka
2008-05-25 08:56 pm UTC (link)
>(мне, например, пока удавалось только через медиума)< ©
=))))) забавно))
---
хороший релиз.

(Reply to this) (Thread)


[info]rajaka
2008-06-09 05:46 pm UTC (link)
гениальный юпик :)

(Reply to this) (Parent)(Thread)


[info]flashtuchka
2008-06-10 03:46 am UTC (link)

(Reply to this) (Parent)

(Reply from suspended user)

[info]nikirishka
2008-05-28 09:00 am UTC (link)
спасибо!

(Reply to this)


[info]rajaka
2008-06-09 05:44 pm UTC (link)
Респект и Спасибо :-)

(Reply to this)


[info]drsensey
2008-08-11 11:09 am UTC (link)
Спасибо за информацию

(Reply to this)


[info]pussycatmeowka
2009-11-05 11:34 pm UTC (link)
м, спасибо, обзор мне очень помог ::)

(Reply to this)


(12 comments) - (Post a new comment)

Create an Account
Forgot your login or password?
Login w/ OpenID
English • Español • Deutsch • Русский…