Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Выпуск №5


Информационный Канал Subscribe.Ru

Macromedia Flash: всё что вы хотите о нём знать
НОВОСТИ, СТАТЬИ, УРОКИ, СОФТ-ОБЗОРЫ, FLASH В ВОПРОСАХ И ОТВЕТАХ
09 ИЮЛЯ, 2005 ВЫПУСК 5

Оглавление

» Колонка редактора: MustLive
» Колонка редактора: Даниэль
» Новости из мира Flash
» Новичкам: Введение в анимацию
» Создание переходов в анимационном фильме
» Инструменты создания анимации
» Использование видеофрагментов в формате QuickTime для создания трехмерной анимации
» Софт-обзор: FlashPlayer Plus 2.6
» Flash в вопросах и ответах
» Post Scriptum

САЙТ РАССЫЛКИ FLASHZONE.RU

Cайт посвящён Macromedia Flash. На Flash Zone в изобилии можно прочитать статьи и уроки по флешу, скачать исходники и программы для работы с flash. Помимо качественного наполнения, на нашем портале Вы можете найти небольшой, но «уютный» flash форум для общения и обмена опытом!

САЙТ АВТОРА MLFUN.ORG.UA

Коллекции приколов: прикольные картинки, Flashки, мультики Joe Cartoon, Flash-игры, Flash-мультфильмы, шоквэйвы, прикольные программы, аудио файлы, музыка, видео и другие прикольные файлы.

САЙТ АВТОРА DANIMULT.RU

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


Колонка редактора: MustLive

Здравствуйте дорогие читатели.

Из последних новостей вы узнаете кое-что интересное о флеш мульт-сериале "Happy Tree Friends".

В этом номере рассылки мы всесторонне рассмотрим процесс создания анимации во флеше: введение в анимацию, создание переходов в анимационном фильме, инструменты создания анимации, использование видеофрагментов в формате QuickTime для создания трехмерной анимации. В софт обзоре вас ожидает мощная программа для проигрывания флешек FlashPlayer Plus 2.6. А в разделе "Flash в вопросах и ответах" мы расскажем вам о том как во Флеше реализовать проигрыш кадров в обратную сторону.


Колонка редактора: Даниэль

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

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

Удачи! И до встречи!


Новости из мира Flash

Поиграем в Happy Tree Friends
http://www.happytreefriends.com/

Флеш-сериал садистских мультфильмов "Happy Tree Friends", повествующий о жизни лесных зверюшек, с которыми постоянно происходят разные истории (с трагическим финалом), в скором времени может обзавестись своим собственным игровым проектом.

Создатели сериала сейчас активно ищут издателя, желающего приобрести права на прикольный кровавый сериал. Есть надежда, что зверушек подберёт кто-то вроде Rockstar и тогда нас ожидает настоящая бойня. Посмотреть зловещие флеш-мульты с большими вливаниями черного юмора (достойного славы Джо Картуна) вы можете на сайте разработчиков: http://www.happytreefriends.com


Новичкам: Введение в анимацию

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

Для людей незнакомых с базовыми приемами компьютерной анимации (или просто - чтобы было понятнее) поясню на примере. Скажем, у вас есть зеленый квадрат, который нужно переместить из левой части экрана в правую. И сделать это надо в течение 25 кадров. В случае первого "покадрового" способа анимации вам придется нарисовать все двадцать пять кадров, и в каждом последующем кадре чуть-чуть сдвигать ваш квадрат, чтобы он оказался справа на 25-м кадре. А если вам нужно будет сделать так, чтобы квадрат потихоньку исчезал, двигаясь вправо? А если вдруг понадобится, чтобы он исчезал (увеличивался атрибут прозрачности) экспоненциально? Что, придется все это считать вручную и присваивать нужное значение прозрачности на каждом кадре?

