Как создать flash анимацию. Основы анимации в редакторе Flash

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

Флеш редактор – это программа для создания flash анимации и редактирования уже готовых флеш роликов.

Формат FLA - это исходный документ вашего клипа. Открыв его, вы попадаете в программу Macromedia Flash и можете дальше редактировать клип.

Формат SWF - это исполняемый файл Flash, при "клике" мышью на нем вы имеете возможность просмотреть клип с помощью программы Macromedia Flash Player.

Анимация с помощью Adobe Flash Professional

Adobe Flash Professional CS3 – достоинства и функциональности данной программы можно описывать очень долго. Данная программа является безусловным лидером в среде флеш технологий. Adobe Flash Professional пользуются, как профессиональные разработчики Web-сайтов, так и flash дизайнеры.

С помощью этой программы можно реализовать во флеш даже самую больную фантазию. В общем если Вы решили создавать профессиональные анимированные флеш файлы , то Adobe Flash Professional – это именно та программа, без которой Вам не обойтись.

Объём зависит от версии от 500 Mb.

На данный момент Adobe Flash Professional CS5 - новая версия программы для работы с анимацией и мультимедиа.

ОС: Windows XP/Vista/7

Скриншот программы:

скачать Adobe Flash Professional CS3

Возможно, для начинающего web мастера создание флеш анимации с помощью программы Adobe Flash Professional покажется, чем то сложным и не досягаемым.

В этом случаи не стоит отчаиваться и бросать начатое. Попробуйте свои флеш идеи с программой Swishmax.

Swishmax – флеш редактор

SwishMAX – это альтернативная программа с дружественным и простым интерфейсом для создания flash-анимации, которая является менее функциональной, по сравнению с предыдущей, но при этом позволяет получить результат хорошего качества. Главное преимущество донного flash редактора - это простота использования. Даже начинающий пользователь, имея под руками видео уроки, за короткое время сможет создать с ее помощью профессиональные флеш - ролики.

Объём: 9.27 MB.

Язык интерфейса - русский есть.

Операционная система: Windows 98/Me/NT/2000/XP

Скриншот программы:

скачать Swishmax

Alligator Flash Designer

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

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

Здесь так же можно указать OnClick или OnOver.

Объём: 5.3 MB.

Язык интерфейса - русский есть.

ОС: Windows XP/Vista/7

Скриншот программы:

скачать Alligator_Flash_Designer_7.0

Ещё одна программа, которая не является flash редактором анимации, но её возможности необходимы для начинающего веб дизайнера.

Flash Decompiler Trillix

Flash Decompiler Trillix – основное предназначение этой программы - экспорта SWF файлов обратно в FLA формат одним нажатием кнопки мыши. Извлекает все объекты Flash из SWF файла и сохраняет их во FLA файл, который в дальнейшем можно редактировать во Flash.

Достоинство Flash Decompiler - редактирование звуков, изображений, цвета, градиента, линий, динамических текстов и ссылок без конвертации во FLA.

Объём: 7.27 MB.

Язык интерфейса - русский есть.

ОС: Windows XP/Vista/7

Скриншот программы:

скачать Flash Decompiler Trillix

October 13, 2014

Анимация бывает нескольких типов. Анимировать можно положение или форму фигуры, перемещая точки, тем самым трансформируя ее в другую фигуру. Можно так-же, анимировать свойства этой фигуры, такие, как цвет, прозрачность, расположение и настройки градиента, цвет, толщину и тип обводки. Это все касается фигур, нарисованных в рабочей области или внутри символов и называется Shape Tween . В процессе анимации можно пользоваться, либо ключевыми кадрами, либо покадровой анимацией. Ключевая анимация, конечно, проще, так как, изменять нужно не все кадры, часть их, между ключевыми, изменяется автоматически. Но, иногда бывает необходимость и в покадровой анимации. Когда какую использовать - на ваш выбор.

