トップページ » DEEP KICK.com Blog » Flash Creative Technique

Flash Creative Technique

2008年10月14日

連載を一冊にまとめた「ActionScript クリエイティブテクニック - Flash CS3/8対応版」発売!

ActionScript クリエイティブテクニック [Flash CS3/8対応版] MdNのWeb制作総合誌「月刊 web creators」2006年02月号(vol.50)から2008年08月号(vol.80)までの、およそ2年半にわたって掲載した「Flash Creative Technique」が「ActionScript クリエイティブテクニック [Flash CS3/8対応版]」というタイトルで一冊の書籍になりました。連載時に執筆したものから、大幅に加筆・修正を加えた内容になっていますので、ご興味のある方は、ぜひ書店で手にとってみてください。サンプルのデータもダウンロードすることができます。

「ActionScript クリエイティブテクニック [Flash CS3/8対応版]」の詳細は、こちらをご覧ください。

投稿者 kaoru : 2008年10月14日

2008年6月30日

Flash Creative Technique - vol.75
Papervision 3Dを使ってみよう(2)

Papervision3D 2.0とFlash 3Dアニメーションの書籍「Papervision3Dではじめる Flash 3Dアニメーション」を技術評論社から出版しました。よろしければ、こちらもどうぞ。

w80cover.jpg web creators 2008年08月号 の「Flash Creative Technique」は「Papervision 3Dを使ってみよう(2)」になります。

fct75.png できあがりのサンプルはこちらをクリック。
画面を左右にドラッグして、画像を回転させます。上下左右矢印キーで、3D座標上のカメラを移動させることができます。

第75回となる「Flash Creative Technique」も、本連載が最終回となりました。わたくしハヤシカオルは、第45回から31ヵ月にわたって執筆しました。次号からは装いも新たに、Flashの新連載「ActionScript3 Technical Bible」がスタートします。そちらも引き続きハヤシカオルが担当することとなりましたので、今後とも「web creators」ならびに新連載をよろしくお願いいたします。

今号では前回に引き続き、「Papervision 3D」を使ったFlash 3Dコンテンツ制作にチャレンジしていきます。今回も同様に最新のβ版である「Papervision 1.7」を使用したサンプル「The 3D Photo Gallery」を作成します。実際にできあがったものを見ていただくのが手っ取り早いのですが、3次元空間内をドラッグして回転させたり、矢印キーでカメラを移動させることが可能なフォトギャラリーとなっています。XMLを使って読み込んだ外部JPEGファイルをPV3DのPlaneオブジェクトのマテリアルにマッピングし、PlaneオブジェクトをRollOver/RollOutした際にインタラクティブに反応させる機能を実装し、より実践的なサンプルを設計しました。またコンテンツのオープニングでは、3DシーンのCameraオブジェクトを移動させて3Dアニメーションにしています。

投稿者 kaoru : 2008年6月30日

2008年6月17日

Flash Creative Technique - vol.74
Papervision 3Dを使ってみよう(1)

Papervision3D 2.0とFlash 3Dアニメーションの書籍「Papervision3Dではじめる Flash 3Dアニメーション」を技術評論社から出版しました。よろしければ、こちらもどうぞ。

w79cover.jpg web creators 2008年07月号 の「Flash Creative Technique」は「Papervision 3Dを使ってみよう(1)」になります。

fct74.png できあがりのサンプルはこちらをクリック。

わたくしハヤシカオルが本連載を担当するようになって、記念すべき30回目となる今号では、 「Papervision 3D」を使ったFlash 3Dコンテンツ制作にチャレンジします。「web creators」の読者の中には、既にPapervision 3Dについて聞いたことがあったり、実際に3Dモーションにチャレンジしている方も少なからずいると思います。そこで今回はAS3.0 + Papervision 3Dを使ったコンテンツ制作がテーマです。
まずはpapervision 3Dをダウンロードすることから始まります。ダウンロードとインストールの詳細は紙面の解説のほうに譲りますが、Subvisionというバージョン管理システムを用います。今回は最新のβ版である「Papervision 1.7」を使用することにしました。実は2007年12月にPapervision 3D 2.0 (コードネーム:Great White) がα版として発表されています。こちらのほうが現在では活発な議論が進み、日夜開発チームから手が加えられたりしているようですが、実際のコンテンツ制作はやや枯れた技術の方が仕様変更もなく作りやすいので、1.7を選択しました。しかしながらPapervision 3D 2.0は非常に魅力的な機能を備えているようですので、今後こちらのほうも目が離せません。引き続き注目していきたいテクノロジーです。

