Macromedia Director MX - практическое применение



Практическое упражнение 8.1: Альфа-каналы



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

Рассмотрим пример

1. Ознакомьтесь с различными панелями.


а) Когда фильм открыт, то на сцене видно графическое изображение чашки кофе.

б) Установите на Control Panel режим Loop (Цикл). Щелкните по кнопке Play, и в ожившем изображении над чашкой появится пар, исходящий от горячего кофе.

Что должно получиться на экране

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



Рис. 8.13. Сцена завершенного упражнения


Что должно получиться за сценой

На рис. 8.14 показана партитура завершенного упражнения, содержащая затененные спрайты с ключевыми кадрами.

Пошаговые инструкции

1. Создайте новый фильм, выбрав File | New | Movie (Файл | Создать | Фильм). Сохраните этот файл под именем MyCoffee в папке Save Work на вашем жестком диске.



Рис. 8.14. Партитура завершенного упражнения


2. Если Property Inspector не открыт, то выберите Window | Property Inspector и щелкните по вкладке Movie, как показано на рис. 8.15.



Рис. 8.15. Вкладка Movie в Property Inspector


3. Измените размеры сцены на 300x300.

4. Выберите File | Import (Файл | Импорт)

5. Найдите Coffee.psd,  щелкните по нему. Щелкните по кнопке Add (Добавить). Повторите этот шаг для остальных графических изображений Coffeepattern.bmp, Cupofio.psd, и Steam.psd. Теперь у вас в окне File List (Список Файлов) должны быть все четыре графических файла.

6. Щелкните по кнопке Import. Откроется диалоговое окно Image Options, показанное на рис. 8.16. В окне Image Options установите флажок Same Settings for Remaining images (Те же Настройки для Оставшихся изображений) и щелкните по кнопке ОК. Вы увидите, что эти графические объекты появились в окне Cast.



Рис. 8.16. Диалоговое окно Image Options


7. Давайте создадим индивидуальный узор.


а) Щелкните по кнопке Pattern в палитре Tools.

б) Щелкните по опции Tile Settings внизу всплывающего окна с узорами, как показано на рис. 8.17.



Рис. 8.17. Всплывающее окно с узорами и опцией Tile Settings


8. Откроется диалоговое окно Tile Settings, как показано на рис. 8.18. В поле Source, вверху, измените источник на Cast Member и затем с помощью стрелок выберите Coffeepattern.bmp.



Рис. 8.18. Диалоговое окно Tile Settings


9. Измените ширину (Width) и высоту (Height) на 64, а затем щелкните по кнопке ОК, чтобы закрыть это окно.

10.Щелкните по кнопке Pattern в палитре Tools. В открывшемся всплывающем окне выберите ваш индивидуальный узор (расположенный внизу слева), как показано на рис. 8.19.



Рис. 8.19. Выберите ваш индивидуальный узор во всплывающем окне


11. Выберите инструмент Filled Rectangle в палитре Tools и нарисуйте на сцене прямоугольник, покрывающий всю сцену. Внутри этого закрашенного прямоугольника на сцене появится ваш индивидуальный узор.

12. Если окно Cast не открыто, то выберите Window | Cast.

13. Перетащите на сцену элемент труппы coffee и расположите его ближе к нижнему краю, как показано на рис. 8.20.



Рис. 8.20. Сцена после добавления элемента труппы coffee


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

15. Перетащите элемент труппы steam на сцену и поместите его внутри чашки с кофе, как показано на рис. 8.21.



Рис. 8.21. Сцена после добавления элементов труппы cupofjo и steam


16. Если партитура не открыта, то выберите Window | Score.

17. Щелкните по спрайту в канале 1.

18. Держа нажатой клавишу Shift, щелкните по спрайту в канале 4. При этом будут выделены все четыре спрайта, имеющиеся в партитуре.

19. С помощью вкладки Sprite в Property Inspector измените значение End Frame (Конечный Кадр) на 60. Это растянет все спрайты по партитуре на длину в 60 кадров, как показано на рис. 8.22.



Рис. 8.22. Все спрайты теперь имеют длину в 60 кадров


20. Выберите View | Sprite Toolbar (Вид | Панель Инструментов Спрайта). Эта панель появляется вверху партитуры и служит для добавления информации о спрайте. Щелкните по спрайту в канале 4, а затем щелкните по ниспадающему меню Ink, расположенному вверху партитуры, как показано на рис. 8.23. Выберите опцию Blend.



Рис. 8.23. Ниспадающее меню Ink вверху партитуры


21. Измените настройку Blend на 10%, как показано на рис. 8.24.



Рис. 8.24. Настройка Blend вверху партитуры


22. Щелкните по кадру 60 спрайта канала 4. Выберите Insert | Keyframe. Щелкните по кадру 30 спрайта канала 4. Выберите Insert | Keyframe. Установленные ключевые кадры показаны на рис. 8.25.



Рис. 8.25. Новые ключевые кадры в кадрах 30 и 60 партитуры


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

23. У вас должен быть выбран кадр 30 спрайта в канале 4. Если нет, то щелкните по этому кадру в партитуре.

24. Давайте увеличим спрайт steam на сцене.


а) Щелкните по верхней правой метке-манипулятору ограничивающей рамки спрайта.

б) Удерживая нажатой кнопку мыши, перетащите метку вверх и вправо, чтобы увеличить спрайт, как показано на рис. 8.26.



Рис. 8.26. Спрайт steam, увеличенный на сцене

Подсказка

Вы можете увеличить окно Stage, перетащив его нижний правый угол.


25. Установите затенение спрайта 4 в ключевом кадре 30, равное 70 процентам.

26. Щелкните по спрайту в канале 4 партитуры между двумя ключевыми кадрами. Это выделит весь спрайт в партитуре.

27. Выберите Edit | Copy Sprites (Правка | Копировать Спрайты).

28. Щелкните по кадру 1 в канале 5 партитуры и выберите Edit | Paste Sprites (Правка | Вставить Спрайты). Вы только что сдублировали все кадры канала 4 и вставили их в канал 5, как показано на рис. 8.27.



Рис. 8.27. Канал 4 скопирован в канал 5

Подсказка

Чтобы быстрее переместить спрайт, удерживайте нажатой клавишу Shift и нажимайте клавиши со стрелками на вашей клавиатуре.


29. С помощью клавиш со стрелками на вашей клавиатуре переместите спрайт канала 5 по сцене вправо от чашки с кофе.

30. Повторите шаги 26—28, чтобы скопировать еще один виток пара в канал 6. Расположите витки пара над кофе более естественно, как показано на рис. 8.28.



Рис. 8.28. Витки пара на сцене, расположенные над кофе

Подсказка

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


31. У вас должно быть три витка пара на сцене. Выберите центральный виток пара и щелкните по кнопке Flip Horizontal (Горизонтальное Зеркальное Обращение) в партитуре, как показано на рис. 8.29.



Рис. 8.29. Кнопка Rip Horizontal в партитуре


32. Сохраните вашу работу.

33. Установите Control Panel в режим Loop (Цикл). Щелкните по кнопке Play, чтобы посмотреть вашу анимацию.