Прехвърляне към съдържание


graf_kaberne

Регистриран: 06 Sep 2007
Офлайн Активен: 25 Jul 2012, 13:57
*****

Теми

Create an Apple Inspired Flash Preloader

01 July 2009, 21:29

В този урок ще ви покажа как да създадете Inspired Flash Preloader с Flash и ActionScript 3.0.

Стъпка 1

В този урок ще създадем preloader MovieClip използвайки Flash инструменти като Rectangle Primitive Tool и нещо много важно за правилно подравняване: Snap To Objects option.

Стъпка 2

Отворете Flash и създайте нов (ActionScript 3) документ.

Публикувано изображение

Задайте от Вас желаните размери и фон на документа. Аз използвах размери 600 x 300px и добавих сив radial gradient (#666666, #333333).

Публикувано изображение

Стъпка 3

Да започнем със създаването на една проста форма, която ще се дублира 12 пъти. Вземете инструмента Rectangle Primitive Tool тогава отворете Rectangle Options панела уверете се, че corner radius control е заключен за да бъдат четирите ъгъла на формата еднакво заоблени и тогава задайте corner radius 15 като плъзнете corner radius control на дясно.

Публикувано изображение

Изключете цвета за Stroke color а за Fill color изберете бял цвят и направете правоъгълник с размери 25 x 85px.

Публикувано изображение

Това е формата, която ще бъде основната част от нашия Preloader.

Стъпка 4

Отворете Align panel и подравнете формата в горната част на документа по средата.

Публикувано изображение

Дублирайте формата (Cmd + D) и подравнете в долната част на документа по средата.

Публикувано изображение

Маркирайте двете форми и ги дублирайте след това изберете Modify > Transform > Rotate 90.

Публикувано изображение

Сега идва деликатната част, вземете инструмента Free Transform Tool уверете се че сте избрали Snap To Objects (това е икона като магнит в лентата с инструменти или View > Snapping > Snap to Objects). Дублирайте две срещу положни форми и започнете да въртите, ще забележите, че ротацията спира на всеки определен ъгъл. Повторете тази стъпка докато получите нещо като това:

Публикувано изображение

Стъпка 5

Сега трябва да промените Alpha стойноста на всяка форма за да се получи "follow" effect. Имаме 12 форми да започнем с първата дясна форма като и зададем Alpha 8% за втората 16% за третата 24% за четвъртата 32% за петата 40% за шестата 48% за 7-мата 56% за 8-мата 64% за 9-тата 72% за 10-тата 80% до десетата увеличихме с 8% за всяка форма а за последните две форми ще увеличим стойноста с 10% за 11-тата 90 и за последната 12-та си остава 100%. Вижте изображението по-долу;

Публикувано изображение

Стъпка 6

Маркирайте, изберете и 12-те форми и ги конвертирайте в един MovieClip с име "Preloader". Но все още не натискайте OK за да не се затвори Simbol Properties прозореца. Докато е отворен Simbol Properties сложете отметка на Export for Actionscript и в полето на Class: напишете: classes.Preloader след това натиснете OK. В полето на <instnse name> напишете preloader Щракнете два пъти върху създадения MovieClip за да имате достъп до самите форми. Дойде ред на анимирането кликнете на 3-ти кадър натиснете F6 вземете инструмента Free Transform Tool и завъртете формите така: там кадето е формата с Alpha 8% в нея позиция да бъде формата с Alpha 100%. Повторете тези действия докато формата с Alpha 100% дойде на положението на формата с Alpha 90% както беше още в началото. Вижте изображението по-долу:

Публикувано изображение

Тъй като анимацията е timeline based, скороста ще зависи от Frame rate (кадъра в секунда) задайте 25FPS. Ползвал съм 2 кадъра за всяко завъртане на формите:

Публикувано изображение

Стъпка 7

Нашия Preloader в момента е 300 x 300px естествено че няма да бъде толкова голям. Върнете се на главната сцена (Scene1). Изберете подходящ размер за вашия preloader и го поставете в центъра на документа. Аз избрах 48х48px.

Публикувано изображение

Стъпка 8

Създайте динамично текстово поле в центъра на документа под Preloader. В полето на <instance name> напишете "info". Това ще показва колко KB са заредени и колко процента. Напишете някакъв текст в динамичното поле за да имате представа за размера, цвета и шрифта който ще виждате.

Публикувано изображение

Стъпка 9

Създайте нов ActionScript file и поставете следния скрипт:

Публикувано изображение

Публикувано изображение

package classes
{
	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.events.Event;
	import flash.events.ProgressEvent;
	
	public class Preloader extends MovieClip
	{
		/* Variable to store dataTextField param in the constructor function */
		
		private var dataTextField:TextField;
		
		/* Start function */
		
		public function start(dataTextField:TextField):void
		{
			this.dataTextField = dataTextField;
			
			this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
			this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);
		}

		/* Set the percent loaded to the textfield */

		private function onProgress(e:ProgressEvent):void
		{
			/* Bytes related local variables  */
			
			var loadedBytes:int = Math.round(e.target.bytesLoaded  / 1024);
			var totalBytes:int = Math.round(e.target.bytesTotal / 1024);
			var percent:int = (e.target.bytesTotal / e.target.bytesLoaded) * 100;
			
			dataTextField.text = String(loadedBytes + " of " + totalBytes + "KB Loaded\n" + percent + "% Complete");
		}

		/* Here you can send to another frame/scene or load any other thing */

		private function onComplete(e:Event):void
		{
			/* Remove listeners */

			this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
			this.loaderInfo.removeEventListener(Event.COMPLETE, onComplete);

			//Do something
		}
	}
}

