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

Цялостен флаш сайт ІV (последна) част

Цялостен флаш сайт ІV (последна) част




Част 4 - Навигацията

В тази част ще разберете как да направите навигацията на сайта използвайки action script и Frame Label.

Стъпка 1

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

Стъпка 2

Кликнете на кадър 26 и натиснете F6. После отидете в панела Properties(Ctrl+F3) В лявата част ще видите че пише Frame. Под него напишете home. Това е Frame Label-a








Стъпка 3

След това отидете на кадър 75 и отново натиснете F6. После за Frame Label напишете about me.



Стъпка 4

Направете нов слой над navigation и го кръстете action. Кликнете на кадър 56 от този слой и натиснете F6. После напишете следния код в панела Action Script (F9)

Код
stop();

Стъпка 5

След това кликнете на кадър 75 и натиснете F6. После отново влезе в Action Script (F9) панела и напишете отново:

Код
stop();

Стъпка 6

Върнете се обратно на слоя menu, вземете Selection Tool (V) и кликнете два пъти на менюто, за да влезете вътре. След това селектирайте само бутона home, отворете Action Script (F9) панела и напишете вътре това:

Код
on (release) {
 _root.play();
 _root.choose = "home";
 }

Целия код за този бутон трябва да изглежда така:

Код
on (rollOver) {
 gotoAndPlay ("go1");
 }  <p>on (rollOut) {
 gotoAndPlay ("go2");
 }</p>  <p>on (rollOver) {
 gotoAndPlay ("go3");
 }</p>  <p>on (rollOut) {
 gotoAndPlay ("go4");
 }</p>  on (release) {
 _root.play();
 _root.choose = "home";
 }

Стъпка 7

След това кликнете на бутона about me и отново влезте в Action Script (F9) панела. Вътре напишете:

Код
on (release) {
 _root.play();
 _root.choose = "about me";
 }

Стъпка 8

Върнете се на главната сцена






Време е да анимирате втората страница. Кликнете на кадър 57 от слоя content и натиснете F6 После вземете Rectangle Tool ® . В настройките за цвят махнете цвета за рамката, а за цвят на пълнежа изберете #509313 и нарисувайте правоъгълник с размер около 450х3 и го раположете на върха на страницата със съдържанието.



Стъпка 9

Кликнете на кадър 65 и натиснете F6. След това вземете Free Transform Tool (Q), натиснете и задръжте Shift и уголемете правоъгълника така че да покрива цялото съдържание както е показано:



Стъпка 10

Кликнете на кадър 70 и натиснете F6. После отново вземете Free Transform Tool (Q) и направете следното:



Кликнете на кадър 73 и натиснете F6. После направете това:



Кликнете на кадър 74 и натиснете F7.

Стъпка 13

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





Направете това и за кадрите 65 и 70.



Стъпка 14

След това кликнете на кадър 75 и натиснете F6. После отново вземете Rectangle Tool ® , направете правоъгълник около 20х6 пиксела и го поставете в центъра на съдържанието.



После кликнете на кадър 80 и натиснете F6. След това вземете Free Transform Tool (Q) и направете следното:



Стъпка 15

Кликнете на кадър 85 и натиснете F6. После използвайки Free Transform Tool (Q) уголемете правоъгълника така че да запълва цялото съдържание.



Стъпка 16

Заключете и скрийте слоя content animation.



Кликнете на кадъра 66, а след това и на 85 от слоя content и натиснете F7.



Стъпка 18

На слой 85 направете втората си страница.



Стъпка 19

После кликнете на кадър 105 и натиснете F7

Стъпка 20

Върнете се на слоя content animation и я отключете и покажете. После кликнете на кадър 89 и натиснете F6

Стъпка 21


Докато все още сте на кадър 89 вземете Free Transform Tool (Q) и отново смалете правоъгълника както е показано:







След това кликнете на кадър 90 и натиснете F7

Стъпка 22

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

Стъпка 23

Селектирайте слоя action, кликнете на кадър 74 (в оригинала пише 77 но от скрийншота по-долу става ясно че трябва да е 74) , а след това и на кадър 91 и натиснете F6. Докато сте на кадър 91 отворете Action Script панела и напишете

Код
stop();

После се върнете на кадър 74 и напишете

Код
gotoAndPlay (_root.choose);



Стъпка 24

Кликнете на кадър 92 от слоя content animation. После вземете Rectangle Tool ® и нарисувайте правоъгълник с размери около 5х260 пиксела.



Стъпка 25

Кликнете на кадър 95 и натиснете F6. После вземете Free Transform Tool (Q) уголемете правоъгълника така че да покрива цялото съдържание.

Стъпка 26

След това отидете на кадър 115 и натиснете F6. После вземете Free Transform Tool (Q) и смалете правоъгълника както е показано



Стъпка 27

Кликнете на кадър 117 и натиснете F7

Стъпка 28

Върнете се на кадър 92 и отидете в панела Properties . После за Tween изберете Shape. Направете това и за кадър 105.

Стъпка 29

След това кликнете на кадър 116 от слоя action и натиснете F6 . После отидете в панела Action Script и напишете следния код:

Код
gotoAndPlay (_root.choose);

Стъпка 30

Кликнете на кадър 116 от слоя navigation и натиснете F5



Готови сме със сайта! Натиснете Ctrl+Enter за да го изпробвате. Ако се затруднявате и не разбирате нещо изтеглете работните файлове от урока: Линк

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

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




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

Коментари

kirchooo

абе хора,моля ви се напраите някои видео клип,че нещо...не съм много в час с флаш и не мога да го напрая :(

John Front

Е на това му се вика урок!Аплодисментите са и за Графа за неговите яки какички. :D

loshiamaster

a moje vaprosa mi da e malko tapi4ak ama kakvi programi se izpolzvat za flash ?

John Front

Adobe flash,Macromedia mx и т.н.

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

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