準備が整ったら、まず3Dシーンにオブジェクトを表示します。3Dシーンというのは、Papervision独自の概念で、Flash内に3次元空間を作り出します。それを3Dシーンと呼びます。紙面のサンプルでは1つの平面(Planeと呼びます)オブジェクトを3Dシーンに表示するだけのシンプルなサンプルから解説しています。
次にPapervision3Dにおける3次元座標がどうなっているのかについて調べています。3次元座標上のX軸、Y軸、Z軸にラインを引き、表示してみます。するとPapervision3Dでは画面の奥に向かう方向がZ軸の正の方向になっていることが分かります。どの方角が座標の正の方向を指し示しているのかを理解しておくことは非常に重要です。

最終的にはできあがりのサンプルでご覧いただけるように複数のPlaneオブジェクトをランダムな位置に配置し、マウスと連動させてCamera3Dの位置を変化させています。これからPapervision3Dに触れてみたいと考えている方にぜひおすすめしたい内容です。今回のサンプルをふまえて、次号ではさらにインタラクティブなサンプルに仕上げていきます。乞うご期待!

投稿者 kaoru : 2008年6月17日

2008年5月 1日

Flash Creative Technique - vol.73
AS3.0のXML処理 - RSS Readerをつくる

w78cover.jpg web creators 2008年06月号 の「Flash Creative Technique」は「AS3.0のXML処理 - RSS Readerをつくる」になります。

fct73.png できあがりのサンプルはこちらをクリック。

早いもので、もう6月号なんですね。今年の前半をしめくくる号となりました。
さて、Flash + XML。これら2つの技術の融合は、RIAを構築する上で、ますます重要度が高まってきています。そこで今回は、AS3.0におけるXMLの読み込みと解析の基本を取り上げます。
具体的には外部RSSフィードをロードして、その内容をDataGridコンポーネントに表示するシンプルなRSS Readerアプリケーションを作成します。この連載でとりあげるAS3.0コンテンツも次第にアプリケーションっぽくなり、内容も高度になってきましたね。これからAS3.0を始めようという志を持った方は、バックナンバーを参照するなどしてがんばって付いてきてくださいね。
従来のAS1.0/2.0と比べると、AS3.0におけるXML処理の記述は、シンプルになりました。AS3.0は「ECMAScript for XML (E4X)」に準拠しているため、XMLデータを扱うためのビルトインクラスが大幅にパワーアップされたわけです。これにより、RSSフィードのように複雑な構造を持つXMLデータを扱う場合でも、一貫性のあるコーディングが可能になりました。そのあたりについて解説します。

投稿者 kaoru : 2008年5月 1日

2008年4月 1日

Flash Creative Technique - vol.72
マウスカーソルからの距離と連動したオブジェクト

w77cover.jpg web creators 2008年05月号 の「Flash Creative Technique」は「マウスカーソルからの距離と連動したオブジェクト」になります。

fct72.png できあがりのサンプルはこちらをクリック。

2008年01月号から3回にわたり「ActionScript 3.0 事始め」と題し、AS3.0の基本的な内容について解説してきました。今回からは、やや高度な内容のFlashを作っていきたいと思います。
これまでに解説したデータ型の指定やカスタムクラス、表示リスト、ドキュメントクラスなどの特長や概念については、簡単な指摘にとどめたいので、詳しい解説は過去のFCTの記事なりご自分でネット上の情報もしくはFlashヘルプなどにあたって学習していただきたいと思います。まあ、これも言い訳がましくて申し訳ないんですが、基礎的な概念ばかりを解説しても、あんまりおもしろいFlashを作れないもんですから、ご了承くださいと、まあ、こういうわけなんです。
さて、こちらの事情はさておき、今回は、カーソルの動きと連動してオブジェクトのスケールなどのプロパティを変化させるちょっとインタラクティブなアニメーションの作成について解説します。またオブジェクトを複数個生成した場合に、配列を使ってオブジェクトの参照を保持し、制御するテクニックについても見ていきます。

