Dynamic Page Flip v2 （基本）
Dynamic Page Flip v2 とは
76人のデザイナーによる「shift+control」と呼ばれるブログで構成され、Steve Palmer氏により
2006年8月に発表されました。基本は、同氏が2005年7月に発表した 「Dynamic Page Flip」です。
Macc at IpariGrafika の「Flash page flipping engine」はすばらしいものですが、動的にページを
設定できたほうがいいと考えました。そこで。JPGだとかSWFのソースを外部ファイルから読み込む設定にしました。
基本的に全てはXMLファイルに記述されています。
- ・ページサイズ（幅と高さ）
- ・ページファイルの保存場所（絶対パスまたはURLの相対パス）
- ・ページの切れ目または無し
- ・本に表紙があるか無いか
- ・透明なページがあるか無いか
透明ページを使用することは、パフォーマンスを向上させるの役立つアイデアです。
ここで用いられている技術は、事前にロードされ、「準備」された多くのページを必要とします。
そのため、たくさんのアニメーションページを使用するとパフォーマンスが落ちます。20-30くらいの
静的なJPGかSWFだとうまく動作します。
参照サイト[ http://76design.com/shiftcontrol/index.php/2005/07/03/dynamic-page-flip/ ]
参照サイト[ http://76design.com/shiftcontrol/index.php/2006/08/22/dynamic-page-flip-v2/ ]
なくなりました[ http://76design.com/pageflip/ ] 参考にしていたので、とても残念です。
Dynamic PageFlip v3.4 が出ました。有償です。[ http://pageflip.hu/ ](2008-3-25)
Dynamic Page Flip v2 の改良点
- ・新しい「smart」ローディングにより、ページを追加しても大幅なパフォーマンスの向上
- ・めくり本を開始する時の指定ページの事前のローディング（他のページはバックグランドでロード）
- ・音声をページめくり時に追加可能
- ・本に表紙があるか無いか
- ・ページの切れ目の後の処理の追加が可能
- ・「spread」機能の追加（1ページを2ページに広げて表示）
- ・本のページが始まる前のページの追加（使い方、tipsやヘルプなどを表示）
- ・めくる時の動作の指定
- ・より洗練された事前のロード、これにより、ハングやスタックが減ります。
- ・ページ送り、ページジャンプナビゲーションの追加
ダウンロードしたファイルの中に「readme」がありますので、そこにもうちょっと詳しく改良点が
記述されています。
ソースファイルのダウンロード ：
Flash 8/MX2004 - with sample video FLA (5Mb)
Flash 8/MX2004 - without sample video FLA (1Mb)
[ http://76design.com/shiftcontrol/index.php/2006/08/22/dynamic-page-flip-v2/ ]
Dynamic Page Flip v2 readme.txt ファイル
Dynamic Page Flip v2
--------
Steve Palmer
steve@76design.com
August 22, 2006
*With full credit to Macc at IpariGrafika (http://www.iparigrafika.hu/pageflip)
for the brilliant page flipping engine on which this is based
New Features
------
(Please refer to included XML file to see examples)
Ability to specify which pages must be preloaded before the book starts (others will preload in the background)
<page src="pages/anim1.swf" preLoad="true" />
Ability to specify a function to run after a page is torn out (limit of 5 paramters)
<page src="pages/page2.jpg" canTear="true" afterTear="loadMovie,'pages/spread.swf',_root.topSpread" />
Ability to have a "spread" (i.e. a single page that spans two pages)
<page src="pages/spread.swf" isSpread="true" preLoad="true" />
<page src="pages/spread.swf" isSpread="true" preLoad="true" />
* Make sure your spread spans two consecutive pages and doesn't start on an odd page
(i.e. pages 8,9 = good pages 9,10 = bad)
Ability to place a "page" that precedes the book (ideal for instructions, tips, or help)
<content prepage="pages/prepage.swf" >
Ability to have pages perform actions when they're turned to:
Place functions called onVisible and onInvisible in your page SWFs.
(i.e.
function onVisible() {
trace("Just turned to this page!");
}
function onInvisible() {
trace("Just left this page!");
}
)
Notes
--
To include video, please refer to the sample file (video.fla) in the /pages folder. The video doesn't have to be embedded on the timeline as I've shown (dynamically loading an FLV or SWF would work fine too) but the key is that the video CAN'T start on the first frame. This WILL cause problems. I'd recommend using the onVisible and onInvisible functions mentioned above to control the video playback.
ざざっと翻訳
新機能
解凍したフォルダーに含まれるXMLファイル（pages.xml）をサンプルとして見てください。
特定のページをプリロードさせる
<page src="pages/anim1.swf" preLoad="true" />
特定のページをめくった後に実行する処理を指定する（5つまで可能）
<page src="pages/page2.jpg" canTear="true" afterTear="loadMovie,'pages/spread.swf',_root.topSpread" />
「スプレッド」機能（1ページを2ページ分の領域で表示する
<page src="pages/spread.swf" isSpread="true" preLoad="true" />
<page src="pages/spread.swf" isSpread="true" preLoad="true" />
* 連続するページで、偶数ページからはじめること
（8ページと9ページはOK、9ページと10ページはだめ）
本を開く前の説明ページの挿入が可能（使い方やヘルプ等）
<content prepage="pages/prepage.swf">
ページをめくるときの処理
SWFファイルで onVisible と onInvisible の処理を決める。
サンプルファイルは、pageflip_v213_dynamic_smart.fla
Notes
Videoファイルを含む場合は、pages/video.fla のサンプルファイルを参照。
Videoにはタイムラインは埋め込まれていません。Videohaは最初のフレームで開始できません。
これは問題となりそう。onVisible と onInvisible ファンクションで上記のVideoの操作をするようお勧めします。
[ pageflip_v213_dynamic_v2_source/readme.txt ]
ページ画像の入れ替え
- ・pages フォルダの page1.jpg から page7.jpg を同名のファイルで差し替える
- ・画像サイズは、幅300px 高さ400pxにしないとずれる。
- ・pages.xml ファイルの
<content width="300" height="400" hcover="false" transparency="true"
prepage="pages/prepage.swf">
の width と height を その画像サイズにあわせれば、めくりのマウスがあう。
- ・各ページの大きさはあわせておく。ちいさい画像だと、下のページが余白に表示される。大きいと、切れる。
- ・すでに、01.JPG、02.JPG 等がある場合は、
<page src="abc/01.JPG" preLoad="true" />
とそのソース画像をページ単位で指定する。
- 詳細は、応用編へ ---> pages loading 時間を短縮する
簡単な修正
□ 本の表示サイズの変更
- ・sample.html の
<div id="flashcontent" style="width:1000px; height: 600px;">
[ sample.html ]
□ 複数の本を作る場合
- ・sample.html → xml/pages.xml の組み合わせで、サンプルが作成されているので、
so.addVariable("xmlFile","xml/pages.xml");
の xml/pages.xml を別に作成したファイルを指定して、sanmple.html を別名保存する
- ・PHPやASPでカタログ名を送受信して、pages.xml の変わりに $_GET['catalog'] や request("catalog")
などでカタログの指定を行う。
- ・pages.xml を pages.php とか pages.asp でカタログ名を受信して、ページ分ループ
[ sample.html ]
□ オリジナルのPDFがある場合
- □ pagenavi にボタンを追加（ボタンのインスタンス名をleftPDF）
□ Scene1 pageNav に追加
leftPDF.onRelease = function() {
var leftPage = _parent.offsetPages(_parent.page,_parent.removedPages)-1;
if (leftPage>=1) {
var t_fle = _parent.pageOrder[leftPage] ;
var t_pdf = t_fle.split(".jpg").join(".pdf") ;
getURL("../flip/"+ t_pdf , "pdf");
}
}
デモサイト
[ http://seiki.digital-book.jp ]
□ pageflip_v213_dynamic_smart.fla を Flash で開いてカスタマイズの説明
□ 拡大ボタンで別画像を子ウィンドウで表示 ： 虫眼鏡機能
□ 画像または、オリジナルPDFのダウンロード
→
Dynamic PageFlip V2 応用
□ 目次タグの設定（未定）
□ 複数の本のXMLをcsvテキストと連動 （DB連動で解決）→
電子カタログサイト