Вовсе нет. Для этого существует второй способ анимации - с помощью промежуточных отображений (tweening animation). В этом случае вы только задаете ключевые кадры (keyframes), а промежуточные Flash просчитывает автоматически. Вам понадобится только задать только 2 кадра: начальный и конечный. По умолчанию Flash рассчитает промежуточные кадры по линейному закону, но можно задать возрастающую или затухающую экспоненту. Это нужно, чтобы отразить какие-нибудь процессы, происходящие в реальном мире. Например, движения мяча. Мы еще вернемся к этой теме.

Кадры, слои, символы, временная шкала

Мы досконально разберем все способы создания анимации, но сначала определимся с некоторыми базовыми понятиями. Этими понятиями являются кадры (frames), символы (symbols), слои (layers) и временная шкала (timeline).

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

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


Рис. 1 - Временная шкала

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

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

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

- Шкала кадров - поле, где вы можете добавлять и удалять простые и ключевые кадры. Если вызвать контекстное меню (нажать на правую клавишу мыши) на каком-либо кадре, вы увидите перечень действий, которые можно совершить. На шкале отображается информация о кадрах, которые являются ключевыми (такие кадры помечаются черными кружочками), содержат действия (буковка "а" над кружочком) или метку (красный флажок, после которого идет название метки). Цвет тоже говорит о типе кадров. Серый цвет - это кадры, которые в точности повторяют ключевой кадр (keyframe). Синеватая или зеленоватая подсветка говорит о том, что кадры сгенерированы Flash (о различиях я расскажу ниже). И, наконец, белое или "пустое" полосатое пространство говорят о том, что на этих кадрах ничего нет.

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

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

Слои

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

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

Есть достаточно большое количество приемов, в которых используются слои, но во Flash без них просто нельзя обойтись по одной важной причине: в один момент времени для каждого объекта анимации нужен отдельный слой. Объектом анимации считается фигура (shape) или символ (symbol).

Кадры

Наша анимация состоит из последовательности кадров. Кадр может быть как составленным вручную, так и сгенерированным Flash. Это относится к кадрам одного слоя. Так как сцены Flash состоят обычно из нескольких слоев, то итоговые "многослойные" кадры, могут содержать, как сгенерированные, так и "самодельные" слои.

В компьютерной анимации существует понятие - ключевые кадры (keyframes). Их название говорит само за себя. Это кадры, которые Flash не вправе изменять в процессе создания анимации. Вы задаете эти ключевые кадры, а промежуточные кадры между ними выстраивает Flash. Существует два типа промежуточных кадров - кадры, построенные на основе изменения геометрии (shape tweening) или кадры, построенные на изменении символов (motion tweening). И, конечно же, кадры могут быть пустыми, т.е. ничего не содержать.

Элементарные операции с кадрами:

Вставить пустой ключевой кадр - Insert->Blank keyframe, F7
Ключевой кадр, повторяющий содержание предыдущего - Insert->Keyframe, F6
Очистить ключевой кадр - Insert->Clear keyframe, Shift-F6
Вставить обычный кадр - Insert->Frame, F5
Удалить кадр - Insert->Remove Frames, Shift-F5

Символы

Символы - одно из ключевых понятий во Flash. Символом может быть, как простейшая геометрия или их объединение, так и целая анимация (movie). Это позволяет использовать символы, как мощный механизм создания абстракций во Flash.

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

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

Существует три вида символов: анимация (movie clip), кнопка (button) и изображение (graphic):

- Изображение (graphic), представляет собой символ, состоящий из единственного кадра. Отсюда следует его статичное название. Если символ действительно представляет собой статичный (не анимирующийся) объект, лучше сделать его изображением (graphic).

- Кнопка (button). Во Flash есть специально приспособленный под функции кнопки вид символа. В нем имеется 4 кадра: Up, Over, Down, Hit, которые содержат следующие состояния кнопок:

· Up - обычное состояние кнопки.
· Over - когда курсор мышки находится над кнопкой.
· Down - когда курсор находится над кнопкой и нажата клавиша мыши.
· Hit - обычное состояние, для кнопки, содержащей ссылку, которую пользователь уже посещал.