投稿者 kaoru : 2008年4月 1日

2008年3月 1日

Flash Creative Technique - vol.71
ActionScript 3.0 事始め(3)

w76cover.jpg web creators 2008年04月号 の「Flash Creative Technique」は「ActionScript 3.0 事始め(3)」になります。

fct71.png できあがりのサンプルはこちらをクリック。

前回に引き続き、AS3.0によるFlash制作をテーマにしていきます。今回は「表示リスト」と「ドキュメントクラス」について見ていきます。表示リストとはAS3.0から導入された仕組みで、ステージを頂点とするツリー構造をしており、オブジェクトをステージ上に登場させるには、必ず表示リストにオブジェクトを追加しなければならないというルールになっています。
ドキュメントクラスというのは、メインタイムラインを使用せずにカスタムクラスのインスタンスを自動的に追加する仕組みで、MovieClipクラスもしくはSpriteクラスを継承する必要があります。このあたりの事情について解説します。

投稿者 kaoru : 2008年3月 1日

2008年2月 1日

Flash Creative Technique - vol.70
ActionScript 3.0 事始め(2)

w75cover.jpg web creators 2008年03月号 の「Flash Creative Technique」は「ActionScript 3.0 事始め(2)」になります。

fct70.png できあがりのサンプルはこちらをクリック。

前回に引き続き、AS3.0によるFlash制作をテーマにしていきます。今回は「AS3.0のカスタムクラス定義」について見ていきます。AS3.0ではカスタムクラスを定義するのに、スクリプトウィンドウを使って外部ASファイルを作成するスタイルをとります。AS3.0ではOOP(Object Oriented Programming - オブジェクト指向プログラミングのこと)に基づいたスクリプティングが要求されます。これはつまり「カスタムクラスを独自に作っていく」ということに他ならないわけですが、この手順についてまずは「シンプルに円を描画する」クラスを作成しながら、解説します。

投稿者 kaoru : 2008年2月 1日

2008年1月 1日

Flash Creative Technique - vol.69
ActionScript 3.0 事始め(1)

w74cover.jpg web creators 2008年02月号 の「Flash Creative Technique」は「ActionScript 3.0 事始め(1)」になります。

janken.png できあがりのサンプルはこちらをクリック。

これまでAS1.0/2.0を使ったサンプルを通してFlash制作のテクニックを紹介してきた本連載ですが、今回からAS3.0によるFlash制作をテーマにしていきます。実際に使ってみると異なるスクリプト言語と言ってもよいほどAS1.0/2.0とAS3.0はかなり違っておりまして、高度なオブジェクト指向が必要です。しかしながらクリエイターの今後の活躍の場を切り開いていく強力な武器となる可能性も大いに秘めていますので、まずは基本を重視し、少々退屈かもしれませんが、簡単なサンプルから順を追ってAS3.0について解説していきたいと思います。
ちょっと言い訳がましかったかな。AS3.0については、私もまだまだ勉強中なんですがね。そういうわけで、ともに勉強していきましょう。

投稿者 kaoru : 2008年1月 1日

2007年12月 1日

Flash Creative Technique - vol.68
SharedObject + XMLで、ローカル環境にデータを保存する

w73cover.jpg web creators 2008年01月号 の「Flash Creative Technique」は「SharedObject + XMLで、ローカル環境にデータを保存する」になります。

puzzle3.png できあがりのサンプルはこちらをクリック。

前回(FCT vol.67)前々回(FCT vol.66)で作成したFlashによるパズルゲーム「東京23区パズル」にSharedObjectを使い、ゲーム結果の履歴をローカル環境に保存して再利用する機能を追加します。「東京23区パズル」とは、東京23区をパズルのピースに見立てて、海岸線だけが記されている白地図の上に正確に並べられるかどうかを競うパズルゲームです。今号はゲームの結果を保存する機能の作成やXML形式のデータを解析してDataGridコンポーネントに表示する部分に焦点をあてて、解説しています。

投稿者 kaoru : 2007年12月 1日

2007年11月 1日

Flash Creative Technique - vol.67
パズルゲームを作る(2)

w72cover.jpg web creators 2007年12月号 の「Flash Creative Technique」は「パズルゲームを作る」(2)になります。

