Dynamic Page Flip v2 (応用）

Dynamic Page Flip v2 に虫眼鏡を追加

→ 拡大、PDFリンクののデモサンプル
→ ぱらぱらbook作成無料ASP
参考にしたサイト
  1. ・http://www.condo.fromc.jp/flash/memo/index.html に虫眼鏡サンプル
  2. ・Flash Memo「Flash 虫眼鏡ツール」​http://www.geocities.jp/taku_j_99/memo/​
  3. ・Dynamic Page Flip V2 とは
基本的な考え方は、ぱらぱらめくるカタログ用の画像と拡大用の画像の2酒類を準備して、 虫眼鏡の形のマスクや四角の枠付きのマスクで拡大用の画像を表示させる。
Dynamic Page Flip v2 でぱらぱらを作ると、その時点でぱらぱら画像はあるので、
参考にさせていただいたサイトでいうところの下絵は、透過GIFでごまかした。

準備するものと前提条件

  1. 上記のサイトからダウンロードしたサンプル
  2. 拡大用の画像（ぱらぱらで使う画像を l01.jpg、l02.jpg、l03.jpg 、、、）を各 l の変わりに u とした。​
  3. l画像は高さ512pixel 幅362pixel、u画像は高さ1800pixelと幅1272pixelを使用。（preload と拡大でちょっと時間がかかる）
  4. 枠のデザインは、ページのヨコ半分くらいとタテの1/3くらいが見えるようにし、枠は固定とした。
  5. 右ページと左ページをそれぞれボタンでクリックしてマスクに当てこむ
  6. 右ページと左ページを同時に表示させることはしていません。
  7. 拡大倍率は、そのための画像を準備する都合上1種類で固定

scripts

big_img は拡大用の画像
最初の表示場所を左上に固定
scripts の中にダウンロードさせていただいたサンプルにはたくさんのパラメータが ありましたが、えいやっと削りました。
  1. _root.big_img._x = 0;
  2. _root.big_img._y = 0;
  3. function hide_waku() { // 拡大された画像と、レンズのマスクと枠とボタンを非表示
  4. _root.big_img.loadMovie("blank.gif"); // うまく消えなかったのダミー画像をロード
  5. _root.lenz_frame._visible = false ;
  6. _root.closeLarge._visible = false ;
  7. _root.closeBtn._visible = false ;
  8. }
  9. function show_waku() { // 拡大された画像と、レンズのマスクと枠とボタンを表示、大きな画像は原点に配置
  10. _root.lenz_frame._visible = true ; // フレームとレイヤーを整理すれば、親レイヤーだけでOK
  11. _root.closeLarge._visible = true ;
  12. _root.closeBtn._visible = true ;
  13. _root.big_img._x = 0;
  14. _root.big_img._y = 0;
  15. }

マスクの設定

マスクと枠は固定
lenz をマスク指定して、対象となるレイヤーは big_img
lenzに関するスクリプトはほとんど変更無しに使用しています。
レンズのドラッグの範囲をはずしました。これによりレンズ外にドラッグすると、 その後は、ドラッグなしで動くようになり、操作が楽になった。
  1. 変更点は、
  2. _root.big_img._x = -_root._xmouse*3+1000;
  3. _root.big_img._y = -_root._ymouse*4+500;
  4. で、右ページの画像と左ページの画像の動きがそれほど違わない様に適当に数値を調整

拡大ボタンの追加

page nav に拡大ボタンを追加
  1. 右ページを拡大するボタン
  2. enlargeBtnR.onRelease = function() {
  3. var rightPage = _parent.offsetPages(_parent.page,_parent.removedPages);
  4. if (rightPage>=1) {
  5. var t_file = _parent.pageOrder[rightPage] ;
  6. var l_file = t_file.split("/l").join("/u") ;
  7. _parent.big_img.loadMovie(l_file);
  8. _root.show_waku();
  9. }
  10. }

  12. 左ページを拡大するボタンも同様でページ数の指定を以下のとおり
  13. var leftPage = _parent.offsetPages(_parent.page,_parent.removedPages)-1;

PDF表示ボタンの追加

page nav に拡大ボタンを追加
  1. 元のPDFもあったので、別windowで開く
  2. var t_pdf = t_fle.split(".jpg").join(".pdf") ;
  3. var t_pdf = t_pdf.split("/l").join("/") ;
  4. getURL("../flip/"+ t_pdf , "pdf");
  5. 拡張子を pdfに変更

拡大した画像とマスクと枠の非表示ボタンを追加

function hide_waku() を呼ぶだけ

修正したものとオリジナルと入れ替え

ファイル → 書き出し → ムービーの書き出し → book.swf で保存
pageflip_v213_dynamic_v2_source_novideo\swf の book.swf と入れ替え
pageflip_v213_dynamic_smart.fla と同じフォルダーに解凍していれないと、pagesの中のswfを読み込みませんという エラーが出ます。
画像のパスは、pages.xml に記述。src="pages/page1.jpg" の page1.jpg を l01.jpg というように変更
□ fla ソースのダウンロード（Flash Professional 8）

右綴じ、左綴じ

□ Dynamic Page Flip V2 では左綴じがデフォルト
  1. 右綴じ（漫画や週刊誌など）に対応させる方法
  2. ・ロード後、最終ページにジャンプする。
  3. フレーム11 ： _root.gotoPage(最終ページ数）;
  4. ・これで最終ページへジャンプするが、ぱらぱらめくりながらなので、直接ジャンプさせる
  5. フレーム9 ： gskip = (skip==undefined)? true: skip; //skip pages
  6. false → true
  7. ・最終ページ数の取得
  8. フレーム9 ： allpages=totalpages ; で取得しているのでこれを使用
  9. あるいは、pages.xml に pages='nn' と入れ込んで、import_xml.as にパラメータ取得行を追加
  10. book_pages = (pageXML.firstChild.attributes.pages!=undefined) ?
  11. pageXML.firstChild.attributes.pages : null;
  12. タイトルも、pages.xml に記述しておけば、Flash内での変数として使用可能
  13. pageflip.fla の pageNavi に テキストボックスを作成して、そこに表示させる
  14. ・ノンブル表示
  15. フレーム9 ：
  16. t_page=book_pages-p4; // トータルページから実ページを引いて表示
  17. _root.pageNav.right_page=t_page+"P" ; // PageNavi にダイナミックテキストで表示
□ デモとソース
  1. 右綴じデモ
  2. 左綴じデモ
  3. この fla ソース
  4. この import_xml.as ソース
  5. この right.xml ソース（右綴じ用 xml）

フリーツールで作るぱらぱらカタログ

sample.html の
so.addVariable("xmlFile","xml/pages.xml");
の pages.xml を別のページの記述をして別名で保存し、それと対応する sample.html を別名で保存すればOK
使用する画像は、
1.Photoshop のアクション
2.Acrobat から JPG 保存
3.xpdf の pdftoppm で ppmに変換後、ImageMagick のconvert または mogrify で JPG に変換
等々
PDFのページ単位の分割は、pdftk などを利用
pdftoppm を使用する場合は、PDFに全てのフォントが埋め込まれている必要があります。埋め込まれていない場合、JPG変換できないので、抜けます。
PDFをJPGに変換する方法

pages.xml を asp や PHP で記述(画像やDBがある場合）

単純に DBからページ数と画像のフォルダーを読み出して src="画像のフォルダー/lxx.jpg" とページ分繰り返えすだけ。
□ http://seiki.digital-book.jp のWebカタログの各資料の下に E-Book というリンクをつけて、ぱらぱらカタログの出来上がり。
□ http://procat.digital-book.jp のWebカタログの各資料の下に同様に E-Book というリンクをつけて、ぱらぱらカタログの出来上がり。
swfの中に画像を埋め込むのではなく、外部ファイルをを読み込むため、全てのページが表示されるまで少々時間がかかる。

pages loading 時間を短縮する

先読みしてブラウザキャッシュにためてしまえば、早くなる
先読みの方法として、実際に画像を並べる
画像が全て読み込まれたかチェックする
読み込まれていたら、PageFlip の 従来のページを呼び出す。
読み込まれていたら、PageFlip の 従来のページを呼び出す。
直接 PageFlip で読み込むより数倍早く、メモリ消費量も少なくなる。
説明ページ
→ 338P 取扱説明書サンプル
→ デモサイト http://procat.digital-book.jp
のWebカタログの各資料の下に同様に 「めくるカタログ」というリンクをつけて、ぱらぱらカタログの出来上がり。

ぱらぱらデジタルブック作成 無料ASPサービス

登録不要、使用料無料、回数制限なし、作成データの自社HPでの利用可能
16pまでのぱらぱらbook作成（約3分）
見開きページのカスタマイズ可能（カスタマイズの方法の説明有り）
ぱらぱらbook作成 無料ASPサービス
[基本]   [応用]   [応用2]   [サンプル]   [ GO TO TOP ]
最終更新日 2007/9/22、    2007年7月19日作成