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

Експеримент със Play/Pause бутон - Flash

Експеримент със Play/Pause бутон - Flash




Това е един много интересен урок, с който ще се поупражняваме в правенето на бутон за пауза и старт, чрез тази интересна мелница.

И така, да започваме:

1. Отворете нов документ. Оставете настройките по подразбиране. Променете само цвета, макар че и това не е задължително. Аз го направих черен.

2. В Timeline добавете още 3 Layer-а. Озаглавете ги, както е показано на картинката.



3. За да ви стане още по-ясно, ще напиша в кой Layer, какво трябва да правите.

Actions - подразбира се, че тук ще пишем код.

mcMillBlades - в този Layer ще сложим перката на нашата мелница, която по-късно ще превърнем в символ.

mill - тук е "тялото" на мелницата.

btnPlayPause - това е мястото за нашия Play/Pause бутон.

4. Сега нарисувайте вятърната мелница. Дизайнът и е абсолютно по ваш избор!

5. Превърнете в символ перката на мелницата. Озаглавете го "mc_windmillBlade". Трябва да е Movie Clip. Полето Registration да е в средата.

6. На долната снимка е показана визуализирана мелницата. Обяснени са със стрелки кой елемент, къде се намира. Настройте символа на перката както е показано най-отдолу на същата снимка:



7. Превърнете бутона Play/Pause в символ (символът е Button). Анимирането му е изцяло по ваш избор. Аз го направих ето така:



Properties настройте ето така:



8. Сега натиснете на Scene 1 в Timeline, за да се върнете в началото. Кликнете върху Layer-a "Actions", натиснете F9, за да изведете менюто Actions и поставете този код там:


arrButtonText = ["PLAY", "PAUSE"];
// ---------------------------
booPlaying = 0;
// Set default button display
strBtnText = arrButtonText[booPlaying];
// ---------------------------
numRotateRate = 5;
fncRotate = function () {
mcMillBlades.nRotationValue = (mcMillBlades.nRotationValue+numRotateRate)%360;
mcMillBlades._rotation = mcMillBlades.nRotationValue;
};
btnPlayPause.onPress = function() {
if (this._parent.booPlaying) {
// Insert whatever script needed here for action if already playing
clearInterval(this._parent.objRotate);
} else {
this._parent.objRotate = setInterval(this._parent.fncRotate, 5);
// Insert whatever script needed here for action if NOT currently playing
}
this._parent.booPlaying = Number(!this._parent.booPlaying);
this._parent.strBtnText = this._parent.arrButtonText[booPlaying];
};


9. Това е, вече сме готови. Дайте Ctrl + Enter и вижте крайния резултат.

Ето какво излезе при мен:

[html]
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="400" height="400" title="studio-bg.com">
<param name="movie" value="http://itschool.bg/application/uploads/tutorials/img/f/melnica/melnica.swf" />
<param name="quality" value="high" />
<embed src="http://itschool.bg/application/uploads/tutorials/img/f/melnica/melnica.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="400"></embed>
</object>[/html]




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




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

Коментари

pwndson

Ако може да покажеш крайният резултат? €.€

graf_kaberne

pwndson те са показали какво излязло при тях какво искаш още;)

stasssy

Много ми харесва урока, но нещо при мен не става. Не мога да разбера защо. Следвах всички стъпки, но ето какво се получи:
Мелница

stasssy

Опитах отново, но резултатът беше същоя. Много Ви моля за повече насоки.

graf_kaberne

stasssy направи тази настройка и ще стане;

http://store.picbg.net/pubpic/AF/65/6c4f9f269708af65.jpg

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

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