puzzle2.png できあがりのサンプルはこちらをクリック。

前回に引き続き、Flashによるパズルゲーム「東京23区パズル」を作成します。「東京23区パズル」とは、東京23区をパズルのピースに見立てて、海岸線だけが記されている白地図の上に正確に並べられるかどうかを競うパズルゲームです。今号はパズルゲームの初期化とアイテムをPress, Releaseしたときの処理などに焦点をあてて、解説しています。

投稿者 kaoru : 2007年11月 1日

2007年10月 1日

Flash Creative Technique - vol.66
パズルゲームを作る(1)

web creators 2007年11月号web creators 2007年11月号の「Flash Creative Technique」は「パズルゲームを作る」(1)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

今回から新しいテーマ、Flashによるパズルゲーム「東京23区パズル」を作成します。「東京23区パズル」とは、東京23区をパズルのピースに見立てて、海岸線だけが記されている白地図の上に正確に並べられるかどうかを競うパズルゲームです。今号はプロトタイプと23区のMovieClipに焦点をあてて、解説しています。

続きを読む » "Flash Creative Technique - vol.66
パズルゲームを作る(1)"

投稿者 kaoru : 2007年10月 1日

2007年9月 3日

Flash Creative Technique - vol.65
XMLConnector + DataGridを使ったアプリケーション(2)

web creators 2007年10月号web creators 2007年10月号の「Flash Creative Technique」は「XMLConnector + DataGridを使ったアプリケーション」(2)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

前回に引き続き、XMLConnector + DataGridを使用したアプリケーション「DEEP DataGrid Gallery version 0.1」の作成について解説しています。前回はスキーマとバインディングといったFlashのコネクタコンポーネントを扱う上で必須の概念について見ていきました。それらをふまえて今号では、外部XMLで管理することができるフォトギャラリーアプリケーション「DEEP DataGrid Gallery version 0.1」を完成します。

投稿者 kaoru : 2007年9月 3日

Flash Creative Technique - vol.64
XMLConnector + DataGridを使ったアプリケーション(1)

web creators 2007年9月号web creators 2007年9月号の「Flash Creative Technique」は「XMLConnector + DataGridを使ったアプリケーション」(1)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

今回から2回に分けて、XMLConnector + DataGridを使用したアプリケーション「DEEP DataGrid Gallery version 0.1」の作成について解説しています。FlashにはUIコンポーネントだけでなく、データベースやXMLドキュメントといった外部データソースからデータを取り入れるためのコネクタコンポーネントや、読み込んだデータを管理するためのDataSetコンポーネントなど、目には見えませんがアプリケーションの裏方的な仕事をするものがあります。サンプルの作成を通して、それらの基本的な使い方を紹介しています。

投稿者 kaoru : 2007年9月 3日

2007年8月27日

Flash Creative Technique - vol.63
Yahoo! Maps AS-Flash APIを使った地図アプリケーション(後編)

web creators 2007年8月号web creators 2007年8月号の「Flash Creative Technique」は「Yahoo! Maps AS-Flash APIを使った地図アプリケーション」(後編)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

前回に引き続き、Yahoo! Maps AS-Flash APIを使った地図アプリケーション「DEEP Photo Maps version 0.1」の作成について解説しています。XMLドキュメントを使って外部画像のパス、緯度・経度、キャプションなどのコンテンツを管理し、Yahoo Maps上にインタラクティブに表示するFlash地図アプリケーションを完成します。

投稿者 kaoru : 2007年8月27日

Flash Creative Technique - vol.62
Yahoo! Maps AS-Flash APIを使った地図アプリケーション(前編)

web creators 2007年7月号 web creators 2007年7月号の「Flash Creative Technique」は「Yahoo! Maps AS-Flash APIを使った地図アプリケーション」(前編)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

今回から2回に分けて、Yahoo! Maps AS-Flash APIを使った地図アプリケーション「DEEP Photo Maps version 0.1」の作成について解説しています。Yahoo! US版から提供されている地図アプリケーション作成Webサービスとどのように連携するのかがテーマです。Yahoo! Maps AS-Flash APIを使うための準備とYahoo MapsをFlash内に表示するための基本的な方法について解説しています。

投稿者 kaoru : 2007年8月27日