- Анимация (movie clip). Это самый "полноценный" тип символа. В нем может быть любое количество кадров. Символ этого типа может восприниматься как объект типа Movie в ActionScript (это встроенный язык Flash).

Символы могут быть вложенными вне зависимости от типа. Это является самым главным их достоинством. Например, можно сделать кнопку, которая начнет двигаться, когда над ней будет "пролетать" курсор мыши, просто поместив в кадр Over символ - анимацию. Или (парадокс!) на изображение поместить бегущую кошку. Все остальное - дело вашей фантазии.

Символы можно создавать как "с нуля" (Insert->New Symbol, Ctrl+F8), так и используя текущее выделение, поместив его сразу в символ (Insert->Convert to Symbol, F8). Второй прием используется гораздо чаще, чем первое, т.к. в этом случае отпадает надобность его позиционировать и изменять под нужный размер.

Для управления символами используется так называемая библиотека (Library), описание которой, к сожалению, не входит в рамки данной статьи. Окно библиотеки находится по адресу Window->Library (или Ctrl-L). Я надеюсь, вы легко разберетесь с библиотекой символов.

Анимация

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

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

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

Это анимация, полностью составленная из ключевых кадров. Т.е. вы сами определяете, как содержимое кадра, так и его "длительность" (т.е. сколько таких статических кадров будет занимать изображение).

На временной шкале покадровая анимация выглядит следующим образом:


Рис 2. - Покадровая анимация

Достоинства:

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

· Это единственный способ организовать смену абсолютно независимых изображений - слайд шоу (например, создавая обычный баннер средствами Flash).

· И все остальное, что вытекает из возможности прорисовывать каждый кадр вручную.

Недостатки:

· Покадровую анимацию сложно модифицировать. Особенно, если это не дискретный набор изображений, а связанная анимация. Приходится модифицировать все кадры. На деле, у опытных Flasher-ов, такая ситуация практически не встречается.

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

Анимация с построением промежуточных кадров (tweened motion)

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

Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение и скорости вашего Flash фильма (movie). Скорость фильма можно изменить здесь: Modify->Movie…, Ctrl+M - там параметр Frame Rate задает количество кадров в секунду. Для качественной анимации скорость должна быть не меньше 25-30 кадров в секунду.

Плавность и длительность задается количеством кадров, отведенных на анимацию (ее фрагмент). Например, если скорость вашего фильма - 30 кадров/сек., и вам нужно совершить перемещение, скажем, самолетика, из одного угла картинки - в другой за 2.5 секунды, то на это движение вам нужно отвести 75 кадров.

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

Shape tweening

Скажем, вам нужно, чтобы квадрат плавно превратился в круг, или силуэт кролика плавно перетек в силуэт волка. В этих случаях используется shape tweening.

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

После того как у вас есть два ключевых кадра, вы делаете активным первый из них (просто переходите на него), и выбираете на панели Frame (Windows->Panels->Frame, Ctrl+F) в списке Tweening строку Shape:


Рис 3. - Shape tweening

Кадры на временной шкале должны окраситься в зеленоватый цвет и от первого кадра ко второму должна протянуться стрелочка (см. Рис. 4).

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


Рис. 4 - Анимация на основе Shape tweening

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

Немного о параметрах shape tweening. Вы, наверное, заметили, что появилась пара других параметров, когда вы выбрали shape tweening в панели Frame - Easing и Blend (см. Рис. 3). Поле Label содержит метку кадра. О метках мы поговорим в статье, посвященной анимации с помощью ActionScript.

Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от - 100 до + 100. Это означает, что если вы зададите отрицательный easing, движение будет происходить с положительным ускорением, скорость будет увеличиваться (см. Рис. 5). И наоборот, если easing будет положительным, анимация будет замедляться (см Рис. 6).


Рис. 5 - Easing: -100


Рис. 6 - Easing: +100

