оздание анимированного баннера и размещение его на странице

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

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

На новом слое, на первом кадре напишем светло-желтым цветом «Didlayn». Добавим к тексту эффект светового луча. Для начала разобьем слово, так, что бы каждая буква была на отдельном слое. Для этого выделяем текст с инструментом Arrow Tool, выполняем команды Modify => Break Apart и Modify => Time Line => Distribute to Layers. Теперь будем работать с каждой буквой по очереди. Затем нам необходимо перевести отдельные буквы из текстовых символов в графику, то есть в формы, состоящие из контуров и заливок. Это достигается путем повторного использования команды Modify => Break Apart.

Далее преобразуем каждую букву в мувиклип, используя команду Insert => Convert to Symbol, и дадим им следующие имена: «свет-D», «свет-i» и т.д. Создав мувиклип «свет-D», переходим к его редактированию. По команде Windows => Library вызываем библиотеку и, щелкнув дважды по мувиклипу «свет-D» в окошке библиотеки, перейдем к локальной монтажной линейке этого мувиклипа. Cпомощью инструмента Line (выберем для него желтый цвет) начертим контуры будущего шлейфа. Далее заливаем внутренне пространство желтым цветом, в результате чего получаем сплошную фигуру. Выделяем контуры с помощью инструмента Arrow и удаляем их, оставляя только заливку. Затем по команде Window => Design Panels => Color Mixer вызываем панель Color Mixer, в которой задаем цвет заливки (желтый) и градиент прозрачности. Для этого в указанной панели для левого маркера задаем бледно-желтый цвет и параметр непрозрачности Alpha=100, а для второго маркера — тот же цвет или еще более близкий к белому, а параметр Alpha=0.

Выбираем инструмент Fill Transform после чего появляются четыре маркера (три на эллипсе и один в центре эллипса), с помощью которых изменим параметры шаровой градиентной заливки. Управляя данными маркерами, перемещаем центр эллипса в центр буквы и добиваемся так называемого растворения хвоста шлейфа. Аналогичные шлейфы нужно создать для других букв.

После того как все мувиклипы с шлейфами будут готовы, создадим анимацию для шлейфа каждой буквы на общей монтажной линейке. Анимация будет состоять из двух участков: на первом этапе будет происходить проступание шлейфа (от полной прозрачности до непрозрачности), а на втором этапе обратный процесс — растворение шлейфа. При этом на втором этапе параллельно с увеличением прозрачности будет деформироваться шлейф так, что он будет сокращаться в продольном направлении и соответственно растворение шлейфа будет увеличиваться.

Анимация в кадрах с 1-го по 5-й состоит только в изменении непрозрачности (в 1-м она равна 0%, в пятом — 100%). В кадрах с 10-го по 15-й задается эффект расширения шлейфа одновременно с увеличением его прозрачности. Затем повторяем процедуру для других букв. В момент когда шлейф от буквы «D» стал полностью непрозрачным, стартует анимация для буквы «i» и т.д., что создает эффект прохождения световой волны.

Наш анимированный баннер готов: сначала на фоне галстука появляется подсвеченный текст «Didlayn», как только текст исчезает, галстук заворачивается и под ним появляется телевизор, где на мониторе прописывается «Ваша реклама». Остается только разместить баннер на странице. Для этого в программе Macromedia Dreamweaver в среднюю левую ячейку вставляем таблицу в 1 строку и 1 столбец, размером 90%, выравниваем ее по центру. Затем выбираем вкладку вставка, в ней выбираем вставку мультимедийного объекта и указываем необходимый объект. После того, как баннер вставлен, выбираем вкладку воспроизвести, что бы убедиться, что наша анимация работает [5].

Наша страница с анимированным баннером готова (Смотреть приложение Б).

Заключение

Созданная стартовая страница соответствует всем перечисленным требованиям. Она содержит в себе необходимую информацию о рекламном агентстве «Didlayn». Структура стартовой страницы состоит из хедера, футера, контента и двух активных панелей навигации: вертикальное и горизонтальное меню. В меню вписаны самые важные пункты сайта: главная страница (главная), каталог, галерея, новости и контакты. Хедер оформлен специально заготовленным в Corel Draw графическим изображением, где крупно и динамично прописано название рекламного агентства.

На странице размещен рекламный баннер агентства, который представляет собой галстук. Идея баннера в том, что под галстуком скрывается телевизор, на мониторе которого появляется текст «Ваша реклама», что отчетливо указывает потенциальным заказчикам, в какое агентство им лучше обратиться.

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

Список используемых источников:

1. Википедия http://ru.wikipedia.org;

2. Дизайн сайта http://www.web-siter.com;

3. Структура страницы сайта http://chvv.com.ua;

4. Уроки по Macromedia Dreamweaver www.webpartnerpro.ru;

5. Уроки по Macromedia Flash http://flash-animated.com.