Как сделать кнопку как флеш
Добавил пользователь Cypher Обновлено: 05.10.2024
Обработчик ActionScript 3 события описывает действия, которые будут происходить после того как событие случится, но, как и обычная функция, он должен быть вызван. Для вызова обработчика служит слушатель события (event listener). Он позволяет назначить объект и событие, вызывающее обработчик.
Обработчик закрепляется за объектом с помощью метода addEventListener, который принимает два аргумента:
- событие, которое будет запускать обработчик (например, щелчок кнопкой мыши)
- обработчик, определяющий какие действия будут происходить после того как событие произойдет
Для назначения ActionScript 3 события объекту можно использовать суперкласс Event, описывающий все возможные события встроенные в ActionScript 3. Однако, гораздо лучше использовать подкласс, определяющий более узкую группу событий, например MouseEvent. Большинство из этих подклассов содержат постоянные (const) для частоиспользуемых событий, например MouseEvent.CLICK – вызывает обработчик после того как пользователь щелкнет кнопкой мыши. Также и подкласс KeyboardEvent содержит постоянные для большинства клавиш на клавиатуре, чтобы они при нажатии реагировали соответственно.
После того как слушатель ActionScript 3 события был добавлен к объекту и записан обработчик события, объект находится в состояния ожидания этого события. Когда же оно происходит объект вызывает обработчик, который производит все необходимые действия.
Вызов/запуск события с помощью кнопки
Создайте кнопку на сцене.
После закрывающей фигурной скобки функции-обработчика события запишите имя экземпляра кнопки и поставьте точку.
Внутри круглых скобок наберите
Далее введите имя обработчика ActionScript 3 события, созданное ранее.
Нажмите Ctrl + Enter. Flash Player начнет воспроизводить ролик.
Кликните на кнопке.
Событие запустится и код, записанный в обработчике начнет работать.
В окне Output появится запись, сделанная с помощью метода trace.
Дополнительная информация
Если у Вас кнопка находится внутри MovieClip, то пользователь будет щелкать на двух объектах одновременно! В большинстве случаев Вы будете добавлять слушатель ActionScript 3 события именно к кнопке, а так как у MovieClip не будет слушателя события, то он будет просто игнорировать эти щелчки. Однако, Вы можете закрепить слушатель события за MovieClip тоже. Если обработчик будет тот же, то он сработает два раза: один раз, вызванный кнопкой, второй раз MovieClip. Если же Вы используете другой обработчик для MovieClip, то сработают два разных обработчика: сначала кнопка, затем MoviClip.
Теоритечески, Вы можете помещать неограниченное количество MovieClip друг в друга, а затем присваивать каждому из них разные обработчики, а назначать одно и тоже событие. Все они сработают в нужный момент в последовательности от самого низкого уровня вложения к самому высокому, который можно назвать родительским. Этот процесс известен в ActionScript 3 как "event bubbling" (по аналогии с поведением воздушного пузыря в воде). Т.е. ActionScript 3 событие поднимается от объекта к объекту, каждый из которых может вызывать обработчик если это небходимо.
В tilda есть возможность добавлять готовые блоки и новая возможность для создания кастомного блока zero block.
Если добавлять готовую кнопку: все блоки ---> фрма и кнопка ---> кнопка в настройках для этой кнопки можно задать разные эффекты (например flash):
Но если создавать zero block и в нем добавлять кнопку, то для нее нет возможности задания подобных эффектов!
Вопрос: можно ли все же как-то создать кнопку с анимационными эффектами тильда (flash, ripple, light) в zero block ? Или если создаю стандартный блок с кнопкой, можно ли ее как-то переместить в другой блок, например, на обложку?
Во-первых, кнопку можно взять из "Компонентов" (в правой панели) .
Прямоугольник с названием "Button" надо перетащить в рабочую зону и дать ей в свойствах Instance-имя, например, "KNOPKA".
После этого, убрав выделение самой кнопки, можно в Actions Frame прописать по событиям "onRealese" или "onPress" нужное действие, например,
Во-вторых, можно просто, написав в нужном месте слово "СТАРТ", объявить его символом (нажать на нём правой кнопкой мыши - в появившемся списке выбрать опцию "Convert to symbol" и отметить в диалоговом окне как "Button"). После этого надо эту кнопку-символ выделить и в левом нижнем окне прописать Instance-имя, например, опять же "KNOPKA" и тоже прописать в Actions Frame по событиям "onRealese" или "onPress" нужное действие. В этом случае при наведении курсора на кнопку он будет принимать вид руки.
Во-третьих, готов наглядно показать процесс создания анимированной кнопки, реагирующей на курсор.
Flash об этом вы точно слышали и даже видели, причем первая встреча наверняка была запоминающаяся, повергающая просто в шоковое состояние: что происходит. Нет, у вас с головой все в порядке, монитор ваш работает нормально и это вовсе не шалости Билл Гейтса - перед вами Flash!
Начиная писать эту статью мне хотелось бы охватить весь массив информации относящейся к Flash, но, как известно, краткость - сестра таланта, и моя задача не обучать вас этой технологии, а лишь ПОМОЧЬ начать изучать! Я расскажу вам о том где все это делается и зачем все это делается, о том почему технология Flash за несколько лет стала сверхпопулярной среди web-разработчиков, ну а также о том, почему так много людей фанатеют от Flash, ведь Flasher - это не тот человек, который просто что-то там делает, Flasher - это прежде всего человек увлеченный, увлеченный Flash, может с моей подачи еще одним флешером больше будет? Итак, начнем.
Что такое Flash или о Вспышке.
Flash (в переводе с англ."Вспышка") - сравнительно новая мультимедиа технология для сети Интернет. Флэш работает с векторной графикой, а с выходом Flash 4 появилась возможность создания интерактивных приложений. Сама же технология Flash появился около 4-х лет назад (т.е. Flash начал свое шествие с 1996 г.), а русскоязычная часть сети стала обрастать примерами Flash в последние 1,5-3 года (т.е. с 1997 г). Конечно же, Flash в действии лучше всего самому увидеть, чем услышать это от кого-либо: не хватит никакого таланта, чтоб описать ту необычную гладкость линий, сочность красок и динамику, дополняемую удачно подобранной музыкой. Сначала это были простейшие заставки, а потом появились и целые Flash-сайты, включающие в себя чаты, гостевые книги, голосования и форумы - и все на флэш. Флэш связали с CGI, Java, PHP.
Что нужно вам, как Flash зрителю?
Я б во флешеры пошел.
Но вы наверное читаете все это не для того, чтоб просто почитать, наверное вы хотите попробовать свои силы во Flash Конечно, можно заказать флэш-сайт, или заставку какой-нибудь дизайнерской группе вроде Legus (www.legus.ru), Eye4U (www.eye4u.com), но цены на эти сверхмодные и зрелищные услуги сверхбольшие - нередко только создание заставки переваливает за $1000, а если уж говорить о целом Flash-сайте. Попробуем сделать это сами - али мы на кнопки тыкать не умеем? Для создания своего флэш-проекта нам понадобится компьютер (если такового у вас нет, то срочно бегите в ближайший магазин, и мышку купить не забудьте!), конфигурация которого может быть любая (начиная от компьютеров поколения Pentium), и программа, для создания флэш-анимации . На данный момент лидерами среди таких программ являются Macromedia Flash и Adobe GoLive. Лично я предпочитаю продукты Macromedia, поэтому и вам советую (все уроки, советы и т.д. будут выполнены используя исключительно Macromedia Flash 5). В новой пятой версии Macromedia Flash был значительно изменен интерфейс (". доступный любому человеку, первый раз увидевшему Flash. " - так заявила сама Макромедиа, хотя, если честно, просто тыкая на все кнопки, ничего путного не добьешься. В программе есть курс уроков, обучающих основам работы - уроки хорошие, но на английском ). Итак устанавливайте Flash 5-ой версии, и начнем!
Загрузили? Немного недружелюбный интерфейс, не правда ли? Не похожий на знакомый интерфейс Windows и MSWord (и на Quake тоже не похоже ;-)), даже не похожий на интерфейс Adobe Photoshop. Но вы быстро привыкнете, на самом деле он действительно очень удобный.
После загрузки программы для вас автоматически создается новый файл. Белый прямоугольник (квадрат) посередине - это и есть ваш первый флэш-проект. Размеры и цвет фона вашего фильма вы можете изменить, нажав Ctrl+M или в меню Modify--> Movie. Какой размер вы выберете, такого размера он и будет отображаться в броузере. Вот полигон для испытаний и готов!
Слева вы видите панель с инструментами рисования, как вы уже догадались, именно этим мы и будем рисовать, и создавать свои шедевры (трепещи, мир!). По-моему, значение всех инструментов интуитивно понятно (Карандаш - рисовать "от руки", Прямоугольник - рисовать четырехугольники и т.д). Флэш работает в основном с векторной графикой, но возможен и экспорт растровых изображений (тот же GIF, JPEG). Но растровые изображения существенно утяжеляют размер фильма, поэтому желательно ограничиться только векторами. Не буду объяснять чем отличается растр от векторов, скажу лишь пару слов:
векторная графика - в файл записываются координаты отдельных точек, которые затем соединяются линиями, т.е. записываются только определенные точки; в растре записываются все координаты и параметры каждой точки, что и увеличивает объем файла. Правда, при большом количестве мелких элементов, векторные изображения обгоняют по объему растровые. Какой самый жизненно важный орган у сайта? Конечно навигационная панель! Вот над ней мы сейчас и поглумимся. А из чего она состоит? Правильно из кнопок, вот их то мы и будем сейчас делать.
Открывайте меню Insert-->New Symbol, или нажмите Ctrl+F8. В появившемся меню даем имя, и выбираем тип объекта: Movie clip (в народе "мувик" - анимационный фрагмент), Button (как раз кнопка) и Graphic(просто картинка). Выбираем Button, и называем but1. Раскрывается окно редактирование этой кнопки. Выше рабочей области области находится основная часть флэша - как-бы монтажерский стол, каждая небольшая ячейка - отдельный кадр. В данном случае мы редактируем кнопку, и у нас 4 прямоугольника с подписями: Up, Over, Down, Hit - они обозначают положение мыши по отношению к нашей кнопке, соответственно обычный вид кнопки, курсор над кнопкой, клик, и область клика. Слева от всех этих прямоугольничков находится слой Layer 1 - да, да, это слои такие-же как в Adobe Photoshop, тем кто знаком с этой программой разобраться со слоями будет проще простого.
Выбираем слой одним щелчком, щелкаем по прямоугольничку с подписью Up и рисуем обычный вид кнопки. Можете нарисовать круг, и поместить в нем текст. Готово? Теперь щелкаем правой кнопкой по прямоугольнику с надписью Over и выбираем в выпадающем меню Insert Keyframe. Теперь меняем у кнопки к примеру цвет. Insert Keyframe под Down и меняем цвет и там. Готово?
Видите там чуть повыше слева надписи Scene 1 | but 1 - это говорит о том, что мы редактируем символ but1 в сцене Scene 1. Щелкаем по Scene 1 и переходим к основному фильму. Теперь, чтобы вставить сюда свою кнопочку, давим Ctrl+L или Window-->Library, и получаем окошечко с названием Library - это библиотека, содержащая все символы входящие в ваш фильм. Видите but1? Перетащите его куда-нибудь на лист(в рабочую область). Так мы поместили свою кнопку в основном фильме. Сохраните файл куда-либо на жестком диске File-->Save. Теперь для просмотра получившегося жмем Control-->Test Movie. Вот открылось окно "предпросмотра" - т.е. так будет выглядеть ваш фильм. Попробуйте подвести курсор к кнопке. Нравится?? Для того чтобы посмотреть, как это будет выглядеть в броузере, нажмите F12 или File-"Publish Prewiev-"default(HTML). Программа автоматически создаст *.html файл для вашего фильма, и откроет его в окне вашего броузера. Все файлы сохраняются там, где вы сохранили свою работу.
Нажал на кнопку и.
Надеюсь, что все вышесказанное вы читали и одновременно выполняли - просто читать, наверное, было не очень увлекательно.
Теперь вы приблизительно поняли, что такое Flash и как это делается (надеюсь, что я излагал свои мысли внятно). Основы получили, а там, если понравится, то методом "научного тыка" вы научитесь и создавать анимационные ролики, и добавлять музыку, и экспортировать растровые изображения. Хотя просто "тыком" тут не обойдешься, но если flash вас увлечет, то вы и на книжку наверняка раскошелитесь, да и в Интернете информации для флешеров немало Ой, забыл самое главное! Форматы файлов: *.fla - рабочий файл проекта (именно в таком файле и находятся исходники); *.swf - готовый фильм для публикации в Интернет (его вы уже не вскроете и не поредактируете, т.е. это файл чисто для просмотра).
Читайте также: