Adobe flash как сделать переход
Кнопки в Animate (ранее программа называлась Flash Professional) – это символы, содержащие 4 кадра. Каждый кадр символа кнопки представляет свое состояние кнопки: «Не нажата», «Наведен курсор», «Нажата» и «Нажатие». Эти состояния определяют, как кнопка выглядит, когда курсор мыши находится над ней или когда пользователь нажимает кнопку. Этот документ содержит пояснения о том, как создать стандартные кнопки и кнопки с дополнительными функциями.
Выберите пункт меню «Вставка» > «Создать символ» или нажмите клавиши Control+F8 (Windows) или Command+F8 (Macintosh).
Примечание: В программе Flash 3 и более ранних версиях отмените выбор всех элементов в рабочей области и выберите пункт меню «Вставка» > «Создать символ».
Flash переключается в режим редактирования символов. Заголовок временной шкалы изменяется для отображения четырех последовательных кадров: «Не нажата», «Наведен курсор», «Нажата» и «Нажатие». Первый кадр кнопки в отпущенном состоянии (Не нажата) представляет собой пустой ключевой кадр.
Чтобы создать изображение кнопки в состоянии «Не нажата», при помощи инструментов рисования импортируйте изображение или поместите в рабочую область другой экземпляр символа. Внутри кнопки можно использовать любой фрагмент ролика или графический символ. Однако нельзя использовать другую кнопку. Для создания анимированной кнопки можно использовать символы клипа.
Выберите второй кадр с меткой «Наведен курсор» и выберите пункт меню «Вставка» > «Ключевой кадр». в рабочей области появляется изображение кнопки из первого кадра.
Измените изображение кнопок для состояния «Наведен курсор». Повторите шаги 4 и 5 для кадров состояний «Нажата» и «Нажатие».
Примечание. Кадр «Нажатие» не отображается в рабочей области при воспроизведении, но он задает область кнопки, реагирующую при нажатии на нее. Убедитесь, что изображением для кадра «Нажатие» выступает сплошная область, достаточно большая, чтобы охватить все графические элементы в кадрах «Не нажата», «Наведен курсор» и «Нажата». Область также может выходить за границы видимой кнопки. Если вы не задали область нажатия, то для ее определения используется изображение кнопки в кадре «Не нажата».
После того, как вы заполнили изображения четырех состояний кнопок, выполните команду «Редактирование» > «Редактировать фильм», чтобы выйти из режима редактирования символа.
Откройте окно «Библиотека» с помощью команды меню «Окно» > «Библиотека». Найдите кнопку на панели «Библиотека», а затем перетащите символ кнопки из библиотеки в рабочую область. На этом шаге в клипе создается экземпляр кнопки.
Для получения информации о назначении действия экземпляру кнопки обратитесь к документации, соответствующей версии Animate, которую вы используете. В документации указано следующее:
Рисовать мы уже немного научились, поэтому хочу предоставить возможность вам ознакомиться с очень интересной областью Flash - содание кнопок (button). Меня просто таращит от применения этих волшебных символов для своих целей. В отличие от других сред, что меня собственно и завараживает во flash, создание кнопок подразумевает не только задать алгоритм работы но кнопки, но и ее создание. Т.е. мы сами прорисовываем и придумываем, как наша кнопка будет работать, что с ней будет происходить при нажатии, при наведении курсора и много другое. Уверяю вас, такой разброс фантазии сподвигает вас на новые открытия и ++ в ваш очаг удовольствия от проделанного :)
Как же создается кнопка и для чего она вообще нужна? Кнопка используется практически везде и всегда. Смысл кнопки в том, что при использовании ее каким-то образом (не ISO, не святым) происходят события, заданные содержимым этим кнопки или ее влиянием. Банально она может применяться, начиная от перехода к другому фрейму по нажатию на нее до невероятных алгоритмических вычислений или происхождения всевозможного рода событий. Тут фантазии нет предела. При нажатии на кнопку, которая имеет в себе набор команд, создается некое событие, которое используется в дальнейшем.
В данной статье я хочу рассмотреть применение кнопки в качестве перехода на новый кадр. То есть: имеется несколько кадров, но они не сменяют друг друга поочередно, так как на первом кадре мы установили команду stop () (о ней я рассказывал в командах для фрейма). Итак представим: у нас имеется два кадра, на каждом из которых расположена надпись, информирующая о номере данного кадра для видимости и легкого восприятия. На первом и втором кадре у нас содержится кнопка. Я взял готовую кнопку из библиотеки Adobe Flash CS4 (чтоб красиво было), но вам рекомендую самим сделать кнопку. Как она делается?
- Кнопку (button) - будет иметь свою структуру, а также предназначения для программирования ее на выполнение различных команд. То есть при совершении с кнопками различных манипуляций: нажатие, наведение курсора, отвод курсора и другое - будет совершаться какой-то скрипт, установленный и определенный нами.
- Клип (movie) - клип, имеющий внутреннюю анимацию (расскажу об этом позже)
- Графику (Graphic) - графика, статичная и неподвижная, как картинка будет находиться на нашем поле деятельности.
Поэтому при возделывании кнопки из объекта ей наделяются некоторые возможности: при двойном нажатии мыши на созданную вновь кнопку откроется внутрення структура нашей клавиши, которую я сейчас опишу, постараюсь в деталях. Для начала представлю вид по совершению двойного щелчка левой кнопкой мыши по сделанной кнопке:
Видим, что мы находимся внутри кнопки, и тщательно рассматриваем ее структуру в области кадров: она имеет 4 пункта:
- Up - все, что находится под данной меткой, это вид нашей кнопки в обычном режиме, т.е. как кнопка будет выглядеть, если она просто расположеная на экране (мы не совершаем с ней никаких действий). Так мы будем видеть ее при первой встрече.
- Over - вид кнопки, когда курсор мыши находится над ней. Т.е. мы наводим на нее наш курсор, и наша кнопочка меняет свой вид, чтобы дать нам понять, что мы навели на нее и, возможно, хотим ей воспользоваться. Очень удобная функция во Flash, мне очень нравится :)
- Down - вид кнопки, когда мы нажимаем на нее, т.е. в момент нажатия курсором мыши на кнопку мы будем видеть ее именно такой, как определяет данный маркер
- Hit - признаюсь, что не знаю, зачем этот пункт, но я обычно рисую здесь вид кнопки в нейтральном режиме, как при метке Up.
С кнопкой немного разобрались, давайте теперь пройдемся по плану, по которому мы хотим реализовыть нашу мысль. У нас два кадра, на каждом из которых имеется своя надпись, говорящая нам о номере проигрываемого кадра, плюс мы добавили в каждый кадр одну и ту же сделанную кнопку (ее можно выбирать в библиотеке наших компонентов):
Итак, у нас уже есть два кадра со своим текстом и одной и той же кнопкой. Теперь давай пройдемся по коду, который мы внедрим в наши кадры и кнопку. В первом кадре, как я уже писал выше, мы прописываем stop(), на этом команды кадра, собственно и заканчиваются :)
Все остальные операции мы будем совершать с применением кода в кнопке, причем сразу стоит уяснить, что команды для кнопки в каждом кадре будут свои, то есть они не переносятся с предыдущего кадра. Выбираем активным первый кадр и выделяем одним кликом нашу кнопку. В окне Actions мы теперь можем прописывать для кнопки свой код. Вот, что нам нужно вписать в код кнопки, находящейся в первом кадре:
Сейчас все объясню: on (release) - данная операция определяет нам, что дальше в квадратных скобках пойдет код, который будет выполняться при нажатии на данную кнопку. То есть мы жмякаем на кнопку и свершается чтение данного кода внутри него. Что же будет внтури? Внутри квадратных скобок мы пропишем, уже известную нам команду gotoAndStop(2);
Что у нас получилось: при нажатии на кнопку мы переходим к проигрыванию кадра номер 2. Хотя изначально мы останавливаемся на кадре номер 1, так как в нем прописана команда stop(). Теперь по нажатию на кнопку с первого кадра мы переходим к проигрыванию второго.
Второй кадр не имеет команд внутри себя для выполнения, но мы останавливаемся на нем, так как при переходе с 1 кадра нам было приказано остановиться на данном кадре (так как gotoAndStop(2)). Поэтому мы замираем на данном кадре и видим как бы статическую картинку. Как нам вернутся теперь на 1 кадр? Я думаю вы уже догадались - для кнопки второго кадра мы пропишем ранее использованный набор команд, лишь изменив номер кадра, к которому мы собираемся перейти:
Мы и не ошибемся если вместо gotoAndStop(1) пропишем gotoAndPlay(1), так как в любом случае мы остановимся на 1 кадре, ведь он содержит в себе команду stop(), которая свершит остановку проигрывания на 1 кадре в любом случае, ведь код первого кадра будет считываться только после команд второго кадра, с которого мы совершили скачок. Давайте взглянем, что у нас должно было получиться на flash:
Итог: по нажатию на кнопку (button) мы совершаем переходы между первым и вторым кадрами. Данная реализация очень часто применяется в жизни, когда по нажатию на кнопку нам нужно совершить какое-то событие или переход. Так же её можно применять в различных ситуациях: когда нужно запустить какой-то клип (об этом расскажу позже), изменить прорисовку кадра, установить другие команды для кадра, сделать операции вычисления и много-много другого. Попробуйте немного поэксперементировать и поварьировать с местом применения уже известных вам команд и действий. Жду от вас результатов и возникающих вопросов! :)
Анимация формы во Flash(морфинг) Морфинг отличается от предыдущих типов анимации тем,что работает.
От меня добавка - Кисти для фотошоп "Ресницы" Вложение: 4167720_eyelashes.rar Смотреть зде.
В комментариях к посту Использование анимированной маски в Adobe Flash.Урок .
Текстовый скроллинг. Прокрутка текста средствами флеш. (Часть п.
-Метки
-Рубрики
-Поиск по дневнику
-Статистика
Редактор движения - это специальная панель, с помощью которой возможно корректировать и создавать эффекты для анимации движения.
Вот в этом ролике, например, вся анимация сделана с помощью Редактора движения.
И анимация картинок, и текста сделаны по одному принципу. Изменяются только свойства анимации.
Рассмотрим как сделать текстовый эффект
Создаём новый документ AS3
На основном рабочем поле (Монтажный кадр 1), на Временной шкале, встаём на Слой 1 и продлеваем Временную шкалу до 70 кадра.
Для этого щелкаем правой кнопкой мышки в 70 кадре и в открывшемся контекстном меню выбираем "Добавить кадр"
Шкала продлена до 70 кадра.
Снова щелкаем правой кнопкой мыши в первом кадре и на Рабочем поле инструментом "Текст" создаем нужный текст.
Я пишу - "С Днём Рожденья!"
Переключаемся на инструмент выделения "Стрелка", щелкнув по нему в панели Инструментов.
Теперь наш текст будет выделен.
Не снимая выделения с текста, модифицируем его во Фрагмент ролика
Модификация - Преобразовать в символ
После того как текст модифицирован во фрагмент ролика, дважды щелкаем по нему и входим в поле редактирования символа "Текст"
Щелкаем по тексту правой кнопкой мыши и в открывшемся контекстном меню выбираем "Разделить"
После этого возвращаемся на основную Сцену (Монтажный кадр 1), щелкнув по этой вкладке.
На основной Сцене (Монтажный кадр 1), на Временной шкале щелкаем в первом кадре и в открывшемся контекстном меню выбираем
"Создать анимацию движения"
Теперь Временная шкала выглядит так
Открываем вкладку меню "Редактор движения"
Если у вас этой вкладки нет, то зайдите в меню - Окно и в выпадающем списке щелкните по пункту "Редактор движения"
Вот так выглядит вкладка "Редактор движения".
Прокручиваем справа слайдер и находим свойство "Масштабирование по оси X" и "Масштабирование по оси Y"
Эти свойства нашей анимации движения мы и будем редактировать.
Около каждого из этих свойств имеются цепочки связывания. Проследите за тем, чтобы они были не разорваны.
В Редакторе движения также имеется Временная шкала. Для свойств "Масштабирование по оси X" и "Масштабирование по оси Y" есть первый ключевой кадр.
Встаём на линию "Масштабирование по оси X" и щелкаем по этому первому ключевому кадру. В графе числовых значений, щелкнув по цифре 100, вводим новое значение, например, 240. Тем самым мы увеличиваем размер текста по оси X.
И, поскольку цепочки для масштабов у нас связаны, то для масштаба по Y числовое значение должно автоматически увеличиться на такое же значение.
Мы изменили размер текста по оси X и Y.
Прокручиваем горизонтальный слайдер в самый конец Временной шкалы Редактора движения и щелкаем правой кнопкой мыши на линии "Масштаб по оси X". Нажимаем на появившеюся кнопку "Добавить ключевой кадр". Этим самым мы добавляем конечный ключевой кадр. Тоже само проделываем на линии "Масштаб по оси Y".
Конечные ключевые кадры добавлены.
Вводим для этих ключевых кадров новые значения для масштабов по осям X и Y. Например, 80. То есть уменьшаем размер текста.
На данном этапе мы создали анимацию движения с масштабированием текста.
Теперь зададим движению анимации свойство по которому это движение и будет происходить.
Для этого прокручиваем вертикальный слайдер вниз и находим раздел "Замедления". Щелкаем по значку "плюсик", который находится вверху справа и, в раскрывающемся списке, выбираем "Пружина".
В окне ввода числового значения печатаем число 5. Число это обозначает количество колебаний "Пружины". Чем больше это значение, тем резче будет двигаться наша анимация.
Снова прокручиваем вертикальный слайдер вверх и возвращаемся к свойствам анимации " "Масштабирование по оси X" и "Масштабирование по оси Y". В графе "Замедление" щелкаем по кнопке раскрывающегося списка и выбираем пункт "Пружина".
Проделываем это для обоих масштабов и по X, и по Y.
Можете проиграть анимацию и посмотреть, что она двигается по принципу "Пружина".
Если всё устраивает, то возвращаемся на Временную шкалу основной Сцены (Монтажный кадр 1) и сохраняем наш проект
Рождение гения! 21.07.2016 --> Смотрели: 55 (14) Каково быть мамой! 02.07.2016 --> Смотрели: 21 (9) Жизнь- движение 05.09.2013 --> Смотрели: 41 (0) Ржавые листья. 05.09.2013 --> Смотрели: 57 (0) Научи меня искусству маленьких шагов 05.09.2013 --> Смотрели: 47 (7)
-Поиск по дневнику
-Друзья
-Сообщества
-Статистика
Урок - обобщение моих скромных знаний и умений работы во флеш. (Продолжение 1 - Контент).
(AS2 потому, что можно использовать в Sothink SWF Quicker, кроме создания самого шаблона).
Навести курсор, кликать!
Работа создана по шаблону, созданному и сохранённому в программе Adobe Flash CS6.
А наполнение его материалом по разной тематике позволит Вам создавать
разнообразнейшие и красивейшие музыкальные флешки.
Приступаем к созданию шаблона: запустить программу АФ, создать документ Action Script 2.0. Можно задать цвет монтажного кадра
для удобства работы, например, серый. Добавляем на слой 1 ещё два пустых ключевых кадра, итого - три (можно любое другое количество,
но нет смысла, их можно будет добавлять и редактировать при создании каждой новой флешки). См. фото, кликабельно.
Становимся на первый кадр, рисуем прямоугольник любым цветом, пусть без обводки.
Преобразовываем в символ "Кнопка".
Кнопка "Символ1" появится в библиотеке. Имя пусть так и остаётся.
Переходим на второй кадр и повторяем те же действия. Для наглядности поменяли цвет и форму фигуры.
Преобразовываем в кнопку "Символ2"
Аналогично, на третьем кадре, создаём кнопку "Символ3".
Все три кнопки находятся в библиотеке. Если кликать по кадрам - меняется рисунок, то есть наши кнопки.
Переходим к следующему этапу: написание скриптов. Скажу сразу: не пугайтесь, ничего сложного.
У нас будет один, очень простой скрипт для всех кнопок. Вот такой:
Только в скобках будет цифра, которая укажет на какой кадр кнопка переносит действие. То есть, первая кнопка,
Переходим на второй кадр, инструментом "Стрелка" кликаем на изображение кнопки на монтажном кадре,
пишем (или вставлять) скрипт, в скобках прописываем цифру "3" - будет перенос на третий кадр.
Аналогично с кнопкой на третьем кадре: кликать на кнопку, ввести скрипт, только в скобках прописываем "1" , то есть возврат на первый кадр!
Теперь внимание: если тестировать флешку сейчас, она будет быстро и безостановочно мигать!
Для остановки флешки в начале, то есть, на первом кадре, прописываем ещё один скрипт, самый простой:
Внимание: этот скрипт пишем на первом кадре - кликаем на первый кадр, открыли панель "Действия"!
Если всё правильно сделано, у Вас получится следующее:
Можно сохранить как FLA файл, но мы сохраним это как шаблон:
Путь: Файл > Сохранить как шаблон. Появится панелька - подтверждаем действие.
Появляется следующее окно^
Имя: Прописываем название, например, "Переход по кадрам"
Категория: Выделите (если не выделено) имеющуюся надпись (может быть "Анимация") и создайте свою группу шаблонов,
например, "Мои шаблоны". Можно дать короткое описание шаблона. И - Сохранить!
Теперь, при запуске программы, Вы найдёте свою коллекцию шаблонов. Она сохраняется в папке "Templates" в программе Adobe Flash!
По теме смотрите ещё урок Cadmii
Во вложении найдёте FLA файл. Его можно открыть в программе и редактировать, наполняя материалом.
Или сразу его перевести в шаблон!
Но убедительно не рекомендую делать этого! Потренируйтесь, полезно!
В следующем уроке создадим открыточку по нашему, собственному, шаблону. например:
Flash использует концепцию временной шкалы для передачи анимации или изменения состояния. Любой визуальный элемент, использующий временную шкалу, должен являться объектом MovieClip или расширением класса MovieClip. Хотя ActionScript может предписать любому фрагменту ролика начать, остановить воспроизведение или перейти к другой точке на временной шкале, с помощью кода нельзя динамически создать временную шкалу или добавлять содержимое в определенные кадры — это можно сделать только в инструменте разработки Flash.
Когда воспроизводится экземпляр MovieClip, точка воспроизведения перемещается вперед по временной шкале со скоростью, определяемой частотой кадров SWF-файла. Эту настройку можно также переопределить, задав свойство Stage.frameRate в ActionScript.
Начало и остановка воспроизведения фрагментов роликов
Методы play() и stop() обеспечивают основные элементы управления продвижением фрагмента ролика по временной шкале. Предположим, в рабочей области есть символ фрагмента ролика, содержащий анимацию велосипеда, проезжающего от одного конца экрана до другого, с именем экземпляра bicycle . Если присоединить следующий код к ключевому кадру на основной временной шкале,
велосипед не будет двигаться (его анимация не будет воспроизводиться). Движение велосипеда можно начать посредством другого взаимодействия. Например, если добавить кнопку с именем startButton , следующий код в ключевом кадре на основной временной шкале позволит нажатием кнопки воспроизвести анимацию.
Перемотка вперед и назад
Контролировать воспроизведение фрагмента ролика можно не только с помощью методов play() и stop() . Также можно перемещать точку воспроизведения вперед или назад по временной шкале с помощью методов nextFrame() и prevFrame() . Вызов любого из этих методов останавливает воспроизведение и перемещает точку воспроизведения соответственно на один кадр вперед или назад.
Использование метода play() аналогично вызову nextFrame() каждый раз, когда отправляется событие enterFrame фрагмента ролика. Подобным образом можно воспроизвести фрагмент ролика bicycle в обратном направлении, если создать прослушиватель события enterFrame и с помощью функции прослушивателя предписать экземпляру bicycle переходить к предыдущему кадру, как показано в следующем примере.
Если фрагмент ролика содержит более одного кадра, то при обычном воспроизведении он будет воспроизводиться бесконечно, то есть после прохождения последнего кадра он будет возвращаться к кадру 1. Когда используется метод prevFrame() или nextFrame() , это поведение не включается автоматически (вызов метода prevFrame() при достижении кадра 1 не переводит точку воспроизведения на последний кадр). Условие if в описанном выше примере проверяет, дошла ли точка воспроизведения до первого кадра, и устанавливает ее на последний кадр, чтобы создать непрерывный цикл обратного воспроизведения фрагмента ролика.
Переход к другому кадру с помощью меток кадров
Преимущества использования меток, а не номеров кадров, особенно очевидны при создании сложного фрагмента ролика. Когда количество кадров, слоев и анимаций движения становится очень большим, следует присвоить важным кадрам описательные метки, обозначающие изменение поведения фрагмента ролика (например, «выкл.», «пешком», «бегом»). Это улучшает удобочитаемость кода и предоставляет гибкость, так как вызовы ActionScript, переходящие к кадру с меткой, указывают на уникальную точку (метку), а не на номер кадра. Если позднее вы решите переместить определенный сегмент анимации в другой кадр, то вносить изменения в код ActionScript не потребуется, так как для кадров в новом местоположении сохранится прежняя метка.
Для представления меток кадров в коде ActionScript 3.0 используется класс FrameLabel. Каждый экземпляр этого класса представляет одну метку кадра и имеет свойство name , представляющее имя метки кадра, заданное в инспекторе свойство, и свойство frame , представляющее номер кадра на временной шкале, которому присвоена метка.
Чтобы получить доступ к экземплярам FrameLabel, связанным с экземпляром фрагмента ролика, класс MovieClip включает два свойства, напрямую возвращающие объекты FrameLabel. Свойство currentLabels возвращает массив, содержащий все объекты FrameLabel на временной шкале фрагмента ролика. Свойство currentLabel возвращает строку с именем последней пройденной метки кадра на временной шкале.
Допустим, что вы создали фрагмент ролика с именем robot и пометили различные состояния его анимации. Можно настроить условие, которое проверяет свойство currentLabel для получения текущего состояния объекта robot , как в следующем коде.
Проигрыватель Flash Player 11.3 и приложение AIR 3.3 добавили событие frameLabel в класс FrameLabel. Экземпляру FrameLabel, представляющему метку кадра, можно назначить обработчик событий. Событие отправляется, когда указатель воспроизведения достигает кадра.
В следующем примере создается экземпляр FrameLabel для второй метки кадра в массиве меток кадров для MovieClip. Затем регистрируется обработчик события frameLabel :
Работа с монтажными кадрами
В среде разработки Flash монтажные кадры можно использовать для разделения последовательных временных шкал, через которые проходит SWF-файл. Используя второй параметр методов gotoAndPlay() и gotoAndStop() , можно задать монтажный кадр, к которому должна перейти точка воспроизведения. Все FLA-файлы начинаются только с исходного монтажного кадра, но можно создавать и другие монтажные кадры.
Использование монтажных кадров не всегда целесообразно, так как они имеют ряд недостатков. Документ Flash, содержащий много монтажных кадров, сложно обрабатывать, особенно в среде с несколькими авторами. Создание нескольких монтажных кадров также приводит к неэффективному использованию пропускной способности, так как в процессе публикации все монтажные кадры объединяются в одну временную шкалу. Это приводит к последовательной загрузке всех монтажных кадров, даже если они никогда не воспроизводились. По этим причинам использование нескольких монтажных кадров, как правило, не рекомендуется, за исключением случаев, когда требуется организовать несколько продолжительных анимаций на базе временной шкалы.
Свойство scenes класса MovieClip возвращает массив объектов Scene, представляющих все монтажные кадры в SWF-файле. Свойство currentScene возвращает объект Scene, представляющий монтажный кадр, который воспроизводится в данный момент.
Класс Scene имеет несколько свойств, предоставляющих информацию о монтажном кадре. Свойство labels возвращает массив объектов FrameLabel, представляющих метки кадров в данном монтажном кадре. Свойство name возвращает имя монтажного кадра в виде строки. Свойство numFrames возвращает целое число, представляющее общее количество кадров в монтажном кадре.
Читайте также: