Мастер-класс по видео и анимации на Web. Часть II Анимируйся!*
Flash-анимация
Учитывая, какие маленькие файлы генерирует формат Flash, его можно считать идеальным средством для создания анимированных интерфейсов. Мы покажем вам, как скомбинировать анимацию с интерактивностью и в результате создать раскрывающееся меню, не похожее ни на что другое…
- Если нажать на кнопку нашего меню, на экране запускается анимация, по ходу
которой разворачивается навигационная полоса нашего сайта (navigation bar).
Начнем с создания картинки самой кнопки — кадра номер 1 на слое 1. Затем выделим
и сгруппируем все изображение и выберем команду Insert>Symbol.
- В качестве типа символа укажите вариант «Button». Затем щелкните на кнопке
Edit и вставьте в Timeline ключевые кадры для каждого состояния кнопки. Чтобы
закончить процесс редактирования символа, щелкните на значке «стрелка» в правом
верхнем углу рабочей области.
- Щелкните на кнопке, чтобы выделить ее, затем из основного меню выберите
команду Modify>Instance. В разделе Actions включите опцию Go To и выберите
Frame 2 (кадр 2). Закройте диалоговое окно и выберите ключевой кадр на слое
1. Выберите команду Modify Frame и включите режим Stop в разделе Actions.
- Вставьте в шкалу Timeline новый слой и разместите на ней ключевые кадры
номер 1 и номер 10. При помощи инструмента Rectangular Drawing (нарисовать
прямоугольник) постройте полоску и залейте ее линейным градиентом. Постройте
из этой полоски символ — для этого снова выберите команду Insert>Symbol
и укажите опцию Graphic. Выделите кадр номер 10 и поместите в него полоску
так, как показано на этой картинке.
- После этого выделите первый ключевой кадр на слое 2 и выберите команду Properties>Tweening.
Теперь выберите из разворачивающегося меню команду Motion и убедитесь, что
в данный момент включен режим Scale. Теперь отмасштабируйте полоску-символ
таким образом, чтобы он скрылся под кнопкой на слое 1.
- Включите режим Stop для кадра номер 10 в слое 1, после чего попробуйте прокрутить
свою анимацию при помощи команды Control>Test Movie. Действуя таким образом,
вы можете построить целую серию анимированных эпизодов, которые будут включаться
в ответ на какие-либо действия пользователя — включая отправку запроса к Web-серверу
загрузить новую HTML-страницу.