Запазете файла с име Preloader и в папка с име classes.

Публикувано изображение

Стъпка 10

Създайте нов ActionScript file поставете този скрипт:

Публикувано изображение

Публикувано изображение

package classes
{
	import flash.display.MovieClip;
	
	public class Main extends MovieClip
	{
		public function Main():void
		{
			preloader.start(info);
		}
	}
}

Запазете файла с име Main в папката classes кадето запазихте файла Preloader.

Публикувано изображение

Публикувано изображение

Стъпка 11

Върнете се на Fla документа отворете properties panel и в полето на Class: напишете: classes.Main

Публикувано изображение

Стъпка 12 - Заключение

Винаги можете да промените цвета на preloader като добавите Tint с различни стойности.

Публикувано изображение

Не се притеснявайте да коментирате и да задавате въпроси ако не сте разбрали нещо;)

Публикувано изображение
Автор: Carlos Yanez

източник: http://flash.tutsplu...lash-preloader/

Fla file

Публикувано изображение
Превод: graf_kaberne

моят опит

rollOver Buttons

24 May 2009, 09:57

Стъпка 1

Отворете нов flash документ с размери (150-100).

Стъпка 2

Вземете инструмента Rectangle Tool ( R ) Публикувано изображение и направете правоъгълник както е показано по-долу:

Публикувано изображение

Стъпка 3

Селектирайте правоъгълника натиснете (F8) (Convert to Symbol) и конвертирайте в Movie Clip Symbol.

Публикувано изображение

Стъпка 4

Кликнете два пъти върху току що създадения Movie Clip.

Стъпка 5

Конвертирайте отново в Movie Clip Symbol.

Публикувано изображение

Стъпка 6

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

Публикувано изображение

Стъпка 7

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

Публикувано изображение

8

Сега имате това:

Публикувано изображение

Стъпка 9

Върнете се на първия кядър вземете инструмента Selection Tool (V) кликнете един път върху правоъгълника отворете Properties Panel (Ctrl+F3) От Color menu изберете Alpha 30%.

Публикувано изображение

Стъпка 10

Направете същото и с 20-ти кадър.

Стъпка 11

Направете нов слой Публикувано изображение

Стъпка 12

Клик на кадър 1 отворете Action Script Panel (F9) и напишете- stop(); клик на 10-ти кадър натиснете F6 отворете Action Script Panel (F9) пак напишете stop(); виж по-долу:

Публикувано изображение

Стъпка 13

Върнете се на главната сцена (Scene1).

Стъпка 14

Маркирайте правоъгълника отворете Properties Panel и на <Instance name> напишете: button

Публикувано изображение

Стъпка 15

Сега направете нов слой, вземете Text Tool (T) напишете HOME или каквото решите върху правоъгълника.

Публикувано изображение

Стъпка 16

Направете нов слой вземете инструмента Rectangle Tool ( R ) и направете правоъгълник със същите размери с които направихте в стъпка 2.

Публикувано изображение

Стъпка 17

Конвертирайте правоъгълника в бутон (F8) (Convert to Symbol).

Публикувано изображение

Стъпка 18

Кликнете два пъти върху бутона за да влезете в рамките на бутона и преместете keyframe от UP на Hit.

Публикувано изображение

Стъпка 19

Върнете се на главната сцена (Scene1) маркирайте бутона от последния слой който направихте отворете Action Script Panel (F9) и поставете този скрипт:

Публикувано изображение

Копирайте скрипта от тук:

on (rollOver){
_root.button.gotoAndPlay(2);
}
on (rollOut){
_root.button.gotoAndPlay(11);
}

on (release) {
getURL("index.html");
}

index.html е страницата, където бутон ще ви отведе. Можете да поставите какъвто си искате линк.

Направете същото няколко пъти ако искате да си създадете лента с бутони.

Това е всичко;) (Ctrl+Enter)

Ако имате някакви въпроси относно този урок, моля свържете се с автора: chumpitas@gmail.com

източник


превод: graf_kaberne


резултат


fla file


Shadow button with two sounds

22 May 2009, 08:22

В този урок ще видите как можете да си саздадете бутон с два звука без помоща на action script. Вие ще научите също:

1. Как да създадете бутон.

2. Как да използвате Color Mixer Panel.

3. Как да направите сянка на бутона.

4. Как да импортирате звука в Flash и др.

Стъпка 1

Отворете нов Flash документ. Изберете Modify > Document (Ctrl+J ). задайте му 250 width 150 height цвят бял.

Стъпка 2

Вземете Rectangle Tool ( R ), кликнете върху Corner Radius намира се в панела с инструменти след това ще видите Rectangle Settings Panel и от там задйте на Corner Radius 4 points.Виж по-долу:

Публикувано изображение

Публикувано изображение

Стъпка 3

Изключете Stroke color, като кликнете на малката икона с молива и от там върху квадратчето с червена линия.За Fill color изберете цвят #7EBFD1 и направете "правоъгълник" с размери 120x40px.Виж по-долу:

Публикувано изображение

Стъпка 4

Докато правоъгълника e селектиран отворете Align Panel (Ctrl+K) и направете следното:

1. Уверете се, че Align/Distribute to Stage e включен.

2. Кликнете върху Align horizontal center и Align vertical center.

Публикувано изображение

Стъпка 5

Докато правоъгълника все още е селектиран отворете Color Mixer Panel (Wiindow > Color Mixer ) Shift + F9. След това направете настройките както е показано по-долу:

Публикувано изображение

Сега имате това:

Публикувано изображение

Стъпка 6

Вземете Text Tool (A) отворете Properties Panel и направете следните настройки:

1. Изберете Static Text.

2.Шрифт Cooper Black.

3.Размер на шрифта 20 pt.

4.Цвят бял.

5.Anti-alias for readability.

Публикувано изображение

Стъпка 7

Напишете "submit" повторете стъпка 4. Сега имате резултат като този:

Публикувано изображение

Стъпка 8

Вземете инструмента Selection Tool (V), маркирайте правоъгълника и текста натиснете F8 (Convert to Symbol), за да конвертирате правоъгълника и текста в бутон. Виж по-долу:

Публикувано изображение

Стъпка 9

Докато бутона е маркиран отворете Properties Panel (Ctrl+F3) изберете раздела Filters кликнете на "+" изберете Drop Shadow и направете настройките както е показано:

