トップページ » DEEP KICK.com Blog » RIA

RIA

2009年8月 7日

Google Analytics でFlashを解析する

サイトのアクセス解析にGoogle Analyticsを使用している方は多いと思いますが、Flashで作られたコンテンツをGoogle Analyticsで解析してみたので、メモしておきます。ここではMac OS X 10.5環境のFlash CS4を使ってActionScript3.0で記述したMainクラスをドキュメントクラスとして制作するFlashコンテンツに対してアクセス解析を行う場合について紹介します。こちらの「Adobe Flash Setup - Google Analytics - Google Code」(英文)で書かれていることがベースですので、より詳細な情報はそちらを読むとよいかと思います。

続きを読む » "Google Analytics でFlashを解析する"

投稿者 kaoru : 2009年8月 7日

2008年12月31日

AS3 Technical Bible - vol.06
TweenMaxを使ったフォトギャラリー

w86cover.jpg web creators 2009年2月号 に掲載の連載「ActionScript 3 Technical Bible」のテーマは、「TweenMaxを使ったフォトギャラリー」になります。本連載でもって、わたくしハヤシカオルの執筆はひとまず終了することになりました。「Flash Creative Technicque」時代を含めると、3年にわたって「web creators」の連載を担当してまいりました。毎月4ページの連載を続けるのは、それなりに大変でしたが、ここまで継続することができました。この場を借りまして、読者のみなさまに御礼申し上げます。ご愛読いただきありがとうございました。またどこかでお会いしませう。

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

TweenMaxは、ActionScriptのモーション系ライブラリのひとつで、GreenSockを運営しているJack Doyle氏が提供しています。最新版のTweenMaxはGreenSockのサイトからダウンロードできるので、そちらから手に入れるようにしてください。なお、ここでは執筆時点(2008年11月)での最新版「TweenMax (AS3) version 3.4」を使用しており、それ以外のバージョンでは仕様上の変更の可能性があることをご承知おきください。TweenMaxの使い方に関する詳細は、誌面および「gs/TweenMax.as」の冒頭部分にコメントとして記述されているので、そちらに譲りたいと思いますが、ここでは誌面では詳しくとりあげられなかったフォトギャラリーとTweenMaxの連携について、若干補足したいと思います。なおサンプルのソース一式は、誌面に掲載されているパスワードを使用して、web creatorsのサイトからダウンロードすることができます。

続きを読む » "AS3 Technical Bible - vol.06
TweenMaxを使ったフォトギャラリー"

投稿者 kaoru : 2008年12月31日

2008年11月30日

AS3 Technical Bible - vol.05
2Dアクションゲーム ブロックくずし Part.2

w85cover.jpg web creators 2009年1月号 に掲載の連載「ActionScript 3 Technical Bible」のテーマは、「2Dアクションゲーム ブロックくずし Part.2」になります。

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

前回に引き続き、2Dアクションゲームの原点のブロックくずし型ゲーム「DEEP BLOCK TENNIS」の作成について解説します。前回は、「パッド」と「ボール」がシーン内において跳ね返り運動を延々と行い続けるところまで作成しました。今回は、ブロックとなるオブジェクトをシーン内に配置し、ボールとブロックの衝突処理を中心に解説し、ゲームを完成させます。サンプルを作成するための詳しい解説は誌面の方を見ていただくとして、ここではブロックをシーン内に配置する仕組みと、ブロックの種類を制御する仕組みについて補足します。

続きを読む » "AS3 Technical Bible - vol.05
2Dアクションゲーム ブロックくずし Part.2"

投稿者 kaoru : 2008年11月30日

2008年10月30日

AS3 Technical Bible - vol.04
2Dアクションゲーム ブロックくずし Part.1

w84cover.jpg web creators 2008年12月号 に掲載の連載「ActionScript 3 Technical Bible」のテーマは、「2Dアクションゲーム ブロックくずし Part.1」になります。

deepblocktennis1.jpg できあがりのサンプルはこちらをクリック。
左右矢印キーで、パッドを動かします。

今回の連載から2回に分けて、2Dアクションゲームの原点のブロックくずし型ゲーム「DEEP BLOCK TENNIS」の作成について解説します。ゲームの構成要素としては、縦横に並んだ「ブロック」、左右に移動させる「パッド」、パッドやブロックやシーンの壁に衝突して跳ね返り運動を行う「ボール」の3つの要素があります。前編となる今回は、「パッド」と「ボール」がシーン内において跳ね返り運動を延々と行い続けるところまで作成します。サンプルを作成するための詳しい解説は誌面の方を見ていただくとして、ここではキーでパッドを制御するメソッドの定義と、パッドとボールの衝突処理について補足します。

続きを読む » "AS3 Technical Bible - vol.04
2Dアクションゲーム ブロックくずし Part.1"

投稿者 kaoru : 2008年10月30日

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年9月30日

AS3 Technical Bible - vol.03
シーク・ボリューム機能を備えたFLV Playerの作成

w83cover.jpg web creators 2008年11月号 に掲載の連載「ActionScript 3 Technical Bible」のテーマは、「シーク・ボリューム機能を備えたFLV Playerの作成」になります。

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

前回のweb creators 2008年10月号で解説したAS3版FLV Playerに改良を加えて、シーク機能とボリュームコントローラーを実装したFLV Playerを作成します。便宜上、前回作成したものを「ver. 1」、今回のものを「ver. 2」と呼ぶことにします(サンプルは上のリンクをクリック)。
今回作成する「ver. 2」のポイントは2つあります。1つは、ドラッグ可能領域となるバーの上を左右にスライドすることができるボタンを作成すること。もう1つは、そこから得た値を、FLVの再生ヘッドの位置やボリュームに適用することです。実際にできあがったサンプルのコントロールエリア部分を操作してみて、各機能を把握するとよいでしょう。詳しい解説は誌面のほうにゆずりますが、ここでは「ver. 2」で新たに追加したコードについて補足します。

