В этом уроке я поделюсь еще одним методом анимации кнопок. Ранее, я уже рассказывала о схожем способе создания кнопки. Сегодняшний метод построен на принципе программного проигрывания анимации вперед и в обратном направлении в зависимости от положения курсора на кнопке. В первом уроке я создавала 2 разные анимации – положение на и положение за пределами кнопки. Так что задача в этот раз в какой-то степени проще в плане анимации:) Так же будет использоваться Action Script 2. Для тех, кому нужна такая кнопка в as3 - читаем в новом уроке Плавная анимация кнопки при наведении в as3.
Шаг 1. Создание мувиклипа
Cоздадим мувиклип (Cntr 8), назовем, как нравится. ice-cream 1, например:)
На 3-х отдельных слоях разложим нашу графику и подпишем каждый слой для удобства:
1- слой button – кнопка. Она прозрачная, поскольку графика размещена лишь в кадре Hit:
2-слой ice-cream – мороженое, мувиклип,
3-слой button menu - желтая кнопка, мувиклип.
Шаг 2. Анимация
По задумке, при наведении курсора наш сладкий продукт увеличится в размерах, а кнопка загорится лимонно-желтым цветом. Создаем дополнительные ключевые кадры в 9-м кадре и делаем анимацию.
В последнем кадре мороженое увеличиваем масштабированием и немного поворачиваем, а к кнопке применяем эффект Adjust color, увеличиваем значение Contrast 30. Теперь она ярко- желтая, какой и должна становится при наведении.
Создаем твиннинговую анимацию (клик правой по первому ключевому кадру - Create Motion tween), ставим замедление анимации 100.
Шаг 3. Instance name
Выделяем кнопку на самом верхнем слое и прописываем ей имя button в строке Instance на панели Properties.
Очень важный пункт, хоть и короткий:) Без этого действия наша кнопка не будет работать.
Шаг 4. Action
Теперь выходим из режима редактирования мувиклипа на главную сцену. Выделяем его, открываем панель Action (F9). В открывшемся окошке пишем следующий код:
Чтобы не набирать много текста, текст копируем отсюда:
Анимация либо проигрывается вперед, либо назад – в зависимости от значения переменной "go".
Тестируем, все работает, как надо! При необходимости качаем исходник и разбираем.
Также можно скачать исходник кнопки c использованием AS3 с нового урока.
Чтобы сделать кнопку кликабельной, дописываем в конце кода:
button.onRelease = function (){
getURL('название сайта','_blank');
};
}
Очень запутанно и непонятно. Скачал все исходники примеров по кнопкам. Может быть потому что рассказывается дизайнером, а не программистом. Все подается так, как будто человек уже знает, о чем в уроке рассказывается. Можно было бы последовательно объяснить, что нужно сначала создать анимацию, потом ее остановить, при наведении курсора запустить и т.д.
привет! as2 в новых версиях флеш уже не поддерживается,увы. ищите подобные уроки по as3, этот уже устарел(
ps. да,информация скорее подается для художника-аниматора, который во флеше работает, но с программированием не сталкивался или сталкивался очень мало.
На счет кнопки, что бы при нажатии перемещаться на другой кадр во флеше , какой должен быть код? Я перепробовала все варианты, не хочет тыкаться:(
Если назначить имя экземпляру, которое используется в AS, то эта анимация не работает
Добрый день! Столкнулся с такой проблемой! Вроде бы сделал всё как вы сказали, но у меня выбивает ошибка ( синтаксическая ошибка: ожидается точка с запятой перед leftbrace) Подскажите пожалуйста, что нужно делать ?
Скачать исходник . залесть вовнутрь файла и сравнить )))
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
Там даже и не пахнет этим файлом...
А как скачать? Что-то я там разобрать не могу?
Синенькая надпись ИСХОДНИК в предложении
Тестируем, все работает, как надо! При необходимости качаем исходник и разбираем.
Клацаете по ней сразу же появляется окошко куда сохранить заархивированный файл.
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
А есть исходник с Action Script 3.0?
Нету. Урок же для Второго.
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
Спасибо за урок!) Отвечаю поздно. Но этот урок - был первой работой с флеш - сделала кнопки зверей на сайт.
Спасибо еще раз!
рада, что пригодилось)
Добрый вечер, Оксана.
Посмотрел несколько Ваших уроком, которые имеют отношение к добавлению интерактивной кнопки (например, меню на flash для обычного html-сайта ).
Появились такие вопросы.
1. Какой размер сцены ставить? 1 px, по размеру создаваемой кнопки или всего меню, или вообще стандартный оставлять?
2. Какой код вставлять в уже ГОТОВУЮ html-страничку, что бы всего лишь работала этот swf флешка?
Для кнопки писать то, что выдает Adobe Flash или достаточно просто кода для картинки, с размерами и ссылкой на swf на сервере ?
Спасибо, если ответите.
В Сети достаточно информации по этому вопросу, но толком ничего не написано.
1. Размер сцены делайте хоть 1 px, но когда вы вставите флешку и будете указывать нужный размер, например блок div у вас 100х50px, а вы воткнули флешку 10x20px и при вставке указываете размер во весь блок, то ничего хорошего не выйдет.
Вывод, вам нужен качественный флеш в определенной части сайта, делайте саму флешку по размерам, равным размеру ячейки или блока, под эту флешку.
2.
Вот так вставляется флешка в html
здравствуйте, Александр
1) размер сцены = размеру баннера, меню пр.
2) на счет хтмл не подскажу, здесь у меня пробел
Добрый вечер, Оксана. У меня к Вам огрооомная просьба. Может у Вас есть урок или Вы бы смогли рассказать здесь в комментариях как выполнить следующую задачу:
При наведении на кнопку баннера рядом (не важно где, справа, слева и тд) начинает проигрываться анимация, а точнее картинка с каким-нибудь эффектом.
Чтобы было понятнее, вот пример того, что я имею в виду
http://flash-banners.ru/portfolio/#tks_300k
Если Вы ответите хоть что-нибудь я буду Вам оооочень благодарна!
Очень надеюсь на ответ
Этот урок как раз и позволяет создать то что вы желаете.
При наведении на банер кнопку у нас увеличивается кнопка в упражнении, но никто не запрещает сделать там кучу эффектов.
http://leetovetz.deviantart.com/art/016-solar-system-321584412
вот пример сделанный чисто по этому уроку.
может суть в том, что в символе внутри, есть 10 кадров. за эти 10 кадров он увеличивается и останавливается на 10.
То за эти 9 кадров можно сделать мигание, а в последнем 10 создать символ с зацикленной анимацией. и при наведении получится анимация 9 кадров (увеличение, мигание) и 10 кадр зацикленная анимация, эффект. При убирании курсора, все проиграется обратно. так что тот пример что у вас есть как раз можно по этому уроку и реализовать.
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
Оксана, большое спасибо за урок!! очень мне помог!
Только никак не получается сделать кнопку с переходом на сайт.
Подскажите, пожалуйста, куда нужно вставлять этот код
button.onRelease = function (){
getURL('название сайта','_blank');
};
}
Я вставляю после основного кода - в итоге у меня сама кнопка начинает безумно мигать. Пробовала также вставить в вашем исходнике - получается то же самое мигание( Помогите, пожалуйста!
Уберите в коде последнюю скобку, код вставьте не на кнопку (не в продолжение кода), а войдите в кнопку и создайте новый слой, выделяете первый кадр жмёте ф9 и впечатайте код. Это странные штучки второй версии action script...
Ну и на всякий случай: зайдите в file-publish settings- вкладка flash- внизу поищите local playback security должно стоять как accesse network only - это загадочные грабли на которые часто наступают - файл может работать на вашем компе, а при публикации в нете - нет...
Ну и чтобы наверняка: Указывайте в вопросе что компилятор (compiler errors) пишет при ошибке - там же пол-ответа и содержится
Что бы вы сделали, если бы точно знали что всё получится?...
Наталья, после основного кода...затрудняюсь сказать,почему не получается у вас(
Оксана, спасибо за урок!!! очень мне помог!
Не подскажите, куда нужно вставлять
button.onRelease = function (){
getURL('название сайта','_blank');
};
}
чтобы кнопка была кликабельной? я вставляю в самый конец после предыдущего когда - кнопка не работает, начинает мигать( сделала также в вашем исходнике, получилось то же.
фуф это был пиз..... я еле разобрался от чего к чему с помощью исходника as3 и как сделать не одну кнопу и т.д. надо бы так то лучше урок на as3 сделать и более подробный для полных нубов=)
deviantArt
Бля а не судьба дать код для кнопки чтобы при наведение она меняла цвет. Нормальный код автор дай а дальше я сам выберу картинки ну и т.д.
А то бля где не посмотри, везде одно и тоже. Вот только того, чего надо нет. Будьте так любездны. Выложите пожалуйста код, который надо вписывать в блокноте. Я сайт пишу на блокноте.
автор без понятия, что писать в блокноте. код, приведенный выше, вполне нормальный, чтобы создать кнопку во флеше.
По as3 я тоже не разобрался, как несколько кнопок делать.
Расскажи как ты это сделал?
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
http://flash-animated.com/as3-plavnaya-knopka-kratkoe-poyasnenie написал быстренько пояснение-=)вроде понято
deviantArt
Сергей, уже почти готов урок по этой кнопке, только в ас 3) исходник, который прикреплен здесь по ас3 не мой, его оставил один из пользователей, потому что часто спрашивали именно кнопку с наведением на ас3. подождите несколько дней урок и все будет)
Спасибочки.
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
это урок для нубов.
проблема в том что я урок не смотрел а сразу скачал исходник as3 и лазел в нем -_-
deviantArt
Да действительно если делать ссылку код не правильный и анимация в цикле, возможно это из за того, что было сделано в cs4 а раньше эта программа называлась макромедия flash mx и для нее файлы с си эс 4 не подходят вот полный и правильный код
onClipEvent (enterFrame) {
if (go) {
nextFrame();
} else {
prevFrame();
}
}
onClipEvent (load) {
var go;
stop();
button.onRelease = function (){
getURL('название сайта','_blank');
};
button.onRollOver = function() {
go = true;
};
button.onRollOut = function() {
go = false;
};
}
Подскажите пожалуйста, а можно сделать так чтоб анимация не дублировалась при отведении мыши? В данном примере это конечно же не нужно, но я делала анимацию органов человека (вообще я нормальная, это для школы для предмета анатомии нужно =) и при наведение на сердце - оно бьется, а когда дальше наводишь на другой орган (то есть убираешь курсор с этого объекта) оно опять бьется. (Если не понятно могу выслать анимацию на почту)
Дария, посмотрите файлик.
Ой! Спасибо большое! На swf то что надо, только я не могу открыть .fla и посмотреть что вы сделали =(,...может потому что у меня флеш сS4
fla cs4, попробуйте теперь
Оксана, спасибо большое! Теперь я его открываю во флеше, но скрипт нигде не видно(. Ужасно не хочется надоедать, но если все таки не трудно напишите текст скрипта, буду оооооочень благодарна!
Дария, в том то и дело, что скрипта нет:) это самая обычная кнопка. зайдите вовнутрь символа кнопки button, и на 2-м кадре наведения (Over) расположена анимация бьющегося сердца(зайдите вовнутрь анимации, дважды кликнув по сердечку). вот так все просто, никакого кода.
=))) спасибо!
Неправильно вы клик указываете, код:
button.onRelease = function (){
getURL('название сайта','_blank');
};
}
нужно ставить не в конце общего кода а в onClipEvent после stop();
иначе если код клика поставить снизу, будет ошибка и кнопка будет в цикле.
onClipEvent (enterFrame) {
if (go) {
nextFrame();
} else {
prevFrame();
}
}
onClipEvent (load) {
var go;
stop();
button.onRollOver = function() {
go = true;
};
button.onRollOut = function() {
go = false;
};
}
я проверяла,у меня все работало корректно именно с таким кодом, как я написала.
Оксана, не могли бы Вы помочь. Почему когда выхожу из редактирования мувиклипа на сцену - на сцене ничего нет? никаких объектов
Может потому что на сцене и нет никаких объектов ))))
как вариант вы редактировали мувиклип в библиотеке.
Еще один вариант в мувиклипе есть маска и из-за нее ничего не видно. Выделяешь вроде бы есть. но ничего не видно. Заходишь в мувиклип все на месте. Ан нет . Один слой маска он все и скрыл. Такое у меня было )))
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
объясню что я делаю возможно в этом ошибки....1 создала докум AS2
2 по уроку создаю сразу мувиклип стрл+f8, на сцене ничего нет, у меня открывается мой муви клип где я уже и выставялю объекты, все по уроку, то есть и кнопку прозрачную и проч, все это получается, как только дохожу до места в уроке "переходим на сцену" нажимаю на сцену на ней ничего нет, может изначально на ней надо рисовать объекты и потом уже преобразовывать их в мувиклипы?
Как вариант. Нарисуйте просто прямоугольник или круг без разницы на сцене. Выделите, превратите в мувиклип. Зайдите в него и делайте с ним что душе угодно ))))
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
Может пропало мое сообщение. Но повторюсь.
Таки да. Вы ответили на свой вопрос. Вы создали мувиклип в библиотеке.
Смело перетащите его на сцену и будет вам счастье )))))
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
спасибо! получилось) я походу не туда писала код...
Исходник Вам в помощь)
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
Оксана а подскажите кусочек кода )))
buttonZ.onRelease = function (){
getURL("http://civilization-spb.ru/", "_blank");
};
}
это правильный код, который при нажатии на кнопку открывает в новом окне браузера ссылку.
А вот как сделать, что бы при нажатии кнопки начался проигрываться ролик с третьего кадра. Первый - прелоадер. Второй - кнопка, которая туда сюда проигрывается. А с третьего- идет сам ролик и возвращается на второй кадр.
Понимаю, что нужно как то вписать вместо функции
gotoAndPlay(3);
Спасибо.
но это не работает пробовал еще вот так
on (release) {
start.gotoAndPlay(3);}
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
Здравствуйте, у меня есть просто гениальный по своей простате опрос, с какой программой работали в этом уроке, я пока нигде не нашел указателей, за ранее спасибо за ответ.