Параметр Blend, определяет алгоритм перехода: Distributive (распределяющий, общий) и Angular (угловатый). Первый старается максимально смягчить, сгладить переход от одной фигуры к другой. Второй же пытается сохранить пропорции углов. Если переход вас не удовлетворяет, можно поэкспериментировать с этим параметром.

И, наконец, последний инструмент в анимации shape tweening - контрольные точки (shape hints, дословно - подсказки для форм). Это точки, с помощью которых вы помогаете Flash правильно осуществить переход. Без них не обойтись в случае сложных форм. Пользоваться ими очень легко:

На первом ключевом кадре (с которого начинается анимация) вы добавляете контрольную точку (Modify->Transform->Add shape hint, Ctrl+Shift+H). На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита. Вы прикрепляете ее к той части изображения, которая двигается не так, как вы хотели. Затем вы переходите на второй ключевой кадр, и прикрепляете эту же точку к части, в которую должна была перейти часть на начальном кадре. Точка будет уже зеленого цвета, а на начальном кадре она станет желтой. Так вы можете отличать начальные и конечные ключевые точки, так как на одном кадре могут присутствовать и те и другие.

Удалить все точки можно с помощью Modify->Transform->Remove All Hints. Удалить же единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Hint.

Так как контрольные точки обозначаются буквами латинского алфавита, то их может быть максимум 27.

На рисунках (Рис.7 и Рис.8) вы можете заметить разницу между кадрами, созданными без использования контрольных точек, и с использованием таковых.


Рис. 7 - Shape tweening без использования контрольных точек


Рис. 8 - Shape tweening c использованием контрольных точек

При использовании анимации на основе изменения формы (shape tweening) могут модифицироваться следующие параметры фигуры:

· форма

· расположение

· размер (любые пропорции)

· цвет

· угол поворота

Если вам нужно отключить shape tweening, в панели Frame выберите Tweening: None.

Motion Tweening

И, наконец, наиболее часто используемая техника анимации во Flash - Motion Tweening. В этом случае анимация строится на основе модификации символов, т.е. объектом анимации является символ.

Как и в анимации shape tweening, на каждый объект в один момент времени, нам нужен один слой. На этом слое должен находиться один символ, с которым и будут происходить все изменения.

Вот какие параметры символа могут модифицироваться при использовании Motion Tweening:

· размер (как пропорционально, так и непропорционально - отдельно высоту и ширину)

· наклон

· расположение

· угол поворота

· цветовые эффекты (см. ниже)

· можно использовать направляющие слои для задания траектории движения объекта

Включить motion tweening можно несколькими способами (а отключить, к сожалению, только одним). Для того, чтобы включить motion tweening, нужно сделать активным начальный кадр вашего перехода, затем, нажав правую клавишу мыши, в контекстном меню выбрать Create motion tween (это же можно сделать, выбрав Insert->Create motion tween). Универсальный способ включения/выключения motion tweening - с помощью панели Frame, выбрав Motion в поле Tweening. Там же можно контролировать параметры анимации:


Рис. 9 - Motion tweening

Easing - обратное экспоненциальное ускорение, работает абсолютно так же, как и в shape tweening.

Rotate позволяет управлять вращением. Auto - Flash автоматически пытается определить количество витков. CW (Clockwise, по часовой стрелке) и ССW (Counter Clockwise - против часовой стрелки). При этом рядом в поле справа появляется возможность ввести количество оборотов. Можно использовать только целые значения. Можно отключить вращение, выбрав None.

Orient to path - поворачивает символ в соответствии с направляющей линией. Snap привязывает символ к этой направляющей. (см. ниже)

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

Направляющие слои

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

Скажем, вам нужно анимировать самолетик, который выписывает виражи по небу. У вас уйдет уйма времени и сил, на создание этого движения. При этом анимация будет состоять из маленьких отрезков motion tweening и отдельных кадров. Вместо этого можно нарисовать траекторию на специальном слое и привязать символ самолетика к ней.