Motion Tween - второй способ анимации. Используется для анимации символов, таких, как Graphic , Movieclip и Button . Здесь доступны другие свойства. При помощи Motion Tween можно анимировать положение символов, их масштабирование, вращение, а так же параметры, находящиеся в селекторе Color панели Properties . К ним относятся: яркость, тонирование символа цветом, прозрачность и набор параметров Advanced, который сочетает в себе три предыдущие. При ключевой анимации поддерживается Easing , то есть, анимация с ускорением и замедлением, что весьма полезно при реалистичной анимации персонажей, да и любых других объектов, которые должны двигаться реалистично.

Shape Tween

Нарисуйте в рабочей области прямоугольник, с обводкой черного цвета и толщиной линии в 2-3 пикселя. Если он нарисуется с заливкой, выделите ее одиночным щелчком и удалите. Сейчас нам понадобится только обводка.

На таймлайне, щелкните правой кнопкой на вновь созданном кадре и выберите Create Shape Tween . Ключевой кадр станет зеленого цвета. Далее, выделите щелчком, кадр 10 на том-же слое и нажмите "F6" для создания второго ключевого кадра.

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

Это и есть ваша первая анимация, поздравляю! Но, два ключевых кадра, еще не есть анимация. Щелкните на таймлайне на кадре 10, выделив его. Вместе с ним выделится все, что находится в рабочей области на этом кадре. Снимите выделение с фигуры и подведите курсор мыши к верхней горизонтальной линии нашего прямоугольника, чтобы рядом с курсором появился значок дуги. Это позволит изгибать сегменты фигуры. Схватите сегмент за середину и протащите немного вниз, чтобы он изогнулся. теперь можно посмотреть, что получилось. Протащите Playhead по вашим 10-ти кадрам анимации и посмотрите, как фигура трансформируется.

Вот, что получилось у меня. Если я что-то объяснил непонятно, . Можно усложнить анимацию, добавив еще и заливку. Но делать это нужно на другом слое. Дело в том, что при построении ключей в сложной геометрии (а две одинаковые формы, лежащие друг на друге - очень сложная геометрия, спросите любого трехмерщика), программа ищет наиболее короткие пути для преобразований, поэтому, неизбежны искажения.

Easing

Сравните эти похожие, на первый взгляд, анимации. Видите разницу?

Да, возде углов, объект замедляется. Это возможно, благодаря функции Ease , которую можно применить к ключевому кадру, независимо от типа анимации, Shape Tween или Motion Tween . Делается это так: выделяете ключевой кадр, в панели Properties появляется такое:

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

рядом есть кнопка Edit . Если вы нажмете ее, появится вот такой график:

С его помощью можно точнее настроить поведение анимации. Если вы пользовались подобными установками, вы знаете, как оно работает. По вертикали идет процентное значение анимации, по горизонтали - кадры, в которых она совершается. Таким образом можно установить несколько точек изменения скорости анимации и отрегулировать их по вашим потребностям. Если снять галку с пункта Use one setting for all properties , становится доступной раздельная регулировка различных параметров. Таких, как положение, вращение, масштабирование, цвет и фильтры.

Анимация по пути

Этот тип Motion tween анимации представляет из себя, движение объекта по пути, который вы заранее построили на отдельном слое, при помощи инструмента Pen , например. Итак, создаем новый слой и рисуем пером, какую-нибудь, кривулину. У меня получилось вот так:

Теперь нам нужен еще один слой с графическим объектом на нем и Motion Tween - анимацией, чтобы прицепить к нему этот путь. Объект можно взять из предыдущего примера. Затем, на слое с путем нужно щелкнуть правой кнопкой мыши и выбрать в меню пункт Guide . Иконка слоя изменится и он станет слоем пути. Далее, нужно перетащить наш слой с графическим объектом, под слой пути. Чтобы он стал под ним и немного правее. Примерно, вот так:

Есть альтернативный путь для создания Guide-слоя. Надо щелкнуть правой кнопкой мыши на слое с графическим объектом и выбрать в меню Add Motion Guide . В этом случае, Guide-слой создастся автоматически.

