Слайд-шоу с эффектом изменения прозрачности

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

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

Каждое изображение появляется с нулевой непрозрачностью, которая возрастает до 100% за пять кадров, далее в течение десяти кадров демонстрируется изображение, а затем на протяжении пяти кадров прозрачность вновь падает до нуля. В то время как одно изображение растворяется за пять кадров, следующее проступает за то же количество кадров.

 

Рис. 25. Пример слайд-шоу с плавной сменой кадров

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

 

Рис. 26. Прозрачность корпуса растет, прозрачность микросхемы падает

Рис. 27. Корпус телефона растворяется, и становится видна установленная в нем плата

Замена одного символа на другой

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

 

Рис. 28. Мувиклип elips-rot (поворачивающийся эллипс)

А также создадим еще один мувиклип — rect-blend, в котором будет перемещаться (сверху вниз) и менять цвет прямоугольник (рис. 29).

 

Рис. 29. Мувиклип rect-blend (прямоугольник, изменяющий цвет)

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

 

Рис. 30. В библиотеке содержатся два мувиклипа и два графических символа

Теперь заменим свойства экземпляра мувиклипа elips-rot на свойства мувиклипа rect-blend. Обратите внимание, речь идет об изменении свойств именно экземпляра, а не самого мувиклипа! Для этого выделим экземпляр на сцене (рис. 31) и вызовем панель Properties по команде Window => Properties (если она скрыта в текущий момент).

 

Рис. 31. Кнопка Swap дает доступ к панели Swap Symbol

В панели Properties нажмем на кнопку Swap, в результате появится панель Swap Symbol (рис. 32), которая позволяет назначить экземпляру символа elips-rot свойства другого символа.

 

Рис. 32. Панель Swap Symbol

Выберем в панели символ rect-blend и нажмем кнопку ОК. В результате в фильме появятся два прямоугольника, то есть фильм примет следующий вид. Обратите внимание, что при этом сам символ elips-rot не изменился. Если заглянете в библиотеку (рис. 33), то убедитесь, что это по-прежнему эллипс, который вращается и перемещается вправо. А вот его экземпляр на сцене приобрел свойства мувиклипа rect-blend.

 

Рис. 33. Экземпляр на сцене изменился, а символ в библиотеке — нет

Теперь рассмотрим вариант изменения свойств самого мувиклипа elips-rot. Дважды щелкните на экземпляре символа elips-rot, после чего произойдет переход в режим редактирования символа (рис. 34). После нажатия кнопки Swap появится панель Swap Symbol.

 

Рис. 34. Изменить свойства мувиклипа можно путем смены графического символа, на котором он базируется

В данной панели можно изменить свойства мувиклипа путем смены графического символа, на котором он базируется. Заменим выделенный на рис. 34 символ Tween 1 (эллипс) на Tween 2 (прямоугольник) — в результате изменится сам мувиклип-символ, в чем можно убедиться, вызвав окно библиотеки (рис. 35).

 

Рис. 35. Мувиклип elips-rot изменился

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

 

Рис. 36. Форма экземпляров символов одинакова, а движение — разное