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

Банер

Банер




В този урок ще видите как се прави флаш банер без action script.

РЕЗУЛТАТ

Стъпка 1:
Направете нов документ, изберете Modify > Document (CTRL+J) и нагласете Width - 430 px и Height - 180 px. Frame rate го задайте на 22 fps.

Стъпка 2:
Намерете си три снимки (може и повече) и ги направете с размера на background-a (430-180 px), използвайте Photoshop или друга графична програма.

Стъпка 3:
Натиснете два пъти върху layer 1 и го преименувайте на picture 1.

Стъпка4:
Изберете File > Import > Import to Stage (Ctrl+R) и импортирайте първата снимка. С помоща на Align Panel (Ctrl+K) я позиционирайте в средата на background-a (сцената).



Стъпка 5:
Кликнете върху frame 80 от слоя със снимката и натиснете F5.

Стъпка 6:
Направете нов слой и го преименуваите на line 1. Селектирайте го, вземете Rectangle Tool (R), изключете Stroke colors, а за цвят на запълване (Fill color) изберете кaквото и да е, и направете правоъгълник с големина 10x20px. Използвайки Align Panel (Ctrl+K) го позиционирайте както е на снимката по-долу:





Стъпка 7:
Кликнете върху frame 10 и натиснете F6. Вземете Free Transform Tool (Q) и направете както е на снимката отдолу:



Стъпка 8:
Кликнете върху frame 20 и натиснете F6. Вземете отново Free Transform Tool (Q) и направете както е на снимката отдолу:



Стъпка 9:
Върнете се отново на frame 1. Селектирайте го и натиснете Shift. Сега селектирайте frame 10. Отворете Properties Panel (Ctrl+F3) и за Tween изберете Shape.



Стъпка 10:
Изберете слоя line 1 и го превърнете в маска (маркирате го, натискате дясно копче на мишката и избирате Mask).



Стъпка 11:
Избираме отново слоя line 1 и правим нов слой с име picture 2.

Стъпка 12:
Кликнете върху frame 60 и натиснете F6. Тогава натискаме Ctrl+R (Import to Stage) и си импортваме 2-та снимка. Отново я центрираме.

Стъпка 13:
Кликнете върху frame 60 на слоя (picture 2) и натиснете F5.

Стъпка 14:
Правим нов слой и по наименуваме line 2. Повтаряме стъпка от 6-10, но този път анимацията да започне както е показано на долната снимка:



Готови сме с първите две снимки. Повтаряте тези стъпки за всяка една следваща снимка в банера.

Стъпка 15:
Ако искате да прекрепите линк към баннера си, направете нов слой, на него нарисувайте прозрачен правоъгълник (Alpha 0%) и го направете Movie Clip, след това отваряте Action Script Panel (F9). Поставяте следния скрипт:

Код
on (release) {
getURL ("http://www.photoshop-bg.com","_blank");
} 
Последното нещо което може да ви потрябва е прелоадер. Ако искате такъв поставяте него на 1 кадър, а банера на следващия.

Готово!

Източник: http://www.tutorialized.com
Превел: ReASoN
Граматична проверка: AxllRose

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




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

Коментари

Denyhlp

Благодаря много за обяснението как се слага линк!
Вчера си троших главата с един друг урок, в който се казваше, че се прави невидим бутон /а не Movie Clip/ и линка ми изобщо не се отваряше.

Simeonov

Благодаря за урока!

John Front

Трябваше да се добави,че на AS 3.0 actions-a към shape-овете не бачка.

FXFlash

Показаното е добро за начинаещи, но е твърде опростено. Истински флаш банери се правят само тук

mirrorex

Добро е. Доста хора предпочитат по-малко Action Script.

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

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