Cover Slow (with source files)

coverSlow.jpg

Flashでできるだけ Cover Flow っぽいものを再現してみようという個人スタディでしたが、一応完成ということにしておきます。Cover Flow ほど、ブワーッと Flow しないので、「Cover Slow」と命名しました。

  1. 簡単なクラスの作成
  2. それを拡張したクラスの作成（reflectionFlipper.as）
  3. Sandy の DistortImage の使用
  4. World3d (ベースは Simple3D ) クラスによる 3D 座標のプロット
  5. Fuse Kit（ver 2.1 公式リリースしてる！） によるインタラクション

と、細分化して手順を追って考えれば、比較的簡単で、流行りのテクニックも使っているので、結構面白かったです。

完成サンプルとクラス＆ソースファイルのダウンロードは以下のページから。

http://www.trick7.com/blog/swf/coverSlow.html

注）ダウンロードファイルには Sandy と Fuse kit のライブラリは含まれていません。別途用意しておいてください。尚、一番簡単なセットアップ例としては,、ダウンロード後、解凍してできる CoverSlow フォルダの中を、

のようにすれば、fla ファイルに対して、正常にクラスパスが通ります。World3d クラスは、Airtight News のこちらのページで公開されていたものですが、単独ファイルだったので、Airtight News の Felix Turner さんに許諾を頂き、ダウンロードファイルに同梱いたしました。

実装した動きは、サンプルページでも確認できますが、

  • クリックした MC が中央に移動する。
  • マウス長押しで、中央からのマウス位置に応じてスライドし続ける。（Slow に Flow します）

ソースファイルで調整できる主な箇所として、

  • ステージに表示できる枚数
  • 非表示の MC も含めた総 MC 数
  • スライド時間
  • スライド時のトゥイーン方法（Fuse でスライドしているので Penner Easing 可能）
  • 鏡面反射の強さ
  • 表示MCの間隔（ソースファイル上の矢印形状の MC で指定するアナログな設定。これはこれでお気に入りです。矢印のインスタンス命名規則に気を付けてください。）
  • カメラの上下アングル

その他にもたくさんありますので、fla ファイルや trick7 パッケージの ReflectionFlipper.as をいじってみてください。次回以降、前回の Reflection クラスの解説のような感じで、制作時の各ステップごとに細かく解説させていただく予定でいます。

Comments:7

Arkaitz 07-06-23 (土) 22:31

I dont if you understand english, but I have a question.
I was wondering if it is possible to add an xml “playlist” with the images so the flash loads them automatically.

I would love to know if it is possible.
Thank u,

snomi 07-08-30 (木) 18:08

really good work, well done and thankyou

tk-2 08-02-09 (土) 16:52

flaファイル開けました！
お騒がせいたしました。

まぁ、中身みてもよくわからんかったけどｗ
じっくり検証さしてもらいま！

Tokidaze 08-02-22 (金) 14:14

Hi! I love your work
I would like to know that how to add comment below each picture when it come to the center just like i-Tune does.
thx plz help^_^

Brandon 08-11-04 (火) 5:08

Hi, Thank you for the wonderful flash piece. I was wondering if you had ever gotten the XML to work and if you could tell me on how to add extra icons to the flow?
Thanks you and I’ll post an update here if I get the work solved

Brandon 08-11-14 (金) 0:17

So I’ve figured out most of the loading XML. I’ve got images to load and also text loaded all from xml. I’ve also made side scroll buttons. The only problem is that I can’t get that reflection Class to working or the images to load in the center of the MC.

Anyway here is the work if anyone would like to take a crack at it, it would be great.

http://www.webinkgraphics.com/Work_in_Progress.zip

Thanks,

Brandon McCarthy 08-11-14 (金) 0:19

Also for Tokidaze 2008-02-22 (金) 14:14 Tokidaze

I’ve added an array that will let you put text underneath each picture.

Simply match the picture with the text in the Array.
Check it out in my code!!!
http://www.webinkgraphics.com/Work_in_Progress.zip

Thanks,

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.trick7.com/blog/2007/02/04-001432.php/trackback
Listed below are links to weblogs that reference
Cover Slow (with source files) from trick7
最近の投稿
カテゴリー
アーカイブ

Moleskine Plain Notebook Large

アイデア帳として。

AS3習得本
AS3の全容を学習できる本。この中でどれか1冊自分に合ったものを。
Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD-ROM付) Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付) ActionScript3.0 プロフェッショナルガイド 初めてのActionScript 3.0 Flashユーザーのためのステップアップガイド 詳説 ActionScript 3.0 Actionscript 3.0 Cookbook
AS3発展本
ASでアニメーションさせる面白さを知るための本。最後のはPHP連携デビューにオススメの洋書。
Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編] ActionScript 3.0 アニメーション AdvancED ActionScript 3.0 Animation (Advanced) Flash and PHP Bible (Bible (Wiley))
AS2
"Flash"ではなく"ActionScript2.0"学習のための良著。他にもいろいろ読んだけど、この4冊を読んだ後、自分が成長できた感じがしました。
FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付] Essential Actionscript 2.0 Flash 8 Essentials Foundation Actionscript Animation: Making Things Move (Foundation)

あわせて読みたいブログパーツ

このblogへのリンク

Return to page top