Итак, если вы используете траекторию, то вам нужен дополнительный слой для нее. Кстати, с одной траекторией можно использовать несколько символов.

Для того, чтобы добавить направляющий слой, вам нужно выбрать слой, на котором находится ваш символ, и, нажав правую клавишу мыши, в контекстном меню выбрать Add Guide. При этом исходный слой становится направляемым (guided layer). Это далеко не единственный способ создать направляющий слой (guide layer). Любой слой можно сделать направляющим, указав это в его свойствах, или направляемым, перетащив нужный слой мышкой, так, чтобы он находился под направляющим.


Рис. 10 - Направляющий слой

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


Рис. 11 - Анимация, с использованием траектории

Теперь, чтобы использовать этот слой, вам нужно взять ваш символ за центральную точку (это такой маленький кружочек) и перетащить ее на траекторию. Вы почувствуете, когда символ "зацепится" за нее, и увидите, как он будет по ней скользить. Далее все по знакомому сценарию - ключевые кадры, включаем motion tweening… Если нужно, чтобы объект поворачивался согласно траектории, а не просто двигался по ней (как на рис. 11), то на панели Frame нужно включить флажок Orient to path.

Цветовые эффекты

Motion tweening позволяет использовать различные цветовые эффекты применительно ко всему символу. Эта возможность отсутствует в shape tweening.

Для того, чтобы применить эффект к символу, нужно выделить этот символ, и на панели эффектов (Windows->Panels->Effects), выбрать нужный эффект (см. Рис 9-12).


Рис. 12 - Установка яркости

Рис. 13 - Цветовое смещение, оттенок

Рис. 14 - Точная установка всех атрибутов

Рис. 15 - Установка прозрачности

Заключение

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

Желаю творческих успехов и настоящих шедевров, сделанных с помощью Flash!

Автор: Рубен Сардарян.

Создание переходов в анимационном фильме

Я продолжаю цикл статей о тонкостях создания анимации. Сегодня речь пойдет о такой важной и настолько привычной нам по видеофильмам вещи как переход. Что же это такое? Под переходом я прежде всего подразумеваю визуальный переход от какого-то действия/сцены в фильме к другому действию, месту действия и т.п. С переходами Вы знакомы все, это стопроцентно! Вспомните хотя бы классическое затемнение, когда сцена фильма постепенно затемняется и переходит в черный фон, который затем опять блекнет, обеспечивая новой сцене плавное и спокойное появление на экране.

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

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

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

Использование такой мощной программы как Flash создает соблазн излишнего увлечения сложными векторными переходами, сопровождающимися сложными перетеканиями одного в другое и т.п. Конечно можно создать очень сложный фильм, который будет настолько "наворочен", что не сможет выполнить возложенную на него задачу. Здесь действует золотое правило: все гениальное - просто. Иногда лучше смотрится и воспринимается простота. Ведь то что Вы МОЖЕТЕ сделать что-то технически изощренное вовсе не означает что это обязательно НУЖНО делать.

