Переход на Кубе мыши опрокидывание

Резюме

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

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

Потребности

Flash CS3 или Flash CS4.

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

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

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

Шаг 2 - Создание нового слоя

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

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

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

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

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

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

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

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

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

Вернуться к основным сроки и установить например имя кнопки на "Btn".

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

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

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

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

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

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

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

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

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

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

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

Возвращайтесь к основным сроки и установить имя экземпляра мувиклипа в "img2".

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

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

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

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 Функция _onOver (E: MouseEvent) (
  VAR MyFilter: CubeTransitionEffectAS3 = новый CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  AddChild (MyFilter);

  myFilter.init (img1, img2, 75, "L-> R", 2 ", easeInOutCubic", FALSE);
 )

В первой строке вы добавить слушателю случае опрокидывания на кнопку. В функции "_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);

 VAR Running = false;
 VAR Goin = false;
 VAR goOut = false;

 Функция _onOver (E: MouseEvent) (
  IF (! Running) (
  _createAnimation ( "В");
  Running = true;
  () другое
  Goin = false;
  goOut = true;
  )
 )

 Функция _onOut (E: MouseEvent) (
  IF (! Running) (
  _createAnimation ( "Out");
  Running = true;
  () другое
  Goin = true;
  goOut = false;
  )
 )

 Функция _inAnimationDone (E: Event) (
  e.target.removeFilter ();
  img1.visible = false;

  если (ГОИН) (
  _createAnimation ( "Out");
  () другое
  Running = false;
  goOut = false;
  )
 )

 Функция _outAnimationDone (E: Event) (
  e.target.removeFilter ();
  img2.visible = false;

  если (goOut) (
  _createAnimation ( "В");
  () другое
  Running = false;
  Goin = false;
  )
 )

 Функция _createAnimation (Dir: string) (
  VAR MyFilter: CubeTransitionEffectAS3 = новый CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  AddChild (MyFilter);

  если (DIR == "в") (
  myFilter.init (img1, img2, 24, "L-> R", 2 ", easeInOutCubic", FALSE);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) Else If (DIR == "Out") (
  myFilter.init (img2, img1, 24, "R-> L", 2 ", easeInOutCubic", FALSE);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

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

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

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

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

Загрузка

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

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

Cool Flash Tutorials эффект!