Программа для создания флэш анимации. Как создать флеш анимацию. Сравнение бесплатной версии флеш-редактора Advanced Effect Maker Free Edition с коммерческой версией Commercial Edition

Эта статья подскажет вам, как при помощи простых шагов начать знакомство с Adobe Flash CS5. Тема урока простая анимация, мы создадим ее не вникая в сложности интерфейса и программы.

Создание нового flash-документа

Открываем программу и создаем новый документ «ActionScript 3.0» .

Нарисуем объект для последующей анимации

Теперь нарисуем окружность. Выбираем на правой панели инструмент «овал» и зажав левую кнопку мыши и кнопку «shift» на клавиатуре рисуем на белом фоне круг.

При помощи инструмента «Selection Tool» выделяем только что созданный объект, щелкнув по нему мышью или захватив в квадратное выделение.

Преобразовываем объект в символ для простой анимации

Для дальнейшей работы нужно преобразовать объект в символ. Так как окружность уже выделена, нажимаем правую кнопку мыши и в контекстном меню выбираем «Conver to Symbol» .

Из списка «Type» выбираем «Graphic»

Теперь вокруг нашего объекта должен появиться синий квадрат.

Создаем классическую анимацию (Classic Tween)

Для того, чтобы создать анимацию нужно обозначить «ключевой кадр» .

На нижней панели находится шкала анимации, выделяем двадцать пятый кадр и нажимаем правую кнопку мыши, в появившемся контекстном меню выбираем «Insert Keyframe» .

Выделяем окружность и, зажав левую кнопку мыши, перемещаем ее вправо.

Выделяем первый кадр на шкале анимации и в главном меню вверху, в пункте «Insert» выбираем «Classic Tween» .

Просмотр созданной анимации

Теперь можем посмотреть анимацию. В главном меню, в пункте «Control» выбираем «Play» .

Давайте добавим эффект «исчезновения» окружности. Для этого снова выделяем объект и в правой панели в меню «color effect» выбираем «alpha» , ставим значение «0» .

Посмотрим, что получилось. Переходим в пункт «Control» выбираем «Play» .

Вы не задумывались, что скрывается за красивой анимацией баннеров в интернете? Или за новомодными мультиками, созданными с помощью компьютерных технологий? Чаще всего в их основе лежит «плоть », точнее так переводится с английского название технологии Flash . Сегодня мы поговорим о флеш анимация для сайта:

Технология Flash

Мультимедийная основа, была разработана компанией Macromedia . Но после ее поглощения (слияния ) все права на технологию перешли новому владельцу — компании Adobe Systems .

Область современного применения Adobe Flash :

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

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

• Реализация мультимедийных возможностей – для прослушивания аудио и воспроизведения видео на сайтах часто используют медиа плееры, созданные на основе Flash . Их разработка включает в себя использование одного из скриптовых языков (чаще JavaScript ):

• В средствах интернет-рекламы – чаще всего технология используется для создания анимированных баннеров. Они подразумевают не только проигрывание мультимедийной рекламы, но и некое взаимодействие с пользователем на игровой основе.

Основы и инструментарий для разработки Flash

Для создания флеш анимации чаще всего используется традиционный инструментарий от Adobe :

• Adobe Flash Professional – программа для создания интерактивной анимации (аниматор );
• Adobe Flash Builder – среда для создания интерфейса веб-приложений;
• Adobe Flash Player – интегрируемый в браузер плеер для воспроизведения Flash .

Кроме него воспроизводить мультимедийное содержимое такого типа может ряд сторонних приложений. Наиболее популярными из них являются Gnash , QuickTime и некоторые другие:

Данная технология позволяет отображать любой тип графики (растровую, векторную, 3D ). А также поддерживает потоковую ретрансляцию аудио и видео данных. Специально для мобильных устройств была разработана облегченная версия Flash Lite .

Основным стандартом для флэш-файлов является расширение SWF . Аббревиатура расшифровывается как Small Web Format . Видео, записанное в Flash , имеет файловые расширения FLV , F4V .

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

Размер файла флэш приложения одинаков для всех пользователей независимо от технических характеристик экрана (разрешения ).

Интерактивная анимация на Flash основана на морфинге (векторного типа ), при котором происходит медленное перетекание между ключевыми кадрами. Для воспроизведения данных используется флэш-плеер, работа которого во многом схожа с работой виртуальной машины JavaScript . Программная составляющая технологии реализована с помощью языка ActionScript .

К недостаткам технологии можно отнести следующие моменты:

• Сильная нагрузка на центральный процессор клиентской машины. Это связано с низкой эффективностью виртуальной машины флэш, встраиваемой вместе с проигрывателем в браузер пользователя;
• Высокая вероятность возникновения ошибок – проигрывание флэш анимации может происходить с высокой вероятностью возникновения ошибок. Причем сбои в проигрывании Flash негативно влияют на работу всего клиентского приложения (браузера ). Это связано это с недостаточным контролем отказоустойчивости программного кода при создании флэш-приложений;
• Невозможность индексирования – весь текстовый контент, отображаемый в содержимом Flash , не участвует в процессе индексации. Данное ограничение особенно проблематично для тех ресурсов, которые созданы на основе этой технологии.

Обзор стороннего программного обеспечения для создания Flash

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

Кроме создания и редактирования флэш редактор «умеет » работать со всеми остальными видами веб-анимации (GIF , HTML и другие стандарты):

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

Для того чтобы понять, как сделать флеш анимацию в этом приложении, воспользуемся встроенными шаблонами. Диалоговое окно «New From Template » появляется сразу после запуска программы. Кроме того его можно вызвать через пункт главного меню «File ». Среди предлагаемых вариантов мы выбрали создание баннера:

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

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

После компиляции проекта и закрытия окна мастера можно просмотреть получившийся ролик во встроенном проигрывателе. Для этого нужно нажать на зеленую стрелку вверху:

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

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

Кажется, Дима Билан прав, говоря, что невозможное - возможно:). Еще совсем недавно веб-разработчикам приходилось либо пиратствовать, либо платить довольно большие деньги за возможность работать с флеш-анимацией. И вот, наконец, настал тот час, когда появился третий полноценный вариант - использовать бесплатный flash-редактор.

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

Сегодня же я Вас познакомлю с вполне современным флеш-редактором, который может практически на равных соперничать с именитым Adobe Flash - Vectorian Giotto .

Сравнение Vectorian Giotto с платным аналогом

Как видим, разработчики Vectorian Giotto постарались на славу и попытались вместить в свою программу максимально возможный набор функций, аналогичных Adobe Flash. Кроме того, большинство «горячих» клавиш тоже совпадают, поэтому тем, кто привык работать с Эдобовским редактором, не составит особого труда перейти на бесплатную платформу Vectorian Giotto!

Ну, а на «десерт» в бесплатном редакторе есть еще и то, чего иногда так не хватает «старшему брату» - встроенная библиотека анимационных эффектов, которые придутся по вкусу особенно тем, кто создает флеш-баннеры.

Подготовка к работе

Для начала работы с Vectorian Giotto нам потребуется скачать архив с инсталлятором, который весит, между прочим, всего 8 мегабайт! Когда архив будет загружен, откройте его и запустите файл VectorianGiotto.exe .

Несмотря на то, что установка (да и сама программа, как ни прискорбно:)) англоязычная, затруднений она вызвать не должна, поскольку менять что-либо в предложенных по умолчанию настройках необязательно. Просто кликаем кнопку «Next» несколько раз и дожидаемся окончания процесса инсталляции;).

Первое знакомство с интерфейсом

По окончанию установки, если мы ничего не меняли в стандартных настройках, перед нами появится во весь экран рабочее окно Vectorian Giotto:

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

Строка меню. Это панель, на которой находятся все менюшки программы Vectorian Giotto. При работе с анимацией Вам могут понадобиться такие разделы, как «File» (для сохранения и экспорта в SWF своей анимации), «View» (для настройки параметров отображения рабочей области), «Modify» (для управления параметрами текущего документа и работы с библиотекой эффектов) и «Window» (для настройки отображаемых модулей и панелей программы).

Основная панель инструментов. Сюда вынесены кнопки управления действиями проекта и панель воспроизведения анимации.

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

Раскадровка (или таймлайн). Позволяет управлять ячейками для кадров и созданными слоями.

Панель управления цветом. С ее помощью Вы сможете быстро менять цвет ранее созданных фигур. Также служит для выбора типа заливки объектов Вашей анимации (сплошная, градиентная и т.п.).

Рабочая область. Представляет собой виртуальный лист «бумаги», предназначенный для рисования Ваших анимаций:).

Редактор ActionScript. Если Вам нужно создавать не простые баннеры, а нечто более сложное, включающее кнопки и всевозможные интерактивные объекты, то без редактора скриптов Вам не обойтись.

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

Панель свойств. У каждого объекта во флеше есть определенные свойства. Для управления ими и служит данная панель.

Панель трансформации. Позволяет быстро изменять размеры и положение выделенного элемента анимации.

Библиотека элементов. Представляет собой список созданных или импортированных объектов, которые могут быть (и неоднократно!) вставлены в анимацию.

Бесплатная программа для создания флеш-анимации с помощью готовых апплетов.

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

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

