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

Очи следящи курсора - Flash

Очи следящи курсора - Flash




В този урок ще се научите как да използвате един прост метод за създаване на следящи курсора очи. Има много начини да се постигне този ефект, но аз избирам в случая най-лесния (защото само него владея ;)). Ето как се получи при мен:
[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="550" height="400" title="studio-bg.com">
<param name="movie" value="http://itschool.bg/application/uploads/tutorials/img/eye_follow/eye.swf" />
<param name="quality" value="high" />
<embed src="http://itschool.bg/application/uploads/tutorials/img/eye_follow/eye.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="400"></embed>
</object>
[/html]
Както виждате този метод действа, но има някои недостатъци. Като за начало 'човечето' не може да погледне напред. Другото нещо е, че е като хамелион - движи си очите независимо едно от друго, което не е естесвено, но според мен изглежда забавно ;) (вторият проблем може да бъде поправен лесно, но това няма да го разглеждам в този урок....освен ако много не държите де).

1. Отворете нов документ:

File > New > Flash Document > Ok

2. Нарисувайте картинката, която ще представлява окото и я сложете в MovieClip:

Това е творческата част от задачата, така че оставям всичко във ваши ръце. ОБАЧЕ трябва да спазите следните правила:
!.1.! Обектът трябва да е симетричен и да има равни височина и широчина.
!.2.! Трябва да има нещо, което ще представлява зеницата на окото. Тази зеница трябва да е изместена нагоре от центъра на окото. Ето примери:
[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="208" height="86" title="studio-bg">
<param name="movie" value="http://itschool.bg/application/uploads/tutorials/img/eye_follow/eyes.swf" />
<param name="quality" value="high" />
<embed src="http://itschool.bg/application/uploads/tutorials/img/eye_follow/eyes.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="208" height="86"></embed>
</object>
[/html]
Така създаденото око селектирайте и:

Modify > Convert to Symbol....

.: Name: eye
.: Type: Movie clip
.: Registration: ( точно посредата)

Сега вече имате MovieClip, в който е окото.

3. Селектирайте окото и поставете следния скрипт в него:

//Това става в прозореца 'Actions', който може да бъде извикан от Window >
Actions или като натиснете F9
[color=blue]
onClipEvent (mouseMove) {
var radiani:Number = new Number(Math.atan2(_root._ymouse-this._y, _root._xmouse-this._x));
var gradusi:Number = new Number(Math.round((radiani*180/Math.PI)));
this._rotation = gradusi+90;
updateAfterEvent();
}

5. Нормално е да има две очи, така че с така селектирания MovieClip:

.: Edit > Copy
.: Edit > Paste

....и поставете второто око където му е мястото.

Забележка: Няма ограничение за очите, можете да си направите някво многооко чудовище или пък циклоп, пробвайте ;)

6. Тествайте филма:

Control > Test Movie
или
Ctrl + Enter

И отново няма да ви спестя (този път съвсем малко) разязнение по скрипта. Но естесвено ако не ви интересува не четете оттук нататък.

Всъщност скриптът е елементарен. То си е просто използване на математически функции.

[color=blue]onClipEvent (mouseMove) {

При всяко настъпване на събитието mouseMove на обекта, към който е присъединен скриптът се извършват действията между средните скоби ('{' и '}').

[color=blue]var radiani:Number = new Number(Math.atan2(_root._ymouse-this._y, _root._xmouse-this._x));

Създава променлива radiani от тип Number, която указва ъгъла на окото (в радиани) чрез функцията аркус тангенс (Math.atan)

[color=blue]var gradusi:Number = new Number(Math.round((radiani*180/Math.PI)));

Създава променлива gradusi от тип Number, която указва ъгъла на окото (в градуси) като използва уравнението за превръщане на радиани в градуси.

[color=blue]this._rotation = gradusi+90;

Задава въртене на окото, равно на стойността на променливата gradusi +90.

[color=blue]updateAfterEvent();

Това позволява дори кадрите в секунда да за малко, окото да се върти без да насича.

И това е. Сега остава само да ви кажа, че това въртене според мишката може да намери още много приложения, не само за очи. Ето този експеримент е създаде благодарение и на тази финкция.

Както винаги съветвам: Не се задоволявайте с това, което ви се казва в урока. Пробвайте първо да спазвате всичко както е, а след това започнете да експериментирате! Успех

Автор: sova


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




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

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

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