AS3の最近のブログ記事

mixiアプリを作りたいけど、
Javaスクリプトが良く分からないやー、Openソーシャルって何したらいいの？
と、諦めている人に朗々です！これを読むだけで、難しいことは考えずに
mixiアプリが作れます★

1.＜パートナーアカウント登録＞
　まずは、mixiデベロッパーセンターでパートナーアカウントに登録しましょう。
　携帯電話を使って本人確認を行う必要はありますが、比較的簡単に登録出来ます。
　詳細は公式サイトが一番参考になると思います。

　・mixiデベロッパーセンター(公式)

2.＜アップロード場所の用意＞
　次に作成したファイルをアップロードする場所を用意しましょう。
　自分がレンタルしているサーバーや、dropbox、googlecodeでも全然OKです。

　参考にさせて頂いたblogは以下の記事です。
　・[dropbox]DropBox を OpenSocialアプリ開発に利用する
　・[googlecode]続々 mixiアプリ

3.＜ライブラリのダウンロード＞
　最後にgooglecodeからopensocial-as3-clientをダウンロードすれば
　第一段階が完了です。
　
　・opensocial-as3-client

　　※ダウンロードには上記URLを参考にsubversionを用いる必要があります。
　　svn checkout [http://opensocial-as3-client.googlecode.com/svn/tags]
　　※今回は[http://opensocial-as3-client.googlecode.com/svn/tags/2009-05-31-0.8-M4]
　　をcheckout

　　手前味噌ですが、ダウンロード方法についてはサイト内の以下の記事にて、
　　Spark Projectのソースをとりあえず使ってみる方法

　参考にさせて頂いたblogは以下の記事です。
　・opensocial-as3-clientライブラリを使ってみた－プログラマー、再起動中
　　
4.＜ファイル設置、動作確認＞

　　とりあえず、checkoutしたファイルを設置して動作確認をしてみましょう。
　　[/sample] フォルダ と
　　[/sample] フォルダの[SampleApp.xml]と
　　[/bin] フォルダと
　　[/bin] フォルダとの[SampleApp.swf]を用意したスペースにアップロードします。
　　





　　次に[SampleApp.xml]のURLをmixi内から指定します。






















　　これでmixiアプリを設置する事が出来ました。
　　実際にmixiアプリにアクセスして動作を確認してみましょう。



　











　　自分のアプリ画面からプロフィール情報・画像表示や
　　マイミク情報・画像の確認が出来るかと思います。
　　サンプルアプリではその他にも色々な動きを確認する事が出来ますが
　　取り急ぎ、以下の2つを確認しておけば問題ないと思います。

　　1．Fetch Me：自身の情報取得
　　2．Fetch Friends：自身のマイミク情報取得

　　上記情報を取り扱うためのソースは
　　[/sample/flash]フォルダの[SampleApp.as]内に記述されています。
　　1．91行目 Fetch Me
　　2．109行目 Fetch Friends

　　データの参照にはユーザ概念の考え方が非常に重要となります。
　　@以降の指定を変更するだけで、取得出来るデータ内容が変化します。
　　
　　.setUserId("@me")
　　.setGroupId("@self"))　の部分
　　
　　ユーザ概念については公式ページが詳しいので目を通しておく事をオススメします。
　　・プロフィール情報・マイミク情報を使ってみようの図が超重要です
　　　　　
　　ちなみに、opensocial-as3-client内でのユーザ、グループの指定方法は
　　setUserIDのバリエーションが"@me", "@viewer", "@owner"
　　setGroupIdのバリエーションが"@self","@friends"となっています。
　　[SampleApp.as]の値を変更しながら色々と実験してみてください。

これであなたも、今日からmixiアプリデビューですね★
って「スクリプト書いてないじゃないか！」という声が聞こえてきそうなので(誰)

次回は一部ソースの使い方(役割的なところ)と
永続的データーの取得・保存について触れたいと思います。

[SampleApp.as]では、永続的データーの保存や
参考については触れていなかったので
感覚をつかむまでちと苦労しましたが
判明してみればデーターの保存方法もいたって簡単でした！

と、ここまで偉そうに書きましたが
全部、自分の為のメモその1ですｗ
本当にありがとうございましたｗ

Progression 3のリリース記念イベントをやるそうです！
詳しくはProgressionのblogもしくは特設サイトにて！

すごい楽しみです！！

追記
teraさんところのblog(trick7)を見たら
イベントについてのblogパーツを作られたそうなので貼り付けっ！

7月22日(火)　夜7時から開催された
Spark project 勉強会 #01 に参加して来ました。

Spark projectにコミットしているすごい方々のお話が聞けて
ものすごいためになりました。

自分は遅刻して行ったのですが
以下の順番で発表が行われました。

1．beinteractiveさん
2．seagirlさん
3．nutsuさん
4．arkwさん
5．zk33さん
6．ksakaiさん

到着した時にはすでにbeinteractiveさんの発表が始まっていましたが
一応全体を通してのメモを取ったのでレポを書こうと思います。

1．beinteractiveさん
　そーめんドキュメントのThread Libraryページを使いつつ
　XMLロード、例外、キャンセル、割込みが
　それぞれ処理出来るように作ってありますという内容でした。

　詳しくはそめーんドキュメント内サンプルの
　「11-9. samples/flickrsphere」の処理内容を見ると、
　まんべんなく機能を使っているので参考にするのに良いそうです。

　flickrsphereの実行サンプルページ

　当日の内容PDFはこちら

2．seagirlさん
　Genius Framworkの紹介
　どうわけるのか？どこに書くのか？といった
　アーキテクチャが必要である理由の部分から
　
　実行にはシェルを用いる必要があり
　WindowsではCygwinがお勧めとのことです。
　自分はよく分かっていないのですが
　このあたりを参考にしてみてはいかがでしょうか、

　また、Spark projectのGenius Framworkから飛んだ先に
　チュートリアルもありました。

　geniusコマンドを使って
　モデル、ビュー、スレッドのスケルトンを生成出来るそうです。
　ページの追加・切替え処理を手助けしてくれるようです。

　なお、コントローラ層にはThreadを採用しているそうです。　

　勉強会のタイミングに合わせて
　Genius Framework Version 1.3.0 をリリースとのことです！
　詳しくはblogへ

3．nutsuさん
　Frocessingの紹介
　nutsuさんが理解を深めるためにJavaベースのドロー系ライブラリ
　ProcessingをAS3に移植したものとのことです。

　frocessing.core.GraphicsExではシェイプ・曲線のメソッドを提供しており
　矢印、星、台形、三角形何かも簡単に描画可能なようです。
　(当日のスライドショー(※下記)3ページ目を参照)

　また、frocessing.bmp.FBitmapGraphicsでは
　BitmapDataの描画メソッドを提供しており
　座標を用いて画像の一部を切り取り描画する事が簡単に出来るようです。

　その他、テキストまわり、3Dまわりも移植されているそうです。
　ちょっとついていけてないので、、
　詳しくはnutsuさんがblogに当日のスライドショーをアップして
　くださっているのでこちらをご参照ください。

4．arkwさん
　akabanaを運営されている方です。
　AVMとAVM2の処理の違の紹介
　AVM...これまでは校庭トラックをイメージしたようなトラックだった参考
　そのため、フレーム、スクリプトどちらの処理が重くても
　影響をしていた。
　AVM2...タイムラインスライスという方式になり
　これまでの処理がスケジュールされるようになった。参考
　スクリプトが重たい場合にはPlayerが調節してくれる。

5．zk33さん
　sazamekiの紹介
　FlashPlayer10から可能となった
　Dynamic Sound Generationを使ったノウハウ
　441KHz/ステレオ -1.0 ～ 1.0
　2048 ～ 8192×2 が範囲
　データ書き込みと音が鳴るタイミングがずれる
　(環境により異なるのでレイテンシを測定して対応するのがベスト)
　※計算量の増大に注意
　当日は上記ノウハウを生かしたTenoranをデモしてくれました。
　ソース＆デモはSparkProjectにて！

　当日の発表資料はzk33さんのblogにて

5．ksakaiさん
　SWF埋め込みの紹介
　Objectタグでやってしまおう！が業界の流れ
　SwfObject...埋め込みタグ内の外枠がIE向け、内枠がそれ以外向け
　CS4のDreamweaverもこの方式で書き出しているとのこと
　Safari3では外も内も有効になってしまうため
　FlashVarsが渡せない問題が生じる。
　
　対策としては...
　①外、内の両方にパラメータを付ける
　②分岐をやめる
　
　続きは8月の末にWebにて！

　Adobeにksakaiさんの記事がアップされましたね！
　こちらを参考にしてください！

詳細足らずのレポですみません、、
アクセスされた方の何かの参考になればと思います。

ごはんとFlash二杯目と前後してしまったのですが
7月17日にProgression ワークショップ in 大崎 #2 に参加して来ました。

Progressionの勉強会として参加させて頂くのは
初めてで、WCANで行われていてUSTを少し見たのですが
今回もワークショップ形式ということで
クラスベースのソースコードがUSB経由で手渡され
ソースコードからコメントアウトされた部分を外しながら
実際に体感していく形式で大変ためになりました。

もうprogressionのタイムラインにはコミットされまくってるのですがｗ
次期コードネームは...
「Orbiter」　とのことです！

そして追加機能がすごすぎなんですｗｗｗ
@niumさん曰く「無理してないところはないですからｗｗｗ」とのことです。

1．google対応
　先日発表されていたFlashの検索に対応です。
　Google Analysticsへの対応でした。すみません＞＜
2．ブラウザ更新
　条件下でパブリッシュするとブラウザが自動的に更新されます
3．AIR
　Progressionプロジェクトパネルの
　「□AIRプロジェクトとして作成する」　のチェックボックスをポチっとするだけで
　AIRファイルとしての作成が可能です。
4．FlashDevelop
　「□FlashDevelopプロジェクトを作成する」 のチェックボックスをポチっとするだけで
　おなじみのあのファイルを書きだしてくれます。

上記βアップデートがリリースされました！！！！！！
詳しい情報は以下を参照ください。
http://progression.libspark.org/wiki/Update/ReleaseNote/3.0.0_Beta

現状のバージョンでのコマンドの強化について
ワークショップ内で話があったのですがメモを忘れて来たので追って記述します！

...と思ったらソースコード内にメモってありました。
「ParallelList」と「SerialList」というコマンドを使うことで
以下のような処理が出来るそうです。

//3秒待つ
//ParallelList：同時に実行
new ParallelList(0,
    new Wait(1000),
    new Wait(2000),
    new Wait(3000)
)

//6秒待つ
//SerialList：直列に実行
new SerialList(0,
    new Wait(1000),
    new Wait(2000),
    new Wait(3000)
)

自分がよくわかってなかっただけで
ググったらかなり出て来たので、気になる方は
是非、検索してみてください！

--080723追記
上記のコマンドについて
asdocを参照するのが一番のようです。

SerialList
ParallelList

Spark projectは@beinteractiveさん発のコミュニティです。
「皆でソースコードやノウハウを共有して、幸せになろうよ」
という思いの下で運営されています。

ただ、使ってみるまでの敷居が少し高く
以下の理由等で躊躇している方もいるかと思います。

・どうやったらソースをダウンロードして利用出来るの？
・ブラウザではソース表示出来るみたいだけど...

これは、バージョン管理システムを業務などで
利用した事のない方が該当してくるかと思います。
(って自分がそうだったのでｗ)

そこで、ソースを使ってみる為にはどんなフローを踏めば
良く分からない人でも便利なSpark Projectを使えるようになるのかを
スクリーンキャプチャーしてみました。
映像と文字補足を参考に実践してみてください。

カミカミ具合も併せてお楽しみください...ＯＴＬ

(意味もなく解説書風)

それではSTEPに沿って始めてみましょう。
STEPはたったの5つです。

STEP1.TortoiseSVNのダウンロード＆インストール
　
　SVNクライアント機能を備えたものであれば制限はありませんが
　ここでは、TortoiseSVNというソフトを利用して説明しています。

　http://tortoisesvn.tigris.org/へアクセスを行い「Download」タブより
　最新ファイルのダウンロードページへと進んでください。

　ダウンロードページへの到着が完了したら
「Download Application」よりパソコンに対応したInstallerを
　ダウンロードしてください。
　(キャプチャーでは32 Bit・Installerのダウンロードを行っています)
　
　ダウンロードが完了したらダブルクリックでインストラーを立上げ
　デフォルト設定で問題ないのでインストールを完了させてください。
　(お使いのPCに併せて変更してもかまいません)

　インストール完了後、再起動を促されるので指示にしたがって
　再起動をしてください。
　
　これであなたのパソコンへのクライアントソフトのインストールは完了です。

　
STEP2.クライアントツール日本語化

　困った事にクライアントソフトはデフォルトでは日本語ではありません。
　中には英語に敷居の高さを感じて、あきらめてしまう人もいる事でしょう。
　
　幸いな事にTortoiseSVNには日本語化を行うパッチが用意されています。
　ダウンロード＆インストール方法のフローはSTEP1とほぼ同様です。
　
　http://tortoisesvn.tigris.org/へアクセスを行い「Download」タブより
　最新ファイルのダウンロードページへと進んでください。
　
　ダウンロードページへの到着が完了したら
　「Language packs」以下よりあなたにあった項目を探し
　「Setup」よりダウンロードしてください。
　(キャプチャーでは日本語・32bitのダウンロードを行っています)
　
　ダウンロードが完了したらダブルクリックでインストラーを立上げ
　「インストール」を行ってください。
　(STEP1の再起動処理の後に行う必要があります)

　インストールが完了したら試しにインストールに使用した
　アプリケーションを右クリックしてみてください。
　「TortoiseSVN」と表示される項目が出現しているかと思います。

　ただ、このままで英語表示な事に気がつくかと思います。
　英語表示への変更を行う為には右クリックの
　「TortoiseSVN > Settings」をクリックで開いてください。

　最初に表示される「Language」部分が「English」になっていると思うので
　それをLanguage packsでインストールした言語に変更してください。
　(キャプチャーでは日本語への変更を行っています)

　これでクライアントツールの日本語化は完了です。

　

STEP3.リポジトリブラウザの利用＆ソースダウンロード

　ここでは、実際にソースのダウンロードを行っていきます。

　http://www.libspark.org/へアクセスを行「お知らせ」より
　「リポジトリ」を確認してください。
　(リポジトリに詳しい説明はWikiを参照してください)

　STEP2と同様に、インストールに使用したアプリケーションを
　右クリックし、「TortoiseSVN > リポジトリブラウザ」を選択してください。

　URLと表示されるので、先ほど確認したhttp://www.libspark.org/の
　リポジトリを入力して「OK」を押してください。

　するとウィンドウ内に蓄積されたファイルが一覧されます。

　そこから使ってみるソースをダウンロードする訳ですが
　今回はAS3で記述された「CountDown」を利用する事とします。
　(各ライセンスについては、その都度良く確認してください)

　http://www.libspark.org/の「プロジェクト一覧 > AS3」以下に
　クラスについての説明が記載されています。

　それでは、リポジトリブラウザに戻りダウンロードしてみましょう。
　該当のフォルダ上で右クリックをし、メニュー内より
　「エクスポート」をクリックします。「リポジトリURL」内に
　該当ソースへのURLが表示されるので内容を確認します。
　「エクスポート先ディレクトリ」にパソコンのフォルダを指定してください。
　内容を確認したら「OK」をクリックします。
　(フォルダ内にファイルがある場合には確認メッセージが表示されます)
　
　エクスポート結果が表示されます。
　「エクスポート先ディレクトリ」に指定したフォルダ内に
　ファイルがダウンロードされているかを確認します。

　これでダウンロード完了です。


　
STEP4.ソースの利用

　ここでは、ソースを利用する為の前準備を行います。
　ここからzipファイルをダウンロードしてください。
　
　zipファイルの中には「main.fla」と「DocumentRoot.as」が含まれています。
　
　この2つのファイルをダウンロードフォルダと同階層に置いてください
　これを基に説明します。

　まず、STEP3でダウンロードしたソースをエディタで表示してください
　ソース内の「package」という部分に記載された
　「jp.hbkr.baka」という部分が重要な内容となります。
　
　「main.fla」から見てソースまでのフォルダ構造が同一である必要性があるのです
　(ここは自信がないので違ってたら直します、、)
　ここでは「jp.hbkr.baka」と記述されていますが現在のフォルダ構造が
　「src.jp.hbkr.baka」となっているため違いが生じています。
　
　「src」内の「jp」フォルダを1階層上に上げてあげましょう。
　これで問題はクリアとなりました。

　次に「main.fla」ですが、ドキュメントクラスが設定してあり
　「DocumentRoot.as」となっているところに注目してください。
　これはFlashをパブリッシュした際に一番始めに実行されるクラスです。
　
　それでは、「DocumentRoot.as」を見てみましょう。
　「DocumentRoot.as」ではすでに「CountDown」を利用して
　秀樹還暦を表示するための記述が行われていますが
　「import」箇所に記載されたフォルダ構成の一致を確認しておきましょう。
　
　また、記述の方法については各クラスページの
　「使い方」項目を参照してください。
　「CountDownクラス」であればこのURLとなります。

　これでソースを利用する前準備は完了です。
　次はよいよ実行してみましょう。

　
　

STEP5.実行

　ここでは、Flash IDEより実行を行います。
　Flash IDEに戻り、「Ctrl＋Enter」を実行してください。

　



以上で全てのSTEPは完了です、お疲れ様でした。
以降はあなたの好きなソースで体感してみてください。

これからAS3を始めようと思っている方はこちらの記事も
多少の参考になるかと思います。
これからAS3をはじめる

youtubeにアップした動画が小さかったので
別途Flvで大きい画面も用意しました。
大きい画面はこちら。

かなり困りました。
タイムラインベースの構築しかそれまで行っていなかったからです。

色々と検索した結果一番初めに参考にしたのは2chのログでした。
本当にベースの基礎という意味ではすごいためになったので

これからAS3をはじめる方ようにメモエントリーしておきたいと思います。

http://pc11.2ch.net/test/read.cgi/swf/1151840424/

その後に読んだ本とかは読んだ順にエントリーしていきたいと思います。

||_koba_||さんのWCANの記事を見て
Box2Dを使ってスライドショーって見栄えが良くて
何気に良いのでは？っと思ったので

AS3の勉強も兼ねて作ってみました。

基本概念はいらなくなったスライドはドラッグしてぶんなげるです。
まだ作成中で現在のスライド番号とか表示せずに
矢印キーを押すだけで次のスライドとか表示されちゃってますがｗｗｗ

しかもBox2DのサンプルソースのHelloWorld.asをベース作るっていう
めちゃくちゃな事をしています、ソースもMVC概念に則ってないとか...
色々と汚いので修正予定ですがとりあえずエントリー。

参考までに現状は以下からダウンロード出来ます。

ここからダウンロード

fla内でスライドを追加して、リンケージでActionScriptに書き出しにチェック。
HelloWorld.asソース内の25行目の配列に追加してあげる事で
スライドの追加が行えるようになってます。

※ちなみにこのエントリーではここでアップしたソースから
　現在のスライド表示追加、MVC的なソースに変更等々を行って
　最終的に使いやすいスライドにするのが目的になります。
　(自分の勉強としてですが、、)

精進せねば！とせつに思う今日この頃です。

※ 追記
現時点では構造が変わってしまっているため
Box2Dの最新ソースでは上記ソースは動作しなくなってしまいました、
すみません＞＜

上記ソース内の

コンパイルには[Box2D]フォルダと[General]フォルダに
必要ファイルを入れる必要があります。

コリン・ムーク ギガスゴイ!!

Flash界のもみほぐし屋さん上野さんのblogに書いてあったのですが
コリン・ムックではなくコリン・ムークが正しいそうです。

それはさておき昨日はAdobeさん主催の
「今から始める ActionScript 3.0 - WORLD WIDE TOUR 」に参加してきました。
会場と一緒にOOP基本を押さえながら、AS3で0からのプログラムの構築を行うという
内容でしたが、今までぼんやりとしていた構築の際の気になる点が
すっきりとして「なるほど～」と思わされる事が多く大変勉強になりました。

ノートにメモした内容を覚書としてエントリーさせて頂きます。

1.パッケージ構築のサイトのディレクトリ構造
　ドメインの逆の記述で構築するのがポピュラー
　「http://www.level-zyass.net」ならパッケージへのディレクトリは
　「net/level-zyass/src」のような感じ。
2.public internalの付け方、考え方
　パッケージをブラックボックスだと考える

　この使っているマイクもスイッチ(ON/OFF)と
　ボリュームコントロールしか分かっていない。(だけど使えている)
　このスイッチがpublicなもの。
　(内部の構造が分からなくても使える。APIを連想)


　








　自動車だとしたらアクセル。ガソリン自動車を電気自動に改造しても
　アクセルを踏んだら走るは変わらない
　
　見えなくてもいいのがinternal、内部処理として機能しているが
　外に見えている必要がないもの
　また、変更してしまう事で構造や、全体ルールに影響が出てしまっては困るもの
　たまごっちで言えば最初から空腹にしすぎてすぐに死んでしまったり
　満腹にしすぎて何十時間も放置しても大丈夫だったり
　(どうしても変更が必要な場合には条件を付けて対応するのが良い)

3.Flash内の挙動的なもの
　変数にthisをつける事によりプログラム実行時にFlashは以下の順番で変数を探す
　①ローカル変数
　②インスタンス変数
　的確な記述により処理速度が上がる？
4.用語的なもの
　モディファー：手動で作ったもの
　セッター・ゲッター：自動化したもの
　実行内容は同じですが、少し意味合いが違うらしい
5.staticの意味
　クラス内の最低条件として定義して置くことで
　マジックバリューとして利用するのが良い。
　private static var maxCalories = 2000 //定義
　virtualpet.maxCalories //アクセス
　条件式で使用する場合にも上記記述内容を使用するのが良い
　if(hogehoge > virtualpet.maxCalories/2){
　}

キャラクターの向き、正面、左移動時、右移動時、後ろ向きイメージです。
(適当すぎなので書き直さないと…)

敵のイラストどーしよー。何も考えてない・・・・。

[ ゲームの概要のメモ ]
 1.自分は１つの爆弾の設置が１つのタイルにつき可能
 2.爆弾の爆発時間はランダムで決定される
 3.爆弾設置中は爆弾は置けない
 4.爆発したタイルには自分、敵共に移動出来ない
 5.移動出来ないタイルに自分が囲まれた場合はGAME OVER
 6.自分が爆発に巻き込まれた場合はGAME OVER
 7.敵は自分に向かって移動するがランダム要素を含む

こんなんで少しはパズル要素の含んだゲームに出来ればなぁ～と思ってます。

昨日のサーバールームでやっていた仕事が あまりにも寒かったので
頭の体操にイラストベースで作ろうと思っている ゲームの仕様の検討をしてみました。

良く分かっていないAS3を使いオブジェクト指向に慣れる事が目的です。
とりあえず、素材別でシーンと必要なclassを考慮してから
構築する必要性があるんじゃまいかと勝手思ってみました。

構築に必要だと考えた素材は以下です。
 1.タイル(自分・敵 移動用) 　
 2.自分
 3.敵 また、それぞれに必要なシーンを想定しています。

 ① 0.通常 1.爆発前 2.爆発中 3.爆発後 　
 ② 0.正面 1.後ろ移動時 2.左移動時 3.右移動時 4.やられ状態 5.爆弾設置状態
 ③ 0.正面 1. 移動 2.やられ状態 それぞれが持つclass等については考え中です。

なんていうか簡易ボンバーマンみたいなもんです。
現状こんなところですが考え方とか間違ってたらツッコミいただければ幸いです。

！追記
ってこれだと色々とclass想定足らないですね。ハイ。