Flash Creative Technique - vol.61
回転ドア式のフォトギャラリー(後編)

web creators 2007年6月号web creators 2007年6月号の「Flash Creative Technique」は「回転ドア式のフォトギャラリー」(後編)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

前回から引き続き、回転ドア式の立体的フォトギャラリー「The revolving photo gallery version 0.1」の作成です。本連載でこれまでに何度か解説してきた仮想的な3次元空間を移動するモーショングラフィック的要素とXMLドキュメントでのコンテンツ管理をミックスさせたウェブアプリケーションになります。

投稿者 kaoru : 2007年8月27日

2007年4月 6日

Flash Creative Technique - vol.60
回転ドア式のフォトギャラリー(前編)

web creators 2007年5月号web creators 2007年5月号の「Flash Creative Technique」は「回転ドア式のフォトギャラリー」(前編)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

今回の「Flash Creative Technique」から前編と後編の2回に分けて、回転ドア式の立体的フォトギャラリー「The revolving photo gallery version 0.1」の作成を解説します。本連載でこれまでに何度か解説してきた仮想的な3次元空間を移動するモーショングラフィック的要素とXMLドキュメントでのコンテンツ管理をミックスさせたウェブアプリケーションになります。

続きを読む » "Flash Creative Technique - vol.60
回転ドア式のフォトギャラリー(前編)"

投稿者 kaoru : 2007年4月 6日

2007年3月31日

Flash Creative Technique - vol.59
3次元のスパイラルを表現する(後編)

web creators 2007年4月号web creators 2007年4月号の「Flash Creative Technique」は「3次元のスパイラルを表現する」(後編)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

前回は仮想的な空間にあるオブジェクトをスクリーンに透視変換する原理について、考察しました。今回は運動するオブジェクトが作る「軌跡」に焦点をあてて、考察を加えたいと思います。

続きを読む » "Flash Creative Technique - vol.59
3次元のスパイラルを表現する(後編)"

投稿者 kaoru : 2007年3月31日

2007年3月 9日

Flash Creative Technique - vol.58
3次元のスパイラルを表現する(前編)

web creators 2007年3月号web creators 2007年3月号の「Flash Creative Technique」は「3次元のスパイラルを表現する」(前編)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

今回から前編と後編の2回に分けて、3次元座標上を動くスパイラル運動について考察します。3次元的なモーショングラフィックの作成に役立つかも。

続きを読む » "Flash Creative Technique - vol.58
3次元のスパイラルを表現する(前編)"

投稿者 kaoru : 2007年3月 9日

2006年12月29日

Flash Creative Technique - vol.57
マッシュアップでつくるWidget風お天気Flash(後編)

web creators 2007年2月号web creators 2007年2月号の「Flash Creative Technique」は「マッシュアップでつくるWidget風お天気Flash」(後編)になります。

今回完成したサンプルは上のようになります。誌面で解説しているサンプルファイルはMdNのFlashクリエイティブ・テクニックからダウンロードすることができます。

外部APIとFlashを組み合わせたマッシュアップをテーマに作った「DEEP Weather Flash ver 0.1 」です。詳しい解説は誌面の方をご覧ください。ブログでは補足的に解説を加えたいと思います。

続きを読む » "Flash Creative Technique - vol.57
マッシュアップでつくるWidget風お天気Flash(後編)"

投稿者 kaoru : 2006年12月29日

2006年12月 5日

Flash Creative Technique - vol.56
マッシュアップでつくるWidget風お天気Flash(前編)

web creators 2007年1月号web creators 2007年1月号の「Flash Creative Technique」は「マッシュアップでつくるWidget風お天気Flash」(前編)になります。

まだ未完成ですが、サンプルは上のようになります。誌面で解説しているサンプルファイルはMdNのFlashクリエイティブ・テクニックからダウンロードすることができます。

外部APIとFlashを組み合わせたマッシュアップに挑戦したいと思います。そこで今回のテーマは、「マッシュアップでつくるWidget風お天気Flash」ということにしました。前編と後編の2回に分けて誌面で解説します。今回は前編です。詳しい解説は誌面の方をご覧ください。ここでは補足的に解説を加えたいと思います。

続きを読む » "Flash Creative Technique - vol.56
マッシュアップでつくるWidget風お天気Flash(前編)"

