turn the pages transition
-----------------------------------------------
turn the pages transition
フィルムがめくれるようなトランジションです
3年前に作ったコードなので、
ライブラリは何も使っていません。
その為、ちょいと長いコードに・・・
@narutohyper
------------------------------------------------
/**
* Copyright narutohyper ( http://wonderfl.net/user/narutohyper )
* MIT License ( http://www.opensource.org/licenses/mit-license.php )
* Downloaded from: http://wonderfl.net/c/ujZ5
*/
package {
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.display.Sprite;
import flash.system.LoaderContext;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.MouseEvent;
import flash.net.URLRequest;
/*-----------------------------------------------
turn the pages transition
フィルムがめくれるようなトランジションです
3年前に作ったコードなので、
ライブラリは何も使っていません。
その為、ちょいと長いコードに・・・
@narutohyper
------------------------------------------------*/
[SWF(width = 465, height = 465, frameRate = 60)]
public class Main extends Sprite {
//後々外部xmlからの読み込みに対応させるられるよう、XMLで、画像のURLを設定
private var dataXml:XML =
<menu>
<imgurl>http://marubayashi.net/archive/sample/images/11.jpg</imgurl>
<imgurl>http://marubayashi.net/archive/sample/images/12.jpg</imgurl>
<imgurl>http://marubayashi.net/archive/sample/images/13.jpg</imgurl>
<imgurl>http://marubayashi.net/archive/sample/images/14.jpg</imgurl>
<imgurl>http://marubayashi.net/archive/sample/images/15.jpg</imgurl>
<imgurl>http://marubayashi.net/archive/sample/images/16.jpg</imgurl>
<imgurl>http://marubayashi.net/archive/sample/images/17.jpg</imgurl>
<imgurl>http://marubayashi.net/archive/sample/images/18.jpg</imgurl>
<imgurl>http://marubayashi.net/archive/sample/images/19.jpg</imgurl>
<imgurl>http://marubayashi.net/archive/sample/images/20.jpg</imgurl>
</menu>;
private var dataCounter:uint=0;
private var dataArray:Array;
private var imgArray:Array;
private var thumbnailArray:Array;
private var progress:Sprite
private var bar:Sprite
private var nowPage:int=-1;
private var mainFrame:Sprite;
private var page:turnPage;
public function Main() {
dataArray = new Array();
imgArray = new Array();
mainFrame=new Sprite;
addChild(mainFrame);
//取り込んだXMLデータの中の画像URL情報を配列に収納
for each (var item:String in dataXml.imgurl) {
dataArray.push(item)
}
//画像の読み込み開始
imgLoader(0)
//簡易progressBar
progress=new Sprite()
progress.graphics.beginFill(0x666666,1)
progress.graphics.drawRect(0,0,102,10)
progress.x=(464-102)/2
progress.y=(464-10)/2
bar=new Sprite()
bar.graphics.beginFill(0x6666FF,1)
bar.graphics.drawRect(0,0,100,8)
bar.x=1
bar.y=1
bar.width=0
addChild(progress)
progress.addChild(bar)
}
//画像読み込み
private function imgLoader(no:uint):void {
var loader:Loader = new Loader();
loader.load(new URLRequest(dataArray[no]), new LoaderContext(true));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaded);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, error);
function loaded(e:Event):void {
//trace(dataArray[no]);
imgArray.push(loader);
nextProc()
}
function error(e:IOErrorEvent):void {
nextProc()
}
function nextProc():void {
dataCounter++
bar.width+=10
if (dataArray.length>dataCounter) {
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loaded);
loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, error);
imgLoader(dataCounter)
} else {
init();
}
}
}
private function init():void {
removeChild(progress)
thumbnailArray=[];
for (var i:uint=0;i<imgArray.length;i++) {
//サムネール画像の作成
thumbnailArray[i]=new thumbnail(i,imgArray[i])
addChild(thumbnailArray[i])
thumbnailArray[i].addEventListener(MouseEvent.CLICK,thumbnailHandler)
//メイン画像の配置
imgArray[i].content.scaleX=imgArray[i].content.scaleY=445/640
mainFrame.addChild(imgArray[i]);
imgArray[i].visible=false;
}
//transition用Sprite
page = new turnPage(this,445,340)
mainFrame.x=page.x=10;
mainFrame.y=page.y=50;
changePage(0)
}
private function thumbnailHandler(e:MouseEvent):void {
changePage(e.target.id)
}
public function changePage(nextPage:uint):void {
for (var i:uint=0;i<thumbnailArray.length;i++) {
if (i==nextPage) {
thumbnailArray[i].down()
} else {
thumbnailArray[i].disable()
}
thumbnailArray[i].removeEventListener(MouseEvent.CLICK,thumbnailHandler)
}
if (nowPage>=0) {
page.addEventListener(turnPage.CLOSE_END,closeEnd)
page.close(imgArray[nowPage])
} else {
openStart()
}
//openStart()
function closeEnd(event:Event=null):void {
page.removeEventListener(turnPage.CLOSE_END,closeEnd)
imgArray[nowPage].visible=false;
openStart()
}
function openStart():void {
nowPage=nextPage
imgArray[nowPage].visible=true;
page.addEventListener(turnPage.OPEN_END,openEnd)
page.open(imgArray[nowPage])
}
function openEnd(event:Event=null):void {
page.removeEventListener(turnPage.OPEN_END,openEnd)
for (var i:uint=0;i<thumbnailArray.length;i++) {
if (i!=nowPage) {
thumbnailArray[i].enable()
thumbnailArray[i].addEventListener(MouseEvent.CLICK,thumbnailHandler)
}
}
}
}
}
}
import flash.display.DisplayObjectContainer;
import flash.display.DisplayObject;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.utils.*
import flash.geom.Matrix;
import flash.geom.Point;
import flash.events.MouseEvent;
//ページめくり演出用スプライト
class turnPage extends Sprite{
//コンストラクタ
public static const OPEN_END:String = "open_end";
public static const CLOSE_END:String = "close_end";
private var targetMc:DisplayObject;
private var _parent:DisplayObjectContainer;
private var maskA:Sprite;
private var maskB:Sprite;
private var backSprite:Sprite;
private var frontSprite:Sprite;
private var backBmd:BitmapData;
private var backBm:Bitmap;
private var frontBmd:BitmapData;
private var frontBm:Bitmap;
private var w:Number
private var h:Number
public function turnPage(mc:DisplayObjectContainer,_w:Number,_h:Number):void {
_parent=mc;
_parent.addChild(this);
this.visible=false;
w=_w
h=_h
//---------------------------------------------
//EFFECT用
//---------------------------------------------
//後景
backSprite=new Sprite();
backBmd = new BitmapData(w,h,true, 0x0000FFFF);
backBm = new Bitmap(backBmd);
backSprite.addChild(backBm)
this.addChild(backSprite);
//前景
frontSprite=new Sprite();
frontBmd = new BitmapData(w,h,true, 0x0000FFFF);
frontBm = new Bitmap(frontBmd);
frontSprite.addChild(frontBm)
this.addChild(frontSprite);
maskA=new Sprite()
maskB=new Sprite()
this.addChild(maskA)
this.addChild(maskB)
backSprite.mask=maskA
frontSprite.mask=maskB
//clone()
}
public function clone():void {
backBmd = new BitmapData(w,h,true, 0x00000000);
frontBmd = new BitmapData(w,h,true, 0x00000000);
backBm.bitmapData = backBmd
frontBm.bitmapData = frontBmd
backBmd.draw(targetMc)
frontBmd.draw(targetMc)
backSprite.visible=true
frontSprite.visible=true
targetMc.visible=false
}
public function open(_targetMc:DisplayObject):void {
targetMc=_targetMc
clone()
this.visible=true;
var minute:uint=600;
var no:uint=15;
var fadeTimer:Timer = new Timer(minute/no, no);
var angle:uint=0;
// 時間間隔イベントおよび完了イベント用のリスナーを指定する
fadeTimer.addEventListener(TimerEvent.TIMER, onTime);
fadeTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimeComplete);
fadeTimer.start();
openMask(angle)
function onTime(event:TimerEvent):void {
angle+=4
openMask(angle)
}
function onTimeComplete(event:TimerEvent):void {
fadeTimer.removeEventListener(TimerEvent.TIMER, onTime);
fadeTimer.removeEventListener(TimerEvent.TIMER_COMPLETE, onTimeComplete);
targetMc.visible=true
backSprite.visible=false
frontSprite.visible=false
dispatchEvent(new Event(OPEN_END));
}
}
public function close(_targetMc:DisplayObject):void {
targetMc=_targetMc
clone()
var minute:uint=600
var no:uint=15
var fadeTimer:Timer = new Timer(minute/no, no);
var angle:uint=60
// 時間間隔イベントおよび完了イベント用のリスナーを指定する
fadeTimer.addEventListener(TimerEvent.TIMER, onTime);
fadeTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimeComplete);
closeMask(angle)
fadeTimer.start();
function onTime(event:TimerEvent):void {
angle-=4
closeMask(angle)
}
function onTimeComplete(event:TimerEvent):void {
fadeTimer.removeEventListener(TimerEvent.TIMER, onTime);
fadeTimer.removeEventListener(TimerEvent.TIMER_COMPLETE, onTimeComplete);
backSprite.visible=false
frontSprite.visible=false
dispatchEvent(new Event(CLOSE_END));
this.visible=false;
}
}
private function openMask(angle:Number=0,dh:Number=1400,h:Number=470):void {
var th:Number=w*dh/1000
clone()
var radian:Number=angle*Math.PI/180
var a:Number=Math.tan(radian)*th
var b:Number=Math.tan(radian)*(th-h)
maskA.graphics.clear()
maskA.graphics.beginFill(0xFF0000)
maskA.graphics.moveTo(0,0)
maskA.graphics.lineTo(a,0)
maskA.graphics.lineTo(b,h)
maskA.graphics.lineTo(0,h)
maskA.graphics.endFill()
maskB.graphics.clear()
maskB.graphics.beginFill(0x0000FF)
maskB.graphics.moveTo(a-b,-h)
maskB.graphics.lineTo(2000,-h)
maskB.graphics.lineTo(2000,0)
maskB.graphics.lineTo(0,0)
maskB.graphics.endFill()
var mtr:Matrix= new Matrix()
var mtr2:Matrix= new Matrix()
mtr.scale(-1,1)
mtr.rotate(radian*2)
mtr.translate(b,h)
frontBm.x=-b
frontBm.y=-h
frontSprite.transform.matrix = mtr
frontSprite.alpha=0.5
frontSprite.mask=maskB
frontSprite.visible=true
maskB.transform.matrix = mtr
}
private function closeMask(angle:Number=0,dh:Number=1400,h:Number=470):void {
var th:Number=w*dh/1000
var tw:Number=w
clone()
var radian:Number=angle*Math.PI/180
var a:Number=Math.tan(radian)*th
var b:Number=Math.tan(radian)*(th-h)
maskA.graphics.clear()
maskA.graphics.beginFill(0xFF0000)
maskA.graphics.moveTo(tw,0)
maskA.graphics.lineTo(tw-a,0)
maskA.graphics.lineTo(tw-b,h)
maskA.graphics.lineTo(tw,h)
maskA.graphics.endFill()
maskB.graphics.clear()
maskB.graphics.beginFill(0x0000FF)
maskB.graphics.moveTo(a-b,-h)
maskB.graphics.lineTo(2000,-h)
maskB.graphics.lineTo(2000,0)
maskB.graphics.lineTo(0,0)
maskB.graphics.endFill()
var mtr:Matrix= new Matrix()
mtr.scale(-1,1)
mtr.rotate(-radian*2)
mtr.translate(tw-b,h)
frontBm.x=-(tw-b)
frontBm.y=-h
frontSprite.transform.matrix = mtr
frontSprite.alpha=0.5
var mtr2:Matrix= new Matrix()
mtr2.scale(1,1)
mtr2.rotate(-radian*2)
mtr2.translate(tw-b,h)
maskB.transform.matrix = mtr2
}
}
//簡易thumbnailボタン
class thumbnail extends Sprite{
public var id:uint
private var disableFlag:Boolean=false
public function thumbnail(_id:uint,mc:DisplayObject):void {
id=_id
var bmd:BitmapData =new BitmapData(44,34,true,0x00000000)
var mtx:Matrix=new Matrix;
mtx.createBox(40/mc.width,30/mc.height,0,2,2)
bmd.draw(mc,mtx,null,null,null,true)
graphics.beginFill(0xCCCCCC)
graphics.drawRect(1,1,42,32)
addChild(new Bitmap(bmd));
x=id*45+8
y=400
addEventListener(MouseEvent.MOUSE_OVER,thumbnailHandler)
addEventListener(MouseEvent.MOUSE_OUT,thumbnailHandler)
disableFlag=false
}
private function thumbnailHandler(e:MouseEvent):void {
if(e.type==MouseEvent.MOUSE_OVER) {
e.target.graphics.clear()
e.target.graphics.beginFill(0xFF6666)
e.target.graphics.drawRect(0,0,44,34)
} else if (e.type==MouseEvent.MOUSE_OUT) {
e.target.graphics.clear()
e.target.graphics.beginFill(0xCCCCCC)
e.target.graphics.drawRect(1,1,42,32)
}
}
public function down():void {
alpha=0.5
if (!disableFlag) {
removeEventListener(MouseEvent.MOUSE_OVER,thumbnailHandler)
removeEventListener(MouseEvent.MOUSE_OUT,thumbnailHandler)
disableFlag=true
}
graphics.clear()
graphics.beginFill(0x6666FF)
graphics.drawRect(0,0,44,34)
}
public function enable():void {
if(disableFlag) {
addEventListener(MouseEvent.MOUSE_OVER,thumbnailHandler)
addEventListener(MouseEvent.MOUSE_OUT,thumbnailHandler)
disableFlag=false
}
graphics.clear()
var p:Point=localToGlobal(new Point(mouseX,mouseY))
if (hitTestPoint(p.x,p.y)) {
graphics.beginFill(0xFF6666)
graphics.drawRect(0,0,44,34)
} else {
graphics.beginFill(0xCCCCCC)
graphics.drawRect(1,1,42,32)
}
alpha=1
}
public function disable():void {
alpha=0.5
if (!disableFlag) {
removeEventListener(MouseEvent.MOUSE_OVER,thumbnailHandler)
removeEventListener(MouseEvent.MOUSE_OUT,thumbnailHandler)
disableFlag=true
}
graphics.clear()
graphics.beginFill(0xCCCCCC)
graphics.drawRect(1,1,42,32)
}
}