O простейшей анимации во флеше. Как создать флеш анимацию Как создать новый кадр в adobe flash

Открываем Flash MX.
Перед нами - наша рабочая сцена, меню, панель инструментов итд. Внизу есть такое вот окошко: Properties (Свойства). Там основные настройки вашего мульта (рис.1).
Нас там интересует FRAME RATE - скорость прокрутки вашего мульта. Иначе 12 fps означает, что за одну секунду будет проигрываться 12 кадров (frame) вашего мульта. Эта скорость стандартная и, в принципе, то, что надо. Если вам надо замедлить ваш мульт - уменьшаете, надо сделать быстрее - увеличиваете эту цифру.

Теперь перейдем к самой анимации.
Во флеше есть два основных способа: shape tweening и motion tweening.
Рассмотрим первый. Shape - (англ.) форма. Вы уже понимаете, что тут речь пойдет именно об изменении формы. Создаем некую форму, например синий квадрат. Вверху, в строке времени (timeline) у нас на первом кадре появится кружочек на сером фоне - мы создали ключевой кадр (keyframe). Теперь создадим такой же кадр в 10-м кадре. Это можно сделать двумя способами: наводим мышку на 10 кадр, делаем клик (кадр стает синим) и в меню последовательно выбираем: Insert->keyframe; иначе можно: наводим на 10 кадр, кликаем, нажимаем F6. В строке времени все 10 кадров серые. Красная линия показывает на каком именно кадре мы находимся. (рис.2)

Переходим в 10 кадр. Выделяем наш квадратик (мышкой или нажатием ctrl+A,- данное сочетание клавиш выделяет все, что у нас находится в рабочей области). Перемещаем наш квадрат куда-нибудь в сторону (проследите, что вы в 10-м кадре!) и меняем цвет на, например желтый. Теперь переходим обратно в первый кадр. В строке Properties имеется выбор Tween, где по умолчанию стоит атрибут "none". То есть никакой анимации. Изменяем его на "shape". В строке времени наши кадры приобретают салатовый цвет со стрелочкой. Когда все сделано нажимаем "enter". КРАСОТА! Квадратик двигается, да еще и цвет меняет! Снова переходим в 10 кадр. Выделяем все (ctrl+A). И нажимаем клавишу delete (то есть удаляем). На месте квадратика рисуем какой-нить красненький кружочек. Снова переходим в первый кадр и нажимаем enter. Квадрат теперь стает кружком и красным. Вы уже поняли, что вам не надо прорисовывать каждый кадр - это за вас сделает flash! Хотя если вам нужна особая точность, или что-то - можете прорисовывать. тогда файл вырастет в размерах. Если вам нужен более плавный переход от квадратика к тому же, например, кружку - сделайте этот процесс не на 10, а, скажем, на 25 кадров. Если вам нужно более замысловатые движения и перемещения - для этого существуют слои-маски, но о них как-нибудь в следующий раз. Рисунок 3 показывает, как на линии времени выглядит ваша анимация. Теперь вы умеете рисовать простейший мувик с изменением формы!

Теперь рассмотрим второй способ задания анимация: motion tweening (перевод что-то типа: построения промежуточной анимации движения). Здесь будет чуточку посложнее. Снова открываем новый файл флеша.
Чем отличаются shape и motion? Тем, что во втором случае мы будем работать не над формами, а над готовыми объектами, т.е. символами. Символ - это так сказать, простейшая единица анимации во флеше. Это более распространенный способ рисования. Повторяем все снова - в первом кадре рисуем синенький квадратик. выделяем его и нажимаем F8 (или выполняем последовательно: Insert->convert to symbol). Перед нами появляется диалоговое окно (рис. 4).

Что же это такое? Во флеше есть три типа символов: мувик (moovie clip) - это некая дополнительная анимация внутри символа. то есть, этот символ содержит в себе какую-нибудь анимацию и т.д. имеет точно такую строку времени, как и основная сцена; кнопка (button) - элемент, который реагирует на нажатие, присутствие мышки над ним итд. Короче, кнопка и есть; и третий элемент, самый статичный - graphic. То есть просто графика, некое изображение. Мы будем работать с последним. Как-то его называем, нажимаем "ОК". На квадратике появляется кружочек - иначе, центр нашего символа (центр тоже можно задать в том диалоговом окне). Все наши символы заносятся в библиотеку. Оттуда мы их можем редактировать, вставлять куда надо и куда не надо, удалять, добавлять. Чтобы посмотреть на свою библиотеку нажмите F11 или выполните действия: Window -> Library. В 10-м кадре создадим ключевой кадр (F6). Теперь можем переместить куда-то наш квадрат. Затем сделаем его невидимым: для этого выделим его в 10-м кадре. На панели propperties в разделе color зададим alpha (прозрачность). Поставим ему атрибут в процентах: 0. Вернемся на 1-й кадр. Выполним все те же действия, что и для shape tweening, только вместо shape отметим motion. Кадры во временной строке станут фиолетовыми и через них протянется стрелочка, как это показано на рис. 5. Нажмем enter.