1. Blur X и Y до 15px.

2. Strength 74% .

3. Quality поставете на Low.

4. Color #69B5FF.

5. Angle 45.

6. Distance 5.

Публикувано изображение

Резултата до тук:

Публикувано изображение

Стъпка 10

Потърсете в нета два звукови файлове които ще използвате за този урок.

Стъпка 11

Импортирайте двата звукови файла във библиотеката File > Import > Import to Library. от прозореца, който се отваря намерете звуците натиснете и задражте клавиша Shift от клавиатурата кликнете на двата звука които ще използвате за да ги маркирате и натиснете Open. А сега отворете библиотеката (Ctrl+L), ще видите двата звукови файла, които вмъкнахте преди малко. Виж по-долу:

Публикувано изображение

Стъпка 12

Щракнете два пъти върху бутона с инструмента Selection tool (V). Сега сте в рамките на бутона.

Публикувано изображение

Стъпка 13

Щракнете с десния бутон на мишката върху кадър Over и от падащото меню изберете Insert keyframe. Виж по-долу:

Публикувано изображение

След това, маркирайте само правоъгълника и отворете Color Mixer Panel (Shift + F9) направете следното:

1. Изберете цвят за Fill.

2. Задайте Alpha до 45% за този цвят.

Стъпка 14

Клик с десния бутон на мишката върху кадър Down и от падащото меню изберете Insert keyframe. След това, маркирайте пак само правоъгълника Отворете отново Color Mixer Panel (Shift + F9) и задайте Alpha 30%.

Стъпка 15

Създайте нов слой с име sound над слоя layer 1.

Публикувано изображение

Стъпка 16

Клик с десния бутон на мишката върху кадър Over на слоя sound и от падащото меню изберете Insert keyframe.

Публикувано изображение

Стъпка 17

Докато сте на кадър Over плъзнете първия звук от библиотеката на сцената.

Стъпка 18

Щракнете с десния бутон върху кадър Down и от падащото меню изберете Insert keyframe.

Публикувано изображение

Стъпка 19

Плъзнете втория звук от библиотеката на сцената.

Публикувано изображение

Върнете се на главната сцена и тествайте (Ctrl + Enter).

източник

превод: graf_kaberne

резултат

fla file

Gree Blur animation

21 May 2009, 07:31

В този урок ще видите как да създадете blur анимация на снимка без помоща на action script.

Стъпка 1

Намерете си изображение което искате да ползвате.

Posted Image

Стъпка 2

Отворете нов флаш документ.Натиснете Ctrl+J (Document Properties) задайте ширината на 300 пиксела височината 188 пиксела frame rate 36 fps.

Posted Image

Стъпка 3

Щракнете два пъти върху layer 1 и го преименувайте. Натиснете Enter. след като сте написали новото име.

Стъпка 4

Изберете File > Import > Import to stage (Ctrl+R) вмъкнете изображението и отворете Align Panel (Ctrl+K) направете следното:

1. Уверете се, че Align/Distribute to Stage е активен.

2. Кликнете върху Align horizontal center и Align vertical center.

Posted Image

Стъпка 5

Докато е селектирано изображението натиснете F8 (Convert to Symbol), за да го конвертирате в Movie Clip Symbol.

Posted Image

Стъпка 6

Кликнете на кадър 15 натиснете F6 после на кадър 60 и 75 и пак F6.

Стъпка 7

Докато сте на кадър 75 изберете инструмента Free Transform Tool (Q), натиснете и задръжте клавиша Shift от клавиатурата и увеличете изображението малко, като е показано по-долу:

Posted Image

Стъпка 8

Изберете инструмента Selection Tool (V) и щракнете веднъж върху изображението за да го селектирате. Отворете Properties Panel (Ctrl+F3) изберете раздела Filters кликнете на "+" изберете Blur и задайте стойности както е показано по-долу:

Posted Image

Стъпка 9

Върнете се на кадър 1 и повторете предишната стъпка.

Стъпка 10

