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

Цялостен флаш сайт ІІІ част

Цялостен флаш сайт ІІІ част




Част 3 : Менюто и анимирането му

Ще видите как да проектирате меню и как да го анимирате след това. Също така ще се научите да прилагате Action Script към него.

Стъпка 1

Направете нов слой над content animation и го кръстете menu.



Стъпка 2

Вземете Text Tool-a и отидете в панела Properties (Ctrl+F3) . После изберете следните настройки:

1) За Text Field - Static
2) За шрифт - Trebuchet MS (bold)
3) За размер на текста - 15.
4) За цвят на текста - #2F560C
5) Изберете и Use Anti-alias for readability



Напишете това което искате да е в менюто в лявата част на шапката:



Стъпка 3

Вземете Selection Tool-a и селектирайте всичкия текст. После натиснете F8 и превърнете текста в Movie Clip



Стъпка 4

Кликнете два пъти на Movie Clip-a със Selection Tool . Сега трябва да се намирате вътре в него:



Стъпка 5

Сега вземете Selection Tool и селектирайте само текста About Me. Натиснете Ctrl + X (Cut)
Направете нов слой над layer 1. Кръстете го About me. После го слеектирайте и натиснете Ctrl + Shift + V (Paste in Place)

Стъпка 6

Направете същата процедура като селектирата текста contacts.

Стъпка 7

Кликнете два пъти на слоя layer 1 за да го преименувате на home. Какво направихме? Сега имаме всяка част от менюто на отделен слой.



Стъпка 8

Докато все още сте на слоя home, натиснете F8 и превърнете текста в Movie Clip.



Стъпка 9

Отидете на кадър 25 и натиснете F6

Стъпка 10

Време е да анимираме първия бутон в менюто. Докато все още сте на кадър 25, със Selection Tool кликнете два пъти на Movie Clip-a Home за да влезете в него.



Стъпка 11

Докато тексът все още е селектиран отново натиснете F8 и го превърнете в Movie Clip



Стъпка 12

Вземете Selection Tool и преместете кадър 1 на кадър 2.



Стъпка 13

След това отидете на кадрите 10, 11 и 20 и натиснете F6

Стъпка 14

Върнете се на десетия кадър, вземете Selction tool , кликнете веднъж на бутона и в панела Properties за цвят изберете Tint. За Tint цвят нека бъде черно на 100%.





Стъпка 15

Отново вземете Selection Tool и отидете на кадър 10. Натиснете F9 за да влезете в ActionScript
менюто. Напишете:

Код
stop();

Кликнете на кадър 10, копирайте го (Ctrl + C), отидете на кадър 11, натиснете delete и след това натиснете Ctrl + Shift + V (Paste in Place)

Стъпка 16

След това отидете на кадър 2 и в панела Properties за Frame Label напишете go1.





Направете това и за кадър 11, но този път напишете go2.

Стъпка 17

Кликнете с десен бутон някъде в сивата част между кадър 2 и 10 и кадър 11 и 20 и натиснете Create Motion Tween



Стъпка 18

Направете нов слой над layer 1. После влачейки го сложете под layer1.

Стъпка 19

Отидете на първия кадър от този слой и в панела ActionScript (F9) напишете

Код
stop();



Стъпка 20

Направете нов слой над layer 1 го кръстете line. След това отидете на кадър 2 на този слой и натиснете F6

Стъпка 21

После вземете Line Tool (N) . За цвят на линията изберете черно. Изберете Solid за типа. Дебелината настройте на 1. После нарисувайте линия под надписа.



Стъпка 22

Докато линията все още е селектирана натиснете F8 и я превърнете в Movie Clip



Стъпка 23

Отидете на кадрите 10, 11 и 20 и натиснете F6

Стъпка 24

Върнете се на кадър 2, вземете Selection Tool и натиснете веднъж на линията за да я селектирате. Отидете в панела Properties (Ctrl+F3). Вдясно ще видите меню за цвета. Изберете Alpha и го настройте на 0%.



Направете това и за кадър 20.

Стъпка 25

Вземете Selection Tool отново и селектирайте кадър 2. После отидете в панела Properties (Ctrl+F3) и за Frame Label напишете go3 . Направете това и за кадър 11, но напишете go4.



Стъпка 26
Кликнете с десен бутон някъде между 2 и 10 също така и между 11 и 20 кадър и изберете Create Motion Tween

Стъпка 27

Отидете на кадър 10 и натиснете F9 за да се появи ActionScript панела. Вътре напишете:
Код
stop();

Стъпка 28

Отидете на втория кадър на layer 1 и го копирайте като натиснете Ctrl+C После направете нов слой над line (layer 4), селектирайте го и натиснете Ctrl+Shift+V (Paste in Place). След това вземете Selection Tool, селектирайте всички кадри освен първия и след като кликнете с десен бутон изберете Remove Frames



Стъпка 29

Върнете се на предишната сцена.



Вземете Selection Tool и кликнете веднъж на бутона Home за да го селектирате. После отново отидете в AS панела (F9) и напишете следния код:

Код
 

on (rollOver) {
gotoAndPlay ("go1");
}

on (rollOut) {
gotoAndPlay ("go2");
}

on (rollOver) {
gotoAndPlay ("go3");
}

on (rollOut) {
gotoAndPlay ("go4");
}

Стъпка 31

Отидете на кадър 25 от слоя home, влезте в AS панела (F9) и напишете следния код:

Код
stop();

Анимирахме първия бутон в менюто ни. Повторете стъпките от 8 до 31 и за останалите бутони.

Стъпка 32

Време е за анимацията на менюто ни, затова създайте нов слой над Contacts и го кръстете menu animation.



Стъпка 33

Вземете Rectangle Tool ® За настройките на цветовете премахнете цвета за рамката, а за пълнежа използвайте #EEFBE3. Нарисувайте правоъгълник над менюто



Стъпка 34

Отидете на кадър 5 и натиснете F6 . После вземете Free Transform Tool (Q) задръжте Shift и намалете правоъгълника малко отдясно:



Стъпка 35

Върнете се на първия кадър и в панела Properties (Ctrl+F3) за Tween изберете Shape





Извършете същата операция на кадрите 10,15...25 докато не се покаже цялото меню.

Стъпка 36

Върнете се на главната сцена. После създайте нов слой над header и го кръстете header extension. След това отидете на кадър 25 и отново вземете Rectangle Tool ® . В настройките за цветовете махнете цвета за рамката. Нарисувайте правоъгълник с размери около 220x130 px и го сложете в горната лява част на шапката. После отидете в панела Color Mixer (Shift+F9) и изберете следните настройки:

1) За Type изберете Linear
2) Натиснете на малкия квадрат в лявата част на преливката и я преместете към центъра. Изберете #EEFBE3 за цвят. Кликнете на втория малък квадрат и изберете #F3FCE9 за цвят.



Получава се това:



Защо направихме това? Заради менюто. Изображението на шапката има преливка която не подхожда на анимацията на менюто ни.

Стъпка 37

Отидете на кадър 200 от слоя menu extension и натиснете F5

Готови сме! Следва последната 4 част.

Източник : Flash Vault
Превела : sweet.kitten
Редактирал: AxllRose

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




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

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

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