Home > action script > Cover Slow (with source files)

• Newer
• Older

Cover Slow (with source files)

• 2007-02-04 (日)
• action script

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 フォルダの中を、

• 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 クラスの解説のような感じで、制作時の各ステップごとに細かく解説させていただく予定でいます。

• Newer: FuseKit2.1: Custom Easing Tool
• Older: インタラクティブの流儀 ブランド価値を高めるネット広告クリエイティブ

Comment:4

Arkaitz 2007-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 2007-08-30 (木) 18:08

really good work, well done and thankyou

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

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

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

Tokidaze 2008-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^_^

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Name

Mail address

URI

Remember personal info

Yes No

Comment スタイル指定用の一部の HTMLタグが使用できます

Add Your Comment

Trackback:0

TrackBack URL for this entry

http://www.trick7.com/blog/mt-tb.cgi/471

Listed below are links to weblogs that reference

Cover Slow (with source files) from trick7.com blog

Home > action script > Cover Slow (with source files)

Categories

• action script
• blogparts
• books
• diary
• event
• flash
• flash lite
• flex
• fuse kit
• gainer
• mac
• teraco
• tools
• video_tutorial
• website
• works

Archives

• 2008-09
• 2008-08
• 2008-07
• All

持っている Flash & ActionScript 関連本の中から、自分的おすすめの読む順番をご紹介。各書籍のレビューは books カテゴリからご覧頂けます。

この順番でどう？(AS3.0)

• Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD付)
  
  デザイン方面からFlashデビューして、そのままAS2.0を使うようになった人が、難しいと評判のAS3デビューする時の最初の１冊として、とにかく目を通しておくと良いかと思います。プログラミング経験の少ない方でも、サンプルをじっくり読めば、ゼロからのAS3デビュー可。
• ActionScript 3.0 アニメーション
  
  洋書「Making Things Move!」の日本語訳本。ActionScript3.0で数学的アニメーションを作ることがメインテーマなのですが、前半部分でAS3.0の基礎を分かり易く解説されています。後半の重力, IK, 3D表現等のアニメーション解説も楽しい。僕はこれのAS2.0洋書版を読んでFlashの面白さに気付きました。
• Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)
  
  この次の辞典のような洋書を読む前の事前知識としてこの本の内容を理解しておくといいかも。
• Essential ActionScript 3.0 (Essential)
  
  900ページ以上ある相当分厚い本。基礎からOOPまでを解説。ほぼ網羅しているので、これを抑えておけばAS3博士になれそう。
• Actionscript 3.0 Cookbook
  
  ActionScript3.0のリファレンス本。問題とその解決法が1ページぐらいで細分化されているので空いた時間にちょっとずつ読み進められる。WebでAS3のソースを見て勉強する時の字引としても使う。ただ、時期的に初期の本なので、AS3自体が仕様変更してたりするので正誤表は必読。
• Object-Oriented Actionscript 3.0
  
  7/23に発売されたFlash&OOP本。AS2.0版は持っているのだけど、オブジェクト指向の初歩的な解説から入って、後半は僕の理解を超える難度になっていきました。今度こそ理解できるか？

この順番でどう？(AS2.0)

• Foundation Actionscript Animation: Making Things Move (Foundation)
  
  スクリプトでアニメーションさせる方法を学べる。プログラムの知識というよりも数学や物理の知識が必要。バネの表現や３D表現など、汎用性の高いテクニックを身に付けられ、個人の表現力をレベルアップするのに最適。参考までに、僕が調べた英単語リスト。2007年4月に、AS3対応版も発売されました。
• ゲーム開発のための数学・物理学入門 Beginning Math and Physics for Game Programmers
  
  「Making Things Move!」の世界を突き詰めたい人用のステップアップのための本。行列や物理運動、2D/3D表現。Flashの本ではなく、じっくり読むタイプの本なので、あとまわしにしてもいいかも。
• Flash 8 Essentials
  
  Flash8の新機能を紹介。全10章が独立した構成で、興味のある部分から読めます。フィルタやビットマップ、ビデオの使い方とかを、基礎から順を追って理解していけるので、ゼロからスクリプティングできるようになる。僕はビットマップ関連の作業の際のリファレンスとして常用しています。
• .fla―Idea of Flash Creation
  
  上の本でFlash8の基本を身に付けて、それをどう面白い表現に落とし込むかを学べます。深津さんの、試行錯誤・実験しやすいスクリプティング、クラス設計に凄さを感じました。YouTubeやFlickrのAPI、PHPとの連携記事も。
• FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付]
  
  ここまでで表現力が付き、テンションが上がるので、その勢いで難解なオブジェクト指向に挑戦。プログラム経験のない人がいきなり英語のOOP本を読むのは厳しい。この本で継承とかインターフェースとかポリモーフィズムとかの用語を理解しておくといいかも。
• オブジェクト指向でなぜつくるのか―知っておきたいプログラミング、UML、設計の基礎知識―
  
  Flashの本ではありませんが、OOPの概念を気軽に読めるボリュームで解説してくれます。英語と日本語のOOP用語の対応を図るためにも「Object-oriented Actionscript for Flash 8」と併読するのがおすすめ。なんとなく読んでおくだけでも結構違うのでは。
• Object-oriented Actionscript for Flash 8
  
  前半はOOPの利便性や基本の紹介。デザインパターンやMVCの理解。13章からグッと難しくなって大変。Flash8対応。
• Essential Actionscript 2.0
  
  上の本よりもさらにOOPプログラマ向け。同じOOP本ということでやや重複しており、こちらはMX2004時代の本なので見送ってもいいかも。分かりやすい英語で良著。この本のAS3版が出たら間違いなく買い。