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

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

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




Дойде денят в който ще ви покажа как стъпка по стъпка да си направите флаш сайт. След като приключите с урока ще бъдете подготвени да направите всякакви сайтове отговарящи на всякакви критерии. Сaйта в урока ще съдържа:

Част 1: Прелоадера и анимирането му

1. Прелоадер - Ще видите как да проектирате и приложите action script кода върху него.
2. Анимацията към прелоадера - Ще видите как да анимирате прелоадера след като го завършите.

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

1. Зареждането на сайта - Ще видите как да заредите сайта след прелоадера. Също така ще видите как да заредите и анимирате началната страница.

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

1. Ще се научите как да направите меню и след това да го анимирате. Също така ще научите как да приложите action script код към него.

Част 4: Навигация и анимирането на страниците

1. Навигацията на флаш сайта - Ще видите как да създадете навигацията използвайки action script и Frame Label.
2. Анимирането на страниците - Ще видите как да създадете зареждаща анимация следкато сте натиснали на някой бутон в навигацията.

Използвайки този урок ще се научите:

1) Как да използвате флаш инструментите за рисуване (Rectangle Tool, Line Tool),
2) Как да използвате панела Color Mixer за да направите градиент,
3) Как да направите shape анимация,
4) Как да използвате Free Transform Tool (Q),
5) Как да използвате някои специални флаш съвети и трикове.
6) Как да използвате Frame Label и т.н.

Ето го и крайиния резултат:
ГОТОВ РЕЗУЛТАТ



Част 1: Прелоадера и анимирането му

Стъпка 1

Създайте нов документ. Изберете Modify > Document (пряк път: Ctrl+J ). Настройте ширината на 450 и височината на 400 пиксела. Изберете #EBFBDD за цвят на фона. Настройте frame rate-а на 24 и натиснете ОК.



Стъпка 2

Натиснете 2 пъти на layer 1 и го преименувайте на background. След това направете нов слой над него и го преименувайте на preloader.

Стъпка 3

Заключете слоя background, селектирайте слоя preloader и Rectangle Tool ®. После отидете в панела Properties (Ctrl+F3) под сцената и изберете следните опции:

1. Изберете #BAF088 за цвят на рамката.
2. Изберете бяло за запълващ цвят.
3. Изберете Solid за тип линия с дебелина 2.
4. Включете Stroke hinting за да избегнете всякакви замазани ръбове докато рисувате.



После нарисувайте правоъгълник около 128х8 пиксела.



Стъпка 4

Докато правоъгълникът все още е селектиран отидете в панела Align (Ctrl+K) и сложете тези настройки:

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



Току-що центрирахте правоъгълника спрямо фона.

Стъпка 5

Докато правоъгълникът все още е селектиран натиснете F8 (Convert to Symbol) и превърнете този клип в Movie Clip



Стъпка 6

Кликнете два пъти на movie clip-а на сцената с инструмента Selection tool (V) Трябва да се намирате вътре в клипа



Стъпка 7

Отидете на кадър 100 и натиснете бутона F5. След това направете нов слой над layer 1 и го кръстете line.

Стъпка 8

Върнете се на layer 1, вземете Selection Tool (V) и изберете само пълнежа на правоъгълника (както е показано по-долу)



Стъпка 9

Докато пълнежа на правоъгълника е селектиран натиснете Ctrl+C (Copy) После направете нов слой над слоя line и го кръстете mask. Селектирайте го и натиснете Ctrl+Shift+V (Paste in Place)

Стъпка 10

Изберете кадър 100 на слоя mask и натиснете F6. След това се върнете и поставете линията както е показано използвайки Selection Tool или стрелките на клавиатурата.



Натиснете с десен бутон някъде в сивата част между 1 и 100 кадър и изберете Create Motion Tween от менюто което се показва:



Стъпка 12

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



Стъпка 13

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

Стъпка 14

Селектирайте слоя percent и вземете Text tool-а (T). После в панела Properties (под сцената) изберете следете настройки:

1) Сложете Text Type на Dynamic TExt.
2) Изберете шрифта Trebuchet MS.
3) Размер 12.
4) Цвят #38680D.
5) За var напишете "perc1"





После напишете някъде над правоъгълника 99%:



Стъпка 15

Направете нов слой над слоя percent и го кръстете text. След това вземете Text Tool-a и отидете в панела Properties. После настройте следните опции:

1) Изберете Static за[color="#000000"] Text Field.
2) Шрифта [/color]Trebuchet MS (bold)
3) 9 за размер
4) #38680D за цвят
5) и Anti - alias for readability





Напишете някъде под правоъгълника Loading... както е показано по-долу:






Стъпка 16

Върнете се на главната сцена (Scene 1). Вземете Selection Tool (V), кликнете веднъж на прелоадера и натиснете F9 за да отворите Action Script панела. Вътре напишете следния код:

Код
onClipEvent (load) {
total = _root.getBytesTotal();
} onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
perc1 = ""+percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

Готови сме с прелоадера, време е да активираме анимацията. Да започваме!

Стъпка 17

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

Стъпка 18

Върнете се пак на слоя preloader, вземете Selection Tool (V) и кликнете два пъти върху прелоадера за да влезете отново в него.





После заключете всички слоеве освен layer 1 и line.



Стъпка 19

След това натиснете Ctrl+A (Select All) за да селектирате целия правоъгълник (рамката и пълнежа) на прелоадера. После натиснете Ctrl+C (Copy).

Стъпка 20

Върнете се на главната сцена и селектирайте слоя preloader animation, натиснете на втория кадър и натиснете F6. После натиснете Ctrl+V (Paste)

Стъпка 21

След това докато правоъгълника на прелоадера, който току-що копирахте е селектиран, отидете в панела Align (Ctrl+K) и изберете следните опции:

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



Стъпка 22

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



Стъпка 23

Кликнете на 10 кадър и натиснете F6.

Стъпка 24

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



Ще получите това:



Стъпка 25

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


Готово!

Време е за зареждането на сайта. Следва част 2.

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

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




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

Коментари

John Front

Царе сте на флаш. 5/5

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

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