Мастер-класс по видео и анимации на Web. Часть II Анимируйся!*

Flash-анимация

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

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

Возврат

Наш канал на Youtube

1999 1 2 3 4 5 6 7 8 9 10 11 12
2000 1 2 3 4 5 6 7 8 9 10 11 12
2001 1 2 3 4 5 6 7 8 9 10 11 12
2002 1 2 3 4 5 6 7 8 9 10 11 12
2003 1 2 3 4 5 6 7 8 9 10 11 12
2004 1 2 3 4 5 6 7 8 9 10 11 12
2005 1 2 3 4 5 6 7 8 9 10 11 12
2006 1 2 3 4 5 6 7 8 9 10 11 12
2007 1 2 3 4 5 6 7 8 9 10 11 12
2008 1 2 3 4 5 6 7 8 9 10 11 12
2009 1 2 3 4 5 6 7 8 9 10 11 12
2010 1 2 3 4 5 6 7 8 9 10 11 12
2011 1 2 3 4 5 6 7 8 9 10 11 12
2012 1 2 3 4 5 6 7 8 9 10 11 12
2013 1 2 3 4 5 6 7 8 9 10 11 12
Популярные статьи
КомпьютерПресс использует