投稿者 kaoru : 2006年12月 5日

Flash Creative Technique - vol.55
横スクロールの2Dアクションゲーム(後編)

web creators 2006年12月号web creators 2006年12月号の「Flash Creative Technique」は「横スクロールの2Dアクションゲーム」(後編)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

後編ではゲームで使用するサウンドの定義、hitTest( ) を使った衝突時の当たり判定について解説しています。詳細は誌面をご覧いただくとして、ここでは補足的に気になった点をいくつか。

続きを読む » "Flash Creative Technique - vol.55
横スクロールの2Dアクションゲーム(後編)"

投稿者 kaoru : 2006年12月 5日

2006年10月20日

Flash Creative Technique - vol.54
横スクロールの2Dアクションゲーム(前編)

web creators 2006年11月号web creators 2006年11月号の「Flash Creative Technique」は「横スクロールの2Dアクションゲーム」(前編)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

さて今回からは新しいテーマとしてFlashゲームの作成をとりあげてみました。どうしてFlashゲームなのかというと、ハヤシカオルがわりと得意にするという事情もありますが、いかんせんFlash + XML = Flax の話がかなり長く続いたんですね。Flaxネタは旬でもあり、まだまだやりたいことはたくさんあるわけですが、ちょっとこのあたりで一息ついてFlaxのことは忘れて、Flashゲームでもやってみようかなと。そういったわけでして。ただゲームはゲームでなかなか作るのは大変です。ラクじゃない。しかしFlashでなければ実現しにくいジャンルであることも確かなわけで、Flashでゲーム制作にチャレンジしてみたいな、というクリエイターはそこそこいたりするのではないかと想像します。そのようなわけで、連載を読んでいることを前提にちょいちょいとかいつまんでおまけ程度に解説を加えたいと思います。詳細は雑誌の方を買って手元に置きながら、じっくりと読んでくださいね。

続きを読む » "Flash Creative Technique - vol.54
横スクロールの2Dアクションゲーム(前編)"

投稿者 kaoru : 2006年10月20日 | コメント (2)

Flash Creative Technique - vol.53
プリントカラーシミュレーターの作成(後編)

web creators 2006年10月号web creators 2006年10月号の「Flash Creative Technique」は「プリントカラーシミュレーターの作成」(後編)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

雑誌の連載の方は相変わらず進んでいるのに、こちらのBlogの更新の方は、すっかりご無沙汰しておりました。最近Blogにハマりつつあると言っておきながら、このザマ。反省しております。確か今回は「プリントカラーシミュレーター」の途中から完成まででしたね。では気がつくところを解説してみます。

続きを読む » "Flash Creative Technique - vol.53
プリントカラーシミュレーターの作成(後編)"

投稿者 kaoru : 2006年10月20日

2006年8月16日

Flash Creative Technique - vol.52
プリントカラーシミュレーターの作成(前編)

web creators 2006年9月号web creators 2006年9月号の「Flash Creative Technique」は「プリントカラーシミュレーターの作成」(前編)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

さて今回からは新しいテーマとして、Colorオブジェクトを使用するFlashアプリケーションについて前編・後編の2回に分けて解説しておりますが、詳細は雑誌の方を読んでいただくとして少しばかり裏話的なところを話してみたいと思います。

続きを読む » "Flash Creative Technique - vol.52
プリントカラーシミュレーターの作成(前編)"

投稿者 kaoru : 2006年8月16日

2006年7月13日

Flash Creative Technique - vol.51
FLVPlaybackコンポーネントを利用したビデオ再生アプリケーションの作成(後編)

web creators 2006年8月号web creators 2006年8月号の「Flash Creative Technique」は前回の続きで「FLVPlaybackコンポーネントを利用したビデオ再生アプリケーションの作成」(後編)になります。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

前回解説した前編では、Flash Professional 8から導入されたFLVPlayback Custom UI を使い、FLVPlaybackコンポーネントをカスタマイズしました。後編ではFlashとXMLを連携させて、FLVファイルとカテゴリーを管理し、UIコンポーネントのスクロールペインにFLVの一覧を表示するメニューを作成し、さらに完成度の高いFLV再生アプリケーション作成の手順について本誌では解説しています。ブログでは今回のテーマとその背景について少し語ってみたいと思います。

