В примере надо жать на края :)
Сегодня мы с вами сделаем какой-нибудь очередной клёвый эффект. И на этот раз это будет эффект 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() )
Теперь компилируем. И кликаем по разным сторонам ролика. При этом страницы перелистываются. Ура!
