PDA

Просмотр полной версии : Плавно аннимированая кнопка


Дурачёк
19.06.2011, 10:48
Доброго времени суток!
Товарищи помогите пожалуйста!
прям вообще никак не могу нигде найти то что мне нужно сделать.
Проблема такая: есть кнопка, но хочется посадить на неё анимацию... да такую что-бы при "коротком" нажатии на кнопку. что-бы не пришлось её зажимать продолжала воспроизводиться её анимация... даже когда мышка уведена за пределы кнопки... к примеру нажали её а она загорелась и плавненко потухла... а в это время мы уже давим другие подобные кнопки =) вот вроде подробно расписал свою проблемку...
на AS1 мы как-то делали подобную вещь... но не книжки по какой делали ни материал ни исходники не остались... дела давно лохматых лет как только появлялась flash...

samana
19.06.2011, 14:02
Сделайте мувиКлип:
первый кадр - обычное состояние кнопки,
со второго кадра - анимация возгорания с потуханием (столько кадров, сколько нужно)
На первом кадре мувика - команда stop().
Повесьте клик на этот мувик, который будет переводить его во второй кадр и начинать воспроизведение.

Дурачёк
19.06.2011, 14:18
блин не особо вкуриваю...
у меня уже есть 20 разных кнопок... и решил каждой из них сделать такой эффект....
захожу в кнопку двойным кликом... перехожу на кадр "DOWN"
UP и OVER у меня пустые дабы не выдавать местоположение кнопки заранее
так же применил код
this.tabEnabled = false;
this.tabChildren = false;
чтобы скрыть жёлтые квадраты у кнопок
во втором слое кнопки на надате поставил звук... со звуком проблем нет... воспроизводится до конца и с той частотой накладывается что я и кнопку нажимаю

а вот сама кнопка тухнет.... мне нужно составить мувик на кадре DOWN ?
так вед? и ему применить анимацию... но он тухнет как только я отпускаю клавишу =(

samana
19.06.2011, 14:47
Наверно проще будет увидеть.

S-ed
19.06.2011, 16:21
20 разных кнопок лучше реализовывать через класс, добавив всего один обработчик.
samana
Весьма лаконичный пример. Удивил stop() без semicolon.

Дурачёк
19.06.2011, 17:28
может я дам исходник и вы на примере одной кнопки покажите так как я не особо понял про классы и обработчики.... а там уже придём к компромиссу, потому-что мне кажется вы меня не понимаете... а объяснить мне представляет возможным.... много времени прошло с того как я что-то помнил... а щас чуть ли не с нули приходится добиваться всего =(

и размер у меня получился огромный =) исходник 1.8 мб, а свф больше 400, разумно ли будет сделать прелоадер?

свяжитесь со мною по АСЬке 390461276
а потом в эту тему выложим конечный результат и как решить эту проблему... напишем отдельный файлик как образец

S-ed
19.06.2011, 17:58
Больше 400 мегабайт? 0_o
Да, прелоадер будет разумным если вы хотите создать продукт ориентированный на массовый просмотр (учтите, что прелоадер тоже чего-то весит, не надо добавлять лишних 200кб).

Класс - описание объекта - кнопки.
Обработчик - метод(функция класса), который выполняет определенные действия как реакцию на другие действия (в Вашем случае, запускает анимацию при нажатии).
В библиотеках Flash IDE уже есть компонент кнопки, можно расширить его.

Я так понимаю, Вы пишете код в кадрах? Если у Вас нет времени или желания, углубляться в AS3 откажитесь от классов. Используйте код samana для каждой отдельной кнопки.

В его примере, в первом кадре:for(var i=0;i<40;i++) /* этот цикл генерирует 40 кнопок, просто для примера*/
{
var b:GlowButton=new GlowButton(); /*это создание кнопки, графика лежит в библиотеке,
на ее основе создается класс GlowButton который используется здесь*/
b.x=Math.random()*550; // задаем случайное положение по х
b.y=Math.random()*400; // задаем случайное положение по у
addChild(b); //добавляем экземпляр кнопки в список отрисовки (отображаем на экране)
b.addEventListener(MouseEvent.CLICK,b_click);/*добавляем событие кнопке - реакцию на
клик по сути эта часть кода вам и нужна, надо только добавить такой вызов для каждой
кнопки (вместо b)*/

}

function b_click(e:MouseEvent):void /*функция, которая будет вызвана при появлении
события*/
{
(e.currentTarget as GlowButton).gotoAndPlay(2)/*функция, которая переводит анимацию
из любого кадра во 2й и продолжает воспроизведение (это анимация внутри кнопки которая
сейчас лежит в библиотеке)*/
};

В библиотеке:btn_amin(хорошее название) - муви клип, к которому привязан новый
класс GlowButton - в Properties - галка Export for Action Script

btn gr - муви клип, который используется как основной объект в анимации btn_amin (только
на экземпляр MovieClip можно положить эффект Glow, который использован в примере

Дурачёк
20.06.2011, 00:07
нет файлик 477 кб
просто кнопки в виде цифр а они в PNG формате...
.... код который мне дали я примерно понял... то что рандомным случаем раскидывает 40 таких мувиков... это мне нишлнее они у меня уже стоят на нужном месте....
и название в библиотеке у самх цифр одно, а у кнопок другое 0, 0а, 1, 1а, 2, 2а и т.д.
как мне быть... может действительно посмотрите исходник и скажите что сделать? порсто реально нехочется переделывать весь клип и о5 к каждой кнопке везать свой звук... а внешне есть дубликаты кнопок =)
там все сложно и заморочено =)

... и если исходит из того что я всё таки хочу углубиться в познания AS3, и да пишу код в кадрахююю это не правильно? или в моём случае непрактично?

S-ed
20.06.2011, 00:57
Да, код в кадрах - не хорошо. Хотите изучать AS3 и писать хороший код, читайте AS3 Колина Мука.
Ваш проект я могу даже не смотреть.
У Вас есть кнопка, третий кадр которой - есть анимация, которая играется при нажатии.
Увы, это экземпляр класса SimpleButton, и для него невозможно переопределить события (по крайней мере, я не знаю как).

Как мне кажется, разумным будет превратить все кнопки в MovieClip, вcтавить в их первый кадр stop(); и отталкиваться от кода приведенного выше.
Этот код Вам немного поможет, вставьте его в основной таймлайн стейджа.
Задайте имена всем кнопкам на стейдже (выделить кнопку и смотреть первое поле - Instance Name в properties, ниже - тип объекта, должен быть MovieClip)
import flash.events.MouseEvent;

var buttonLinks:Array = new Array(button1, button2, ...);//имена всех кнопок через запятую
for each(var but in buttonLinks)
{
but.addEventListener(MouseEvent.CLICK, buttonPressed);
but.addEventListener(MouseEvent.MOUSE_OVER, buttonMouseOver);
but.addEventListener(MouseEvent.MOUSE_OUT, buttonMouseOut);
}

function buttonPressed(e:MouseEvent):void
{
MovieClip(e.target).gotoAndStop(3);
}

function buttonMouseOver(e:MouseEvent):void
{
MovieClip(e.target).gotoAndStop(2);
}
function buttonMouseOut(e:MouseEvent):void
{
if(MovieClip(e.target).currentFrame == 2)
{
MovieClip(e.target).gotoAndStop(1);
}
}
В Каждом 3м кадре кнопки, у Вас сейчас стоит анимация. Зайдите в нее, и в самый последний кадр вставьте код: this.parent.gotoAndStop(1);

Учтите. Не пользуйтесь этим кодом в будущем. Это плохой пример.