У нас получится эффект "квадрат летит в пустоту". Поздравляю! Вы знаете, как делать примитивную графику во флеше!
Еще одна важная особенность - на каждую анимацию у нас должен быть выделен отдельный слой (Layer). Если вам надо добавить еще один слой воспользуйтесь командой: Insert->Layer.
И совсем чуть-чуть о строке времени.
Как вы уже поняли - салатовое со стрелочкой - shape tweening, фиолетовое со стрелочкой - motion tweening. Салатовое или фиолетовое с линиями - вы задали анимацию, но эту анимацию создать невозможно, - вы сделали что-то не правильно. Серый цвет - все кадры с такой закраской являются точной копией предыдущего ключевого кадра (keyframe). Белая окраска линии означает, что в этих кадрах ничего нет. Черный кружочек - ключевой кадр. Белый кружочек - пустой ключевой кадр (blank keyframe). Ну, вроде все. (рис. 6)

На этом пока что все. Этот тот минимум, с которым можно работать. Далее изучите добавление звука, контроль над звуком, и вперед - писать Масяню. :) Обещаю, что обязательно вскоре напишу еще один урок - по продвинутой анимации во флеше. Про то, как сделать "падение пера", про маски, про контроль над изменением формы в shape tweening"е. Потом еще чего-то напишу.
Если это кому-то все-таки помогло - скажите спасибо всему сайту FLASHER.RU. Это лучшее, чего в сети имеется.
Рад был и рад есть! Если вопросы - прошу на форум или: [email protected]
(с)from St.Dimitryi aka Nirva to Flasher.ru
http://flasher.ru

Вы не задумывались, что скрывается за красивой анимацией баннеров в интернете? Или за новомодными мультиками, созданными с помощью компьютерных технологий? Чаще всего в их основе лежит «плоть », точнее так переводится с английского название технологии 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 фраз текста, которые будут проигрываться в анимации. Кроме того необходимо указать адрес ресурса, на который пользователя приведет клик по баннеру:

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

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

Начало работы

Первый кадр слоя отмечен пустым кружком. Это обозначает, что как кадр 1, так и слой "Layer 1" пустые - на слое нет вставленных объектов. Вставим любой объект на слой "Layer 1". Например, импортируем растровое изображение (см. Импорт ) и вставим его на слой "Layer 1". Изображение показано слева. Можно просмотреть созданную мультипликацию, нажав клавишу Enter . Обычно фоновый слой блокируется, чтобы предотвратить его изменение - ставится значок замка. Пример 4 : Вы можете добавить или удалить простые кадры. Удаление кадров : Для удаления кадра его нужно выделить, в контекстном меню выбрать Remove Frames . Для выделения нескольких кадров удерживайте клавишу Ctrl . Например, нам нужно уменьшить число кадров для фона на 5 кадров. Выделим 5 кадров и удалим их - вместо 30-ти кадров остается 25. Добавление кадров : Например, нам нужно на слое "Фон" добавить несколько кадров. Для этого можно щелкнуть по кадру 30 и, когда рядом с курсором появляется маленький прямоугольник, просто перетащить кадр 30 вправо по шкале времени. Или можно щелкнуть на любом кадре между 1-м и 30-м и в контекстном меню выбрать Добавить кадр (Insert Frame). Последнее обновление: декабрь 2014 г.

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

Шаги

Часть 1

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

• По умолчанию Flash воспроизводит 24 кадра в секунду (FPS). Это означает, что за одну секунду будут показаны 24 кадра, но не все из них должны быть обязательно разными. Вы можете изменить этот параметр (если хотите) на 12 кадров в секунду, но при 24 кадрах в секунду анимация будет воспроизводиться более «гладко».

1. Установите Flash Professional. Есть множество программ для создания флеш-анимации, но наиболее мощной является Adobe Flash Professional CC. Вы можете бесплатно установить пробную версию этой программы или использовать другой продукт (если вы не хотите регистрироваться на Adobe Creative Cloud). Далее в этой статье описывается работа с Flash Professional.

   Так как покадровая анимация требует наличия нескольких изображений (которые немного отличаются друг от друга), то вам нужно создать эти изображения вручную. Для этого воспользуйтесь Adobe Flash Professional или нарисуйте изображения в любом графическом редакторе.

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