В рамках этой статьи и следующей мы рассмотрим три типа переходов, которые можно создать во Flash:

  • Простой переход
  • Сложный (комбинированный) переход
  • Трехмерный переход

    Рассмотрим первый тип - простой переход

    Его отличительная особенность - его простота. Обычно он состоит из одного/двух объектов. Они связаны использованием motion tween (автоматической анимации), изменением масштаба изображения, применением альфа-прозрачности. Простые переходы при должном исполнений могут выглядеть не менее эффективно чем сложные.

    Примеры простых переходов:

  • Затемнение/осветление изображения - то есть изображение сцены постепенно затеняется или осветляется соответственно до черного или белого фона с последующим переходом к сцене. Хотя можно использовать любой цвет, лишь бы он гармонировал с происходящими в фильме событиями.
  • Наплыв. Этот прием охватывает перекрывающиеся сцены и состоит в постепенном исчезновении одной сцены до того момента, пока полностью не проявится следующая сцена, подаваемая наплывом.
  • Вытеснение. Здесь используется движение для удаления одного изображения за пределы сцены, в то же время как другое появляется на ней.

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

    Рассмотрим изготовление перехода затемнение/осветление. На самом деле, такой переход очень прост в изготовлении.

    Допустим у вас созданы две сцены, однако одна резко обрывается и тут же начинается вторая. Разумеется такой обрыв ухудшает общее впечатление. Создадим поверх всех слоев из которых состоят обе сцены новый слой. Допустим, первая сцена состоит из 20 кадров, вторая из 30. Переход из одной сцены в другую, соответственно находится на 20 кадре. На новом слое в 15 кадре создадим ключевой кадр и в нем нарисуем черный прямоугольник, который будет в точности соответствовать размеру изображения сцен. На 20 кадре создаем еще один ключевой кадр и на 25 - еще один. Таким образом мы получили три "точки" будущего перехода. Теперь делаем следующее: в начальном кадре перехода и в конечном ставим параметр альфа равным 0%. Центральный (20) кадр оставляем нетронутым! Создаем motion tween с 15 по 20 и с 20 по 25 кадры. Переход готов! Подытожим, что же мы получили: с 15 кадра начинает проявляться черный фон, на 20 кадре он полностью проявился, с 21 он начинает вновь становится прозрачным и на 25 исчезает. В прилагаемом исходнике перехода я сделал нечто подобное. Качаем тут.

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


  • Инструменты создания анимации

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

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

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

    Скриншот №1: интерфейс программы

    На скриншоте №1 изображен интерфейс программы Moho 2.5. Программа имеет все необходимые инструменты для создания анимации - для чего собственно она и создана. После создания вашего персонажа и его анимации, вы можете экспортировать вашего персонажа во Флеш, для последующего использования в своих проектах. Также мы можете сразу экспортировать готовый SWF файл - финальный ролик, готовый к публикации - без необходимости использовать редактор Flash.

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

    В программе поддерживаются инструменты для работы с векторной графикой (создание, редактирование, создание надписей системными шрифтами), поддерживаются слои (нескольких типов), импорт растровой графики JPG, BMP, а также TGA и PNG (оба с альфа-каналом), импорт векторной графики (формат Adobe Illustrator), ну и уникальные инструменты для работы со скелетной анимацией (в слое типа "Bone Layer").

    Скриншот №2: Масяня в Moho

    Созданный проект программа кроме сохранения в свой собственный формат, может сохранить любой кадр в растровый формат (JPG, BMP, TGA и PNG), а также сохранить анимацию в виде серии кадров (JPG, BMP, TGA и PNG) и в виде AVI или MOV файла. И главная особенность программы - это уже упоминавшийся экспорт в SWF.

    Анимированную Масяню вы можете увидеть здесь.


    Использование видеофрагментов в формате QuickTime для создания трехмерной анимации

    В прошлом выпуске рассылки мы рассмотрели возможность использования видео для создания трехмерных эффектов в среде Flash. Теперь же мы рассмотрим конкретный пример получения из видео в формате QuickTime эффект трехмерного вращения ховеркрафта (см. рисунок 1)


    Рисунок 1 - Кадр из видеофрагмента, который можно скачать отсюда.

    Итак у нас есть видео в формате QuickTime (speeder.mov) Как видим, ховеркрафт вращается вокруг своей оси. Реализуем такой же эффект во Flash. Для этого:

    1. Создаем новый фильм во Flash.

    2. Импортируем видео в библиотеку фильма. При импортировании на вопрос программы: Please select QuickTime encoding options for best suits your needs (Выберите подходящую для Ваших нужд опцию) выбираем Embed video in Macromedia Flash document. Далее, выбираем рекомендуемые значения импортирования.

    3. Из библиотеки вставляем фильм в сцену фильма. На шкале времени автоматически появляется последовательность из кадров соответствующая продолжительности видео.

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

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


    Софт-обзор: FlashPlayer Plus 2.6

    FlashPlayer Plus компании ZGW Software - это мощная утилита для проигрывания, управления и конвертации файлов формата Macromedia Flash. Программа предоставляет возможности предпросмотра флешек. Интересующие вас Flash файлы могут быть найдены на вашем компьютере, проиграны и, если потребуется, сконвертированы (поддерживается конвертация как SWF->EXE, так и EXE->SWF). Также программа позволяет делать из флешек скринсейверы. Программа предоставляет расширенное управление просмотром флешек.

    FlashPlayer Plus 2.6

    Основные возможности:

    1. Захват URL флеш файлов из браузера и скачивание их из интернета.
    2. Возможность предпросмотра флешек (на подобии программ просмоторщиков графики).
    3. Расширенное управление просмотром.
    4. Обширные возможности управления своими коллекциями флеш файлов (плейлисты, Избранное).
    5. Мощный поиск флешек на диске.
    6. Дружелюбный интерфейс пользователя.
    7. Возможность создания из флешек скринсейверов.
    8. Конвертация между SWF и EXE (в обе стороны: SWF->EXE и EXE->SWF).
    9. Возможность создания динамического рабочего стола из флешки.
    Скачать программу: http://flashzone.ru/s/flash-soft/downloads/flashplayer_plus_26/

    Flash в вопросах и ответах

    Вопрос:

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

    Ответ от Даниэля:

    Очень просто. Нужно прост превратить текст в рисунок. Как это делается.

    Выделяем набранный текстовый фрагмент и с помощью команды Break Apart в Modify разбиваем побуквенно текст. Далее, еще раз жмем Break Apart и текст превращается в рисунок, который можно свободно стирать ластиком! Все очень просто! Конвертируйте все текстовые фрагменты таким образом и проблем со шрифтами не будет. Удачи!




    Вопрос:

    Как во Флеше реализовать проигрыш кадров в обратную сторону?

    Ответ от MustLive:

    Во флеш ролике в _root располагаем клип (с Instance Name: clip), в котором находится наша анимация, а также три кнопки: "Играть", "Пауза" и "Играть назад". В первом кадре _root пишем следующий код:

    this.onEnterFrame = function() {
     if (getBack){
      if (clip._currentframe <> 1) {
       clip.prevFrame();
      }
      else {
       getBack = false;
      }
     }
    }
    
    Для кнопки "Играть":
    on (press) {
     clip.play();
    }
    
    Для кнопки "Пауза":
    on (press) {
     clip.stop();
    }
    Для кнопки "Играть назад":
    on (press) {
     getBack = true;
    }
    
    Внутри вашего мувика (clip) с анимацией в последнем кадре можно добавить:
    stop();

    Вопрос можно задать на форуме в отдельном разделе или по e-mail: subscribe@flashzone.ru.

    Post Scriptum

    Все материалы этого выпуска авторские. Новость "Поиграем в Happy Tree Friends", статью "Инструменты создания анимации" и софт-обзор "FlashPlayer Plus 2.6" написал MustLive, статью "Создание переходов в анимационном фильме" и "Использование видеофрагментов в формате QuickTime для создания трехмерной анимации" написал Даниэль.

    Задать вопрос в раздел "Flash в вопросах и ответах" можно на форуме, либо по e-mail subscribe@flashzone.ru.

    По вопросам сотрудничества обращаться на e-mail max@flashzone.ru.
    Принимаем заявки на обмен обзорами, текстовыми рекламными блоками, простыми текстовыми ссылками с сайтами flash тематик.

    Перепечатка разрешается только со ссылкой на автора и flashzone.ru.

    Сайт рассылки: flashzone.ru.
    Сайты авторов: danimult.ru (Даниэль), mlfun.org.ua (MustLive).



    Subscribe.Ru
    Поддержка подписчиков
    Другие рассылки этой тематики
    Другие рассылки этого автора
    Подписан адрес:
    Код этой рассылки: comp.design.allflash
    Отписаться
    Вспомнить пароль

    В избранное