Скрипты

grameasy-2-0-nul-автоматическая-публикация-в-instagram Grameasy - это мощный программный инструмент, который помогает настроить вашу учетную запись Instagram на автопилот, круглосуточно заниматься лайками и...
live-chat-3-v3-7-онлайн-чат-поддержки Live Chat 3 - лучший способ помочь своим клиентам. Это намного быстрее, чем электронная почта и более эффективней, чем телефон. Не оставляйте своих...
repairer-2-3-система-управления-мастерской Система управления мастерской по ремонту электроники и т.д. Это на самом деле инновационный, простой и мощный инструмент управления. Это просто Ваш...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Создаём Flash меню со звуком для сайта

Создаём Flash меню со звуком для сайта

В этом подробном уроке вы увидите как создать полноценное горизонтальное Flash меню, со звуком и анимацией при наведении курсора. Для реализации этого мы воспользуемся некоторыми приёмами которые доступны в программе Adobe Flash CS3 и пропишем простой Action Script сценарий, нечего сложного нет.

Вот можете посмотреть результат готового меню который у вас должен получиться в конце урока

 

Шаг-1 Создаём новый Flash документ размером 390 на 64 пикселя, цвет фона поставьте # B4B2AB а чистота кадров 44 в секунду.

788545876-24

Шаг-2 Выбираем инструмент Текст и переходим в панель свойств (Ctrl + F3) и выставляем следующие параметры как на картинке ниже.

788545876-23

Шаг-3 Пред тем как мы напишем текст для кнопок, разделите панель меню на три равные части с помощью направляющих.

788545876-22

Теперь пишем текст для кнопок нашего меню, распределите текст посередине каждой части и на одинаковой высоте относительно друг другу. Также нарисуем маленькие стрелочки, это можно сделать нарисовав сначала квадрат, а потом трансформировать его в стрелку, после скопировав поместить по середине над каждым словом.

788545876-20

Шаг-4 Выбираем инструмент Стрелка (V) Selection Tool и выделяем первую стрелку и текст.

788545876-19

После нажимаем клавишу F8 и преобразуем выделенное в символ.

788545876-18

Шаг-5 Так как только что созданный Movie Clip всё ещё выбран, перейдите в панель свойств и введите в поле Имя экземпляра - About_us

788545876-17

Шаг-6 Дважды кликните инструментом Стрелка Selection Tool (V) по сцене, для перехода в недавно созданный Movie Clip.

Шаг-7 И так мы находимся внутри Movie Clip About_us, переименуйте пока единственный слой на Текст.

788545876-16

Шаг-8 Инструментом Стрелка Selection Tool (V) выделите только стрелку над текстом. После нажмите сочетание клавиш Ctrl + X и стрелка исчезла с этого слоя но скопировалась в буфер обмена. Теперь создайте новый слой назовём его Стрелка, и выберите его, нажмите сочетание клавиш Ctrl + Shift + V и как вы видите стрелка скопирована на новом слое.

788545876-15

Шаг-9 Находясь на слое Стрелка нажмите клавишу F8 для преобразования в символ стрелочки над текстом.

788545876-14

<

Шаг-1 Создаём новый Flash документ размером 390 на 64 пикселя, цвет фона поставьте # B4B2AB а чистота кадров

788545876-13

Шаг-11 Находясь на 10 кадре инструментом Selection Tool (V) выделите стрелочку которая над текстом, для этого один раз кликните по ней. Затем перейдите на панель свойств (Ctrl + F3), там вы увидите выпадающий список, называется он Цвет выберите Тон и поставьте настройки как на картинке ниже.

788545876-12

Шаг-12 Теперь переходим на 5 кадр и с помощью инструмента Стрелка Selection Tool (V) перетащите экземпляр стрелки над текстом немного выше.

Шаг-13 Кликните правой кнопкой мыши по серой зоне между 1 - 5 и 5 – 10 кадрами и в контекстном меню выберите Создать анимацию движения.

788545876-10

 

