Направете своята безплатна регистрация и се възползвайте от пълните възможности, които предлага iTSchool

Преглед на урок

Флаш - Анимирано меню

Флаш - Анимирано меню




Как да си направим флаш меню?

0. 1я слой си го кръщаваме както искате/ може и да не го. Само помнете кой ви е пръв

1. Избираме Rectangle Tool и си правим форма със заоблени ъгли 8 пиксела:



2. Правим си формите на бутончета. Като ги разполагаме на листа. Избираме всички и натискаме CTRL+K – позициониране и To Stage да не е цъкнато даваме на Space – Space evenly Horizontally – така ги разпределяме равномерно

Натиснете върху изображението за цял размер


3. Правим нов слой, копираме всички елементи от стария на новия.
- маркираме т.нар. бутончета. Избираме 2я слой и натискаме CTRL+SHIFT+V. Преименуваме 2я слой на InvButtons

4. Заключваме или скриваме 1я слой. Избираме първия бутон от 2 слой, натискаме F8 и избираме Button с черната точка по средата. Кръщаваме го както е показано:

Натиснете върху изображението за цял размер


5. После кликваме два пъти на току-що направения бутон и провлачваме първия кадър до четвъртия. После два пъти кликваме извън бутона за да се върнем на основната сцена. Така правим със всички бутони от втория слой като ги кръщаваме последователно butt-02, butt-03 ... и там колкото бутони си имате вие.



6. Ако правилно сте изпълнили операцията бутоните ще придобият синкав цвят и ще са леко прозрачни. Браво, направихте си скрити бутони.

7. Заключвате слоя със скритите бутони, скриваме го и се връщате на първия бутон от 1 слой. Избираме F8 и го превръщаме във символ със име butt1_mc. Натискаме CTRL+F3 за да си извикаме настройките, ако ги нямате и долу в ляво в полето Instant Name също вписваме butt1_mc. Същото правите и с останалите бутони. Като ги кръщавате последователно. butt2_mc, butt3_mc... според зависи колко са ви бутоните.



8. Време е да направите нов слой. Кръстете го AS. Изберете 1 кадър, натиснете F9 и въведете следния код:

Код
_root.butt1_mc.onEnterFrame = function() {
if (mouse_over_butt1_mc) {
_root.butt1_mc.nextFrame();
} else {
_root.butt1_mc.prevFrame();
}
};

Натиснете върху изображението за цял размер


Повтаряте кода за всички бутони като си заменяте имената им (butt2_mc..)

9. Отключвате си слоя със скритите бутони. Избирате първия, натискате F9 и му слагате следния код:

Код
on (rollOver) {
_root.mouse_over_butt1_mc = true;
}
on (rollOut) {
_root.mouse_over_butt1_mc = fstartlse;
}

on (release){
	getURL("index.swf", "iFrame");
}

* getURL("index.swf", "iFrame"); - текста за момента не ви трябва. После ще ви обесня как да си го настроите. Този скрипт го слагате и на останалите скрити бутони, като сменяте butt1_mc на butt2_mc за втория скрит бутон и т.н.

10. Време е да анимираме нашето меню. Скриваме си 2я слой със невидимите бутони. Заключваме последния и започваме да работим по първия.

Натиснете върху изображението за цял размер


11. Двоен клик на първия бутон за да редактираме нашият символ. Прозореца се променя. Правим си втори слой и в него пишем текста на бутона.



12. Сега ще анимираме. Избираме първия кадър на първия слой “main” и със десен клик избираме Create Motion Tween. Отиваме на 20 кадър и натискаме F6. Кликваме на бутона и от настройките избираме Tint и го слагаме на някой различен цвят.

Натиснете върху изображението за цял размер


13. Отиваме на слоя със текста. Правим същото обаче без да сменяме цвета на текста.
CTRL+Enter за да видите резултата

14. Ако ви се занимава може да раздвижите малко текста, да сложите допълнителни слоеве със други форми. Всичко това правете във символа на бутона. Повторете ефектите и на другите бутони.

15. Върнете се на стъпка 9. Червеният текст ви показва къде ще ви води ако цъкнете на този бутон. Настройте го спрямо това което искате да отваряте. Вторият червен текст е мястото където ще се отвори файла: _blank – отваря в нов прозорец; _self – отваря в същият прозорец; iFrame – отваря ви текста във фрейм, ако имате такъв на страницата.

Ето моя резултат – ЦЪК

Работни файлове по урока


Автор: AxllRose

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: AxllRose

Коментари

ThunderBolt

Аз имам проблем :(
След като ваведа единия от скриптовете при Ctrl+Enter ми изпусва и следното:
appear within on handler
_root.butt4_mc.onEnterFrame = function() {

Total ActionScript Errors: 4 Reported Errors: 4
И след анимирането не се изменят бутоните при преминаване на мишката или кликане (при Ctrl+Enter) и пак изписва ерора
Благодаря предварително :)

John Front

Справих се но има няколко пропуска в урока а и трябва да си досетлив тук заради недомлъвките на автора.

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.