1.5 Создание активных гиперссылок

Необходимо залинковать (создать активные гиперссылки) пункты меню. Сначала залинкуем вертикальное меню. Для этого нужно открыть вкладку активы и выбрать значок книги. Выделив таблицу меню, перетаскиваем ее в нижнюю часть библиотеки. Созданный архив назовем вертикальным меню. Каркас меню выделился желтым цветом, это значит, что он стал частью библиотеки. Открываем вертикальное меню в библиотеки, где мы видим наши разделы, но они еще не созданы. Для того, что бы создать разделы нужно сначала сохранить имеющийся документ с тем же именем, а затем сохранять его под именами разделов: главная, каталог, галерея, новости, контакты. Теперь можно приступать к линкованию. Открываем вкладку вертикальное меню, выделяем в нем первый раздел и во вкладки ссылка выбираем документ «главная». И так для каждого раздела выбираем необходимый документ, сохраняем. Разделы залинкованы, но теперь они имеют фиолетовый цвет ссылок. Для того, что бы вернуть белый цвет ссылкам, просто пропишем этот цвет в коде.

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

После того, как будут залинкованы оба меню, мы можем проверить активность ссылок. Теперь при нажатие на любой из пунктов меню, мы наблюдаем переход по страницам в адресной строке. Это значит что все ссылки активны и бесперебойно работают [4].

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

Как уже говорилось, для создания рекламного баннера мы будем использовать программный пакет 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.