続きを読む » "AS3 Technical Bible - vol.03
シーク・ボリューム機能を備えたFLV Playerの作成"

投稿者 kaoru : 2008年9月30日

2008年8月31日

AS3 Technical Bible - vol.02
フルスクリーンモードを備えたFLV Playerの作成

w82cover.jpg web creators 2008年10月号 に掲載の連載「ActionScript 3 Technical Bible」のテーマは、「フルスクリーンモードを備えたFLV Playerの作成」になります。

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

誌面の冒頭で述べているように、AS3では、NetConnectionオブジェクトとNetStreamオブジェクトを通してFlash Videoファイル(以下FLV)を制御するように仕様が変更されました。誌面の解説では、FLVを制御するために知っておきたい基本的な仕組みと、FLVコンテンツの再生・一時停止機能およびフルスクリーンモード切替機能について解説しています。サンプルを作成するための詳しい解説は誌面の方を見ていただくとして、ここではvideoインスタンスにFLVを再生するための手順について補足します。

続きを読む » "AS3 Technical Bible - vol.02
フルスクリーンモードを備えたFLV Playerの作成"

投稿者 kaoru : 2008年8月31日

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月20日

社会人常識検定FLASHゲーム

沖縄県で開催された合同企業説明会のウェブサイトで遊ぶことができる社会人常識検定FLASHゲームをご紹介します。実際にやってみると、社会人の常識が意外と難しい!ヤバいです。

web creators 2007年10月号 この三択クイズゲームFlash、元ネタは、わたくしハヤシカオルがこちらの「web creators 2007年10月号」の巻末特集「Flashゲーム制作講座」において執筆させていただいた記事、「Stage 7 XMLから問題・正解・解説文を読み込む三択クイズゲーム」を参考に、株式会社ラジカル沖縄様が作成したものということです。筆者の意図したとおりにXMLで管理されており、非常によくできています。新社会人となるみなさまの役に立ったことでしょう、きっと。
自分の記事がこのようなかたちで実際に形を変えて活用されるのをみると、嬉しいです。今後の執筆内容を検討する上で、非常に参考になります。Flashは、なかなか他の人にはマネができない個性的でアートな作品を生み出していく一方で、誰でも簡単に利用できるRIAという方向性でも、進化していくのかなと思います。

投稿者 kaoru : 2008年6月20日

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年1月29日

MYCOM MOOK Professional Bible「1ランク上の技を身につけるFlashの強化書」

theFlash300-thumb-130x175.jpg 1ランク上の技を身につけるFlashの強化書 が発売されました。本書はFlashテクニックに磨きをかけたいFlashクリエイターのために、現場に即した内容に重点をおいたFlash解説ムック本です。

photogallery_mycomBook.pngのサムネール画像 わたくしハヤシカオルは「第4章 Flashの達人から学ぶプロの技」の「XMLで管理するFlashフォトギャラリー」を寄稿させていただきました。第一線で活躍されているFlashクリエイターの方たちが執筆しており、私にとってもいい刺激に満ちた内容になっていますので、プロの方にも参考になるのではないでしょうか。ご興味のある方はぜひ書店でご覧になってください。

書籍データ

書名
1ランク上の技を身につけるFlashの強化書 (ムック)
著者
+DESIGNING編集部
出版社
株式会社毎日コミュニケーションズ
出版年月
2008年1月29日
ページ数
160ページ
ISBN
ISBN978-4839926984
価格
1,890円(税込)

投稿者 kaoru : 2008年1月29日

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日

11月29日「Designer meets Designers 02」に出演します!

Designer meets Designers 02 (株)エムディエヌコーポレーション web creators編集部・WEB STRATEGY 編集部が主催するウェブデザイナーのためのイベント「Designer meets Designers 02」にDEEP KICK.com ハヤシカオルが出演します。今回のテーマは「リッチコンテンツ実践テクニック?Flash・Silverlight・Ajax?」です。

[Designer meets Designers 02 開催概要]

主催:
(株)エムディエヌコーポレーション web creators 編集部・WEB STRATEGY 編集部
開催日時:
2007年11月29日(木曜日)14:30開場 15:00開演
会場:
六本木アカデミーヒルズ49 タワーホール (六本木ヒルズ49階)
詳細・お申し込み:
http://www.mdn.co.jp/webcre/d2/

私、ハヤシカオルは「SESSION 3 現場で使えるActionScript実用テクニック」に登場します。60分という短い時間ではありますが、クリエイターの方に何かお役に立てる話ができればと、あれこれ策を練っているところでございます。ご興味がある方は、当日六本木ヒルズで会いましょう。

投稿者 kaoru : 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年8月31日

LZX Code Camp

去る8月30日、net8主催の「LZX Code Camp」に参加してきました。Flash CS3向けの書籍執筆に追われている最中、まる一日執筆を中断して時間を作るのはけっこう覚悟が要りましたが、人数限定のコードキャンプにせっかく招待していただいたし、OpenLaszloについていろいろ知りたいことがあったので、しっかりと行ってきました。いや?、行ってよかった!朝から夕方までLaszlo漬けというものも気持ちがいいもので、OpenLaszloを使った実際のアプリケーション作成の手順を見ることができて非常に勉強になりました。そしてFlashやFlexといったAdobe製品が得意とするジャンル(あるいは方向性)と、オープンソースのAjax/Flash対応RIA開発プラットフォームのOpenLaszloの特長と違いについて、以前より理解できました。

続きを読む » "LZX Code Camp"

投稿者 kaoru : 2007年8月31日

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