2. Создайте первый кадр. При первом запуске Adobe Flash Professional вы увидите пустой холст (слой) и пустую временную шкалу. По мере добавления кадров временная шкала будет заполняться автоматически. Вы можете работать со слоями так же, как вы делаете это в Photoshop.

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

3. Преобразуйте изображение в символ. В этом случае вы сможете добавить изображение в кадр несколько раз. Это особенно полезно, если вам нужно быстро добавить несколько однотипных картинок в один кадр (например, рыбки в аквариуме).

   • Выделите рисунок. Щелкните правой кнопкой мыши по рисунку и выберите «Convert to Symbol» (Преобразовать в символ). Изображение будет добавлено в библиотеку, что упростит его использование в будущем.
   • Удалите рисунок. Не волнуйтесь - вы сможете добавлять его в кадр простым перетаскиванием из библиотеки. Так вы можете добавить в кадр один и тот же рисунок несколько раз.

4. Добавьте пустые кадры. Если ваш первый ключевой кадр готов, вставьте пустые кадры, а затем приступайте к созданию второго ключевого кадра. Нажмите F5 (четыре или пять раз), чтобы добавить пустые кадры после первого ключевого кадра.

   Создайте второй ключевой кадр (после того, как вы добавили несколько пустых кадров). Есть два различных способа сделать это: вы можете скопировать существующий ключевой кадр и внести в него небольшие изменения, или вы можете создать пустой ключевой кадр и добавить в него новое изображение. Если вы используете рисунок, созданный в другой программе, воспользуйтесь вторым способом. Если вы вставляете изображение, созданное при помощи инструментов для рисования Adobe Flash Professional, воспользуйтесь первым методом.

   • Чтобы создать ключевой кадр, используя содержимое предыдущего ключевого кадра, нажмите F6. Чтобы создать пустой ключевой кадр, щелкните правой кнопкой мыши по последнему кадру на временной шкале и выберите «Insert Blank Keyframe» (Вставить пустой ключевой кадр).
   • После того как вы создали второй ключевой кадр, вам нужно внести изменения в его изображение, чтобы анимация «ожила». Если вы пользовались инструментами для рисования Adobe Flash Professional, выберите инструмент «Transform» (Преобразование), чтобы выделить элемент вашего рисунка (например, руку персонажа) и изменить его.
   • Если в каждый ключевой кадр вы вставляете новое изображение, убедитесь, что оно находится в нужном месте (согласно логической последовательности кадров).

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

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

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

   • Выберите кадр, в котором рисунок будет преображаться.
   • Откройте панель свойств рисунка. Для этого нажмите F3.
   • Измените значения параметров в окне свойств рисунка. Например, вы можете изменить оттенок или цвет, добавить фильтры, изменить размер.
   • Вы также можете использовать инструмент «Free Transform» (Свободное преобразование), чтобы менять рисунок так, как вам угодно.

7. Добавьте заключительные штрихи. Проверьте созданную анимацию, нажав Ctrl + Enter. Убедитесь, что рисунок (персонаж) правильно меняется и что анимация воспроизводится с правильной скоростью. Если анимация воспроизводится слишком быстро, уменьшите значение FPS или увеличьте продолжительность твина.

   • По умолчанию FPS равен 24, поэтому попробуйте уменьшить это значение до 12. Измените значение FPS на панели свойств. Однако при FPS = 12 анимация может воспроизводиться недостаточно плавно.
   • Чтобы изменить продолжительность твина, выберите слой, содержащий твин, и при помощи ползунка измените продолжительность твина. Если вы хотите удвоить продолжительность твина, передвиньте ползунок на 48 кадров. Не забудьте вставить фон в пустые кадры, чтобы фон не исчез посередине анимации. Для этого выберите фоновый слой, щелкните по последнему кадру анимации (на временной шкале), а затем нажмите F5.

Часть 3

1. Запишите или скачайте звуковые эффекты и музыку. Вы можете добавить в анимацию звуковые эффекты, чтобы сделать ее более эффектной. Музыка сделает анимацию более захватывающей и может превратить хорошую анимацию в великолепную. Flash поддерживает различные форматы аудиофайлов, в том числе AAC, MP3, WAV, и AU. Выберите формат, который гарантирует высокое качество звука при минимальном размере файла.

   • Формат MP3 гарантирует высокое качество звука при минимальном размере файла. Файлы формата WAV имеют большой размер.

2. Импортируйте аудиофайлы в библиотеку, чтобы иметь возможность быстро добавлять звуки и музыку в анимацию. Нажмите «File» (Файл) – «Import» (Импортировать) – «Import to Library» (Импортировать в библиотеку). Найдите аудиофайл на вашем компьютере. Убедитесь, что аудиофайл имеет легко запоминающееся имя, чтобы вы могли быстро найти его.

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

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