続きを読む » "Flash Creative Technique - vol.51
FLVPlaybackコンポーネントを利用したビデオ再生アプリケーションの作成(後編)"

投稿者 kaoru : 2006年7月13日

2006年5月29日

Flash Creative Technique - vol.50
FLVPlaybackコンポーネントを利用したビデオ再生アプリケーションの作成(前編)

web creators 2006年7月号web creators 2006年7月号の「Flash Creative Technique」のテーマに「FLVPlaybackコンポーネントを利用したビデオ再生アプリケーションの作成」を取り上げてみた。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

今回のテーマは前編と後編の2回に分けて解説する。今回は前編で、スキンをカスタマイズしてオリジナルのパーツを使用したFLVPlaybackコンポーネントを作成して、外部FLVを再生するところまでとなる。この前編に関しては、紙面の解説でほぼOKだと思う。技術的に特に補足することはないが、Flashでビデオを配信するには「ストリーミング型」「プログレッシブ型」「埋め込み型」の3タイプがあるが、それについて少し語ってみたい。

続きを読む » "Flash Creative Technique - vol.50
FLVPlaybackコンポーネントを利用したビデオ再生アプリケーションの作成(前編)"

投稿者 kaoru : 2006年5月29日

2006年5月 7日

Flash Creative Technique - vol.49
XMLと連携したフォトギャラリー

2006年6月号web creators 2006年6月号の「Flash Creative Technique」のテーマに「XMLと連携したフォトギャラリー」を取り上げてみた。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

Mac OS Xに付属している「iPhoto」のようにアルバムごとにサムネイルが表示され、サムネイルを選択するとメインの画像が表示されるようなフォトギャラリーをFlashで制作してみた。アルバムと写真はFlash内部ではなく、外部のXMLドキュメントで管理されており、swfファイルはXMLドキュメントを読み込んで、アルバムの情報や画像のパスを取得して解析し、表示する仕組みとなっている。Flash単体ではなく、このように設計するメリットは、インターフェイスとコンテンツ管理を分離することにより、Flashを通さなくてもコンテンツの更新を可能にする点にある。XML以前によく使われていたのが、「変数A=値&変数B=値&変数C=値....」のように記述した外部テキストファイルから変数を読み込む手法だ。しかしこの方法で今回のサンプルのようなフォトギャラリーを制作しようとすると、できなくはないかもしれないが、かなり無理があることがわかる。XMLドキュメントを設計し、それを解析したほうがスマートなものが制作できるだろう。そのあたりについて今回の連載では解説しているので興味のある方は、そちらを読んでほしいわけだが、Flashに関する連載ということでXML自体に関する説明を紙面で十分にすることが難しかったので、ここでは今回設計したXMLドキュメントについて若干補足してみたい。

続きを読む » "Flash Creative Technique - vol.49
XMLと連携したフォトギャラリー"

投稿者 kaoru : 2006年5月 7日

2006年4月 4日

Flash Creative Technique - vol.48
透視変換を使った3D空間の回転運動

web creators 2006年5月号さてハヤシカオルが担当するようになって4回目となるFlashクリエイティブ・テクニックは、「透視変換を使った3D空間の回転運動」をとりあげてみた。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

サンプルを見るとDEEP KICK.com のロゴの周りをグルグルと円状オブジェクトが奥行き感を持って回っている。画面をドラッグするとドラッグする方向と距離に呼応するかのように回転運動に変化を付けることができる。今回はこの「奥行き感の表現」つまり「3次元の運動をFlashでどう扱うのか」について解説している。そのために必要な考え方が「透視変換」と呼ばれるものだ。透視変換の考え方についての詳細は誌面で解説しているので、ここではこの法則を使えば、どういったコンテンツが作れるのかについて、少しだけ語ってみたい。

続きを読む » "Flash Creative Technique - vol.48
透視変換を使った3D空間の回転運動"

投稿者 kaoru : 2006年4月 4日

2006年3月 7日

Flash Creative Technique - vol.47
サウンドがフェードアウトしながら切り替わるインターフェイス

