вход

Flash эффект 3D поворота

Flash эффект 3D поворота

Сегодня, в этом Flash уроке, мы создадим эффект поворота страницы в пространстве. Эффект поворота выглядит достаточно реалистично, и позволяет получить интересные варианты благодаря комбинации вращений вокруг осей. Поворачивать изображение можно вокруг осей X,Y и Z, задавая соответственно значения в переменных, соответствующих осей.

Шаг 1. Начало

Откройте Flash и создайте новый документ (Ctrl+N) выбрав Flash File (Action Script 3). Затем выбрав File / Import / Import to Library импортируйте два изображения, который и будут сторонами нашей страницы. Они должны быть одного размера для достижения реалистичности эффекта переворота.

Преобразуйте оба эти изображения в MovieClips, можно создать пустые клипы и перетащить туда эти изображения, отцентрировав их к нулю. Чтобы открыть библиотеку, нажмите клавиши Ctrl+L. Задайте первому клипу имя adNumber1 а второму adNumber2.

Теперь добавьте оба изображения на сцену, не думайте пока о позиционировании, так как мы сделаем это с помощью ActionScript. На сцене эти клипы также должны иметь имена adNumber1 и adNumber2.

Шаг 2. Позиционирование

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

import com.greensock.*; 
import com.greensock.easing.*;

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

var imageC:Sprite = new Sprite();//containers for rotation X and Y
var imageD:Sprite = new Sprite();//containers for rotation X and Y
addChild(imageC);
addChild(imageD);
imageC.addChild(adNumber1);
imageD.addChild(adNumber2);

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

adNumber1.x =  - adNumber1.width/2;
adNumber1.y =  - adNumber1.height/2;
adNumber2.x =  - adNumber2.width/2;
adNumber2.y =  - adNumber2.height/2;

Установим точку начального вращения для обоих изображений в 0:

imageC.rotationX = 0;
imageD.rotationX = 0;

Чтобы задать положение изображения на сцене (точное положение, которые мы действительно видим), вы должны задать значения х и у для спрайта (не для изображения):

imageC.x = stage.stageWidth - imageC.width;
imageC.y = stage.stageHeight - imageC.height/2
imageD.x = stage.stageWidth - imageC.width;
imageD.y = stage.stageHeight - imageC.height/2;

Шаг 3. Создание эффекта

Мы наконец-то мы подошли к самому интересному. Для создания эффекта повороты мы будем использовать две функции.

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

var animationTime:Number = 4;
var imageOnStage:Number = 2;
var rotateX:Number = 90;
var rotateY:Number = 0;
var rotateZ:Number = 0;

Теперь добавим собственно функции поворота изображений:

function flip3D(){
     imageD.rotationX = -rotateX;
     imageD.rotationY = -rotateY;
     imageD.rotationZ = -rotateZ;
     imageD.alpha = 0;
     adNumber1.z = 0;
     adNumber2.z = 0;

     TweenLite.to(imageC, animationTime, {alpha:1,delay:imageOnStage,rotationX:rotateX, rotationY:rotateY, rotationZ:rotateZ, ease:Quint.easeIn, onComplete:flip3DSecond, overwrite:0})
     TweenLite.to(imageD,animationTime, {alpha:1,delay:imageOnStage + animationTime, rotationX:0, rotationY:0, rotationZ:0, ease:Elastic.easeOut, overwrite:0})
}

function flip3DSecond(){
     imageC.rotationX = -rotateX;
     imageC.rotationY = -rotateY;
     imageC.rotationZ = -rotateZ;
     imageC.alpha = 0;

     TweenLite.to(imageD, animationTime, {alpha:1,delay:imageOnStage, rotationX:rotateX, rotationY:rotateY, rotationZ:rotateZ,ease:Quint.easeIn, onComplete:flip3D, overwrite:0})
     TweenLite.to(imageC,animationTime, {alpha:1,delay:imageOnStage + animationTime, rotationX:0, rotationY:0, rotationZ:0, delay:0, ease:Elastic.easeOut,overwrite:0})
}

На этом наша реализация эффекта 3D поворота закончена. Осталось только запустить и посмотреть анимацию в действии. Изменяя значения переменных, вы можете легко получать различные эффекты вращений, можете посмотреть некоторые примеры вращений ниже.

rotateX = 90; rotateY = 0; rotateZ = 90;

[SWF]http://mainview.ru/wp-content/uploads/flash/3DFlip2.swf , 600, 450[/SWF]

rotateX = -90; rotateY = 0; rotateZ = -90;

[SWF]http://mainview.ru/wp-content/uploads/flash/3DFlip3.swf , 600, 450[/SWF]

rotateX = 0; rotateY = 0; rotateZ = 1350;

[SWF]http://mainview.ru/wp-content/uploads/flash/3DFlip4.swf , 600, 450[/SWF]

rotateX = 720; rotateY = 0; rotateZ = 0;

[SWF]http://mainview.ru/wp-content/uploads/flash/3DFlip5.swf , 600, 450[/SWF]

 

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
4 комментария

Статья → Flash эффект 3D поворота

  1. fatrasie:

    Спасибо за подробный урок! :)
    Только исходник не тот..

  2. Николай:

    Спасибо, поправил ссылку. Теперь исходник правильный.

  3. fatrasie:

    Спасибо ещё раз! :)

  4. Olka:

    Отличный урок, всё работает. Спасибо!

Оставить комментарий

Статья → Flash эффект 3D поворота

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.