Cover Slow (with source files)

2007-02-04 (日) 0:14
action script

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

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

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

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

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

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

coverSlow.fla
coverSlow.swf
World3d.as
sandy パッケージ（=フォルダ）（注：一部クラスファイルを書き換える必要あり）
com フォルダ
- mosesSupposes パッケージ
- trick7 パッケージ

のようにすれば、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,

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

Here are my twitter delicious tumblr hatena booklog kskl ハモニナペアゲー

ブログ内検索

最近の投稿

カテゴリー

アーカイブ


AS3習得本: AS3の全容を学習できる本。この中でどれか1冊自分に合ったものを。
AS3発展本: ASでアニメーションさせる面白さを知るための本。
AS2: "Flash"ではなく"ActionScript2.0"学習のための良著。他にもいろいろ読んだけど、この4冊を読んだ後、自分が成長できた感じがしました。

Return to page top