Шаг-14 Теперь переходим на слой Текст, выделяем сам текст нажимаем F8 для преобразования в символ.

788545876-09

Шаг-15 Нажмите клавишу F6 на 5 и 10 кадрах. Находясь на 10 кадре, повторите Шаг-11 только измените цвет на # F8F8EE

Шаг-16 Находясь на 5 кадре повторите Шаг-12.

Шаг-17 Повторяем шаг 13.

788545876-07

Шаг-18 Теперь создаем новый слой под слоем Текст назовём его Прямоугольник.

788545876-06

Шаг-19 Выбираем инструмент Прямоугольник Rectangle Tool (R). На панели свойств отключаем рисования контура, а цвет заливки ставим # 303030.

423432423412143

Теперь рисуем полосу размером 130 на 2 px.

788545876-05

Шаг-20 Преобразуем только что нарисованную полосу в символ F8.

788545876-04

Шаг-21 Теперь нажмите F6 на 10 кадре и оставайтесь там. Выберите инструмент Свободное преобразование Free Transform Tool (Q) и сделайте так как показано ниже, удерживая клавиши Shift+Alt.

gif_demo_flash_menu_1

Шаг-22 Кликните по середине между двумя ключевыми кадрами правой кнопкой мыши и в контекстном меню выберите Создать анимацию движения.

788545876-03

Шаг-23 Теперь вернитесь на первый кадр, инструментом Стрелка Selection Tool (V) один раз нажмём на прямоугольник для его выделения. Затем перейдите на панель свойств (Ctrl + F3) В выпадающим списке Цвет выберите Альфа и поставьте параметр 0%.

788545876-02

Шаг-24 Итак большую часть закончили, теперь переходим на главную сцену и переименуем пока единственный слой на Меню.

Шаг-25 Создайте новый слой над слоем Меню и назовите его Невидимая кнопка.

Шаг-26 Находясь на слое Невидимая кнопка возьмите инструмент Прямоугольник Rectangle Tool (R), на панели свойств отключаем рисования контура, а цвет заливки можно поставить любой. И нарисуйте прямоугольник по размеру кнопки.

788545876-01

Шаг-27 Теперь превратим только что нарисованный прямоугольник в Кнопку, нажмите F8.

788545876-00

Шаг-28 Дважды кликните инструментом Стрелка (V) по только что созданной кнопке, для входа в неё.

Шаг-29 Сейчас мы должны добавить звук который будет проигрываться при наведении курсора, звук можете взят в исходнике который прилагается в конце урока. Откройте исходник и в библиотеке Ctrl+L найдите звуковой файл, выделите и скопируйте его Ctrl + C перейдите в библиотеку своего меню и нажмите Ctrl + V , всё звук скопирован. Теперь создайте новый слой и назовите его Звук, перейдите на второе состояние кнопки и нажмите F6 а на последнем состоянии F5. Перетащите звуковой файл из библиотеки на рабочую область, у вас должно получиться следующие.

788545875-00

Шаг-30 Переходим на главную сцену и инструментом Стрелка Selection Tool (V) выделяем невидимую кнопку. Откроем панель Action Script (F9) и вставьте следующий код.

on (rollOver) {
_root.mouse_over_About_us = true;
}
 
on (rollOut) {
_root.mouse_over_About_us = fstartlse;
}
 
on (release){
getURL("http://vlvit.ru/"); //URL кнопки 
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Шаг-31 Создайте новый слой с названием Action и разместите его в самом вверху, выберите первый кадр и войдите в панель Action Script (F9) куда скопируйте следующий код.

_root.About_us.onEnterFrame = function() {
if (mouse_over_About_us) {
_root.About_us.nextFrame();
} else {
_root.About_us.prevFrame();
}
};

Ну вот и всё на этом, повторите все проделанные действия для остальных кнопок.

 

 

Исходник

{reg} Скачать{/reg} {pub}

Ссылка доступна только для зарегистрированных пользователей!

Регистрация

{/pub}



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

  2. Add Yours

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

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...