ActionScript3.0 ページめくり Leaflip

| コメント(5) | トラックバック(1)
leaflip_logo_01.jpg

これに使用した、ページめくりのコードを整理してとりあえずライブラリにしてみました。
ダウンロードはコチラ

同様のライブラリは世にたくさんありますが、たぶん軽くて、改造もしやすいかもしれない。
※この記事はライブラリのVerUPに伴い一部訂正しました。

このようなコードを書けばとりあえず動作はします。

ActionScript3.0:
package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import jp.sionnet.leaflip.Leaflip;
	import jp.sionnet.leaflip.LeaflipEvent;
	
	public class Main extends Sprite 
	{
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			var leaflip:Leaflip = new Leaflip(200, 200);
			leaflip.bgColorFSP = 0xFF0000;
			leaflip.bgColorBSP = 0x0000FF;
			leaflip.setGradient();
			addChild(leaflip);
			leaflip.addEventListener(LeaflipEvent.OPEN_COMPLETE, openHandler);
		}
		
		private function openHandler(e:LeaflipEvent):void
		{
			Leaflip(e.target).reset();
		}
		
	}
	
}

プロパティ、メソッドの説明はダウンロードページにASDocがあります。他のデモは下に。


サンプル1:

上に見えないときは LeaflipSample01.swf
ソースコードはダウンロードページにあります。

サンプル2:

上に見えないときは LeaflipSample02.swf
拘束するポイントを自由に設定するデモ。

サンプル3:

上に見えないときは LeaflipSample03.swf
懸賞サイトっぽいもの。めくった面積が閾値を超えると強制的に開くデモ。
Tween処理が内蔵されたことでどんどんめくれるようになった。
確率は1/10。くじ引き方式なので、80ひけば必ず当たりが8でるはず(未検証w)。ただし当たりがでたらくじを再作成しています。
本来はDBにくじを置いてサーバーから引くのでしょうが、ここではローカルの配列に入ってます。

このライブラリ、本の体裁以外で作れるものはあまりないなー。 本の体裁用には「BookFlip」を開発中です。根性があれば現状のライブラリからでも作れるかも。(10/02/09 Bookflip、とりあえず出来ました)


トラックバック(1)

トラックバックURL: http://www.eqliquid.com/mt8942/mt-tb.cgi/272

今やってる案件でiBookのようなページめくりエフェクトを実装する必要があり、 いい感じのライブラリが無いか色々調べたところ見つけました!! しかもMI... 続きを読む

コメント(5)

素晴らしいライブラリをMITで公開して頂き、有り難うございます。
早速導入を検討しております。

最適化の話ですが、気がついた点がありますのでご報告させて頂きます。

●1.LeaflipBase.asにあるMath.abs()は別の書き方の方が早いようです。
http://actionscript.g.hatena.ne.jp/ConquestArrow/20070621/1182359767

●2.Math.PI のようなプロパティを変数に格納しておくと早いようです。constが宜しいかと。

別件ですが、自動でページをめくってくれるメソッドというのも必要に迫られ制作したのですが、他の方にも有用かと思います。本家で導入を検討して頂けると幸いです。
現在当方では以下のようにLeaflipを継承しています。

package {
import jp.sionnet.leaflip.Leaflip;
import jp.sionnet.tinytweener.Easing;
import jp.sionnet.tinytweener.TinyTweener;
import jp.sionnet.tinytweener.TinyTweenerEvent;
import flash.geom.Point;

public class LeaflipEx extends Leaflip {
public function LeaflipEx(pageWidth:Number, pageHeight:Number, reactBorder:Number = 16, openRatio:Number = 0.5) {
super(pageWidth, pageHeight, reactBorder, openRatio);
}

public function pageOpenL2R(tim:Number = 0.5):void {
pageOpenEx(
pageWidth * 0.33 // /3
, pageHeight * 0.83 // 5/6
, 0
, pageHeight
, tim
);
}

public function pageOpenB2T(tim:Number = 0.5):void {
pageOpenEx(
pageWidth * 0.83 // 5/6
, pageHeight * 0.66 // 2/3
, pageWidth
, pageHeight
, tim
);
}

public function pageOpenEx(mx:int, my:int, pickPointX:int, pickPointY:int, tim:Number):void {
if (! allowFlip) return;

allowFlip = false;

const dPoint:Point = new Point(mx, my).subtract(new Point(pickPointX, pickPointY));
dPoint.normalize(Math.sqrt(pageWidth * pageWidth + pageHeight * pageHeight));
if (numConstrain > 0)
{
flipTween = TinyTweener.tween(this, { flipX:mx + dPoint.x, flipY:my + dPoint.y }, tim, Easing.CUBIC_IN);
}
else//拘束ポイントがなければページを非表示(透明)にする
{
flipTween = TinyTweener.tween(this, { flipX:mx + dPoint.x, flipY:my + dPoint.y , alpha:0 }, tim, Easing.CUBIC_IN);
}
flipTween.addEventListener(TinyTweenerEvent.COMPLETE, openCompleteHandler);
flipTween.play();
}
}
}

ふぁみべえさん、導入のご検討ありがとうございます。
また、最適化及び自動ページめくりのアドバイスありがとうございます。早速本家に組み込みさせていただきます。
お名前、どこかで拝見したような気がしていたのですが、AIRNovelの方じゃないですか!?
AIRNovelを見たときは、正直「先越された」とか思ってしまいましたw
思わず嫉妬してしまいましたが、これからもご活躍に期待しております。

あとLeaflip関連のお知らせなのですが、ドメイン変更に伴いパッケージ名が変わるかもしれません。
また、ハードカバー用のクラスを作っており、一応動作はするのですがBookflipに組み込んでいないので、ハードカバーを含む本全体で一貫したページ割ができてない状況です。これはこのまま(仮)で公開されるかもしれません。

最近の自分は「ASで3DCG」に熱が入っていまして、これで得た知識でみると、Leaflipはまだまだ最適化の余地がありそうだと感じています。

AIRNovelの奴です、お見知りおき頂きびっくり&嬉しいです(笑)
どうぞご都合の良い時に進めて頂ければ結構ですので!

うちもオープンソースなのでどうぞ参考に為さって下さい。
TLFはこちらの記事も一部参考にしていますしw

Adobe MAX発表から考えると、来年中頃にはWindowsマシンでハイスピードな3D環境が整いそうですね〜。ゲームパッドAPIもなんだかワクワクしてしまいます。

vim様の、どんどんサンプルを作って公開していく身軽さは貴重だと思います。
これからのご活躍に期待しております!

今、Flashで縦書きサウンドノベル + Flash3Dが実現できないか唸っていまして…。ビジュアルと縦書き文字を同時に表示させようとすると、画面レイアウトが難しい。
特に、PC用だと最近はワイド比率が多いので悩ましいです。

>どんどんサンプルを作って公開していく身軽さは貴重だと思います。

そう言っていただけますと本当に!嬉しいです。

AUTHOR

myph01.jpg
author : Takeya Kimura
仙台のFlasher、WEBデザイナー
ご連絡は
kimuraあっとsiond.comまで

このブログ記事について

このページは、vimが2010年1月25日 22:01に書いたブログ記事です。

ひとつ前のブログ記事は「Text Layout Framework で縦組文庫本を作ってみた」です。

次のブログ記事は「Leaflip 簡単な解説」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。