Футуристично меню с Flash

accorp трудност:

видян: 12593

В този урок ще ви покажа как да си направите атрактивно меню от вълнообразно подредени топчета. Ще използваме малко математика и ако сте запознати със синус ще ви е по-лесно.

На теория:

• Ще подредим 10 топчета в средата на сцената. Направете сцената малко по-голяма, в зависимост от големината на топчетата.

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

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

• Ще обозначим текущото (последно посоченото) топче с число, според което "парчетата на тортата" ще се изместят. Така ще се получи, че посоченото топче застава по-средата, а останалите се подреждат според него.

• Позициите на топчетата не се сменят моментално, а плавно. Това се постига, чрез една малка формулка, която ще достигне желания ъгъл плавно. Още повече, че честота на кадрите ще зададем да бъде ок. 30 fps.

Направете си едно топче с Oval Tool. Около 30 пиксела ще са достатъчно. F8 -> MovieClip и сложете Registration point в средата. Още докато го правите MovieClip натиснете Advanced от прозорчето (ако не сте го натиснали) и изберете отметката "Export for ActionScript". Полето Identifier вече трябва да е активно - въведете в него btn. Чрез този identifier ще размножим топчетата, като го викаме от Library. Сега изтрийте топчето от сцената. Засега няма да ни трябва.

Трябва да направим и бутони, които всъщност ще улавят движението на мишката. Направете един правоъгълник с дължина 60 пиксела и височина 250 пиксела. Повторете процедурата с топчетата, само че в полето identifier сложете btn_back.

Вече сме готови да пристипим към кода. Посочете фрейм и отворете Actions панела (F9). На първо време, преди да пишете в панела вижте дали на него пише "Actions - frame". Ако фреймовете ви са повече от един сложете stop(); там къде ще пишете, ако ви е един единствен фрейм - можем да започнем писането.

Като за начало, ще отбележим сцената с променлива - доста удобна техника - след малко ще прикачим топчетата и правоъгълниците на сцената, така че като пишем кода, Flash ще разпознае методите на променлива и ще виждате Code Hints.

var home:MovieClip = this;

Нещо много важно - ще дефинираме променлива, която ще представлява броя на топчетата (съответно на правоъгълниците). Ако четете от XML, ще я дефинирате по-късно, но за сега ще го направим статичен:

var num:Number = 10;

(Десет топчета.)

Оставете 5-6 реда празни - разделете си кода така - най-отгоре променливи, а надолу функции и прочее.

Ще започнем с цикъл for, от 0 до 9 или от 1 до 10, по принцип няма значение, но е добре да започвате от 0 (или според случая), за да не се бъркате.

for(var i:Number=0; i

Дефинираме променлива btn с която ще оперираме по-лесно. Посочваме identifier-a, която вече зададохме в Library. Избираме и instance name за всяко топче, защото после ще ни е нужно да го намираме. i+num+2 - това буквално е дълбочината на всяко топче, 0 - това е дълбочината на сцената (home), не може да има два обекта на една и съща дълбочина, а искаме правоъгълниците да са зад топчетата. Затова прибавяме num.

var btn:MovieClip = home.attachMovie("btn", "btn"+i, i+num+2);

Това е една от ключовите точки в кода. angle е свойство за всяко топче, което ние дефинираме (ООП). Тук си "разрязваме тортата" на парчета. Тъй като функцията синус във флаш очаква радиани, а не градуси, направо ще работим с радиани. 360 градуса, т.е. един пълен кръг е равен на Пи умножено по 2 радиана (3.14 * 2). 3.14 е прекалено неточно, затова ще иползваме Math.PI, което ще го изведе доста по-прецизно. Разделяме цялата "торта" на броя топчета и получаваме парчетата. Умножаваме по нарастващото i от цикъла, което ще направи парчетата на равни разстояния. Т.е. (в градуси) - първото топче ще има ъгъл 0 градуса (i започва от 0), второто парче 36 градуса, третото 72 и т.н.

btn.angle = i*((Math.PI*2)/num);

Една техника, която обичам да прилагам - изчислявам, колко е разтоянието до първото топче от началото на сцената. Ще подредим топчетата едно до друго с 10 пиксела разтояние помжеду им, а аз знам колко топчета ще има (num).

var k:Number = Stage.width/2 - (btn._width*num + 10*(num-1))/2;

Задаваме хоризонталната позиция и центрираме с k.

btn._x = btn._width*i + 10*i + k;

Тук ще иползваме вече зададения "ъгъл", който както вече обясних съществува само на теория. Прибавяме и Stage.height/2, което винаги е средата на сцената. Върнете се горе при променливите и дефинирайте r - радиус, който ще използваме. Направихме бутоните-правоъгълници 250 пиксела, но за радуис това е много, така че задайте около 80:

var r:Number = 80;

Заележете как адресираме ъгъла на всеки бутон (ООП). Стойностите, които връща синус са в интервал от -1 до 1, а нашите ъгли са в равни итервали от 0 градуса до 360 (т.е. от 0 до PI*2). Ако тествате сега ще видите, че топчетата са подредени в средата на сцената и са образували една синусоида.

btn._y = Stage.height/2 + Math.sin(btn.angle)*r;

Страници: 1 2 »

Коментари (5)

Traseur4o на 15.09 2007 в 14:20ч.

може ли някакво демо?

komapeb на 11.12 2007 в 18:41ч.

:) Здравейте.
Предлагам там където задаваме променлива
var r:Number = 80;

да променим числото 80 с това:
(Stage.height/2)-(btn._height/2)
...
така максималната и минималната точки, които могат да достигне определено топче, ще е съответно горната и долната част на нашата сцена (независимо от височината и).
Надявам се да съм бил полезен :)

grizli на 06.05 2008 в 14:04ч.

А бе пич, много са ти яки уроците, но тоя специално само с Адоб флаш ли става? Пробвам с Флаш 8, съответно ползвам ActoinScript 2.0 и ми дава грешка при btn._x = btn._width*i + 10*i + k; ')' expected

grizli на 06.05 2008 в 14:29ч.

Определено има грешки в кода - при for липсва затваряща ")", както и {за начало на цикъла

simeonkata на 11.05 2008 в 15:48ч.

абе дайте некво демо плс?

Регистрирайте се, за да добавите коментар

реклама