3D Эффект переворота, как в IPhone

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Информация
Автор/переводчик: 
ProcXel.A
Описание: 

В примере надо жать на края :)

Сегодня мы с вами сделаем какой-нибудь очередной клёвый эффект. И на этот раз это будет эффект 3Д разворота на 180 градусов. Представьте, что мы хотите перевернуть игральную карту на другую сторону - это и будет наш эффект.

В этом уроке мы будем переворачить воображаемые страницы. И для начала нам придется нарисовать эти страницы. Создайте новый *.fla размером 240 х 320. Теперь нарисуйте, например, три воображаемые страницы сайта или книги, или еще чего-нибудь. Каждая такая страница должна в итоге представлять из себя отдельный мувиклип размером 240 х 320 с точкой регистрации в левом верхнем углу, лежащий в библиотеке и прилинкованный к определенному классу.

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

Теперь у нас есть три страницы и шапка, которые можно с помощью кода добавить на сцену. Но добавлять на сцену мы их не будем. Вместо этого мы напишем свой собственный класс, в который и будет вращать наши страницы и двигать шапку. Создадим пустой файл Vertelka.as рядом с *.fla файлом и скопируем в него код:

package {
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import flash.display.DisplayObjectContainer;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.geom.Point;
import fl.transitions.easing.Strong;

public class Vertelka extends MovieClip {
//В этот мувиклип поместим наши страницы. А сам мотор будет вращаться вокруг своей оси.
private var _motor:MovieClip = new MovieClip()
//В этот массив поместим мувиклипы страниц.
private var _pages:Array = []
//В эту переменную поместим шапку.
private var _title:MovieClip
//Это счетчик текущей страницы.
private var _currentPage:int = 0
//Это твин объект, который будет вращать мотор со страницами.
private var _tween:Tween = new Tween( _motor, "rotationY", Strong.easeInOut, 0, 0, 0, true )
//Это длительность анимации вращения.
private const TWEEN_TIME:Number = 2.0

//Конструктор.
public function Vertelka( container:DisplayObjectContainer, pos:Point, pages:Array, title:MovieClip ) {
//Добавляем нашу вертелку на сцену.
container.addChild( this )
//Добавляем в нашу вертелку мотор.
this.addChild( _motor )
//Добавляем страницы.
AddPages( pages )
//Добавляем шапку.
_title = title
this.addChild( _title )
//Позиционируем.
this.x = pos.x
this.y = pos.y
_title.x = - pos.x
_title.y = - pos.y
//Отключаем реакцию на мышь у дочерних элементов вертелки.
this.mouseChildren = false
//Останавливаем твин. Потому что он при создании автоматически начинает играть анимацию. А нам это не нужно пока что. :)
_tween.stop()
//Добавляем слушатель клика мыши.
this.addEventListener( MouseEvent.CLICK, Click )
//Добавляем слушатель анимации твина.
_tween.addEventListener( TweenEvent.MOTION_CHANGE, ChangePage )
}

//Функция добаавления страниц.
private function AddPages( pages:Array ):void {
//Помещаем страницы в массив.
_pages = pages

//Каждую страницу размещаем под нужным углом и в нужной позиции. Принцип такой. Нечетную страницу кладем обычно.
//А четную разворачиваем на 180 гладусов и кладем в противоположный угол.
//Таким образом нечетные страницы как бы лежат на обратной стороне.
for ( var i:int = 0; i 0 ) {
RotateNext()
}
else {
RotateLast()
}
}

//Функция перелистывания вперед.
private function RotateNext():void {
if ( _currentPage 0 ) {
var currentRotation:Number = ( --_currentPage ) * 180
_pages[_currentPage].alpha = 1
_tween.stop()
_tween.begin = _motor.rotationY
_tween.finish = currentRotation
_tween.duration = TWEEN_TIME
_tween.start()
}
}

//Функция контроля анимации перелистывания.
private function ChangePage( e:TweenEvent ):void {
var tween:Tween = Tween( e.target )
var tRot:Number = 90
var pos:Number = Math.abs( tween.finish - tween.getPosition() )
//Когда мотор поворачивается на половину, включаем новую страницу.
if ( pos

Класс сохраняем. И теперь идем в *.fla. И пишем на главной сцене в первом кадре следующий код:

import flash.geom.Point;

var pages:Array = [new Page_1(), new Page_2(), new Page_3()]
var vertelka:Vertelka = new Vertelka( this, new Point( 120, 160 ), pages, new TopTip() )

Теперь компилируем. И кликаем по разным сторонам ролика. При этом страницы перелистываются. Ура!

Исходник: 

Впервые!

Если у вас было хоть раз желание сделать что-то новое и необычное, то этот видеокурс для вас! Знания ActionScript 3.0 вдохнут в ваши проекты новую жизнь, позволив тем самым поднять их на новый уровень

С помощью этого видеокурса вы пройдёте путь от новичка до Объектно-Ориентированного Программирования, сможете работать со многими популярными библиотеками и научитесь создавать сайты во flash! + Видеокурс по PaperVision3D в подарок!

Видеокурс содержит 119 видеоуроков в 12 главах. На сегодняшний день это единственный видеокурс, таких масштабов

Узнайте о других возможностях ActionScript 3.0