Теперь нам надо настроить анимацию в двух ключевых кадрах. Дело в том, что, раз наш объект привязан к пути, то анимация возможна только в пределах этого пути. Куда бы вы не двигали объект, он все равно останется на нем. Итак, наша задача, установить начальную и конечную точки анимации. Выделяем первый ключевой кадр анимации и перемещаем объект в начальную точку, потом второй ключевой кадр и двигаем объект к конечной точке анимации.

Создаем во Flash вращающееся солнышко с лучами.

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

Шаг 1.
Открываем Flash и рисуем солнышко с лучиками. Инструменты "Овал" и "Кисть" такие же как в PhotoShop или даже в Paint.

Шаг 2.

Вверху над рабочим листом во Flash есть панель Timelines. С ней и будем дальше работать.
Панель разбита на малюсенькие прямоугольнички, как кинопленка на кадры. В секунду во флэше сменяется 12 кадров. Для поворота солнышка хватит и пары секунд, значит наша анимация займет 24-25 кадров.
Щелкаем левой кнопкой мыши прямо по 25 кадрику на Timelines (не по цифре 25, а в прямоугольничке под ней), а затем нажимаем на клавиатуре кнопку F5 (можно дать команду Insert - Timelines - Frame, но это для Flash CS3, а в других версиях может быть по другому, но F5 работает во всех версиях.)
Кадры от 1 до 25 выделятся серым цветом.

Шаг 3.

В любом месте на выделенных кадрах щелкаем ПРАВОЙ кнопкой мыши и в открывшемся меню выбираем самый верхний пункт "Создать анимацию между " или "Create Motoin Tween ".

Шаг 4.

Серый фон сменится на светло-фиолетовый и на нем появится пунктирная линия.

Шаг 5.

Выбираем последний (25) кадр и в нем щелкаем левой кнопкой мыши, затем нажимаем на клавиатуре кнопку F6 . Пунктирная линия заменяется на стрелочку. А вокруг рисунка появляется голубая рамочка.

Шаг 6.

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

Затем установить курсор мышки рядом с любым уголком рамки, должна появиться полукруглая стрелочка.

Шаг 7.

Чтобы посмотреть, что получается в итоге, надо нажать комбинацию клавиш Ctrl + Enter. Сохраняем как обычно "Файл - Сохранить " или "File - Save ", но при этом наша анимация сохраняется с расширением .fla, а это не то, что нам надо. Поэтому даем команду "File - Export - Export Movie " , проверяем, чтобы тип файла был Gif, выбираем имя и место и сохраняем.
Вот и все! Солнышко сияет вовсю!

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

В данную подборку вошли 50 веб-сайтов трёхмерной Flash-анимации , действительно выделившиеся на общем фоне, привлёкшие к себе небывалое внимание и получившие награды! Перед вами не просто очередной список – эти веб-сайты подскажут вам массу идей, ведь каждый из них – шедевр!

Этот сайт настолько бесподобен, что трудно описать словами! Очень красивая заставка, вслед за которой вам открываются шикарные образцы трёхмерной анимации на просто отличной веб-странице.

Классный веб-сайт с красивыми трёхмерными объектами и анимированными фрагментами. Каждую страницу украшают собственные трёхмерные "изюминки".

Восхитительный шедевр! Огромное трёхмерное пространство, на котором посредством анимации происходит действие игры. Отлично выполнены трёхмерные микшированные переходы для каждой страницы.

Простой, но очень красивый веб-сайт с трёхмерным меню и такими же переходами.

Симпатичный веб-сайт с великолепными трёхмерными воздушными шарами и потрясающей анимацией. Есть у него и ещё кое-что особенное – при отсутствии любых действий со стороны пользователя в течение некоторого времени, у человека-мотора кончается горючее, и он падает с неба – всё это в виде любопытного анимированного фрагмента. Этот сайт был отмечен наградой FWA как "лучший сайт дня".

