本をめくるような効果を持つフラッシュ


スポンサーリンク

ページをめくることのできる猫雑誌:フラッシュの作り方メモ

 猫雑誌のページをドラッグして、ページをめくるような効果をもったフラッシュを本館にアップしました。

 普通に指で雑誌をめくるような感覚で、カーソルで本のページをめくることができます。

 ページのしなり方など、本当にページをめくっているようなエフェクトです。ページのどこを持っても、ページが本物のように湾曲し、次ののページの一部も表示されます。

 これは、以前から作ってみたかったのですが、難しくてできないままでした。
 webで検索をしてもなかなかヒットしません。皆、古い記事ばかりです。

 どう作るかは、まず、どんな物なのかを見て下さい。HPでないと動かないので、このブログではなく別のHPにアップしています。本館の記事をご覧ください。

 この分野はどんどん進化しています。でも、もっと気軽に使えるようになると良いのですが。

 2Checkout Inc.社がPageFlipのHPでトライアルバージョンを無料配布しています。3ヶ月間試用できます。その後は購入ですが、約5,000円なのでそれほど高くはありません。

 作り方ですが、まず、本館からのリンクで猫の雑誌をめくれるページをご覧ください。その画面の右上にPageFlipへのリンクがありますので、関係ファイルはそこでダウンロードすることができます。

 後は画像を入れるファイル(pagesファイル)を自分のものに入れ替えてアップするだけです。初期設定では10ページです。
 ・・・が、トライアル・バージョンは7ページまでと書いてあります。せこい会社だ。ライセンスを購入する予定です。

 ジェネレーターではないので、自分でHPに設置することなります。
 今回もいつものように、すべて無料のソフトだけで作っています。

 私の場合、HPへのアップロードに苦労しました。
 Flashを読み込まないというトラブルです。

 そこで、自分用のメモです。

 私のHPを置いているFC2ブログでは、ファイル名の先頭の文字は小文字しか受け付けないらしく、自動的に小文字に書き換えられてしまうため、フラッシュのjsファイルの中のswfファイル名も小文字に書き換える必要があります。問題だったのはswfのファイル名だけでした。だから、jsファイルを開いて、アップしたswfファイル名と記述されているjsファイルのなかのswfファイル名の大文字・小文字に間違いがないかをチェックすればOKです。すべてファイル名の大文字・小文字をチェックする必要はありません。動けばいいので。

追記

 アップロードの問題は、私がいつも使っているフリーのホームページエディタ「alphaEDIT」に付属しているアップローダにあるようです。アップロードに問題がある場合は、「FFFTP」など別のアップローダで試して見て下さい。

 興味のある方は、本館へどうぞ。本日の記事です。

 下の写真が表紙です。普通の画像なので、ここではページをめくれません。クリックしても意味がありません(笑)。

本や雑誌のページをマウスでめくることができるフラッシュの作り方

 
 本や雑誌のページをマウスでめくるような効果を持つフラッシュの作り方を具体的に説明します。フラッシュ初心者でも無料で、簡単に作ることができます。

 先ずは、サンプルとして本館にアップしているネコ絵本をご覧下さい。指で本をめくるような感覚でマウスを使ってカーソルでページをめくることができます。

 説明は、HPにアップすることを前提としています。ブログの場合は、ホルダーの階層構造の作成に制限があるため、seesaaブログではちょっと難しそうです(できなくはないのですが、めんどくさいので私はやりません ⇒ なんとかやってみました。上のリンクはSeesaaブログ上で表示しています)。

 このような効果を持つフラッシュを無料で提供しているサイトはいくつかありますが、ここでは2つご紹介します。

① FlippingBook
  http://www.page-flip.com/
 本館にアップしているページをめくれる猫雑誌、猫絵本は、これを使って作っています。
 無料で使えるのは10ページまでで、それ以上のページを表示したい場合には、ライセンスを購入する必要があります。私はライセンスを購入してアップしています。

   
② Dynamic Page Flip
 「76 design」というHPが提供している「Dynamic Page Flip」
 http://76design.com/shiftcontrol/index.php/2005/07/03/dynamic-page-flip/
 完全に無料で広告もなく、設定が非常に簡単です。ページ制限もありません。ただし、フラッシュ表示の時、読み込みに時間がかかるので、たしか20ページ以上は非推奨になっています。

 今回は、この方法で作ります。
 以下、具体的な方法を説明します。素材の下準備ができていれば、フラッシュ作成時間は、10分程度です。