Для специалиста не составит особого труда сделать небольшой анимированный flash-баннер, однако, что делать остальным непосвященным? Если скрупулезное изучение языков программирования не входит в Ваши ближайшие планы, то можно как всегда прибегнуть к помощи специализированного софта. Сегодня мы ознакомимся с основами работы в программе Advanced Effect Maker .

Эта утилита позволяет создавать всевозможные flash и JavaScript эффекты, причем как свои собственные «с нуля», так и на основе готовых шаблонов! Advanced Effect Maker существует в нескольких редакциях, которые отличаются количеством готовых эффектов и степенью свободы пользователя. Сравним максимальную и бесплатную конфигурации:

Сравнение бесплатной версии флеш-редактора Advanced Effect Maker Free Edition с коммерческой версией Commercial Edition

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

Установка программы

Установка Advanced Effect Maker происходит стандартным образом, поэтому перейдем сразу к непосредственной работе с программой:

При первом запуске нам предложат ознакомиться с лицензионным соглашением. Чтобы принять его нажмите кнопку «I agree». После этого можно приступать к изучению интерфейса утилиты:

Интерфейс и работа с редактором

Несмотря на английский язык, здесь все просто и наглядно. Окно Advanced Effect Maker разделено на две части. В левой находится всего две большие кнопки: первая для входа в галерею доступных эффектов, а вторая — для добавления дополнительных апплетов (это если Вы захотите купить их;)). В правой же части мы видим каталог доступных шаблонов с подразделами и окном предпросмотра, а также область редактирования эффекта.

Чтобы начать редактировать нужный шаблон, достаточно нажать на его изображение, а если хочется просто посмотреть, как он работает, тогда жмите надпись «Preview» под картинкой:

При открытии нужного эффекта может появиться сообщение об уже существующем файле. Если такое произошло, то просто игнорируем его, нажимая кнопку «Ok»:

Если шаблон открылся успешно, мы сможем увидеть несколько вкладок, которые содержат всевозможные настройки:

Настройки программы и создание анимации

Первая вкладка — «General». Здесь содержатся общие настройки проекта. Обычно это размеры (ширина — width и высота — height), имя (file name), качество будущего файла (quality), а также режим окна флеш-ролика (window mode).

Вторая вкладка — «Color», как видно из названия, отвечает за цвета, используемые в проекте. Здесь все предельно ясно, поэтому перейдем к следующей — «Messages»:

Здесь у нас имеется два поля. В первое поле (слева) вводим текст, который нам нужно вывести со спецэффектом, а во втором — ссылку, по которой пользователь перейдет, кликнув по нашему баннеру. Плюс Advanced Effect Maker в том, что ввести мы можем неограниченное количество строк текста (равно как и ссылок), но главный минус — отсутствие поддержки русского языка:(.

Последующие две вкладки служат для управления шрифтами (Fonts) и свойствами анимации (Others), соответственно. Один нюанс: если Вы хотите использовать альтернативные TTF-шрифты, их придется предварительно конвертировать для совместимости с Advanced Effect Maker. Для этого следует из меню «Tools» вызвать инструмент «Convert Fonts» и, выбрав нужный шрифт, нажать кнопку «Convert»:

Когда все изменения будут внесены, мы можем нажимать кнопку «Create Applet». После чего в папке назначения проекта будет создано два файла: SWF (непосредственная анимация) и HTML (содержит инструкции по внедрению полученной анимации в код Вашей странички:

Сохранение результатов работы

Однако это еще не все. С Advanced Effect Maker Вы можете создать свой собственный эффект на базе уже существующего, либо полностью «с нуля»! Для этого следует перейти в меню «Tools» и активировать пункт «Plugin Maker»:

Здесь сначала потребуется задать имя для нового проекта, а также некоторые другие параметры (не обязательно). После этого можно будет нажимать кнопку «Create Applet», и мы перейдем непосредственно в окно редактора эффектов:

Здесь присутствует несколько кнопок, которые позволяют ввести в сценарий будущего эффекта некоторые стандартные функции. Проблема состоит только в том, что все нужные переменные и значения придется вписывать вручную самостоятельно, а здесь уже требуются кое-какие навыки программирования на ActionScript или JavaScript:(.

Выводы

Advanced Effect Maker может прийтись по вкусу начинающим веб-дизайнерам, поскольку позволяет без особых усилий создавать довольно эффектные баннеры, анимированные меню, слайдшоу, и даже небольшие игры (типа пятнашек). Недостаток же в виде преаплодера (если он имеется в выбранном эффекте) можно устранить, используя специальные программы-декомпиляторы SWF-файлов (в том числе и бесплатные) ;).

Удачи Вам во всех начинаниях и творческих успехов!

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.