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

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

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




Част 2: Зареждането на сайта

Ще разберете как да анимирате и заредите началната страница след прелоадера.

Стъпка 1

Направете нов слой над preloader аnimation и го кръстете area for content.



Стъпка 2

Отидете на десетия кадър от този слой и натиснете F6.

Стъпка 3

След това вземете Rectangle Tool ®. За цветовете направете, така че да няма цвят за рамката като натиснете на иконката с моливчето и след това на малък квадрат с червена диагонална линия. За пълнежа изберете #BAF088 и начертайте "правоъгълник" над частта от прелоадра която преди малко смалихме.






Стъпка 4

Отидете на кадър 18 и натиснете F6. После вземете Free Transform Tool (Q), натиснете на правоъгълника, задръжте Alt+Shift и уголемете правоъгълника за да е със същата ширина като фона (450 пиксела)



Стъпка 5

Вземете Selection Tool (V) и натиснете веднъж на правоъгълника който току-що уголемихте и отидете в панела Info (Ctrl+I) Сега променете ширината на 450 (освен ако не сте уцелили преди това)



Стъпка 6

След това, докато правоъгълникът все още е селектиран, отидете в панела Align и изберете следните опции:

1. Уверете се, че бутона Align/Distribute to Stage е включен
2. Натиснете на бутона Align horizontal center.
3. натиснете на бутона Align vertical center.



Стъпка 7

Отидете на 10-ия кадър и в панела Properties (Ctrl+F3), после за Tween изберете Shape:





Стъпка 8

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

Стъпка 9

Докато сте на този кадър, вземете Free Transform Tool (Q), задръжте Alt+Shift и направете следното:






След това задръжте само Alt:







Стъпка 10

Отидете на кадър 18, в панела Properties (Ctrl + F3). За Tween изберете Shape








Стъпка 11

Време е за шапката. Ако искате изтеглете изображението което аз използвам:



Стъпка 12

Направете нов слой над area for content и го кръстете header.

Стъпка 13

Отидете на кадър 20 на този слой, изберете File > Import > Import to Stage (Ctrl+R) и импортнете картинката която искате да използвате.

Стъпка 14

След това поставете изображението в горната част на страницата.



Стъпка 15

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



Стъпка 16

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

Стъпка 17

Върнете се на кадър 20, вземете Selection Tool (V) и кликнете веднъж на картинката, за да я селектирате. След това отново отидете в панела Properties (Ctrl + F3). В дясно ще видите меню за цвят. Изберете Advanced, после Settings и дайте следните настройки:



Стъпка 18

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



Отидете на кадър 200 и натиснете F5.

Стъпка 19

Време е да сложим съдържанието на началната страница. Създайте нов слой над header и го кръстете content.

Стъпка 20

Първо ще подготвим съдържанието и после ще го анимираме. Натиснете на кадър 40 и натиснете F6. След това напишете някакъв текст, сложете някакви картинки и т.н.



Стъпка 21

Създайте нов слой над content и го кръстете content animation. След това отидете на кадър 26 от този слой и натиснете F6. Вземете Rectangle Tool ®. Махнете цвета на рамката като кликнете на малкото моливче в прозореца за цветовете и изберете квадрата с диагонална червена линия. За цвят на пълнеже изберете #509313 и нарисувайте правоъгълник около 8х15 пиксела и го поставете в горния ляв ъгъл на частта в която ще слагаме съдържанието:



Стъпка 22

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



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




Стъпка 23

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



Стъпка 24

Отидете на кадър 55 и натиснете F6. Направете това:



Отидете на кадър 57 и натиснете F7 (празен кадър)

Стъпка 26

Върнете се на кадър 26 и отидете в панела Properties. За Tween изберете Shape . Повторете това и с кадрите 30, 40, 45 и 50.



Стъпка 27

Отидете на кадър 100 в слоя header и натиснете F5. После отидете на кадър 65 в слоя content и отново натиснете F5.





Следва направата на менюто и анимирането му в част 3.

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

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




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

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

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