1.準備
 ①フリー素材を入手
 まず、下のリンクから必要なフラッシュファイルをダウンロードします。
http://76design.com/shiftcontrol/index.php/2006/08/22/dynamic-page-flip-v2/
 リンク先ページの下の方に、以下のリンクがあるので、一番下の「without sample video FLA(1Mb)」をクリックしてダウンロード。
Download the source files:
Flash 8/MX2004 – with sample video FLA (5Mb)
Flash 8/MX2004 – without sample video FLA (1Mb)
 ②よけいなファイルの削除
 上でダウンロードしたファイルを解凍すると、下のようなホルダーができます。 クリックすると拡大できます。

 先ず、使わない余計なファイルを消します。これは、後でHPにアップロードするとき、不要なサンプルファイルまでアップしてしまうのを防ぐためと、これからの作業を見やすくするためです。

 
 上の画面で、5つのホルダーと6つのファイルがあります。まずファイルですが、以下の3つのファイル(画像で黄色に着色している)だけ残し、他の3つのファイルを削除します。

    
    import_xml.as
    sample.html
    pageflip_v213_dynamic_smart.swf
  次に、ホルダー「pages」の中にある18個のファイルのうち「prepage.swf」というファイル以外、17個すべてを削除します。

 
③ 画像の準備
 利用できるファイルの種類は、jpgとswf形式のファイルです。使用する画像は、画像サイズをそろえ、また、画像ファイルのサイズを小さくしておく必要があります。これをやっておかないと、後で後悔することになります。画像の縦横のサイズ(ピクセル単位)をメモしておきます。
 この具体的なやり方は、以下の過去記事をご覧ください。過去記事を見るには、

 
 右サイドバー「カテゴリー」>「便利なフリーソフト」>「画像のサイズと画像ファイルのサイズを縮小する方法」
 と辿れば、見つかります。
 以上で、準備完了です。

2.ページをめくれるフラッシュの作り方
① 画像のセット
 使う画像ファイルの名前をpage1.jpg page2.jpg ・・・・という名前にリネイムします。「SeeZ」を使うとファイル名の一括変換ができてとても便利です。もちろん、一枚ずつリネイムしてもかまいません。(SeeZは右サイドバーのリンクからダウンロードできます)

 リネイムした画像を、上の準備のところでほぼ空にした「pages」というホルダーに入れます。
② 「xml」ホルダーの中のファイル「pages.xml」を右クリック>プログラムから開く>メモ帳 と進み、ファイルを開きます。
 最初の行に、先ほどメモした画像の縦横のサイズを入れます。今回の事例では幅280px 高さ420pxです。この値はあなたが使用する画像サイズによって変わります。 初期値は幅300px、高さ400pxになっているので、今回は、
  幅  300 → 280
  高さ 400 → 420 に修正します。
 【変更する箇所】
<content width=”300″ height=”400″ hcover=”false” transparency=”true” prepage=”pages/prepage.swf”>

 なお、hcover=”false” を”true” にすると、表紙だけハードカバーになります。
 次に、下の画像の水色で囲まれた部分を削除します。これは、元のサンプルで使われていたフラッシュの効果と音の部分なので不要です。
不要スクリプトの削除範囲

 最後に、用いるファイル数だけ、ファイル名を増やします。
 方法は、
<page
src=”pages/page●.jpg”
preLoad=”true”
/>
  の部分を必要なだけコピーし、ファイル名を入れていきます。
 たとえば、今回の事例では、12枚のファイル(page1.jpg、page2.jpg、・・・、page12.jpg)を用いるので、最後は、
<page
src=”pages/page12.jpg”
preLoad=”true”
/>
となります。

 最後に、上書き保存します。
なお、canTear=”true” というタグを上のsrc=の行とpreLoad=の行との間に入れると、そのページを引きちぎって取り去ることができる効果を入れることができます。たしか、最大5つまで入れることができます。これは結構面白いと思います。

