Сайт о телевидении

Сайт о телевидении

» » Flash. Реализуем кнопку с переходом. Преобразование объекта в символ-кнопку. Добавление текста на кнопку

Flash. Реализуем кнопку с переходом. Преобразование объекта в символ-кнопку. Добавление текста на кнопку

В этом уроке мы рассмотрим 2 вопроса:

  • Методы gotoAndPlay() ActionScript и gotoAndStop(). Переход к заданному кадру
  • Дополнительная информация
  • Создание кнопки для запуска ролика

    Создайте новый слой.

    Кликните правой кнопкой мыши на последнем кадре Вашего ролика. Выберите в контекстном меню Inset Keyframe (для создания ключевого кадра Вы также можете использовать клавишу F6).

    Присвойте имя кнопке, например btnReplay.

    На слое, в котором Вы добавляли метод stop() кликните на последнем кадре.

    Откройте панель Actions.

    Строчкой ниже метода stop() ActionScript наберите имя кнопки, поставьте точку и затем наберите

    AddEventListener(MouseEvent.CLICK, replay);

    Создайте обработчик события

    Function replay(event:MouseEvent):void { }

    Внутри фигурных скобок наберите

    GotoAndPlay(1);

    Нажмите Ctrl + Enter.

    Ролик начнет воспроизводится. На последнем кадре он остановится и появится кнопка.

    Щелкните на кнопке. Ролик начнет воспроизводиться сначала.

    Кликните на кнопке «На исходную!».

    Дополнительная информация

    Считается хорошей практикой присваивать ключевому кадру ярлык, а не ссылаться на него указывая его номер. Основная проблема со ссылками на номер кадра, кроме того, что их трудно запомнить, следующая: номера могут изменяться при добавлении или удалении кадров из фильма, следовательно запланированное действие будет выполняться неверно!

    Например, последний кадр в Вашем ролике 200, но если позднее Вы добавите при редактировании к нему еще 10 кадров, то вызывав gotoAndStop(200) ролик остановится не на последнем кадре, как это планировалось, а за 10 кадров до него. В противоложность этому, если бы Вы присвоили последнему кадру ярлык "end", то проблем бы не было – остановка произошла бы в нужном месте и добавленные кадры никак не повлияли бы на работу скрипта.

    Еще одна положительная сторона использования ярлыков: они появляются на шкале времени, т.е. Вы можете видеть их и легко ориентироваться в том, когда происходят такие моменты в коде, а не ищите их, прокручивая ролик.

    Ярлыки должны помещаться в ключевые кадры на отдельном слое, созданном специально для них, хотя многие flash-программисты комбинируют их вместе со скриптом, помещая всё на один слой "actions". Главное требование здесь: нужно отделять и ярлыки и код от слоев с визуальными элементами.

    Пожалуйста, включите JavaScript, чтобы увидеть комментарии.

    До сих пор мы рассматривали Flash-фильмы, которые воспроизводились без вмешательства зрителя от начала и до конца. Однако Flash позволяет также создавать интерактивные приложения, в которых пользователь может управлять демонстрацией контента. В данном уроке мы начнем знакомство с элементами языка описания сценариев Action Script и рассмотрим, как с его помощью можно создать интерактивные приложения. В качестве примера создадим фотоальбом с элементами интерактивного интерфейса. Но прежде чем приступить к описанию Action Script, следует рассказать еще об одном виде символов, который мы до сих пор оставляли без внимания, - это символы-кнопки. Для построения интерактивного интерфейса они просто необходимы.

    Создание кнопок

    Кнопка представляет собой четырехкадровый интерактивный мувиклип. Когда мы присваиваем символу тип «Кнопка», Flash создает для нового символа монтажную линейку из четырех кадров:

    Up-состояние — это кадр, соответствующий ситуации, когда кнопка не нажата и указатель мыши расположен не над кнопкой;

    Over-состояние — кадр, иллюстрирующий вид кнопки, когда указатель мыши расположен над кнопкой, но кнопка не нажата;

    Down-состояние — данный кадр показывает вид кнопки при ее нажатии;

    Hit-состояние — определяет область, в которой кнопка реагирует на щелчок мыши; эту область в клипе не видно.

    Чтобы создать кнопку, выполните команду Insert => New Symbol (можно набрать сочетание клавиш Control+F8). В появившемся диалоговом окне Create New Symbol введите имя символа-кнопки (например, but1) и выберите тип символа Button («Кнопка»).

    Flash переключится в режим редактирования символа, предоставив кадры Up, Over, Down и Hit. Первый кадр, Up, становится пустым ключевым кадром. Нарисуем в этом кадре ненажатый вид кнопки (рис. 1).

    Рис. 1. UP-кадр кнопки

    Выделим второй кадр, помеченный как Over и соответствующий состоянию, когда курсор занесен над кнопкой. Вставим в этом кадре ключевой фрейм (по команде Insert => Keyframe), в результате чего появится ключевой кадр, полностью повторяющий содержание Up-кадра. Изменим цвет кнопки, как показано на рис. 2.

    Рис 2. Over-кадр кнопки

    Аналогично добавим следующий кадр (Down-кадр) и нарисуем нажатое состояние кнопки (рис. 3).

    Рис. 3. Down-кадр кнопки

    В Hit-кадре пока не будем ничего рисовать, а вернемся к этому кадру чуть позже.

    Перейдем к основной сцене, вызовем библиотеку по команде Window => Library и создадим экземпляр символа кнопки путем перетаскивания его на сцену (рис. 4.)

    Рис. 4. Создадим экземпляр кнопки, перетащив его из библиотеки

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

    Для того чтобы нажатие кнопки происходило только в рабочей зоне, необходимо в Hit-кадре определить эту зону, то есть нарисовать кнопку без рамки (см. рис. 5)

    Рис. 5. Hit-кадр кнопки

    После того как мы добавим необходимый Hit-кадр получим следующий фильм , в котором при нажатии на рамку продавливания кнопки не происходит.

    Чтобы сделать кнопку интерактивной, необходимо связать факт нажатия кнопки с выполнением определенных команд, то есть описать определенный сценарий. Для задания сценариев во Flash существует специальный язык Action Script. В данном уроке мы затронем лишь незначительную часть возможностей этого языка, а в дальнейшем будем возвращаться к структуре и синтаксису Action Script по мере усложнения примеров создания интерактивных фильмов на Flash.

    Понятие об Action Script

    Action Script представляет собой язык написания сценария - набора инструкций, которые управляют элементами Flash-фильма. Сценарии Action Script могут быть встроены в фильм или храниться во внешнем текстовом файле с расширением AS.

    При встраивании сценария в фильм его можно внедрять в разные части фильма. Точнее, сценарии Action Script могут содержать ключевые кадры, экземпляры кнопок и экземпляры мувиклипов. Соответственно сценарии называются сценариями кадра (Frame Action), сценарием кнопки (Button Action) и сценарием клипа (MovieClip Action).

    Сценарии Action Script выполняются по наступлении определенных событий, инициированных пользователем или системой. Механизм, который указывает программе Flash, какой оператор следует выполнить при наступлении того или иного события, называется обработчиком событий.

    Action Script имеет собственный синтаксис, во многом схожий с синтаксисом JavaScript. Flash MX 2004 поддерживает Action Script всех предыдущих версий Flash.

    Одним из основных понятий Action Script являются Actions - команды, которые выдают инструкции во время исполнения SWF-файла. Например, gotoAndStop() отсылает воспроизводящую головку (Рlayhead) на определенный кадр или метку. От слова Actions и происходит название языка - Action Script (дословно - сценарий действий). С большинством понятий этого языка мы ознакомимся на конкретных примерах.

    Интерактивный фотоальбом

    Продемонстрируем использование кнопок для управления фотоальбомом - создадим набор фотографий и добавим две кнопки, которые будут листать фото вперед и назад.

    Поместим на основной монтажной линейке первое фото и добавим кнопку из стандартного набора. Для доступа к нужной папке следует выполнить команду Windows => Сontrol Panels Common Libraries => Buttons (рис. 6).

    Рис. 6. Добавим кнопку из стандартной библиотеки

    В результате выполнения данной команды появится панель, содержащая большой набор заранее нарисованных кнопок различных типов. Выберем, например, Key Buttons (кнопки, похожие на клавиатурные клавиши), откроем соответствующую папку, выберем кнопку key-left (рис. 7) и создадим экземпляр данной кнопки (путем перетаскивания ее на сцену).

    Рис. 7. Элементы папки Key Buttons

    Обратите внимание, что, когда вы устанавливаете вторую кнопку (key-right) на сцене и перемещаете ее, чтобы установить на одном уровне с первой кнопкой, программа дает подсказку (пунктирную линию), которая позволяет точно позиционировать кнопку (рис. 8).

    Рис. 8. Автоматическое выравнивание кнопок на одном уровне

    Для того чтобы добавить сценарий, необходимо вызвать редактор Action Script по команде Window =>Development Panels => Actions или нажав клавишу F9. Если вы собираетесь часто писать скрипты, то эту клавиатурную команду стоит запомнить. В результате появится редактор Action Script (рис. 9).

    Рис. 9. Панели редактора Action Script

    Если вы поэкспериментируете, выделяя различные элементы на сцене, одновременно отслеживая сообщения в панелях редактора Action Script, то обнаружите, что программа подсказывает, на какой элемент можно «вешать» код. Если выделить на сцене кадр, то в верхнем левом углу панели редактора появляется надпись Actions - Frame, если щелкнуть по кнопке, то появится надпись Actions - Button, то есть программа подсказывает, что вводимый код будет относиться к сценарию кнопки. А если выделить фотографию, то в поле, предназначенном для ввода скрипта, появится сообщение: Current selection cannot have actions applied to it (к данному выделенному объекту нельзя применить сценария).

    Мы будем присваивать сценарий кнопке. В последних версиях ActionScript имеется возможность писать централизованный код, то есть код, который размещен в одном месте, и такая возможность позволяет лучше разбираться в больших программах. Однако в простых примерах (которые мы и рассматриваем) присваивание сценария кнопке вполне допустимо.

    Итак, для кнопки со стрелкой влево нам нужно формализовать следующий сценарий: «Если кнопка отпускается на некотором кадре, то с этого кадра необходимо перейти на предыдущий кадр». В соответствии с синтаксисом языка Action Script (рис. 10) это будет выглядеть следующим образом:

    В первой строчке записан обработчик событий кнопки on(), имеющий формат:

    Теперь добавим несколько ключевых кадров так, что в них скопируются созданные в первом кадре кнопки, и поместим во вновь созданные кадры нужные фотографии.

    Если запустить на исполнение созданный фильм, то кадры будут непрерывно проигрываться один за другим, а следовательно, прежде всего нам нужно дать команду «Стоп» на первом кадре. Для этого первому кадру добавим соответствующую команду (рис. 11).

    Рис. 11. Сценарий, присвоенный первому кадру

    Обратите внимание: команда присваивается уже не кнопке, а кадру. Тот факт, что кадру присвоен сценарий, отмечается на основной монтажной линейке - в обозначении кадра над жирной точкой появляется строчная буква «a».

    В результате мы получили следующий фильм .

    Если у нас в фотоальбоме всего несколько кадров, то двух кнопок - «Вперед» и «Назад» - вполне достаточно, но если набор фотографий большой, то желательно иметь еще и кнопки, отсылающие в начало и конец фильма. В следующем примере мы добавим соответствующие кнопки: «В первый кадр» и «В последний кадр». Выбрать кнопки подходящей мнемоники можно из стандартной библиотеки кнопок из папки Сircle Вuttons (рис. 12).

    На предлагаемом примере мы ознакомимся с еще одной командой gotoAndStop(), которая позволяет перейти к нужному кадру с последующей остановкой.

    Рис. 12. Кнопки из папки Circle Buttons

    На кнопку перехода к первому кадру (третья слева на рис. 13) повесим код, как показано на рис. 13.

    Рис. 13. Сценарий для кнопки «В первый кадр»

    В случае с фотоальбомом из пяти кадров в последнюю кнопку добавим сценарий перехода «В последний кадр»:

    Автоматизированное написание скрипта

    До сих пор мы набирали все команды вручную, однако панели редактора ActionScript предоставляют целый ряд сервисов для автоматизированного написания скрипта. Рассмотрим эти возможности.

    Рис. 14. Средства автоматизированного написания скрипта

    Панель редактора Action Script позволяет выбирать, перетаскивать, перераспределять и удалять команды.

    Покажем, как можно написать тот же скрипт для кнопки «Вперед» в автоматизированном режиме. Выбрав папку Movie Clip Control (верхнее левое окно на рис. 14) можно получить доступ к обработчику событий on, а далее нужно либо дважды щелкнуть по соответствующему пункту, либо перетащить выражение на поле написания скрипта в режиме Drag and Drop.

    Рис. 15. Подсказка для завершения выражения

    В результате на рабочем поле появится необходимое выражение и подсказка вида (рис. 15): вы выбираете из меню нужную команду и выражение завершается автоматически. Как видно из меню, можно выбрать не только условие, связанное с экранными кнопками, - можно, также, выбрать из меню рис. 15 пункт keyPress “”, или keyPress “”, что соответствует нажатию клавиатурных клавиш (стрелка влево, стрелка вправо), то есть имеется возможность создать фотоальбом, который будет «перелистываться» с помощью клавиш клавиатуры.

    Рис. 16. Обращения к кнопке клавиатуры

    Задействуем команду keyPress “” (рис. 16), затем перейдем в папку Timeline Control, выберем команду nextFrame и перетащим ее на рабочее поле (рис. 17).

    Рис. 17. Команду nextFrame можно найти в папке Timeline Control

    Для кнопки, переводящей фильм в начало фотоальбома, в качестве события можно выбрать из меню нажатие клавиши Home, а далее (рис. 18) перетащить на поле команду gotoAndStop, в результате чего появится еще одна подсказка по возможному синтаксису данной команды.

    Стрелочки в подсказке позволяют просмотреть разные варианты синтаксиса. Программа предоставляет два варианта (рис. 18 и 19), то есть предлагает задать сцену и кадр или только кадр. В нашем случае достаточно указать только кадр (Frame). Если название сцены опущено, то по умолчанию осуществляется переход к кадру текущей сцены.

    Рис. 18. Подсказка по возможному синтаксису команды

    Рис. 19. Стрелочка-треугольник позволяет просматривать варианты синтаксиса

    После того как мы назначим всем кнопкам соответствующие кнопки клавиатуры, получим следующий фильм , где листание фотографий будет происходить с клавиатуры, а нажатие мышью на экранные кнопки не будет вызывать никаких последствий.

    Можно ли обеспечить сценарий, при котором разные события будут приводить к одним и тем же действиям? Оказывается, можно - для этого в обработчике событий on необходимо перечислить список наименований событий. Если вы поставите запятую в списке событий после первого события, то программа сама предложит вам меню (рис. 20).

    Рис. 20. При введении запятой в списке событий автоматически появляется меню дополнительных команд

    Добавим к первому событию (нажатие клавиатурной кнопки) второе событие (отпускание экранной кнопки):

    on (keyPress "", release)

    Повторим процедуру для остальных кнопок и в результате получим фотоальбом , в котором листание фотографий будет происходить как с помощью мыши, так и с помощью клавиатуры (исходный FLA-файл можно получить по ссылке).

    В рассмотренном примере мы использовали переход по номеру кадра, но этот способ не всегда удобен: если в процессе редактирования фильма нумерация кадров изменится, то логика может нарушиться. Более удобно использовать переход по метке кадра. Рассмотрим пример, в котором потребуется не только перелистывание альбома, но и переход к разным разделам, то есть более сложная навигация.

    Пусть альбом будет состоять из рисунков, компьютерной графики и фотографий.

    Первому кадру раздела «рисунки» дадим метку Pictures, аналогично первым кадрам других разделов присвоим метки graphics и photo.

    Создадим слой для размещения меток и назовем его Lables. Для того чтобы поставить метку кадру, в панели Properties необходимо выбрать тип метки Name и записать ее имя. В нашем случае Pictures (рис. 21). Аналогично разместим метки в кадрах 5 и 10 (рис. 22).

    Рис. 21. Пример присвоения кадру метки

    Теперь добавим новый слой и назовем его Actions. В первом ключевом кадре слоя Actions вызовем панель Actions Frame (путем нажатия кнопки F9) и наберем команду stop () (см. рис. 22)

    Рис. 22. Сценарий первого кадра

    Добавим еще один слой под именем Subjects (тематика), в котором дадим заглавия соответствующим кадрам: «Рисунки» (рис. 23), «Графика» и «Фото».

    Рис. 23. Заглавие для кадров раздела «Рисунки»

    Теперь добавим сбоку кнопки меню с аналогичными именами, которые расположим на новом слое под названием Мenu.

    Напечатаем с левого края первый пункт меню «Рисунки» и переведем его в кнопочный символ. С помощью инструмента Arrow выделим текстовый блок «Рисунки» и выполним команду Modify => Convert to Symbol (эту команду можно выполнить и с помощью клавиши F8), в панели Convert to Symbol зададим тип символа Button и определим его имя как pictureButton (рис. 24).

    Рис. 24. Назначим кнопке перехода к разделу рисунков имя рictureButton

    Создадим четыре кадра для кнопки «Рисунки»: первый будет представлять просто исходный текст (рис. 25), второй - тот же текст только синего цвета, третий кадр мы пропустим (в этом случае Down-кадр будет такой же, как и Over-кадр), а в Hit-кадре нарисуем прямоугольную область, которая определит область нажатия кнопки (рис. 26).

    Рис. 25. Up-кадр кнопки pictureButton

    Рис. 26. Hit-кадр кнопки pictureButton

    Теперь нам нужно повесить сценарий на вновь созданную кнопку. Для этого выделим кнопку в сцене Scene 1 и, нажав F9, вызовем панель Actions, а затем внесем код, показанный на рис. 27.

    Рис. 27. Сценарий перехода на кадр с меткой

    В этом уроке рассмотрим создание кнопки, которая при нажатии будет перенаправлять на сайт.

    Создаем новый документ «ActionScript 3.0» Создание кнопки: нарисуем объект на сцене

    На панели «timeline» создаем два слоя, первый называем «actions» , второй — «button» .

    Теперь выберем слой «button» и нарисуем на нем кнопку при помощи инструмента «Rectangle Primitive Tool» .

    Сделаем заливку синего цвета и немного закруглим углы.

    Преобразование объекта в символ-кнопку

    Преобразуем объект в символ. Для этого, используя инструмент «Selection Tool» , который находится на правой панели, выбираем объект и нажимаем правую кнопку мыши, в появившемся контекстном меню выбираем «Convert to Symbol» , в поле «type» устанавливаем»button» , в поле «name» дадим имя объекту «button1» .

    Настройка кнопки

    Два раза щелкаем по объекту. На панели «timeline» появилось четыре кадра: «Up» , «Over» , «Down» и «Hit» .

    Кадр «Up» отображает кнопку в обычном состоянии, когда на нее не наведен курсор и когда она не нажата. Кадр «Over» показывает состояние кнопки, когда на ней находится курсор, а «Down» отображает внешний вид кнопки при нажатии на нее мышью. Кадр «Hit» отображает кнопку после нажатия, мы его использовать не будем.

    Для «Up» уже создан кадр, теперь создадим ключевые кадры для других элементов. Для этого выберем нужный кадр и правой кнопкой мыши вызовем контекстное меню, в котором укажем «Insert Keyframe».

    Теперь нужно отредактировать внешний вид кнопки в каждом кадре по отдельности. Элемент «Up» оставим без изменений, выбираем «Over» и направляемся в верхнюю правую панель программы. В настройках «Color» выбираем цвет для кнопки немного светлее первоначального.

    Для элемента «Down» установим цвет темнее обычного.

    Давайте сделаем так, чтобы при нажатии кнопка немного уменьшалась. Для этого находясь на выделенном кадре «Down» , выбираем на правой панели инструмент «Free Transform Tool» .

    Зажимаем клавиши Alt+Shift и уменьшаем размер объекта.

    Запуск приложения

    Можно посмотреть, что получилось. Для этого перейдите в главное верхнее меню «File -> Publish Preview -> Flash» или просто нажмите ctrl+enter на клавиатуре.

    Добавление текста на кнопку

    Теперь давайте добавим на кнопку текст. Чтобы это сделать, создайте, находясь в режиме редактирования button1, на панели «timeline» еще один слой, на который мы поместим произвольный текст.

    Добавление обработчика события при нажатии на кнопку

    Чтобы при нажатии на кнопку происходило какое-то действие, нужно внести программный код. Для этого переходим из режима редактирования кнопки в режим сцены.

    При помощи инструмента «Selection Tool» выбираем объект и в правой панели программы, в настройках «Properties» в поле «Instance Name» вводим имя кнопки, для того, чтобы можно было использовать объект в режиме программирования. Давайте назовем объект «btn1» .

    Давайте напишем первую строчку кода. Имейте ввиду, что язык ActionScript3.0 чувствителен к регистру, это означает, что слово с маленькой буквы и с большой он считает разными. Итак, пишем:

    Btn1.addEventListener(MouseEvent.CLICK, click1);

    Рассмотрим эту строчку немного подробнее:
    btn1 — это кнопка, имя которой давали в режиме редактирования сцены;
    addEventListener — здесь добавляем обработчик событий для кнопки;
    MouseEvent.CLICK — событие — нажатие кнопки мыши;
    click1 — это будущая функция, которая будет делать то, что мы хотим, чтобы происходило при нажатии на кнопку.

    Напишем функцию для обработки кнопки:

    Function click1(e:MouseEvent):void { var url:String = "http://www.сайт"; var urlRequest:URLRequest = new URLRequest(url); navigateToURL(urlRequest); }

    Рассмотрим некоторые моменты в коде:

    function click1(e:MouseEvent):void — имя функции с параметром, которая не будет возвращать никаких значений;
    var url:String = "http://www.сайт"; — создаем строковую переменную и сразу назначаем ей текстовое значение в виде url-адреса.
    var urlRequest:URLRequest = new URLRequest(url); Чтобы кнопка перенаправила на url-адрес, нужно создать переменную с типом URLRequest и передать ей в качестве параметра стоковое значение или текстовую переменную с таким значением.
    navigateToURL(urlRequest); — перенаправление на url-адрес.
    Нажимаем ctrl+enter и смотрим, что получилось.


    Рисовать мы уже немного научились, поэтому хочу предоставить возможность вам ознакомиться с очень интересной областью Flash - содание кнопок (button). Меня просто таращит от применения этих волшебных символов для своих целей. В отличие от других сред, что меня собственно и завараживает во flash, создание кнопок подразумевает не только задать алгоритм работы но кнопки, но и ее создание. Т.е. мы сами прорисовываем и придумываем, как наша кнопка будет работать, что с ней будет происходить при нажатии, при наведении курсора и много другое. Уверяю вас, такой разброс фантазии сподвигает вас на новые открытия и ++ в ваш очаг удовольствия от проделанного:)

    Как же создается кнопка и для чего она вообще нужна? Кнопка используется практически везде и всегда. Смысл кнопки в том, что при использовании ее каким-то образом (не ISO, не святым) происходят события, заданные содержимым этим кнопки или ее влиянием. Банально она может применяться, начиная от перехода к другому фрейму по нажатию на нее до невероятных алгоритмических вычислений или происхождения всевозможного рода событий. Тут фантазии нет предела. При нажатии на кнопку, которая имеет в себе набор команд, создается некое событие, которое используется в дальнейшем.

    В данной статье я хочу рассмотреть применение кнопки в качестве перехода на новый кадр . То есть: имеется несколько кадров, но они не сменяют друг друга поочередно, так как на первом кадре мы установили команду stop () (о ней я рассказывал ). Итак представим: у нас имеется два кадра, на каждом из которых расположена надпись, информирующая о номере данного кадра для видимости и легкого восприятия. На первом и втором кадре у нас содержится кнопка. Я взял готовую кнопку из библиотеки Adobe Flash CS4 (чтоб красиво было), но вам рекомендую самим сделать кнопку. Как она делается?

    Рисуется объект на ваш вкус и цвет, похожий на кнопку (если мы хотим из нее сделать кнопку), потом выделяем нарисованный объект целиком и нажимаем клавишу F8 . Выскочит запрос о том, что мы хотим сделать из выделенного нами объекта. Нам предстоит выбрать один из вариантов:

  • Кнопку (button) - будет иметь свою структуру, а также предназначения для программирования ее на выполнение различных команд. То есть при совершении с кнопками различных манипуляций: нажатие, наведение курсора, отвод курсора и другое - будет совершаться какой-то скрипт, установленный и определенный нами.
  • Клип (movie) - клип, имеющий внутреннюю анимацию (расскажу об этом позже)
  • Графику (Graphic) - графика, статичная и неподвижная, как картинка будет находиться на нашем поле деятельности.
  • Соответственно выбираем Button . Все - наша кнопка сделана, но она какая-то статичная, не меняется при наведении курсором, в общем просто картинка, и непонятно, жива ли она вообще?

    Поэтому при возделывании кнопки из объекта ей наделяются некоторые возможности: при двойном нажатии мыши на созданную вновь кнопку откроется внутрення структура нашей клавиши, которую я сейчас опишу, постараюсь в деталях. Для начала представлю вид по совершению двойного щелчка левой кнопкой мыши по сделанной кнопке:


    Видим, что мы находимся внутри кнопки, и тщательно рассматриваем ее структуру в области кадров: она имеет 4 пункта:

  • Up - все, что находится под данной меткой, это вид нашей кнопки в обычном режиме, т.е. как кнопка будет выглядеть, если она просто расположеная на экране (мы не совершаем с ней никаких действий). Так мы будем видеть ее при первой встрече.
  • Over - вид кнопки, когда курсор мыши находится над ней. Т.е. мы наводим на нее наш курсор, и наша кнопочка меняет свой вид, чтобы дать нам понять, что мы навели на нее и, возможно, хотим ей воспользоваться. Очень удобная функция во Flash, мне очень нравится:)
  • Down - вид кнопки, когда мы нажимаем на нее, т.е. в момент нажатия курсором мыши на кнопку мы будем видеть ее именно такой, как определяет данный маркер
  • Hit - признаюсь, что не знаю, зачем этот пункт, но я обычно рисую здесь вид кнопки в нейтральном режиме, как при метке Up.
  • Как видите, для каждого режима мы рисуем индивидуальный вид кнопки, поверьте это очень удобно для создания индивидуальных решений в данной области.

    С кнопкой немного разобрались, давайте теперь пройдемся по плану, по которому мы хотим реализовыть нашу мысль. У нас два кадра, на каждом из которых имеется своя надпись, говорящая нам о номере проигрываемого кадра, плюс мы добавили в каждый кадр одну и ту же сделанную кнопку (ее можно выбирать в библиотеке наших компонентов):


    Итак, у нас уже есть два кадра со своим текстом и одной и той же кнопкой. Теперь давай пройдемся по коду, который мы внедрим в наши кадры и кнопку. В первом кадре, как я уже писал выше, мы прописываем stop() , на этом команды кадра, собственно и заканчиваются:)

    Все остальные операции мы будем совершать с применением кода в кнопке, причем сразу стоит уяснить, что команды для кнопки в каждом кадре будут свои, то есть они не переносятся с предыдущего кадра. Выбираем активным первый кадр и выделяем одним кликом нашу кнопку. В окне Actions мы теперь можем прописывать для кнопки свой код. Вот, что нам нужно вписать в код кнопки, находящейся в первом кадре:

    On (release) { gotoAndStop(2); }

    Сейчас все объясню: on (release) - данная операция определяет нам, что дальше в квадратных скобках пойдет код, который будет выполняться при нажатии на данную кнопку. То есть мы жмякаем на кнопку и свершается чтение данного кода внутри него. Что же будет внтури? Внутри квадратных скобок мы пропишем, уже


    Что у нас получилось: при нажатии на кнопку мы переходим к проигрыванию кадра номер 2. Хотя изначально мы останавливаемся на кадре номер 1, так как в нем прописана команда stop(). Теперь по нажатию на кнопку с первого кадра мы переходим к проигрыванию второго.

    Второй кадр не имеет команд внутри себя для выполнения, но мы останавливаемся на нем, так как при переходе с 1 кадра нам было приказано остановиться на данном кадре (так как gotoAndStop (2)). Поэтому мы замираем на данном кадре и видим как бы статическую картинку. Как нам вернутся теперь на 1 кадр? Я думаю вы уже догадались - для кнопки второго кадра мы пропишем ранее использованный набор команд, лишь изменив номер кадра, к которому мы собираемся перейти:
    on (release) { gotoAndStop(1); } Мы и не ошибемся если вместо gotoAndStop(1) пропишем gotoAndPlay(1), так как в любом случае мы остановимся на 1 кадре, ведь он содержит в себе команду stop() , которая свершит остановку проигрывания на 1 кадре в любом случае, ведь код первого кадра будет считываться только после команд второго кадра, с которого мы совершили скачок. Давайте взглянем, что у нас должно было получиться на flash:

    Итог : по нажатию на кнопку (button) мы совершаем переходы между первым и вторым кадрами. Данная реализация очень часто применяется в жизни, когда по нажатию на кнопку нам нужно совершить какое-то событие или переход. Так же её можно применять в различных ситуациях: когда нужно запустить какой-то клип (об этом расскажу позже), изменить прорисовку кадра, установить другие команды для кадра, сделать операции вычисления и много-много другого. Попробуйте немного поэксперементировать и поварьировать с местом применения уже известных вам команд и действий. Жду от вас результатов и возникающих вопросов! :)

    Вопрос: Создание кнопки для перехода на следующий монтажный кадр


    Добрый день, уважаемые форумчане. Дело в том, что я не так хорошо знакома с ActionScript 3.0, но мне срочно нужно выполнить на нем задание.
    Имеется flash-ролик с 5 монтажными кадрами. Каждый монтажный кадр содержит анимацию и музыкальное сопровождение. На последнем кадре где анимация и музыка заканчиваются, я создала кнопку для перехода на следующий монтажный кадр. Вот его содержание:
    Код ActionScript 3
    1 2 3 4 5 6 stop () ; Btn2. addEventListener (MouseEvent . CLICK , f2_ClickToGoToNextFrame) ; function f2_ClickToGoToNextFrame(event: MouseEvent ) : void { nextFrame () ; }

    Проблема в том, что он работает только один раз. Т.е. Переход с первого монтажного кадра на второй нормально проходит, но на втором уже анимация не воспроизводится. Вообще ничего не происходит.
    Можете подсказать как правильно прописать код для этой кнопки? Буду признательно, за оказанную помощь.

    P.S. Я использую Flash Professional CS6.

    Ответ:

    Сообщение от Юля_программист

    А на втором монтажном кадре тоже такая же кнопка?с таким же кодом?

    Имена экземпляров другие, а так код такой же.
    Я уже решила этот вопрос. Вместо nextframe прописала nextscreen. Все заработало как мне и надо было. Спасибо

    Вопрос: Отключение аудио при переключении между монтажными кадрами


    Доброго времени суток, форумчане.
    Имеется flash-ролик, содержащий несколько монтажных кадров. Некоторые монтажные кадры содержат аудио. При переключении между кадрами аудио накладываются. Подскажите пожалуйста, как сделать так, что бы при переключении монтажного кадра музыка тоже отключалась? Заранее спасибо.

    Ответ:

    Вопрос: Звук из первого монтажного кадра переходит во второй


    Все доброго времени суток, возник вот такой вопрос как сделать, что бы звук из первого монтажного кадра не переходил во второй?
    Если вкратце, делаю мультик про танки и звук движущегося танка переходит на второй монтажный кадр, когда там по задумке танк просто стоит и стреляет. Подскажите как это исправить?
    Заранее всем отписавшим людям большое спасибо!

    Ответ: а звук как ты запускаешь?

    Вопрос: Создание кнопки для гугл сайта


    Добрый день уважаемые гуру киберфорума. Очень нужна ваша помощь для создания небольшой кнопки для сайта. Проблема в том, что совсем не знаком с JavaScript, но нужна кнопка для сайта со следующим содержанием:

    У меня на созданном сайте sites.google есть встроенное окно с гугл формой, там есть текстовое окно для ввода некоторого почтового ящика. Хотелось бы чтобы для удобства пользователя ниже этой формы сделать кнопку типа "Перейти в свой почтовый ящик".
    Как я понимаю, скрипт должен взять текст из того самого окна и отсечь лишние символы например exampleuser в exampleuser@ домен.кг и выполнить переход в новом окне на тот самый почтовый домен.

    Некоторые подводные камни Сайты в гугл очень сильно блокируется любые JavaScript, но есть расширения для вставки кода скрипта JavaScript - Embeded Gadjet, возможно он сможет помочь.

    Буду благодарен за любую информацию по моей проблеме. Если нужна структура той самой странички я добавлю скриншотами.

    Ответ: html код необязательно но желательно если это возможно а так можно и скриптом вставить. Скрипт нужно вставлять полностью.

    Это фигня значение по умолчанию, вы смотрите в браузере просмотр кода элемента какой адрес стоит при нажатии на кнопку в зависимости от введеного адреса ящика.

    Вопрос: При клике по кнопкам показывать следующее/предыдуще изображение


    Есть слайдер, представляет собой одну большую картинку и миниатюры под ней, со стрелками. Я сделал, что бы при клике по центральной картинке он открывалась и становилась еще больше, подскажите как реализовать переход на следующую/предыдущую картинку кнопками < >

    $(document).ready(function() { $(".bxslider1").bxSlider({ pagerCustom: "#bx-pager1" }); $(".slider_boxes").on("click","#clacks",function() { var srcc = $(this).attr("src"); $("#shads").fadeIn(); $("#open_img").attr("src", srcc); var img_cl = $("#open_img").attr("class"); $("#big_imgs").fadeIn(); $(".slider_boxes").on("click", ".but_left", function() { //Появляется предыдущая картинка }); $(".slider_boxes").on("click", ".but_right", function() { //Появляется с картинка }); }); $("#shads").click(function() { $("#shads").fadeOut(); $("#big_imgs").fadeOut(); }); });

    Ответ: Как сделать вывод предыдущей и следующей картинки

    Вопрос: Создание кнопки с эффектом overlay


    Добрый день

    Два часа выбирал в каком разделе лучше создать тему, потому что не знаю с какой стороны подойти к решению проблемы =/

    Хочется сделать кнопку на сайте, но так, чтобы на переднем фоне был некий видео эффект (вот сделал пример в After Effects)
    Какими инструментами это можно реализовать? И можно ли вообще?
    Кнопка должна вести себя "независимо" от анимации эффекта. Навел мышкой - она допустим стала зеленой, нажал - красной и тд.

    Спасибо.

    Ответ: Неужели нет никаких вариантов?

    Подскажите набор базовых инструментов для создания нестандартных GUI с эффектами анимации для сайта.

    Я понимаю, что можно извращаться с CSS как тут или тут но как решить свою задачу этими средствами я не представляю. Через css можно сделать полукруглый Input с динамическим background"om или допустим чтобы в нем была "налита" жидкость, и с возможностью ввода данных?

    Везде пишут что Flash себя изжил, не предлагая никакой альтернативы. В 99% уроков по флешу все элементы\символы рисуются внутри самого флеша, в результате чего внешний вид получается мультяшным аля "масяня". Что мультики, что игры, что GUI. Выглядит мягко говоря не очень. "Переходите на HTML5", говорят они. Ну расскажите мне как сделать анимацию поверх через canvas. Делать отрисовку спрайтовой анимации руками в 100 строк кода это именно то о чем я мечтал и ждал в HTML5. Зато вы можете рисовать линии.

    Вот есть фотошоп, в котором я могу нарисовать допустим 4 состояния для кнопки. Объясните зачем мне проделывать те же действия через css или перерисовывать тоже самое во флеше?

    Чем больше пытаешься разобраться тем сильнее увязаешь =/

    Вопрос: Создание кнопки (тип "кнопка" или тип "изображение"?)


    Верстаю шаблон psd, возникла необходимость использовать кнопку со своим фоном в виде картинки. Что бы не париться решил использовать input type="image", получится ли обработать нажатие такой кнопки для отправки формы? Или обязательно использовать type="button"?

    Ответ:

    HTML5
    1 2 3
    Javascript
    1 2 3 function submitForm() { document.getElementById ("myForm" ) .submit () ; }
    Добавлено через 1 час 6 минут
    Покажите картинку кнопки, может получится submit стилизовать

    Вопрос: Перестают работать кнопки (Adobe Flash)


    Сделал несколько слоев, на каждом слое своя кнопка с сылкой, которую она должна открывать. Но после того как я задаю этим слоям анимацию (плавное выезжание из-за края) то кнопки перестают работать, в журнале пишется

    Монтажный кадр 1, слой "Actions", кадр 1, строка 10, столбец 1 1120: Обращение несуществующего свойства button_1.
    Монтажный кадр 1, слой "Actions", кадр 100, строка 10, столбец 1 1120: Обращение несуществующего свойства button_1.
    Монтажный кадр 1, слой "Actions", кадр 200, строка 10, столбец 1 1120: Обращение несуществующего свойства button_2.
    Монтажный кадр 1, слой "Actions", кадр 300, строка 10, столбец 1 1120: Обращение несуществующего свойства button_3.
    Монтажный кадр 1, слой "Actions", кадр 400, строка 10, столбец 1 1120: Обращение несуществующего свойства button_4.


    как сделать так, что б и после анимации кнопки работали

    Ответ: столкнулся с другой проблемой, сохранил и открыл в браузере свой swf, но при нажатии на кнопку на сайт не преходит (из адоб флеша переходит) в чем дело? браузер хром

    Вопрос: Создание кнопки средствами CSS


    Всем привет. Пытаюсь понять как сделать кнопку через CSS. Сами параметры такие: Высота - 45px, Ширина - 110px, Тип оформления - овальная. При нажатии на кнопку должен появляться эффект нажатия(вдавливания, не знаю как правильно объяснить) и потом переход на ссылку внутри кнопки.

    Подозреваю, что должно быть так:

    Код CSS
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 .btn { border : 1px solid #333 ; outline : none ; border-radius : 50% ; background : none #fff ; width : 110px ; height : 45px ; text-align : center ; display : inline-block ; line-height : 45px ; cursor : pointer ; border-bottom : 3px solid #333 ; position : relative ; top : 0px ; -webkit-transition: .1s ease-out; -moz-transition: .1s ease-out; -o-transition: .1s ease-out; transition : .1s ease-out; } .btn : active { border-bottom : 1px solid #333 ; position : relative ; top : 3px ; -webkit-transition: .1s ease-out; -moz-transition: .1s ease-out; -o-transition: .1s ease-out; transition : .1s ease-out; }

    Вопрос: При клике на кнопку переход к якорю и открытие блока


    Здравствуйте!
    Прошу помощи.
    На сайте в шапке есть форма фильтра с кнопкой
    Подобрать кондиционер

    Результаты сортировки фильтра выводятся в блоке ниже
    section class="selection,
    до применения фильтра там выводятся все записи без сортировки

    Задача такая.
    Изначально блок с записями скрывать, при клике по кнопке submit надо блок отображать и поднимать его вверх (прокручивать экран).

    Как пробовал.
    Поставил якорь перед блоком
    Во-первых якорь срабатывает только если кнопку button обернуть ссылкой на якорь и плюс к тому же поставить такую ссылку рядом, ее приходится скрывать.
    Подобрать кондиционер дублирующая

    Во-вторых когда поставил скрипт который отображает блок с записями при клике на кнопку, исчез переход к якорю.

    function resu() { $(".selection").hide(); $(".goresult").click(function(event) { event.preventDefault(); // Для того чтобы при нажатии на ссылку не кидало вверх $(".selection").slideToggle(); }); resu();

    Как заставить все это работать вместе и одновременно?

    Ответ: Блин, я рано радуюсь...
    Открывает и скролит это да, но выборка перестала работать, показывает все записи без фильтрации...