Совет 1: Как сделать анимацию на свой сайт

Если вам нравятся анимированные элементы на веб-сайтах и вы хотите сделать анимацию на свой сайт, но не хотите мучиться с Flash, существует простое и эффективное решение – анимированный GIF. Для создания анимированных GIF-файлов не требуется наличие навыков программирования или установки специальных плагинов. GIF-анимация это простой набор слайдов (картинок), которые сменяют друг друга через определенный интервал времени. Проигрывание этих картинок с интервалом в несколько миллисекунд создает эффект движения, подобный тому, когда мы в детстве рисовали на каждой странице блокнота, а потом очень быстро их перелистывали.
Вам понадобится
  • Компьютер, графический редактор Adobe Photoshop 5 версии и выше, редактор Adobe Image Ready
Инструкция
1
Запустите Photoshop и создайте новое изображение размером 100x100 пикселей. Установите разрешение в 72 пикселя и режим RGB. Выберите опцию Show Layers из пункта меню Window, что включит отображение палитры слоев.
2
В палитре инструментов выберите карандаш и нарисуйте какое-либо изображение. В палитре слоев нажмите Duplicate Layer, что создаст копию уже существующего слоя. Используйте инструмент “резинка”, чтобы стереть какую-либо часть изображения, затем карандашом добавьте изменения. Создайте столько слоев, сколько необходимо в том порядке, в каком они должны сменять друг друга. Каждый слой будет отдельным кадром вашей анимации.
3
Настало время анимировать полученные кадры. В меню File выберите Jump to, а затем Adobe Image Ready. Данное действие перенесет вас в другой графический редактор.
4
В меню Window выберите опцию Show Animation, которая включит отображение палитры анимации. В меню настроек палитры (значок стрелки в правом верхнем углу) выберите функцию Make Frames from Layers, что трансформирует все слои в кадры. Анимация уже почти готова.
5
Пора приступать к настройкам временного интервала. Выделите нужный кадр и в выпадающем меню (слева, внизу) выберите нужный отрезок времени, через который данный кадр сменится другим. Проделайте это с каждым кадром вашей анимации. Когда все будет готово, используйте опцию Save Optimized As, чтобы сохранить ваш первый анимированный GIF. Теперь вы можете использовать его как баннер или декоративный элемент на вашем сайте.

Совет 2: Как делать анимацию через flash

Трудно найти сайт, на котором бы не было анимированных баннеров и различных «живых» рисунков. За редкими исключениями, все это — flash-анимация, которую можно легко сделать самостоятельно. Для этого вам понадобится программа Macromedia Flash, интернет, немного места на жестком диске и чуть-чуть терпения.
Вам понадобится
  • - компьютер;
  • - программа Macromedia Flash;
  • - интернет.
Инструкция
1
Загрузите браузер и в строке поиска введите название программы - Macromedia Flash. Вам предложат множество ссылок, выберите наиболее свежую версию, и скачайте программу на винчестер. Также можно данное программное обеспечение скачать с сайта www.softportal.com. Установите Macromedia Flash, запустив установочный файл. Также стоит учитывать, что программы данного типа должны устанавливаться в системный каталог локального диска на компьютере.
2
Запустите программу, и создайте новый проект, выбрав пункт Open, Flash Document. Если у вас программа на русском языке, то название вкладок в меню будет отображаться другим образом. Откроется окно, в котором вы и будете создавать свой ролик. В верхней части оно содержит временную шкалу, слева — панель инструментов для рисования, в центре — область для создания графических объектов.
3
Создайте рисунок, используя элементы рисования, расположенные на панели слева. Под рабочей областью располагается панель свойств, где можно задать размер ролика, цвет фона, скорость воспроизведения и другие. Также в нижней части окна программы можно найти панель действий, где пишется код Action Script - то есть специальным языком описывается логика движений объектов на рисунке. Все настройки вы подбираете самостоятельно, так как нужно ориентироваться на визуальный просмотр.
4
Создайте несколько разновидностей основного рисунка для каждого кадра, нажимая кнопку F7 на клавиатуре. Проиграйте анимацию, нажав клавиши Ctrl + Enter. Сохраните созданную анимацию, выбрав пункт меню File, Save as. Задайте название проекта. Внесите дополнительные элементы, изучив меню программы и ее возможности, используя помощь программы или учебные курсы, которые легко найти в интернете.
Видео по теме
Видео по теме
Полезный совет
Рисовать кадры можно прямо в Adobe Image Ready, который обладает схожим, хоть и более бедным, функционалом.
Чтобы предварительно просмотреть свою анимацию, нажмите кнопку воспроизведения в палитре Анимации.
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500