③ 次に、上と同様の手順で、「import_xml.as」をメモ帳で開き、縦横の値を修正します。
 width=”300″となっているところを見つけ、(この例では)280に修正。同様に、height=”400″となっているところを見つけ、420に修正し、上書き保存します。

 これでおしまいです。10分でできると言った意味がおわかりと思います。
 一番上のホルダー内の「sample.html」か「pageflip_v213_dynamic_smart.swf」をクリックすると、ページをめくれるフラッシュが表示されます。

 あとは、ご自分のHPにアップするだけです。HPへのアップロードには「FFFTP」というアップローダがお勧めです。以前、無料のHP作成ソフト「alphaEDIT」に付属しているアップローダがデータ(大文字・小文字)を自動で書き換えてしまうことに気づかず、ひどい目にあったことがあります。

 以上です。更なる詳細設定は、チュートリアルがファイルをダウンロードしたHPにありますので読んでみてください。非常に丁寧に書かれたチュートリアルです。サンプルにあるような音を入れたり、フラッシュの中に別のフラッシュを入れたりできます。

 過去記事で、フラッシュのスライドショーを全くの初心者でも簡単に作れるよう解説している記事もアップしておりますので、よろしかったらご覧ください。

 「ページをめくれる猫雑誌」、「ページをめくれる猫絵本」を本館にアップ(注:本館から私の別のHPに行きますが)していますので、ご覧いただければうれしいのですが。

 本館で使っている「FlippingBook」の設定も、結局のところ同じ感じです。「FlippingBook」にも関心がありましたら、ここでご紹介したやり方を応用して、トライしてみてください。修正するのは、「js」ホルダーの中の
 flippingbook.js
bookSettings.js
の2つのファイルだけです。

 本館の作品は FlippingBookで作っているので、下のようになります。中身も結構面白いと思うのですが。本館へは、トップバナーの「本館へ行く」からお入り頂けます。

猫雑誌第2弾(本のページをめくるような効果を持つフラッシュ)をめくったところ

 今回Dynamic Page Flipで作ったものです。

Dynamic Page Flipで作ったページをめくれる雑誌sample画像

 関連情報として、この方法で、Flash in Flash を作れるのですが、Gif in Gif はどうやって作るのでしょうか。 これは、本館の2009年10月10日の記事にあります。

 本館では、複数のgifアニメを一つのgifアニメにしたものをフラッシュ形式でアップしています。サイズが大きくなるので仕方ありません。 本館では作り方は書いてありませんが。

【追記】
  Seesaaブロク上で表示できるようにしました。記事冒頭のリンクでご確認下さい。
 二つの記事を統合しました。

スポンサーリンク

