2009年11月21日

本をカーソルでめくるような効果を持つフラッシュの簡単な作り方

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

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

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

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

@ FlippingBook
  http://www.page-flip.com/

本館にアップしているページをめくれる猫雑誌、猫絵本は、これを使って作っています。
 無料で使えるのは10ページまでで、それ以上のページを表示したい場合には、ライセンスを購入する必要があります。私はライセンスを購入してアップしています。
   
A 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)


 Aよけいなファイルの削除
 上でダウンロードしたファイルを解凍すると、下のようなホルダーができます。 クリックすると拡大できます。
Magazine_use1.jpg


 先ず、使わない余計なファイルを消します。これは、後でHPにアップロードするとき、不要なサンプルファイルまでアップしてしまうのを防ぐためと、これからの作業を見やすくするためです。
 
 上の画面で、5つのホルダーと6つのファイルがあります。まずファイルですが、以下の3つのファイル(画像で黄色に着色している)だけ残し、他の3つのファイルを削除します。
    
    import_xml.as
    sample.html
    pageflip_v213_dynamic_smart.swf


  次に、ホルダー「pages」の中にある18個のファイルのうち「prepage.swf」というファイル以外、17個すべてを削除します。
 
B 画像の準備
 利用できるファイルの種類は、jpgとswf形式のファイルです。使用する画像は、画像サイズをそろえ、また、画像ファイルのサイズを小さくしておく必要があります。これをやっておかないと、後で後悔することになります。画像の縦横のサイズ(ピクセル単位)をメモしておきます。
 この具体的なやり方は、以下の過去記事をご覧ください。過去記事を見るには、
 
 右サイドバー「カテゴリー」>「便利なフリーソフト」>「画像のサイズと画像ファイルのサイズを縮小する方法」

 と辿れば、見つかります。

 以上で、準備完了です。


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

 リネイムした画像を、上の準備のところでほぼ空にした「pages」というホルダーに入れます。

A 「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つまで入れることができます。これは結構面白いと思います。

B 次に、上と同様の手順で、「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弾(本のページをめくるような効果を持つフラッシュ)の表紙


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

 今回Dynamic Page Flipで作ったものです。
Dynamic Page Flipで作ったページをめくれる雑誌sample画像


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

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

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


posted by ネコ師 at 14:56 | Comment(16) | 便利なフリーソフト | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
記事に関係ないコメント、宣伝的なコメントは削除させていただきます。
今日何となく10ページの本を作ってみました。ちょっとだけhtmlやcssも使えるので定義などをちゃんと入れたり、サイズを横向きにしてみたりしてみましたが……scriptは全く分からず……
最初のページの「this page before the rest→」という文字もどこにあるのか分からず消すことができませんでした(涙)
管理人さんのように指でめくったり、最初のページの文字を消したりするにはやはり有料になるのでしょうか。
Posted by 山下美奈子 at 2010年03月05日 20:01
背景設定の説明が抜けていましたね。
オリジナルでは、別の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を右クリック>プログラムから開く で、いつもお使いのブラウザから開いてみてください。
Posted by ネコ師 at 2010年03月07日 01:32
丁寧にありがとうございます。
出来ました!!
ページはめくる矢印があったのでそこだけかと思っていましたが、マウスでめくることが出来ました。
マウスを指には変えられなかったですが、十分満足です。
どこかフリーのサーバーを探してアップしてみますね☆
Posted by 山下 at 2010年03月08日 17:31
アップしてみました☆
私もネコが大好きで、うちで飼っている「モーセ」くんです。
ほんとうはgifアニメーションで足が動くところを載せたかったのですが、本形式もとても素敵ですね。もっといろいろ作ってみたいと思います。
これからも参考にさせてくださいね☆ありがとうございました。
Posted by 山下美奈子 at 2010年03月11日 11:19
他の人がDynamic Page Flipで作った作品を初めて見ました(笑)。モーセ君が踊っているシーンに笑いました。
また、おもしろい作品をお願いします。
Posted by ネコ師 at 2010年03月12日 10:13
とても役にたちました〜
ありがとうございます。
Posted by ゆ〜き at 2010年05月16日 17:06
お役に立てて良かったです。
Posted by ネコ師 at 2010年05月21日 00:12
はじめまして。
この記事を参考に、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では、分かりません。
どうか、宜しくお願いします。
Posted by shin at 2010年05月21日 03:03
>shinさんへ
 コメントありがとうございます。せっかくのコメントですがお役に立てません。Dynamic Page Flipは、今回の記事だけのために使ったので、細かい設定までは分かりません。チュートリアルに書かれていなければできないのかも知れません。
Posted by ネコ師 at 2010年05月23日 06:42
お返事下さって、ありがとうございます!
もっと自分で勉強して、詳しく理解できるようになりたいと思います。
ありがとうございました!!
Posted by shin at 2010年06月07日 16:23
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 は、どこをどうすれば右開き仕様になるのかわかりません。
初めてのコメントでいきなり質問をして、すみませんが、教えて頂けないでしょうか?
Posted by 細川 at 2011年05月15日 22:48
>細川さんへ
 コメントありがとうございます。
 たぶん、以下のサイトに記載してある方法でできると思います。

http://spinnen.jp/pageflip2.htm
Posted by nekoshi at 2011年05月17日 11:55
早々の返事をして頂きありがとうございます。
早速トライしてみます。
聞きかじりでFLASHをイジってる私にはなんか難しそうです。
出来上がったら、連絡します。連絡しなかったら遭難したか沈没したと思っておいてくださいね。(笑)
Posted by 細川 at 2011年05月17日 23:01
ネコ師さん。ありがとうございました。
アドバイスのおかげで、なんとか沈没せずにすみました。
まったく理屈のわからないと言っていいぐらいなんですが、まがりなりにも、右綴じ、左綴じ、ページのサイズ変更、背景画の設定などを行なえるようになりました。
でも、どうして、ページがめくれるようになっているのか、理解できないままです。
私にとって不要の「ページ送りのボタン」は削除しました。
ま、動けばいいか!って感じで、ツールとして使おうと思っています。
ちょっと大変ですが、そのうちに、この新しい方の「ページめくり」を使ったコンテンツをHPにUPしてみようと思います。
Posted by 細川 at 2011年05月29日 23:27
はじめまして。
このページのおかげで簡単に「本をカーソルでめくる」ができました。
ubuntuでも出来て、firefoxでも見れるので、とても魅力的です。
ありがとうございました。
Posted by Ripa at 2011年11月14日 22:51
>Ripaさんへ
 コメントありがとうございます。お役に立ててよかったです。

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

Posted by ネコ師 at 2011年11月15日 23:25
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

▲ このページのTOPに戻る