web creators 2006年4月号さてハヤシカオルが担当するようになって3回目となるFlashクリエイティブ・テクニックは、「サウンドがフェードアウトしながら切り替わるインターフェイス」をとりあげてみた。
できあがりのサンプルはこちらをクリック。
ボタンをクリック、もしくはキーボードの左右の矢印キーでコンテンツを切り替えることができるが、それにあわせてBGMがフェードアウトしながら次のサウンドとオーバーラップしながら切り替わっていくというもの。
サウンドオブジェクトの基本的な使い方を知っていれば、特に難しいことをしているわけではない。それぞれのBGMごとにサウンドオブジェクトを生成し、getVolume()メソッドを使ってボリュームを取得、ボリュームが0になるまでsetVolume()メソッドでボリュームを下げるループ処理をしている。それらの処理をカスタム関数sound_play(n)としてまとめ、コンテンツを切り替わるイベントを取得したときに実行している。
ムービークリップを指定するのに、eval()関数を使用しているので、その使い方を理解しておきたい。
例えば、

n = 1;
vvv = eval("_root.s_bgm" + n);
vvv.gotoAndPlay(2);

さてこのときの変数vvvの値は、お察しの通り
_root.s_bgm1
なので、
結果的にインスタンス_root.s_bgm1の2フレーム目にgotoAndPlay() することになる。
n = 2; のときは、インスタンス_root.s_bgm2
n = 3; のときは、インスタンス_root.s_bgm3
とまあ、こんな具合にそのときにならないとどれか分からない場合によく使われるのがeval()関数。簡単やね。

あとは、キーイベントの取得かな。フラグを立てて、キーイベントが連続して起きないようにしていることぐらいかな。

投稿者 kaoru : 2006年3月 7日

2006年2月 1日

Flash Creative Technique - vol.46
PHPと連携したFlashアプリケーションの制作

web creators 2006年3月号MdN編集部から2006年3月号が送られてきた。今回は黄色い表紙だね。特集は『スタイルシートデザイン&集客手法』。これ、おもしろそうだな。最近Flash制作以外にも自分の企画でいろんなサイトをブログベースで立ち上げているんだけど、SEO対策をきちんと念頭においたスタイルシートでのデザインってほんとネットビジネスを左右するんだなとあらためて思ったね。デザインって目に見える部分だけじゃなくて、目的に対する結果までを導く概念だとしたら、それも含めてデザインしなきゃいけないんだよね。特にWebデザインってのはそうだ。
話が脱線したが、今回のFlash クリエイティブ・テクニックのサンプルは、『PHPと連携したFlashアプリケーションの制作』。連載2回目にして早Flashから浮気かよ、うひゃーって感じ。サンプルデータは[Web Creators]のサイトからダウンロードできるよ。

続きを読む » "Flash Creative Technique - vol.46
PHPと連携したFlashアプリケーションの制作"

投稿者 kaoru : 2006年2月 1日

2005年12月30日

Flash Creative Technique - vol.45
オリジナルのスクロール機能を制作する

web creators 2006年2月号さて[MdN]の月刊誌[Web Creators]誌の2006年2月号より、レギュラーコンテンツ[Flash Creative Technique]の連載を、ハヤシカオルがなぜか担当することになりました、はい。
で私が思うに、『Flashで何かを作ることとそれを説明することは、まったく違う能力が要求されるのである』。
目の前にひとり生徒がいてさ、『お前、どこがわからないんだ?』と1対1で進められるのならともかく、絵とテキストで説明ってほんと難しいよ。ハヤシカオルには教えるセンスないんだもんな。いちおう教育学部出てるんだけどさ、本職が講師や教師じゃなくて良かったよ、ほんと。
そんなわけでもしかすると読者の中には、ここがわからんとか、ここ聞いてみたいとか、あるかもしれないよね。
そういう方々からたまにメールをいただくこともあるんだけど、せっかくブログやってんだから、活用しなきゃな、そう今はやりの(?)『ブログマーケティング』ってやつ。そう自分なりに思った次第です。
読者のみなさんとコミュニケーションした内容は、今後の参考にさせていただきたく思いますので、お気軽にコメント・トラックバックくだされたし。よろしくお願いしますね。

続きを読む » "Flash Creative Technique - vol.45
オリジナルのスクロール機能を制作する"

投稿者 kaoru : 2005年12月30日

contents
about
contact
Photo Gallery
blog
iPhone/iPad アプリ
Kindle book
portfolio