Cool Влияние Обучение Flash!

Резюме

В этом учебнике вы узнаете, как создать эффект перехода на кубе мыши опрокидывания.

Вот конечный результат:

Требование

Flash CS3 или Flash CS4.

Примечание: скриншот в этом руководстве, достигнутый в CS3 Flash. Она работает точно так же в Flash CS4.

Шаг 1 - Установка компонентов эффект

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

Шаг 2 - Создайте новый слой

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

Шаг 3 - Создание фона

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

Выберите первый кадр в "БГ" слой и нарисуйте форму прямоугольника с инструментом на холсте. Выделите прямоугольник и скорректировать настройки цвета имеют приятный градиент (вы также можете использовать любой другой цвет).

Шаг 4 - Создание кнопки

Куб эффект должен динамически реагировать на состояние пользователей мыши (опрокидывание / свитка). Лучше практике не добавить событие слушателя сам эффект и вместо этого использовать "чистый" кнопку.

Выберите первый кадр на слое "БТН" и нарисуйте прямоугольник с размерами холста (цвет не так-матер кнопка не будет видна). Выделите прямоугольник и преобразовать его в кнопку с [нажмите F8] или правой кнопкой мыши на MovieClip -> "Преобразовать в символ ...".

Установить имя кнопку "БТН" и убедитесь, что тип "Button".

Дважды нажмите на кнопку. Теперь перетащите первый ключевой кадр "Вверх" до последнего кадра "Hit". Это гарантирует, что кнопка будет интерактивной, но не было видно.

Вернитесь на главную временную шкалу и установить имя экземпляра кнопку "БТН".

Шаг 5 - Создание начать Movieclip

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

Нажмите на первый кадр на слое "img1". Импорт изображений с размером холст, нажав [Ctrl-пресс R] или "Файл" -> "Импорт" -> "Импорт на сцене ...".

Теперь преобразовать этот образ Movieclip и назовите его "img1".

Установить имя экземпляра только что созданного мувиклипа "img1".

Шаг 6 - Создание Конец Movieclip

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

Выберите первый кадр слоя "img2" (хорошо, плохо имен, вы можете исправить это ) И нарисуйте прямоугольник с размерами холста. Вы хотите, чтобы убедиться, что конец Movieclip имеет те же габариты, как начальную Movieclip. Вот почему сначала нарисовать невидимые формы того же размера, как начальную Movieclip.

Выбрать форму и установить альфа значение 0 (форма по-прежнему существует, но невидимой).

Преобразование фигуры Movieclip нажмите [F8] или правой кнопкой мыши на MovieClip -> "Преобразовать в символ ..." и назовите его "img2".

Дважды щелкните только что созданный Movieclip, создайте новый пустой слой и поставить какой-нибудь текст о том, что вновь созданного слоя.

Вернитесь на главную временную шкалу и установить имя экземпляра мувиклипа "img2".

Шаг 7 - Добавить опрокидывание ActionScript

Выберите слой "сценарий" и откройте "Действия" окно с "Windows" -> "Действия" или нажмите [F9].

Если вы просто хотите, чтобы переход на опрокидывание (а не обратно перехода на свитке) копию следующие строки в окно кода.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 Функция _onOver (E: MouseEvent) (
  VAR myFilter: CubeTransitionEffectAS3 = новый CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = ложь;
  myFilter.mouseChildren = ложь;
  addChild (myFilter);

  myFilter.init (img1, img2, 75, "L-> г", 2 ", easeInOutCubic", ложные);
 )

В первой строке вы добавить событие слушателя опрокидывание на кнопку. В функции "_onOver" (строка 3) сначала создается экземпляр CubeTransitionEffectAS3 прежде чем отключить мышь интерактивности компонента (линии 4 и 5). Помните, что кнопки вы создали ранее заботится о мыши эффекты, и вы не хотите эффект вмешательства по этому вопросу.

В строке 9, наконец, вы инициализации эффект ( документация параметр здесь ). Важной частью являются первые два параметра. Вы определяете, что переход начинается с "img1" и заканчивается "img2".

Экспорт FLA файла. Как видите, эффект компонент отлично работает с прозрачным фоном "img2".

Шаг 8 - и более сложные ActionScript

Ладно, с предыдущим код опрокидывание работает просто отлично. Но что, если вы также хотите, чтобы развертывание функции, меняет переход от "img2" до "img1"? Для достижения этой цели требуется более сложный код. Удалить скрипт и вставить следующий текст:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver); btn.addEventListener (MouseEvent.ROLL_OUT, _onOut); уаг работает = ложь; уаг идущий = ложь; уаг goOut = ложь; функции _onOver (E: MouseEvent) (если (! работает) (_createAnimation ("в"); работает = TRUE;) (еще идущий = ложь; goOut = True;)) функции _onOut (E: MouseEvent) (если (! работает) (_createAnimation ("за"); работает = True; ) (еще идущий = правда, goOut = ложным;)) функции _inAnimationDone (E: Событие) (e.target.removeFilter (); img1.visible = ложным, если (ГОИН) (_createAnimation ("за");) (другое работает = ложь; goOut = ложным;)) функции _outAnimationDone (E: Событие) (e.target.removeFilter (); img2.visible = ложным, если (goOut) (_createAnimation ("в");) (еще работает = ложным ; идущий = ложным;)) функции _createAnimation (реж: String) (VAR myFilter: CubeTransitionEffectAS3 = новый CubeTransitionEffectAS3 (); myFilter.mouseEnabled = ложь; myFilter.mouseChildren = ложь; addChild (myFilter), если (реж == "в регионе" ) (myFilter.init (img1, img2, 24, "L-> г", 2 ", easeInOutCubic", ложные); myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);) остальное, если (реж == "за") (myFilter.init (img2, img1, 24, "г-> л", 2 ", easeInOutCubic", ложные); myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);)) 

Важно знать, что вы не можете изменить направление перехода при действии работает. Вместо этого можно "запоминать" действия пользователя, подождать, пока эффект делается, и применить реверс с переходной экономикой.

Переменных "идущий" и "goOut" (линии 5 и 6) использовали для этой цели. Вы устанавливаете их, когда функции "_onOver" и "_onOut" (линия 8 и 18) выполняются. Но только если уаг работает так, если это неправда (линия 9 и 19), можно начать переход сразу (строка 10 и 20).

Функция "_createAnimation" (строка 52), функции вашего помощника в начале анимации в зависимости от направления "реж" Вы прошли в качестве параметра.

Обратите внимание, что после вызова "removeFilter" метод (строка 29 и 41) и Movieclip Начало и конец Movieclip устанавливаются в видимой (из-эффект). Вот почему вам настроить видимость Movieclip - переход с начала - к ложным (строка 30 и 42).

Скачать

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

Здесь вы можете найти видео-учебник о том, как осуществлять иные последствия .