Это ещё что? А это Coca Cola! Веб-сайт очень оригинальной конструкции, состоящий из множества отдельных под-сайтов, каждый из которых отличается от остальных своими оформлением, эскизом и анимацией.

Прекрасно выстроенный веб-сайт. Отличное трёхмерное подводное пространство. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

Очень элегантный веб-сайт с трёхмерной графикой и анимацией. Трёхмерные переходы тоже потрясающие.

Бесподобное трёхмерное меню. Данное трёхмерное портфолио является отменным образцом стиля под названием "минимализм".

Хорошо выстроенный трёхмерный веб-сайт. Он не просто состоит из трёхмерных элементов, но и в целом, как бы, образует трёхмерное пространство, к тому же, почти все анимированные фрагменты тоже трёхмерные. Хорошая работа.

Прекрасный трёхмерный веб-сайт с отличными эффектами передачи объёма. Просто чудо. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

Интересный веб-сайт на Flash-основе с восхитительной Flash-заставкой и массой трёхмерных элементов.

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

Прекрасный мультяшный веб-сайт. Трёхмерная планета в центре страницы, которую можно вращать с помощью перемещений мыши.

Красивый веб-сайт. Всё вокруг трёхмерное и очень чутко реагирующее на перемещения мыши.

Красивый и простой веб-сайт с трёхмерным объектом в середине страницы.

Прекрасно выстроенный веб-сайт. С отличной трёхмерной анимацией и межстраничными переходами. Здорово и то, что каждая страница управляется перемещениями мыши. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

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

Симпатичная трёхмерная фото-галерея с прекрасно воспроизведённым отражением. Строго и просто.

Веб-сайт хорош на загляденье! Включите веб-камеру, и увидите, как все трёхмерные объекты повторяют ваши движения. А если у вас её нет, то веб-сайт просто будет реагировать на перемещения мыши.

Мультипликационный в оформлении, трёхмерный веб-сайт с мини-играми и всякой всячиной для детей. Очень тонкая работа, замечательное исполнение!

Образцовая работа! Прекрасное трёхмерное меню и анимированные фрагменты. Даже 4 варианта объёмного отображения меню на ваш выбор.

Безусловно классный веб-сайт с потрясающим отображением трёхмерности. Не менее шикарные трёхмерные отражения и эффекты, и, в довершение всего, мини-игра, спрятанная в глубине веб-сайта.

Простой в оформлении веб-сайт с трёхмерным меню навигации в виде планеты. Хороший пример применения библиотеки Papervision3D.

Отличное исполнение. Полностью трёхмерная конструкция. С одной страницы на другую переходишь, как из комнаты в комнату. Трёхмерная анимация высокого качества.

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

Очень интересный корпоративный веб-сайт с трёхмерной анимацией. Эскиз тоже сногсшибательный. Отличная работа.

Любопытный веб-сайт со множеством трёхмерных объектов, которые можно вращать.

Строгий и простой в оформлении веб-сайт с трёхмерной анимацией, прелесть!

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

Компактный веб-сайт с трёхмерными эффектами, который смотрится восхитительно. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

Веб-сайт на Flash-основе, меню которого снабжено очень интересным трёхмерным эффектом. Красивые трёхмерные переходы.

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

Подобие трёхмерной фильмотеки с красивыми трёхмерными переходами. Все анимированные фрагменты воспроизводятся очень плавно. Отличная работа.

Простой и строгий в оформлении трёхмерный веб-сайт.

Любопытный способ нанесения рисунков – помещайте их в центр звёздного неба! Шикарное трёхмерное пространство. Может послужить и милым маленьким подарком вашей подруге/другу (в смысле, ваш рисунок на нём) – ей/ему точно понравится. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

Симпатичный веб-сайт с очень впечатляющим трёхмерным меню навигации. Просто нажмите кнопку "Просмотр" ("Browse") справа на странице, и увидите трёхмерное меню навигации.