本をめくるような効果を持つフラッシュ」への16件のフィードバック

  1. ネコ師

    >Ripaさんへ
     コメントありがとうございます。お役に立ててよかったです。
     ページめくりのswfファイルをHPにアップするのはできるのですが、ブログにアップするのが難しく苦労しました。このブログにアップする方法は過去記事に書きましたが、どこに書いたか覚えていません(汗)。
    このブログにはいろいろな方法なり対策が書かれているのですが、それを検索するのには、結局は大手検索エンジンで、必要なキーワードと、このブログのタイトルを入れで検索するのが早道のようです。管理人がよく使う方法です。自分のサイトでさえ、たくさんの記事があると、どこに書いたのか覚えていません。

  2. Ripa

    はじめまして。
    このページのおかげで簡単に「本をカーソルでめくる」ができました。
    ubuntuでも出来て、firefoxでも見れるので、とても魅力的です。
    ありがとうございました。

  3. 細川

    ネコ師さん。ありがとうございました。
    アドバイスのおかげで、なんとか沈没せずにすみました。
    まったく理屈のわからないと言っていいぐらいなんですが、まがりなりにも、右綴じ、左綴じ、ページのサイズ変更、背景画の設定などを行なえるようになりました。
    でも、どうして、ページがめくれるようになっているのか、理解できないままです。
    私にとって不要の「ページ送りのボタン」は削除しました。
    ま、動けばいいか!って感じで、ツールとして使おうと思っています。
    ちょっと大変ですが、そのうちに、この新しい方の「ページめくり」を使ったコンテンツをHPにUPしてみようと思います。

  4. 細川

    早々の返事をして頂きありがとうございます。
    早速トライしてみます。
    聞きかじりでFLASHをイジってる私にはなんか難しそうです。
    出来上がったら、連絡します。連絡しなかったら遭難したか沈没したと思っておいてくださいね。(笑)

  5. 細川

    Dynamic Page Flip の古いタイプを使ってHPに載せていますが、こちらでDynamic Page Flip V2がある事を知りました。V2の方が便利ですね。
    しかし、私が必要なのは、主に右開き(右から左へページを開く)ものが必要なんです。
    古いDynamic Page Flipの右開きにする方法については、「憲ちゃんサイト」(http://hfm-kenchan.com/Lesson/log_qa/index.htm)で
    わかりましたが、
    Dynamic Page Flip V2 は、どこをどうすれば右開き仕様になるのかわかりません。
    初めてのコメントでいきなり質問をして、すみませんが、教えて頂けないでしょうか?

  6. shin

    お返事下さって、ありがとうございます!
    もっと自分で勉強して、詳しく理解できるようになりたいと思います。
    ありがとうございました!!

  7. ネコ師

    >shinさんへ
     コメントありがとうございます。せっかくのコメントですがお役に立てません。Dynamic Page Flipは、今回の記事だけのために使ったので、細かい設定までは分かりません。チュートリアルに書かれていなければできないのかも知れません。

  8. shin

    はじめまして。
    この記事を参考に、Dynamic Page Flip v2に挑戦してみたのですが、どうしても分からず、教えていただきたい事があります。
    表紙、裏表紙のハードカバーの大きさをページより大きく変えたいのですが、どの値を変えたら良いのでしょうか?
    例えば、FlippingBookなら、ハードカバーの有無と大きさなどは
    var hcover:Boolean = false;
    var lcover:Boolean = false;
    var lcaddx:Number = 10;
    var lcaddy:Number = 10;
    で変更できると思うのですが、Dynamic Page Flip v2では、分かりません。
    どうか、宜しくお願いします。

  9. ネコ師

    他の人がDynamic Page Flipで作った作品を初めて見ました(笑)。モーセ君が踊っているシーンに笑いました。
    また、おもしろい作品をお願いします。

  10. 山下美奈子

    アップしてみました☆
    私もネコが大好きで、うちで飼っている「モーセ」くんです。
    ほんとうはgifアニメーションで足が動くところを載せたかったのですが、本形式もとても素敵ですね。もっといろいろ作ってみたいと思います。
    これからも参考にさせてくださいね☆ありがとうございました。

  11. 山下

    丁寧にありがとうございます。
    出来ました!!
    ページはめくる矢印があったのでそこだけかと思っていましたが、マウスでめくることが出来ました。
    マウスを指には変えられなかったですが、十分満足です。
    どこかフリーのサーバーを探してアップしてみますね☆

  12. ネコ師

    背景設定の説明が抜けていましたね。
    オリジナルでは、別のswfを読み込んでいますが、これを背景画像に置き換えます。
    まず、背景となるjpg画像を用意します。大きさは、ページを開いたときの大きさです。つまり、背景画像の幅を、ページ用の画像幅の2倍に設定した背景画像を準備します。白紙でもよいです。ファイル名は「Prepage.jpg」とします。これを「pages」フォルダーに入れます。
    次に、「xml」フォルダーのpages.xmlファイルをメモ帳で開き、2行目にある「prepage.swf」を、背景のファイルの名前、つまり、「Prepage.jpg」に変更します。swf → jpgとするだけです。
    これで、「this page before the rest→」は表示されなくなります。
     このフラッシュは無料なので、お手元のファイルだけでできるはずですが。
    sample.htmlをクリックしてもページがめくれませんか?
    htmlファイルを開く設定が、alphaEDITとかのHPエディタになっていませんか? sample.htmlを右クリック>プログラムから開く で、いつもお使いのブラウザから開いてみてください。

  13. 山下美奈子

    今日何となく10ページの本を作ってみました。ちょっとだけhtmlやcssも使えるので定義などをちゃんと入れたり、サイズを横向きにしてみたりしてみましたが……scriptは全く分からず……
    最初のページの「this page before the rest→」という文字もどこにあるのか分からず消すことができませんでした(涙)
    管理人さんのように指でめくったり、最初のページの文字を消したりするにはやはり有料になるのでしょうか。

コメントは停止中です。