Кликнете с десния бутон на мишока някаде между кадър 1 и 15 както и между 60 и 75 и от падащото меню изберете Create Motion Tween.

Posted Image

Готови сме!(Ctrl+Enter)

източник

превод: graf_kaberne

резултат

fla file

Active flash icon

18 May 2009, 12:32

В този урок ще видите как да създадете активна флаш икона.


Стъпка 1

Отворете нов Flash документ. Изберете Modify > Document (Ctrl+J ).Настройте ширината на 200px височината 150px Frame rate 32fps.

Стъпка 2

Използвайте инструмента за рисуване или импортирайте някаква икона.Виж по-долу:

Публикувано изображение

Стъпка 3

Вземете Текст Tool (T), и над иконата напишете "flash icon" или нещо друго.

Публикувано изображение

Стъпка 4

Маркирайте иконата и текста (Ctrl+A), натиснете F8 или Modify > Convert to Symbol за да конвертирате иконата и текста в movie clip symbol.

Публикувано изображение

Стъпка 5

Можете да използвате flash filters, за да придадете малко Drop Shadow към иконата или каквото прецените.

Публикувано изображение

Стъпка 6

Кликнете веднъж върху иконата с инструмента Selection Tool (V), отворете Properties panel и на Instance name напишете icon.

Публикувано изображение

Стъпка 7

Щракнете върху иконата два пъти с инструмента Selection tool (V), или клик с десния бутон на мишока върху иконата и от падащото меню изберете Edit in Place.

Публикувано изображение

Сега би трябвало да сте в рамките на movie clip.

Публикувано изображение

Стъпка 8

Сега маркирайте само текста ("flash icon"), натиснете Ctrl + X (Cut), направете нов слой (layer2), и натиснете Ctrl+Shift+V (Paste in Place) и го заключете. Върнете се на layer1 натиснете F8 (Convert to Symbol) и конвертирайте иконата (без текста) в Movie Clip.

Публикувано изображение

Стъпка 9

Клик на кадър 10 и натиснете F6. След това с помощта на мишока или чрез стрелките на клавиатурата, преместете "иконата" малко нагоре.

Стъпка 10

Докато иконата е маркирана отидете на (Property inspector). В горния десен ъгъл ще видите менюто за цветове. Изберете Tint и цвят който желаете със стойност 43%.

Публикувано изображение

Стъпка 11

Щракнете с десния бутон на мишката между кадър 1и10 от менюто изберете Create Motion Tween.

Публикувано изображение

Стъпка 12

Заключете layer1 и отключете layer 2, кликнете на кадър 10 натиснете F6 вземете инструмента Selection Tool (V), и преместете текста под иконата.Виж по-долу:

Публикувано изображение

Стъпка 13

Щракнете с десния бутон на мишката между кадър 1и10 от менюто изберете Create Motion Tween.

Публикувано изображение

Стъпка 14

Кликнете кадър 10 отворете Action Script Panel (F9), и напишете следното:

stop();

Стъпка 15

Вземете Selection Tool (V), и преместете слоя layer 2 под слоя layer 1.

Стъпка 16

Върнете се на главната сцена (Scene1), направете нов слой с име Invisible Button и създаде Невидим бутон върху иконата.Виж по-долу:

Публикувано изображение

Публикувано изображение

Стъпка 17

Маркирайте бутона отворете Action Script Panel (F9), и поставете този скрипт:

on (rollOver) {
_root.mouse_over_icon = true;
}

on (rollOut) {
_root.mouse_over_icon = fstartlse;
}

on (release){
getURL("http://www.photoshop-bg.com/", "blank");

}

Стъпка 18

Създайте нов слой с име AS. Щракнете на кадър 1 отворете Action Script Panel (F9) и поставете този scritp:

_root.icon.onEnterFrame = function() {
if (mouse_over_icon) {
_root.icon.nextFrame();
} else {
_root.icon.prevFrame();
}
};

Това е всичко!

Приятен ден!:)

източник

превод: graf_kaberne

резултат

fla file