ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб сайтов под "ключ".

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

Анимация баннера

Анимация баннера

Текстовая анимация

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

Для создания текста Хотите построить объект, воспользуемся приемом покадровой анимации "пишущая машинка" который был описан ранее.

Дважды щелкнем левой кнопкой мыши по верхнему слою и назовем его" хотите построить объект".

Реализуем покадровую анимацию по приращению букв, чтобы на последнем кадре получилось необходимое словосочетание целиком: Хотите построить объект.

Панель Timeline

В результате должно получиться как на рисунке. Теперь выделим слосочетание, путем нажатия клавиши <F8> преобразуем его в символ типа Графика с одноименным именем.

Объект покадровой анимации

Теперь на теле банера, с помощью покадровой анимации, должна вырасти кирпичная стена. Создадим слой кирпич1. На нем выложим первый ряд кирпичной кладки.Для этого перетянем на тело банера заготовленный нами символ кирпич и установим его в левом нижнем углу баннера. Это будет первый кадр, который мы разместим на 47 фрейме. Затем установим курсор на 52 фрейме, нажмем клавишу <F6>, создадим второй ключевой кадр. Перетянем символ кирпич как показано на рисунке.

Слой кирпич1

И так далее. Укладывая кирпич к кирпичу, не забывая при этом создавать новые кадры, будет выложен первый ряд. Последний кадр на слое получился на 82 фрейме. Продлим его до 280 фрейма.

Укладка первого ряда

Создадим второй слой кирпич2. Первый ключевой кадр создадим на 88 фрейме. Перетянем на него созданный нами символ полкирпича. И далее аналогично первому слою, уложим второй слой.

Слой кирпич2

Теперь вернемся к слою хотите построить объект. Создадим ключевой кадр на 130 фрейме. По мере создания третьего кирпичного слоя, надпись "Хотите построить объект", должна медленно исчезнуть. Добиться этого мы можем применив анимацию Движение. Для этого на 186 фрейме создадим еще один ключевой кадр. Выделим его. Обратимся к панели Свойства. В раскрывающемся списке Цвет выбирем пункт Альфа и зададим параметр прозрачности равным 0. Между 130 и 186 фреймами зададим анимацию движение.

Анимация движения для слоя хотите построить объект

Создадим третий кирпичный слой кирпич3. На 132 фрейме создадим первый ключевой кадр, а на 164 фрейме последний ключевой кадр.

Анимация слоя кирпич3

Создадим четвертый кирпичный слой кирпич4. На 172 фрейме создадим первый ключевой кадр, а на 207 фрейме последний ключевой кадр.

Анимация четвертого ключевого кадра кирпич4

Создадим очередной слой Уже построили. Одноименная надпись должна постепенно появиться по мере завершения строительства кирпичной стены. Для этого воспользуемся анимацией Движение. Создадим на первый кадр анимации на 195 фрейме. Создадим с помощью инструмента Текст надпись Уже построили. Выделим ее и преобразуем в символ типа Графика с одноименным названием уже построили. Создадим второй ключевой кадр на 255 фрейме. Теперь вернемся к первому кадру. Выделим его и на панели Свойства в раскрывающемся списке Цвет выберем пункт Альфа. Зададим параметр Альфа равным 0. Между 195 и 255 фреймами создадим анимацию Движение.

Построение анимации слоя Уже построили

Теперь завершим кладку стены. Создадим слой кирпич5. На 214 фрейме создадим первый ключевой кадр, а на 249 фрейме последний ключевой кадр.

Анимация слоя кирпич5

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

Создадим слой строительная компания. На 238 фрейме создадим первый ключевой кадр с надписью Строительная компания. Преобразуем надпись в символ типа Графика. На 253 фрейме создадим второй ключевой кадр. Вернемся к первому ключевому кадру. Выделим его. На панели Свойства в раскрывающемся списке Цвет выберем параметр Альфа равным 0. Создадим между первым и вторым ключевими кадрами анимацию Движение.

Анимация для слоя строительная компания

Создадим последний текстовой слой Комплекс СК-2001 с одноименной надписью на первом ключевом кадре (253 фрейм). Выделим надпись и преобразуем в символ типа Графика. Создадим второй ключевой кадр на 263 фрейме. Вернемся к первому ключевому кадру. Выделим его. На панели Свойства в раскрывающемся списке Цвет выберем параметр Альфа равным 0. Создадим между первым и вторым ключевими кадрами анимацию Движение.

Анимация для слоя Комплекс СК-2001

И на последок оформим баннер следующим образом. Сетка и голубой фон сцены помогли нам рисовать и ориентироваться на теле рисунка. Теперь вернемся на панель Свойства и в параметре Фон поменяем голубой цвет на белый.

Создадим еще один слой прямоугольник. Перетянем его в самый низ панели Timeline. Используя инструмент Прямоугольник нарисуем прямоугольник голубого цвета.

Слой прямоугольник

Протестируем ролик, нажав сочетание клавиш <Ctrl>+<Enter>.

В окне веб-браузера это будет выглядеть ТАК.

Комментарии(0)

Для добавления комментариев надо войти в систему и авторизоваться
Комментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться