ActionScript
Flex SDK × Flash でコンテンツ制作。
2009/06/18
Flex Builder がないとき、Flash CS4 で Flex SDK を使う方法。まず、Flex SDK をダウンロードします。
Download Flex 3 - Flex SDK - Confluence http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3Flash CS4
編集 > 環境設定 > ActionScript > ActionScript3.0設定
Flex SDK パス:
$(AppConfig)/ActionScript 3.0/libs/flex_sdk_3/ ↓ C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0
Flex SDK パス をお使いの環境にあわせて変更します。
使用したい Flex SDK のバージョンに変えることができます。
テスト
例)Flash でつくった Profile.swf を Flash CS4 で Flex SDK をつかって、Embed します。
[SWF(backgroundColor = 0xffffff, width = 800, height = 600, frameRate = 30)] [Embed(source = 'Profile.swf')] var Profile: Class; var swf:MovieClip; swf = new Profile(); addChild(swf); Loader(swf.getChildAt(0)).contentLoaderInfo.addEventListener(Event.INIT, initProfile); var profileSWF:MovieClip; function initProfile(evt:Event): void { // swf の root を参照します。 profileSWF = evt.target.content; // swf に Flex の root を参照させます。(swf に base を宣言しておきます。) profileSWF.base = this; }
これで、Flex でつくったコンポーネントを Flash で使うことも可能です。
スクロールバーをつくるときのポイント
2009/06/17
スクロールバーやスライダーってなかなか使いまわせないし、決定版ができないですよね。
いっこいっこ見た目や機能が微妙に違うし、連動させる対象や表現も違います。
個人的にも何度Scrollbar.asを作ったかわかりませんが、何回か作ることで方向性が見えてきた部分もあります。
実装方法というよりその考えかたの部分を書いてみたいと思います。
//forked from【flash時計】CircleChainClock!
2009/06/17
iPhoneOS3.0 がいよいよ明日。楽しみでしょうがない、Muraiです。
爆速、1日、時計ときて、やっぱりテーマがあるって強いなーと思ったので、
僕はネタが無いと時は"何かforkして作ってみる"というテーマで書くことにしました。
ということで第1弾。
haraの【flash時計】画面分割な時計のアイディアごとforkしつつ、taroの丸の中に丸を敷き詰めるのサンプルをforkして、wonderflで時計を作ってみました。
こっちはオマケの不思議空間バージョン。
"Particle祭り"に続き、時計祭りが起こると楽しいですが、みなさんどうでしょう?
暇な時などにぜひ。
よろしくお願いします!
easingを使い倒そう
2009/06/17
いつもAS3について考えているつもりなのに数学ネタに終始していて、ホント響かないエントリーを量産し続けるtaroであります。今回お送りするネタをまとめてみました。 flashならイージングだろってことで今回はeasing関数についてのお話をしようと思います。あ。結局関数なのね。そうです!
【flash時計】画面分割な時計
2009/06/13
haraです。
shimadaは爆速シリーズ、dokeは1日1wonderflと、各々が独自のテーマを持たなきゃいけないような風潮が感じられたので、僕は時計をテーマにしばらくエントリーを書いてみたいと思います。
記念すべき一発目は、画面を分割する時計です!
と言っても意味がよくわからないでしょうから、とりあえずこちらをご覧ください。※秒刻みの音が出ます
Flex × Flash でコンテンツ制作。
2009/06/12
Flex × Flash でコンテンツ制作についてメモ。
Flex Builder コンテンツ制作
MXML でまず基本レイアウトを設計します。
Box などの箱モノは、基本 widrh="100%" height="100%" でフレキシブルにします。
後で固定したい widrh height を指定します。
Header, Footer, Sidebar などのレイアウトをコンポーネント化しておく。
レイアウトのコンポーネントができたら次はよく使う機能ごとにコンポーネントをつくります。
便利なコンポーネントを生産していくには、ActionScript で細かな設計が必要になります。
ちょっとしたテストは、.mxml ファイルに ActionScript をかいてしまいますが、きちんと後で機能ごとに .as ファイルにまとめます。
素材は、画像だったり自分で Flash でつくった swf を使います。
複数の人が Flash で開発するとき、各々の制作物との連結が色々めんどうだったり、きちんとしたルールとなる仕様書が必要になったりします。
スピードを要求される案件の場合、なかなかちゃんとした仕様書を用意できないことがあります。
そこで、Flex を使用します。
メインフレームは、Flex で制作して、各コンテンツを Flasher につくってもらいます。
このとき基本的なルールはすでにつくっておくことは前提ですが、かなり楽です。
各コンテンツの移動(シーン移動)などのコントロールを Flex で行います。
また、Flex の生産性の高いコンポーネントも使用できるのも重要です。
Flash でつくったコンポーネントを Flex で使う。
Test_001.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#ffffff" creationComplete="init();"> <mx:Script> <![CDATA[ [Embed(source = 'Profile.swf')] private var Profile: Class; private function init():void { var swf:MovieClip = new Profile(); profileImage.addChild(swf); Loader(swf.getChildAt(0)).contentLoaderInfo.addEventListener(Event.INIT, initProfile); } public var profileSWF:MovieClip; private function initProfile(evt:Event): void { // swf の root を参照します。 profileSWF = evt.target.content; // swf に Flex の root を参照させます。(swf に base を宣言しておきます。) profileSWF.base = this; } ]]> </mx:Script> <mx:Image id="profileImage"/> </mx:Application>
これで、Flex から各コンテンツの swf へ、逆に swf から Flex へのやりとりを行います。
スピードを要求される案件の場合、各コンテンツの swf の動作確認をしながらできます。
自分以外のひとがつくったコンテンツを結合するときはひとつふたつ問題がでますが、そういったものを回避するひとつの策として有効です。
汎用的なコンポーネントは、SWCファイルにしておくのも手ですね。
ダウンロード
サンプルはこちらからダウンロードしてお使いください。
!null !!null !undefined !!undefined
2009/06/12
ホントに地味に。ECMAはみんなきっと出来る。
ちょっと自分で描いてて地味すぎるんですが、
if(!!hoge){//あったら}
if(!hoge){//なかったら}
を間違いなく書きたい時に個人的な癖として書いてます。
"nullでうんたらかんたら〜"と怒られないためのTipsでした。
progression:commandList内で条件分岐してcommand追加
2009/06/11
愛を読むひとのジャパンプレミア行ってきました!なっくるです。
こえ部で愛を読むひとの朗読リレーキャンペーンをやらせていただいたので、招待して頂きました!やーーー大人な映画で、愛ってすごい!って思えるとてもいい映画でした。
で、今回はprogression。まだまだ知らない事だらけ。
commandList内で条件分岐してそのListにcommand追加したい!って時。
着色的なColorTransform
2009/06/11
ActionScriptのColorTransfromはFlashCS3でいうところのプロパティのカラー:詳細に相当しますが、ここの着色をColorTransformで実現する方法です。
ご存知のひとも多いと思いますが着色を調整したとに、詳細に切り替えると自動で値が入っています。つまりColorTransformで素直に表現できるということなので変換関数を書いてみました。
//色と適応度 private function getColor( color:int, percent:Number = 1 ):ColorTransform { var k:Number = 1.0 - percent; var red:Number = color >> 16 & 0xFF *percent; var green:Number = color >> 8 & 0xFF *percent; var blue:Number = color & 0xFF * percent; return new ColorTransform( k, k, k, 1, red, green, blue ); }
FlashLite1.1での衝突判定
2009/06/10
どうも、iPhone 3G Sが発表されたはいいものの、FlashLiteの実機テストが出来なくなるので飛びつくか迷っているナカムラです。
ゲーム制作では衝突判定が頻繁に使用されますが、今回はそれでハマった話でも。
衝突というと、AS3ではhitTestObject・hitTestPoint、AS2ではhitTest等、ビルトインメソッドが用意されているので、これらが使える場合は手っ取り早く利用できます。
また、それらに頼らずオブジェクト同士の距離を求める場合は、三平方の定理を用いて
var distance:Number; distance = Math.sqrt( Math.pow( mc1.x - mc2.x, 2 ) + Math.pow( mc1.y - mc2.y, 2 ) );
という感じでやるのだと思います。
しかし、FlashLite1.1ではMath関数がサポートされていません(一応使えるが、精度が信用できない)。
仕方ないのでオブジェクトの四隅の座標を比較したりしてムリヤリ判定を行っていたのですが、どうも精度がよろしくありません。
そこで調べてみると、海外のサンプルで下記のようなものが!
http://www.flashkit.com/movies/Games/collision_detection/Circle_C-Degrees-446/index.php?chk=no
ここでダウンロードできるファイルを見てみると、オブジェクト間の距離を2乗した状態で比較しているようです。
これなら平方根が使えなくても問題ナシ。まさに目からウロコです。
FlashLiteのコードにするとこんな感じ(mc1、mc2は中心が基準)。
r1 = mc1._width / 2; r2 = mc2._width / 2; dX = mc1._x - mc2._x; dY = mc1._y - mc2._y; if ( ( dX * dX ) + ( dY * dY ) <= ( ( r1 + r2 ) * ( r1 + r2 ) ) ) { //衝突時の処理 }
FlashLiteをやっているとFlash4時代のTipsが逆に重宝するという、なんとも妙な話でした。丸の中に丸を敷き詰める
2009/06/10
今回も引き続き変換のお話をしようと思います。
反転
これは、複素平面上の変換で、複素平面上の点zを点
に写す変換で、この変換は円を円に写し、直線を直線に写します。
だから何?
数学的な話をすると、円と直線を保つことは非常に嬉しくて、
これを用いることで非常にエレガントに証明できてしまう初等幾何の
問題もあります。その中から
シュタイナーの円鎖というものを紹介します。
大小二つの円があるとします。この二つの円の隙間を円で埋めてしまいたくなりますね(なりません)。

【wonderfl】Particle特集
2009/06/05
haraです。
wonderfl、毎日面白い作品が次々投稿されていますが、過去の作品を探したり振り返ったりするのは若干やりにくい感じもします。
なので、ここでwonderflで過去に出てきた作品を振り返る、という試みをしてみます。
今回紹介するジャンルはParticleです。
過去に投稿されたParticle関連の作品を独断と偏見で選んで紹介いたします。
まずは zin0086さんのLiquid10000です。
これは、かの有名なパーティクル祭の引き金となった作品。※パーティクル祭に関しては、ClockMakerさんの記事が詳しいです
10000ものパーティクルを動かしています。元ネタはfladdictさんがFITCで発表した作品ですが、これはその作品をもとに自身で考案されたもののようです。
この作品の特徴は、PerlinNoiseで発生させた色をパーティクルの速度に反映させることで渦のような動きを発生させているところです。
要は色が動きに変換されているわけです。情報デザインですね!
このことにより、一見ものすごく難しい動きの処理をしているように見えて非常にシンプルなコードになっています。
このフォースマップというのは面白い考え方です。
RTMFPを使ってみる
2009/06/04
androidとfujirockで頭いっぱいなhidakaです。
ステージ振りも発表されましたねー。
久しぶりにFlashネタでいってみます。RTMFPです。RTMPじゃないよ、いきなり言われて区別つきます?
RTMFPはFlashでP2Pができちゃうアレです。去年の後半に発表されたやつ。
ネット上のサンプルがFlexのものばかりで、純FlasherとしてはさみしいのでFlashで
やってみました。ちゃんとP2Pでチャットできますよ。しかもサーバ用意しないで
Flashだけで試せます。
ProgressionのCastオブジェクトをgotoAndStopするとエラーがでまくる
2009/06/03
flaファイルのシンボルライブラリにCastMovieClip(MovieClip)をリンケージさせたものを、gotoAndStopとかでキーフレームを移動させすると、コマンドでAddChildとかしたときにChildIndexerのところでエラーが出ます。
これは移動した先のフレームでディスプレイツリーの重なり(Index)が、Progression内で管理している深度と干渉することで起こるみたいです。
シンボルのタイムラインで見た目の状態を切り替えたりする場合は、CastMovieClipではなく、切り替えようのMCをネストしてそちらで行うほうがよさそう。
1分でできる!dispatchEventで任意のプロパティを渡す方法@Wonderfl
2009/06/03
EventDispatcherでdispatchEventする時に、好きなプロパティを渡せない。。。
「そんな〜、カスタムイベント作るの嫌だよー」という人向けのプチTipsです。
wonderflに例を書いてみました。
dispatchEvent(new Event());
としちゃいそうなところを、dispatchEvent(new DataEvent());
とするだけ。 DataEventは第4引数にパラメータ持たせてEvent.dataで取れるのでそれを利用しちゃいましょうというネタです。Flexだとmx.events.DynamicEventとか便利なのがあるので迷わずそっちですね。
本当はちゃんと実装しないといけないんですが、急いでいる時にササっと片付けたい時など、ぜひ試してみてください。
TextFieldにスタイルシートを適用させてみよう
2009/06/01
先日KnuckleがTextFieldのHTMLテキストのリンクイベントをとるというのを書いていたので、 のかってTextFieldのhtmlTextについてちょっと書いてみます。
TextFieldにはstyleSheetプロパティというのがあって、StyleSheetクラスでスタイルを設定できます。
たとえば リンク部分に色を設定して、マウスオーバーされたときだけ下線が表示されるようにするには..
ホイールスクロールへのイージングのつけかた
2009/05/30
haraです。
この4月よりカヤック閃光部にジョインいたしました。
よろしくお願いいたします。
先日のmatumuraのエントリでスクロールバーコンポーネントが紹介されていたので、
僕の方からはスクロールバーの仕組みそのものについて書いてみようと思います。
スクロールバーを作る時、できればホイールに合わせてススーッとコンテンツが移動してくれるような、エロいインタフェースにしたいと思うのが人情です。要はイージングをつけたいってことですね。
てことで今回は、ホイールスクロールにイージングをつける方法を解説します。
サンプルはこちら。スムーズですね。

(※すいません、Winの人専用です。しかもフルスクリーンしないとブラウザのスクロールに持って行かれます。Macの人はこちら右クリックでDLしてスタンドアロンで試してみてください)
では、中の処理の説明に入ります。
Webカメラで赤色のトラッキング@Wonderfl
2009/05/28
楽しい仲間がたくさん増えて、ワクワクしてます。Muraiです。
ふと赤色検知が必要になってwonderflを探してみたら全然出てきません。
もしかして動態検知の方が人気?などと思いつつ、あまり処理も変わらないので、昔書いたっぽいコードを引っ張りだしてリファインしてみました。
お手元の赤ペンをご用意頂いて、適当に書いてみてください。
赤ペンが無い方はこちらの本のチェリーマークなんぞもオススメです(笑
ちなみに右利き用。ペン先は下にお願いします。
このルールを守るだけで、コードが何十行か短くなるマジックを使いました。
(すいません、さぼっただけです)
ともあれ、これと タローの射影変換を使えば、どこでもペンタブ!も作れなくもないですね。
両方Forkして是非作ってみてください。
それではこの辺で。
HTMLテキストのリンクイベント TextEvent.LINK
2009/05/28
上海いってきました!なっくるです。100階展望台!上海環球金融中心高かった!小籠包 おいしかった!
今回は、HTMLテキストのリンクイベントについて。_txt.htmlText の中のリンク<a></a>のイベントが取れるんですね!知りませんでした。
カスタム スクロールバーUI
2009/05/28
福島の田舎から鎌倉にやってきた(遅すぎた)ニューカマー。福島のみんな元気ー。
カヤックに入る前は、一年のうち数ヶ月を海洋冒険ロマンに費やしていました。
沈没船に潜って財宝を探したり、海王類最大種のザトウクジラと泳いだり、
そんなわけであだなは冒険王。
地方でこの _level0 をみているひともたくさんいると思います。
私も数ヶ月前はそうでした。すごいなー、わくわくするなー
いつか自分もいっしょになにかつくりたい!
そして今、晴れてカヤックという船に乗船許可がでました。うおー。
悶々としていた自分にこのようなチャンスが与えられて感謝しています。
FlashLite1.1で制作時のつまづきポイント3点
2009/05/27
はじめまして、カヤック新人FDのナカムラと申します。
まだ右も左もわからないヒヨッコですが、作業中に出てきたネタや試作、Tips等の記事を書いていこうと思っています。どうぞよろしくお願いします。
さて、ここ1ヶ月ほど、携帯用Flashの制作でFlashLite1.1を触り始めています。
FlashLiteで作られたコンテンツといえば、日本を席巻しかねない勢いで人気急上昇中の珍感覚ペット「コンチ」などが挙げられ、携帯Flashには必須の言語です。
しかし、FlashLite1.1はFlash4時代のAS1相当の仕様で、その独自の実装に幾度もつまづかされてきました。 今回は一発目という事で、これまでの制作でつまづいた点とその回避策を書いてみようと思います。それではどうぞ!
色と透明度を分離する方法
2009/05/27
Graphicsに塗りを指定するときなどに色と透明度を2つ指定するのが面倒だなーと感じる人のためのTipsです。
色情報を24bitカラーで指定して、beginFillで渡すときなどにビット演算をして分離する方法です
これだと特に関数で処理をまとめるときに縦横+色透明度できれいに引数をまとめられて◎です(個人的に)。
もとネタはSaqooshaさんのFLARToolKitかなんかの中にあったものですが、紹介させてもらいます。
// べつべつに変数にする var color:uint = 0x80FF0000; var sp:Sprite = new Sprite(); sp.graphics.beginFill( color, alpha );
// 一個の変数にする var color:uint = 0x80FF0000; var sp:Sprite = new Sprite(); sp.graphics.beginFill( color & 0xFFFFFF, (color >> 24 & 0xFF)/0xFF );
Alphaを0xFF(255)で割って1-0に収めるのを忘れずに
重なる気持ち -台形補正-
2009/05/26
どもはじめまして、タローです。
flashとの出会いから早1年、flash好きが昂じてそのまま入社して2月目に入ろうとしている、2009新卒の新入社員です。
先輩のやっているコンテンツで計算のお手伝いをしたことがあったので、今回は座標変換のお話について少ししようと思います。四角形と四角形がぴったり重なりあいたいという気持ちをどう説明するか、ということで「アフィン変換」と「射影変換」のお話をします。図やサンプルもつけてみましたので是非ご覧下さい。
FileReferenceがうごかない件とテキストのリンクがとれる件
2009/05/26
どうも、もうほんと夏ですね、佐藤です。
今回は今やってることではまってることと気づいたことを2点書いておこうと思います。
1.FileReferenceのuploadメソッドがIDE上のパブリッシュでうまくうごかない。
かならずEvent.CANCELが配信されてしまいます。
いろいろやってみましたが、解決せず。
SAのFlashPlayerだとリスト取得はできます。
サーバアップすればいいのですがね。。
解決策しっているかた教えて下さい。
2.TextFieldのhtmlTextにaタグでリンクをつけて、そのリンククリックイベントをAS内で取得できる。
サンプルコードは以下
1日1Wonderflその2
2009/05/13
ちょっとづつ、1日1Wonderflタグが充実してきてうれしいです。
あまり時間がとれないですが、小さなことでもやってみたって結構経験として重いですね。またちょっとした心の栄養かもしれない。
最近機能が充実してきて、ますます盛り上がるといいですね。
SWFの画面キャプチャを任意のタイミングで行えるようになったようです。コードに"Wonderfl.capture_delay( 10 );"(数字は秒)と記述するとプレビュー中に指定の秒数が経過したタイミングでキャプチャが行われるようです。動的かつランダムな作品だとけっこうむずかしいですけど操作しないといけないものなどはだいぶよいショットが取れるのではないでしょうか。
ところで、担当している案件が若干たてこんでいるため、あとは最近の羅列だけでご勘弁を。
自分の中で自分をnewする
2009/04/30
豚インフルが心配ななっくるです。
海外いけるかな…
自分の中で自分をnewするってのをこの間はじめてやったんですが、考えれば当たり前ですけど、alpha とか scale はどんどん乗算されてくんですね。
クラスのプロパティをリスト表示したい
2009/04/28
クラスにどんなメソッドが実装されているかどうかわからなくなって困ることがあります。 特にだいぶ時間がたってから手をくわえなければいけなくなったときとか、クラス構成を資料に起こさなければいけないときとか。 クラスの中身をリストアップできたら便利なのになと思って、ヘルプを眺めていると。。 flash.utilsパッケージにdescribeTypeという関数があるんですね。 describeTypeにクラスの型をわたすと、そのクラスに付随する静的プロパティとインスタンスプロパティを記述したXMLオブジェクトを返してくれます。
Spriteクラスのプロパティを表示したい場合には、
Event.REMOVEDではまりそうなとこ
2009/04/24
自分がremoveChildされたことを監視したりするEvent.REMOVEDですが、
実際使ってみて面倒だったとこ。
this.addEventListener(Event.REMOVED, onRemovedHandler);
とかやって、自分がremoveChildされたかを監視していたのですが、
これ、自分にaddChildされているものがremoveChildされても呼ばれます。
まだ消えてないのになんで?って。
イベントのターゲットとかちゃんと確認しましょう。
よく読むとどこにも自分がremoved、とはないんですよね。自分の、というだけ。
雲みたいなエフェクト処理をクラス化してみる
2009/04/16

BitmapDataをつかったエフェクトを汎用化してみたくてクラス化してみた。
利用イメージは次のような感じ
// なんか読み込んだ画像 var origin:BitmapData = Bitmap( loader.content ).bitmapData as BitmapData; // なんかしらフィルタマップ画像 var mapBmp:BitmapData = new FilterMap( origin.width, origin.height ); //読み込んだ画像をエフェクトクラスに突っ込んでTweenさせる var effect:Effect = new ThresholdEffect( origin, mapBmp ); addChild( effect ); Tweener.addTween( effect, { percent:1, time:2, transition: Equations.easeInCubic } ):
エフェクトの速度とかを調整したいのでpercent値に応じてエフェクトがかかるようにしました。これによってTweenerでのイージングなどが可能になりますし、Commandとかとの連携も可能です。
汎用的にするという点で、抽象クラスをつくり、Templateメソッド的にエフェクト処理のみサブクラスに任せることにしました。
//-------------------------------------- // エフェクト本体(Templateパターン) //-------------------------------------- public class Effect extends Sprite { private var _origin:BitmapData; private var _output:BitmapData; private var _effect:BitmapData; public function Effect( origin:BitmapData, output :BitmapData = null ) { _origin = origin; _output = output ? output : new BitmapData( _origin.width, _origin.height, true, 0x0 ); addChild( new Bitmap( _output ) ); } protected var _percent:Number = 0; public function get percent():Number { return _percent; } public function set percent(value:Number):void { _percent = value; _updateEffect(); } private function _updateEffect():void{ _effect = _origin.clone(); updateEffect(_effect); _output.draw( _effect ); } // ここでエフェクト処理を何かする。 protected function updateEffect( effect:BitmapData ):void{ new IllegalOperationError("updateEffectはOverrideする必要があります。"); } } //-------------------------------------- // エフェクト本体 //-------------------------------------- public class ThresholdEffect extends Effect { private var _mapBmp:BitmapData; private static const START_PARAM:uint = 0x00; private static const END_PARAM:uint = 0xFF; public function ThresholdEffect( origin:BitmapData, mapBmp:BitmapData, output:BitmapData = null ) { super( origin, output ); _mapBmp = mapBmp; } // パーセント値に応じてエフェクトをアップデート protected override function updateEffect( effect :BitmapData ):void { var threshold:uint = Math.round( Number( END_PARAM - START_PARAM) * _percent ); effect.threshold( _mapBmp, _mapBmp.rect, new Point(), ">",threshold, 0x00, 0xFF ); } }
おそらくこの手の処理で一番めんどくさいのはむしろフィルタ用のマップだったりするので、それもクラス化しておきました。CSシリーズなどを使っている人はグレースケールのビットマップ画像を用意したほうが早いでしょう。
//-------------------------------------- // エフェクト用のフィルタBitmapData //-------------------------------------- public class FilterMap extends BitmapData { public function FilterMap( w:int, h:int ) { super( w, h, false, 0x0 ); var map:Shape = new Shape(); var gMat:Matrix = new Matrix(); gMat.createGradientBox( w, h, -45 ); map.graphics.beginGradientFill( GradientType.LINEAR, [ 0x000000, 0xFFFFFF ], [ 1.0, 1.0 ], [ 0, 255 ], gMat ); map.graphics.drawRect( 0, 0, w, h ); map.graphics.endFill(); var rnd:int = Math.round(Math.random() * 65432); this.perlinNoise( width/6, height/6, 24, rnd, true, true, 1, true ); draw( map, null, null, BlendMode.MULTIPLY ); } }
動きのサンプルとコード全文はWonderflでどうぞー
Wonderflでセルフフォーク祭り
2009/04/13
忙しいときに気晴らしにちょこっと関係ないFlashができるのがWonderflのいいところ。
ひとのやつをちょこっと高速化させてみました。けど思ったほど軽くならなかった。
どれが実際効果的かわからないけど、やるだけやってみたこと。
- Math.PIをループ外でローカル定数にいれる
- その他変化しない数値やクラスメンバもループ外でローカル定数にいれる
- 要約できる演算はループの外で1回だけ行う
- 配列などのインスタンスメンバもローカル変数に入れる
- 1ループで4回くらいまとめて処理する(この場合nullチェックとどっちが重いか謎)
- 0.0-1.0でNumberで計算してたのを1000かけてintで計算する
- BlurFilterをTimerで別のサイクルで実行
他にできそうなこと
- 要らなくなった要素を配列から消す処理を別のサイクルで行う(spliceがたぶん重い)
- 三角関数テーブルをつくる
- 色相環テーブルを使う
namespaceの使いどころ
2009/04/13
あんまりスマートじゃないかもしれないけどnamespaceでテストサーバーと本番サーバーを切り替えるような処理をスッキリ記述する方法です。
APIなどのURIを入れるStaticな定数クラスを作ります。そのときアクセス用のStaticフィールドへ同名のnamespaceつきの内部的な定数を代入するようにしておきます。フィールド部分でnamespaceを切り替えるとすべての定数が入れ替わるので、この定数クラスの利用側からはどちらのnamespaceかまったく意識する必要がありません。Debugフラグなどの分岐など不要になりロジック部分の見た目的にはスッキリします。
ただし、中身ではなんだか泥臭い方法に思えるのこの手のアプローチででもっといい方法があれば知りたいです。
namespaceは便利そうなんですがそれ自体の資料がXML関連のものばかりで、あまり他の効果的な利用方法が見当たらないのが残念ですね。参考になるのはProgressionのインターナルなnamespaceとか、AS3UnitのTestメソッドのラベル付けとかくらい?
//定数クラス package{ import flash.errors.IllegalOperationError; public class API { // 宣言だけでよい private namespace www; private namespace test; private namespace local; // それぞれの値 www static const _IMAGES_XML:String = "/swf/images/data.xml"; test static const _IMAGES_XML:String = "./images/data.xml"; local static const _IMAGES_XML:String = "./images/data_debug.xml"; www static const _DETAIL_XML:String = "/swf/images/detail.xml"; test static const _DETAIL_XML:String = "./images/detail.xml"; local static const _DETAIL_XML:String = "./images/detail_debug.xml"; // ここで切り替えておく use namespace local; public static const IMAGE_XML:String = _IMAGES_XML; public static const DETAIL_XML:String = _DETAIL_XML; public function API() { throw new IllegalOperationError( "APIはインスタンスを作れません。" ); } } }
//利用側 package{ import flash.display.*; import flash.events.*; import jp.progression.commands.*; public class Main extends Sprite { public function Main() { var loading:CommandList = new SerialList( null, new LoadURL( new URLRequest( API.IMAGES_XML ) ), function () { var command:CommandList = this.parent; trace( command ); var xmldata :XML = new XML( this.latestData ); for each( var img:XML in images ) { //command.insertCommand( new LoadChild( img.@src ) ); } }, new Trace( "complete!" ) ); loading.execute(); } } }
テキストエリアにおさまる文字サイズを調べる
2009/04/10
フジロックの追加発表が待ち遠しいhidakaです。
3日キャンプで行きますよーポイ練習しとかないと。
でもFlashもやってます。
今回はテキストのエリアきまってるけど文字あふれちゃうかもしれない時の対策です。
以前のせまいエリアでのテキスト表示とあわせてどうぞ
エリアにおさまるフォントサイズ=calFS("入れたい文字列",幅,高さ,最大フォントサイズ);
こんな感じ。
IEのポップアップブロックのブロック
2009/04/09
春ですね。
なっくるです。
今日はFlashからリンクを _blank で呼んだ場合、IEだとポップアップブロックが出ちゃうのをブロックする方法です。
Papervision3DにDAEを読み込んでも表示できないオブジェクトがある
2009/04/02
3Dモデリングソフトで出力してもらったDAEファイルを利用する際、メッシュ情報がないと空のDisplayObject3Dになってしまって表示されないということがありました。
3D Studio MAXの場合だけかもしれませんが、ソフト側の一般にプリミティブオブジェクトみたいなものは、いったんポリゴンメッシュに展開してからDAEに書き出す必要があるみたいです。
DAEの中身はXMLなので確認することができます。
COLLADA//ルート └library_geometries//モデル情報リスト └geometry//モデル情報 └mesh//メッシュ情報
主な構成要素は下記のとおりです。
- library_images // テクスチャ用画像リスト
- library_effects // テクスチャ設定(UV含む)リスト
- library_materials // テクスチャ情報リスト == MaterialObject3D
#テクスチャごとにimageとeffectをひも付けてる - library_geometries // モデル情報リスト == DisplayObject3D
- library_visual_scenes // モデル構造を定義する
#モデル情報の階層構造とテクスチャ情報をひも付けてる
他にもテクスチャ用の画像ファイル形式を変更したり、容量削減のためにカメラやライトといったPapervision3Dで使わない要素を消したりといった調整もしました。3DSにくらべたときに、テキストファイルであることにより編集やデバッグしやすいのがメリットかもしれません。
TextSnapshotで静止テキストみれるんです。
2009/04/02
はやく鎌倉の桜が満開になってほしいなっくるです。
都内は先週末で結構咲いてたのに。まだ5分咲き
この間、MovieClipのプロパティで TextSnapshot なるものがあるのを
初めて気づきました。
FMSのサーバーサイドでできることのメモです
2009/04/01
ごく簡単にですが、調べた範囲でのメモです。できるできないレベルの判断材料になれば。興味のある方がいたら深く書きます。
基本的なこと。ActionScript関連
- FMS側のASでできることはFlash5相当のActionScript2 と同じ
- ClassがないですがprototypeとregisterObject()関数によりクラス的なものが作れる
- アプリケーション起動時に自動的に生成されるインスタンスがある。(ApplicationクラスとClientクラス)
- ビルトインクラスもいくつかある。(SharedObjectクラス、Fileクラスなど)
- Array,Object,Number,Stringあたりの基本的なクラスも使える
- traceはコンソールからしか見れない
- 分割したファイルの読み込みはload()メソッドをつかう(ただしネストはできないらしい)
- 変数の型宣言はできない
SharedObjectについて
- リモートSharedObjectでクライアントとオブジェクトを共有できる
- クライアントのSWFとの通信でObjectやクラスインスタンスをやり取りできるが型情報は破棄される
- SharedObjectには永続型と非永続型があり、接続が終わってもアプリが残っていて情報が存続するモードを設定できる
- 永続と非永続のSharedObjectは同名でも別に管理される
- 永続の場合、SharedObjectから切断した後の変更は次回SharedObject接続時にクライアントに通知される
- リモートプロクシSharedObjectでFMSアプリ間の共有もできる
- 更新のバージョンがあり、復元可能。またこのバージョン履歴の深さを変更できる
サーバーアプリについて
- FMSアプリ内で別のFMSアプリと通信できる
- RTMPへの接続をほかのRTMPにリダイレクト(302に類似)処理できる
- リモートプロクシSharedObjectでFMSアプリ間の共有もできる
- FMSもメモリリークする。(おそらくSharedObjectまわりの実装による)
- ASCファイルの変更はアプリケーションのリスタートが必要
FLARToolKit上のモデルの位置と回転情報
2009/03/30
FLARToolKitのアプリケーションは、マーカーを認識して検出した傾きと位置を、毎フレーム3Dモデルに反映する仕組みでAR表現を実現しています。 モデルの本体はPapervision3DのScene3DObjectにぶら下がっているFLARBaseNodeクラス(DisplayObject3Dのサブクラス)のインスタンスで、与えられた傾きをsetTransformMatrixというメソッドでFLARBaseNodeのtransformへ反映しています。
このときにsetTransformMatrixではtransform(Matrix3D)の各要素を直接アップデートしているため、表示は変わるのですがrotationXなどのプロパティの値は反映されていません。
ですので、マーカー認識の支配下からはずした状態でTweenerとかでrotationXを変更したときに、回転の開始角が常に0-Nになってしまって困りました。
Tweenerに渡す前に、DisplayObject3D.transformの値から回転角を算出してrotation系のプロパティを手動で反映してやる必要があります。
具体的には、Matrix3D.matrix2euler( matrix3d:Matrix3D ):Number3D を利用して、transformプロパティの値を角度に変換し、それを各軸のrotationに代入します。
//ARの傾きの反映を止めている状態です。 var transform:Matrix3D = _baseNode.transform; var rot:Number3D = Matrix3D.matrix2euler( transform ); baseNode.rotationX= rot.x; baseNode.rotationY= rot.y; baseNode.rotationZ= rot.z; Tweener.addTween( _baseNode, { rotationX: 100, rotationY: 0, rotationZ: 180, time:2 } );
これはSaqooshaさんとpsyarkさんに教えてもらいました。ありがとうございます。
なおeuler(オイラー)角っていうのは物理学者のオイラーによって考案された表現で、(X,Y,Z)の各軸の回転角を表現します。
文字列の中から改行をとりのぞきたい
2009/03/30
Flashでテキスト内の改行コードを削除したいなーってことがあったんですが、Stringクラスのreplaceメソッドで空白文字と置き換えてあげればいいんですよね。 ただ、そのときに読み込んだものの改行コードによって、消すときのパターンが異なるので要注意。
改行コードには、
- CR = \r
- LF = \n
- CR+LF = \r\n
どれを消せばいいのかなーと考えちゃいますが、そんなときは両方とも消しちゃえっということで、削除するコードは次のようになります。
クリエイティブを感じる5つのwonderfulなwonderfl
2009/03/26
デバッグでLEDを振り回していても周りの目が気にならなくなってきました、村井です。
最近はBM11で店舗用コンテンツの実験などをしていまして、あまりFLASHに触れていないのですが、ネタ探しにwonderflを眺めていて目に止まった作品をいくつかご紹介したいと思います。
Progressionでボタンをモーション後に有効にする
2009/03/25
年収でおなじみのnagggさんのProgressionのイベントレポートでProcessEvent.PROCESS_START や ProcessEvent.PROCESS_COMPLETE イベントと合わせて stage.mouseChildren の制御を行うのも定石だよねwとあるのでそういうもんなのかーと思い込んでいたのですが、Progression3のPropコマンドっていうのがあってこれ使えばスマートってことに気付いた。
new SerialList( null, new Prop( btn, { alpha:0, mouseEnabled:false } ), new DoTweener( btn, { alpha:1, time:1 } ), new Prop( btn, { mouseEnabled:true } ) ).execute();
これはボタンの有効無効を変えただけですが、他の要素との連動もすっきり書けそうです。
イベントもめんどいしbeforeとかafterメソッドもややこしいなーと思ってたのですがこの発想はありませんでした。天才だとおもいました。
なので、DoTweenerでtime:0でプロパティセットしていたような処理も、Propでやるほうがスマートです。Objectで渡すのでtime値の有無以外は見ためもそろってるし。
これだけだとあれなので、ついでにProgressionのカスタムコマンドのTipsを。
Propとか地味であまり使わなさそうなんですが、カスタムコマンド化しておくと何かと便利です。
FMSでinclude的なことをする
2009/03/24
引き続いてFMSネタです。
FMSアプリは.ascというファイルで記述します。
main.ascはキメうちのアプリケーションファイルなので、かならず必要ですが、ほかのファイルに分散して書くことも可能です。
だいたいmain.ascには、つないだときにすることとかをApplicationクラスのイベントハンドラに記述するのがメインになりますが、カスタムクラスをつくったりSharedObjectを編集したりすると結構煩雑になります。
ですので、それを分割したい場合はグローバル関数のload()を使います。
- main.asc
- inc/setting.asc
- inc/app.asc
// main.ascにはload処理のみ load("inc/setting.asc"); load("inc/app.asc");
実際に処理は分割したファイルのほうに書くと、パッケージ的に役割ごとにファイルを分割して、すっきりかけるようになります。(そういう風にうまく分割しないといけませんが)
今回は複数のアプリケーションの開発と、いくつかカスタムクラスもあったので、実際には以下のように分けました。
なお、ApplicationクラスとClientクラスは実際にはビルトインクラスで、かつ自動的に生成されるので拡張する部分のみ記述しています。
またクラス名と.ascファイル名は関係なくても大丈夫。
ライブラリクラス群
- libs/Client.asc //Clientクラス共通の拡張部分のみ記述
- libs/Log.asc // Logクラス
- libs/Response.asc // クライアントとの通信の返却用オブジェクト
- libs/Delegate.asc // Delegateクラス
このアプリ用のクラス群
- classes/settings.asc // Applicationクラスの拡張
- classes/MyApp.asc // Applicationクラスの拡張
- classes/MyClient.asc // Clientクラスの拡張
- classes/Counter.asc // 数をカウントしておくクラス
以上を読み込むloadしか書いてないmain.asc
- main.asc
各ファイルの具体例は以下
Google Map を使ってみる。 markerとInfoWindow
2009/03/13
めっちゃうれしいナックルです!!!
キビヤ、まじ旨い!
今回は前回のつづき。
GoogleMapに marker と InfoWindow つけてみました。
Google Map を使ってみる。
2009/03/05
やっぱラーメンはとんこつ!
Google Maps API for Flash 使ってみました。
ただ表示させるだけならすごく簡単!
3Dの実装を1からやってみる
2009/03/05
SparkProjectの勉強会#7でお話した部分をエントリーにしました。
FlashでとりわけActionScriptで3D表現というのは、だれしも一回くらいはやってみたいと思うことのひとつではないでしょうか。
AdobeMAX2007の城戸さんのプレゼンで、PV3Dなどを使う前に一度自分でやってみたほうがいい、という話から2年過ぎてしまいましたが、いまさらながら3D演算を1からやってみました。
途中経過をわかりやすくするためWonderflにアップしてForkしていくという方法をとります。
- 今回、参考にした本はActionScript3.0アニメーションの3Dのセクションです。
FMISで動画ストリーミングする方法
2009/03/04
FLV,FMIS,FMS,NetConnection,NetStream
いま進めているお仕事でFMISを利用したものを作っていて、録画ずみの動画のストリーミング配信の設定が意外に資料がなくてこまったので書いときます。
- 動画は録画済のFLV
- ストリーミング配信したい
自分が置かれてるドメインをmatchと正規表現で
2009/02/19
もっと雪がふってほしいなっくるです。
今回はこえ部のブログパーツを作る時にmash君に教えてもらった、自分が置かれているドメインをとる方法です。
テストサーバーでテストしてる時は、テストサーバーを
本サーバーの時は本サーバーを
見に行ってほしいって時に便利です!
Wonderflのテンプレを作る
2009/02/16
やっと最近Wonderflをつかう時間が取れるようになったので、よくある実験系のサンプルに適したテンプレートを作ってみました。
Wonderflに限りませんが、処理の流れとか仕組みで定型のものはなるべくこぴぺしてやりたい部分だけすぐ取り掛かれるのが理想です。Wonderflでは自分ライブラリを自由にインポートできないしテンプレートの仕組みがないので、よくあるパターンはそれも一回コードとして保存しておきます。
これをForkしてもらえたり、新たに素材やテンプレートを作ってもらえれば幸いです。
まだまだ発展途上なサービスなので、こうして新しいつかい方を開拓していけたらと思います。
具体的な要望はwonderfl at kayac dot comまでお寄せくだされば検討いたします。Twitterをやってる人だったら、@maaashをフォローして直接要望をなげると案外すぐにこっそりやってくれるかもしれません。
っていうかテンプレートとスニペッツは、本体の機能にほしいなあ(笑)
KAYACでは、Wonderflさえも効率よく遊べるFlasherを募集しています!!
FileReferenceはローカル変数で使えない
2009/02/15
以前書いた、NetConnectionもそうだったのですが FileReferenceもローカル変数に定義しただけだとうまく動きません。
オンラインのファイルをダウンロードしようとして 処理の流れも問題なく、保存用のダイアログでるんだけど 実際には保存されてなくてずーっとはまってました。
検証用にFlaファイルつくって、タイムラインに書くとうまく行きます。 NetConnectionのときも同じ感じだったのでもしやと思ったらやっぱりそうでした。
FileReferenceインスタンスはインスタンスメンバまたはクラスメンバとして定義する必要があります。
// 成功する package { import flash.display.Sprite; import flash.net.FileReference; import flash.net.URLRequest; public class TestFileReference extends Sprite { private var fRef :FileReference; public function TestFileReference() { fRef = new FileReference(); fRef.download(new URLRequest("http://level0.kayac.com/images/araga/valentine_2009/main.gif"), "valentine.gif" ); } } }
// 失敗する package { import flash.display.Sprite; import flash.net.FileReference; import flash.net.URLRequest; public class TestFileReference extends Sprite { public function TestFileReference() { var fRef = new FileReference(); fRef.download(new URLRequest("http://level0.kayac.com/images/araga/valentine_2009/main.gif"), "valentine.gif" ); } } }
おそらく想像ですがローカル変数だと関数のスコープから外れるとすぐにGCの対象になってしまうみたいです。
ちなみに、このことから想像できるのですが、タイムラインに定義した変数や配置したインスタンスはpublic var 的に処理されるんですね。
AS3でduplicateMovieClipできちゃう?
2009/02/12
MovieClip,as3,constructor,duplicateMovieClip
as3からMovieClipのメソッドからduplicateMovieClipがなくなってしまいましたね。 手軽にMovieClipの複製ができないなーと思って、へこんでいたんですが。。。
代わりとなるような方法を紹介してみます。 手順は以下のようになります。
ステージのインスタンスを自動宣言するかどうか
2009/02/12
FlashCS3の書き出し設定のところに「ステージのインスタンスを自動宣言する」というチェックボックスがあります。

本来なら、Flaファイルのシンボル(またはステージに)にActionScriptのカスタムクラスをリンケージした際に、"シンボル内に配置された子のMovieClipのインスタンス名"を対応するクラスのほうにも変数として宣言されていないと、子MCなどをActionScriptで操作することができません。
これを簡易にするために、シンボルやステージに配置されたMovieClipのインスタンスに名前がついていたら自動的に宣言して書き出すように設定できるものです。


ただし、これによってActionScript上では宣言されていないインスタンスとActionScriptで生成したインスタンスが混在し、見通しが悪くなるという状況が生まれます。
作法的に変数名としてみたときに_(アンダーバー)があるなしがちぐはぐになったりとか、Sprite型や派生クラスへの型指定できないとか。
またステージ上のインスタンスの操作をするために、import宣言は自分でやらないといけなかったり非常に中途半端です。

この状態で宣言を入れてみるとどうなるでしょうか。
同名の宣言を記述すると「重複した宣言」としてコンパイルエラーになります。
自動で宣言されたものと、自分で宣言したものが干渉してしまうようです。(宣言のないものだけ補完してくれたらいいのに><)
結論としては、個人的にはどっちもどっちなので、ActionScriptメインの開発であれば文法的にStrictな方がよいと考えました。
やっぱり自動宣言をやめて、明示的に定義をする方向で行きます。
明示する際には、public var で宣言する必要があります。
唯一の難関は「ステージに配置したインスタンス名の手動宣言」が面倒なところなので、これさえどうにかなればと思い、これを自動で洗い出して宣言文を生成するJSFLを書きました。
ステージのインスタンスを自動宣言するへのチェックは必要なくなります。
【Progression】Singletonパターンを使ってどのシーンからも変数を参照できるようにする。
2009/02/04
こんにちは、さいきん深夜のドライブが日課のkijimaです
Progressionで実装していると、どのシーンからも共通の変数にアクセスしたいことってでてきますよね。
以前twitter(otoyasumi)で「どのシーンからもアクセスできるようにはみんなどうしてるんかなー?」ってつぶやいてたらikedahidenoriさんが「データ保持用のクラスつくってSingletonパターンでアクセスしてます」と仰ってたので、それがラクそうだなと思って僕もその方法で実装してみました。
AS3になってからXMLが便利になった3つのポイント@wonderfl
2009/01/30
ごはんと新年会楽しかったですか?仕事でいけずにしょんぼりなMuraiです。
ものすごい今更な内容で恐縮ですが、仕事で急いでいる時に軽くググったらまとまった記事があまり出てこなかったので書いてみます。
ローディング周りの話はいいライブラリがたくさん出てるので誰かが書くことに期待。
僕はBulkLoaderがオススメです。リファレンスみるとわかりますが、とてもいい子ですよ。
さて本題の3つのポイント、書いて張ればいいのでwonderflは便利です(笑
- 簡単に埋め込める
- ためしにうちのRSSを突っ込んでみます。
- 簡単アクセス
- ドットシンタックスでアクセス可能なのはご存知の通りですが、組み合わせて使うともっと便利に。
- child("*")で階層にイテレートとか。
xml+=<newNode>HogeHoge</newNode>;でappendできたりするのもいいですね。
おいおい、XML形式で投げてくださいって。。JSONにしない?。。みたいな時も楽々。
このRSSのコピーには無いですが、attributeに@idみたいな感じでのアクセスもいい感じです。xml.@*なんかも便利。 - フィルタリングできる
- 実はこれが一番役立ったんですが、()でフィルタリングできます。
以上。
上記は直書きスタイルですが、"" 無しの ただコピペ完了。簡単。
便利になりましたね。余分なことに時間をかけなくてもいいのでとても助かりました。
ビバE4X。
そこまで滅多にやらないと思いますが、検索系のメソッドと組み合わせたり、正規表現で拾ってきたり、色々組み合わせれば「スタンドアローンなのにどうすんのこれ。。。」なFLASHアプリを何とかできそうです。
今気づいたんですがwonderfl diff機能までついてたんですね。おそるべしmash。
http://wonderfl.kayac.com/code/edc1f44f8f9fabfa7d93e5efbc857ff80491ea20/edit
みなさんもwonderflどんどん使ってみてください。
【Progression】右クリックで表示されるコンテキストメニューを非表示にする。
2009/01/28
こんにちは、progression勉強中のkijimaです。
Progressionフレームワークの魅力である右クリック(コンテキストメニュー)による「前に戻る/次に進む」遷移。
しかし、ときとしてコンテンツによってはコンテキストメニューによるシーン遷移をさせたくないときがあります。コンテンツ全体で一括非表示にする方法を探していたんですが、こんな記述でOKのようです。
FlashDevelopのAddのテンプレートを増やした
2009/01/26
Adobe FlashにもFlashDevelopにもテンプレート機能があるのですが、設定が面倒でなかなか活用できてなかったりします。
特にFlashDevelopを利用しているひとはDisplayObjectのサブクラスとかProgressionのCastObjectやCommand派生のクラスをよく作ると思います。
FlashDevelop のテンプレートは以外に簡単だったので、いろいろ作ってみました。
MovieClipを継承したりといった超細かいところでも右クリック>Add>New ... .as でかなり効率化できたので、よかったらまだつかってないひとは試してみてください。
特にProgression関連のものはProgressionSVNにコミットしておきました。(他の方もテンプレートをコミットされてますね)
http://trac.progression.jp/browser/experiments/doke/FD_Templates
サウンドまわりの扱いがめんどくさいので。
2009/01/25
AS3になってサウンド周りが一気に高機能になってできることが増えたのですが
普段使う時は9割方がただ鳴らしたいだけ、ループしたいだけって程度で
SoundChannelとかSoundTransformとか気にする意味ない事ばっかりなので、
くるっとラップしてお手軽にしてます。くるっと。
もうみんなProgressionやればいいのに、と思う今日この頃。
2009/01/22
おはようございます、kijimaです。つい先日、初めての体験をふたつしました。
ひとつめは、ライブでドラムを叩きながらメインで歌をうたうという芸当。目の前にマイクがあると叩きづらいし、離れると声を拾わないしでなかなか大変ですね。ちなみにSpecial Othersをやりました。
そしてもう一つは今回の本題です。
お恥ずかしながら、つい先日やっとProgressionデビューしました。
例によって、本家サイトからダウンロードできるクラスベースでのサンプルをまず触ってみて、それをもとに実装していったのですが、シーン遷移、コマンドについてなどハマった点など思い出しつつ数回にわけてまとめてみたいと思います。(Progressionのバージョンは 3.0.7)
※今回の記事ではProgression自体のインストール方法は割愛します。
インストール方法は下記ページをご覧下さい。
一時変数の効率化
2009/01/21
以前のお仕事でパーティクル演算を使うことがあって海外のサンプルコードなど眺めていて気づいたことです。
一時変数の扱いについて知らなかったことだったのでメモっておきます。
var x:Number = 100;
変数をブロック内( {と} の中)で宣言すると、一時変数として宣言されます。
一時変数はブロック内でつかい終わると破棄される上に、参照経路が少ないため、グローバル変数やインスタンスメンバ(タイムライン変数含む)と比較してメモリ効率がよいです。
そこでforなどのブロックでも多用するのですが、実は一時変数のスコープ(参照可能な範囲)は関数単位となるため、forなどのブロックないの変数は結局何回宣言しても同じスコープの中で再定義しているに過ぎず、宣言のオーバーヘッドの分よぶんなことをしていることになります。
ですので、ループのブロック内でしかつかわない変数も、 衝突判定やパーティクル演算などかなり多くのオブジェクトを処理するときには、 (見づらいですが) forブロックの外で宣言したほうが負荷が低いようです。
スクリプトで星型を描くWonderfl
2009/01/18
昔のコードを整理してたら星を書くだけの簡単なスクリプトが出てきたのでwonderflに書いてみた
頂点を2倍にして、1つおきに半径を半分にして描画するとぎざぎざができあがる感じです。
携帯待受を作る上での注意事項
2009/01/17
時間を出力するために、fscommand 関数が用意されています。
たとえば、
hour = fscommand2("GetTimeHours"); minute = fscommand2("GetTimeMinutes"); second = fscommand2("GetTimeSeconds"); hour_txt = hour ; minute_txt = minute ; second_txt = second;
とすれば、簡単に時間を出力できます。FlashLite1.1の仕様上、onEnterFrameが使えないので、常に、上記fscommand
を呼ぶ必要があります(でないと、時間が止まったままです)。
たとえば、_rootに2フレーム用意して、カタカタと1フレームと2フレームを
行き来させたりさせて時間を進めるための工夫が必要です。
ただし、ここから注意です。
テキストエリアがクリックされたら全選択!
2009/01/16
冬休みと三連休で沢山滑れてやっと冬を実感したKnuckleです。
遅くなりましたが、皆様、あけました、おめでとう!
今年も小ネタ書いていきます!
2009年もよろしくお願いします。
2009年お初の記事は、よくある「テキストエリアがクリックされた時に全選択」です。ちょっとはまったので書いておきます。
これだけは知っておきたい「FlashLite入門」
2008/12/24
この1年、FlashLiteを触る機会を多くいただきました。
まったくの初心者から始めたので、何度も思い通りにいかず、苦しめられました。
ということで今回は、1年の総括の意味を込めておさらいします。
MerryChristmas level0!
2008/12/24
メリークリスマス!
kijima&hidakaにパーティクルブームがきているようなのでさらに乗っかってみます。
hidakaのCS4パーティクルシリーズのソースを勝手にForkしてツリーつくりました。
クリスマスですね〜。キラキラです。
AIRにしようと思ったら、CS4用のAIR SDKがDreamWeaver用しか見つからなかったので残念ながら保留です。
まったくリファクタリングしてないので、5分ぐらいで重くなるような気が。。。
落ちたらごめんなさい。
良いクリスマスを!
KAYACでは、雪をも溶かす熱い想いを持ったFlasherを募集しています!!
まだまだvecter3Dとmatrix3Dを試す
2008/12/16
AS3,FlashPlayer10,Matrix3D,Vector3D,サンプルコード
前回の続きでもう少し3Dで遊びます。
クリックで再生・停止。以下、解説とサンプルソース一式です。
FlashLiteで音を再生させたいときに誰もが一度はひっかかる罠をご紹介。
2008/12/15
携帯向けのFlashコンテンツ、FlashLite(1.1&2.0)で音の出るゲームを開発すると、必ずといっていいほどひっかかるポイントがあります。それはサウンドまわりの実装方法。PC用のFlashPlayerと同じように実装しても音が再生されないのです。
今日はFlashLiteのサウンド実装について、実体験をもとに解説していきます。
SWFObject(1.5)使用上の注意
2008/12/12
FlashをHTMLに貼り付けるとき最近はSWFObjectを使用してる人も多いと思います。
SWFObjectを使用して貼り付けるときにちょっとハマったというエントリ。
年末なのでカウントダウンタイマーを作ってみました
2008/12/11
どもっ、koyuです。
最近めっきり寒くなって、大通りではイルミネーションも点灯してます。
年の瀬も近くなり、色々なイベント近づいてきた感じがします!!
クリスマスやHappyNewYearのキャンペーンサイトなんかでよくカウントダウンしてますよね?
ということで、今回はそのカウントダウンタイマーを作ってみました。
それではコードを見ていきましょう。
Here We Go!!FlashDevelopのプラグイン インデントだけは揃えます。
2008/12/11
XYLISHの中箱の裏が可愛くて、しかも折りたためる事に気づいたナックルです。
コンパクト。
さてFlashDevelopですが、自動フォーマットがないのが唯一の悩みですよね。
で、見つけました。
名前はAutoFormatなんだけど、でもインデントだけ。
ログ出力するOutクラス(com.bigspaceship.utils.Out)
2008/12/10
そうめんでHydroSequenceをthread化する
2008/12/10
少し前から、AS3のトゥイーンライブラリをTweenerからHydroTweenへ乗り換えたのですが、Thread LibraryにはTweenerThreadしかないので、HydroSequenceをカスタムThreadとして作ってみた。
一応割り込みとかにも対応してます。(なんか足りないとこあったら教えてください)
CS4でパーティクルを試す(matrix3Dとかvectorとか)
2008/12/10
CS4,Matrix3D,Particle,vector,サンプルコード
なにやらkijimaにパーティクルブームがきているようなので乗っかってみます。
IEでのみ画像読み込みでIOErrorになってしまう件
2008/12/09
こんにちは、冷え性な佐藤です。
画像を読み込んで表示するだけなんですが、FireFoxだと正常に読み込み、表示できるのですが、IEではIOErrorで読み込む事ができない現象に遭遇しておりはまっています。。
読み込み自体のコードは以下のようなシンプルなものです。
setTextFormat( ) と defaultTextFormatがややこしいんです。
2008/12/08
間食の誘惑と戦っているナックルです。
今日の小ネタは テキストフォーーーーーーマット!
そうめんのinterruptedはwaitの時にしか呼ばれない
2008/12/08
表題のとおりなんですが、Thread外部から中断処理をしたときの挙動を勘違いしてました。
なんで中断処理にかんして、checkInterruptedメソッドで見張るのと、interruptedメソッドに関数セットするがあるのかと思ってたんですが、 joinやeventなどで待ちセットに入ってる状態でinterruptされたら、interruptedにセットした関数が呼ばれ、 普通にnextで処理を続けてるとき(特にEnterFrame的な処理)の中断はcheckInterruptedで見張らないと分からないということなんですねー。
文字列でクラス名を指定してインスタンス生成できるんです
2008/12/07
文字列でクラス指定してインスタンスを生成できるって知ってましたか?
getDefinitionByNameというパブリックメソッドがあるんですね。このメソッドはパラメタで与えた文字列で指定したクラスのクラスオブジェクトへの参照を返してくれます。コードを書いてみると・・・・
そうめんのMonitorで先読み的なものをつくる
2008/12/06
CubaClockのように大量に動画とか音楽を読み込むもの作るときにはそうめん(ThreadLiblary)のMonitorという機能を使うと便利です。
Monitorとは、機能的にいうと、あるものが使えないときは待つ、使えるときはデータ(リソース)を提供するものです。
具体的には、たとえば連続的に画像や音を表示しながら読み込みつづけるようなときに、データが十分にたまるまで待つ、たまったら普通に表示(or再生)、足りなくなったらまた待つ、といった処理を手軽に実現できます。
そうめんのサンプルにロードし続けるThreadと、データを見張るクラスのMonitorを介して、そのデータを使うThreadと間接的に連動するような実装をしたものがあります。
実は、ここの連動感が僕にとってすこしイメージしにくかったんですが、次のように整理すると理解できました。
3D回転しているものを正面を向かせる
2008/12/05
CS4から3軸回転(rotationX,rotationY,rotationZ)ができるようになってうれしくて毎日ぐるぐるさせてますが、sprite自体は平面なので回転によってはペラペラしてしまいます。
なので常に前を向かせてみました。
インスタンスからクラス名がみれるんです。
2008/12/04
どーも、小ネタのナックルです。
インスタンスから、こいつなんだっけって時に便利。あんまり使用頻度がないので忘れないようにメモメモです。seoさんが探していて、使わないよーと思ったんですが、確認用として意外と使えるかも?
FlashPlayer10の新機能、段組クラス(縦書き)に触れてみた。
2008/12/02
FlashPlayer10の新機能、「縦書き」を試してみました。
これは従来のTextFieldとはまったく別のもので、動的な変更や入力は一切できません。
テキストオブジェクトというよりは段組オブジェクトというほうが正確だと思いました。
flash.text.engine.*パッケージの中身のクラスも、TextFieldというよりはGraphicsのような描画APIに近い位置づけだと思います。
手順を追って説明してみます。
Dateを更新する3つの方法をベンチマークする
2008/11/30
少し前から時計がまたはやっていますね。
TeraClockとか便利なものが出てきたので、早速使わせてもらってます。
さて、TeraClock開発の話でTimerよりEnterFrameの方がいいとかパフォーマンスを気にされているようなんですが マイフレームごとにnew Date()してるのが気になったので実際どうすると効率がいいのか確認してみました。
int, uint, Numberのデフォルト値
2008/11/27
知らなかった!!皆さんご存知かもしれませんが...
AS3から新たに加わった、int と uint。
int は -2,147,483,648 (-2^31) ~ 2,147,483,647 の整数
uint は 0 ~ 4,294,967,295 の整数
Number は 浮動小数点数
てのは知ってましたが、デフォルト値も違うんですね。
visible=falseで描画されちゃう件
2008/11/25
ちょっとはまってしまったので、メモメモ。
アニメーションを作るときとかに、よくMovieClipを入れ子にしたりしますが、 子であるMCがトゥイーンで移動など再描画されるような処理をしている場合、親であるMCのvisibleをfalseにしても、描画されてしまうようですね。
以下はちょっとしたサンプルです。
Enterキー押すとイベント発行してくれるTextFieldの拡張
2008/11/24
AS2から入ったせいか、SpriteやMovieClip以外のビルトインクラスの継承はあんまりやらないイメージがあるんですが、じかにTextFieldとかArrayとかも継承して使うとすっきり便利なときがあります。
下記はEnterキーイベントを拾って、入力内容をイベント送信してくれるクラスです。イベントも継承してカスタムイベントを作っています。
コンストラクタでデザイン設定してますが、TextFieldとして扱えるのでこれは生成する処理に任せてもいいでしょう。
以下コードです。
意外と知らないActionScriptのイベントにまつわる3つの小技
2008/11/21
すっごく地味だけどたまに便利で、時にはつかいどころを考えないといけないようなミニTipsをいくつか紹介します。
TeraClockを改良してみるテスト
2008/11/20
渾身のパロディFlashであるCubaClock(クバクロック)制作にあたり、当初パーフォーンスと正確さを重視した独自のシーケンサを組んでいたのですが
ちょっとした利便性とパフォーマンスのバランスに悩んでいたら奇しくも同時期にTeraClockがリリースされたのでおとなしくそちらを使わせていただくことにしました。
使うにあたりつくり方で気になるところがあったのでちょっと改造して使いました。
Flashのメモリを制する5つの秘訣..
2008/11/13
こんにちは、新米FDのkoyuです。 今回のエントリーは世知辛い社会から魂の解放、いや、パンパンになったメモリの解放についてです。
ActionScript3.0でスライドショーなど動的に画像をロードするようなコンテンツを作成する場合に画像をロードし、removeChildしますよね?しかし、画像に対しての参照が残っていた場合に、読み込んだLoaderやDisplayObjectをremoveChildをしただけではメモリが解放されず、ガンガン膨らんできます。
その様はまるで我が国の国債の発行残高のようです。結果として挙動が悪くなったり、ブラウザが落ちたりします。
では、参照が残るとはどういうことでしょうか?
例として挙げられるのは
- ・addEventListenerをしている場合
- ・変数に代入している場合
かく言う、私はハマってしまいして、その経験から本エントリーを書いた次第です。 それでは見ていきましょう
Here We Go!!Flash Lite まとめ
2008/11/06
はじめまして、shiihoです。
普段は主にデザイン作業をしています。
かなーり前からこのブログのstaffアイコンに潜んでいました。
過去に携帯待ち受けの開発をしたので、
Flash Liteについてpdfにまとめてみました。
FlashPlayer10のバージョンチェックの落とし穴
2008/10/19
FlashPlayer10がリリースされ、パフォーマンスや新機能に注目があつまっています。
同時にメジャーバージョンアップに伴い、過去の案件への対応が必要になってくるケースも多いようです。
FlashVars経由でJSON形式のデータをswfに渡す(AS3)
2008/10/07
AS3,FlashVars,JSON,as3corelib,swfObject
こんにちは、さいきんJSON形式のデータの存在を知りましたkijimaです。
XMLでやりとりするより軽いみたいですね、JSON。
案件でJSONデータをFlashVars経由でFlash内に渡すところでつまずいたので備忘録としてエントリーします。具体的な内容は、AS3でFlashVarsを取得する場合はAS2と同じようにはいかない点と、JSONデータをFlash上で扱う場合の注意点の二つになります。
Cookie絡みでFileReference.uploadできない現象
2008/09/30
AS2,ActiveX,Cookie,FileReference,sendAndLoad,upload
ちなみにAS2で開発していたときのエピソードです。
Basic認証がかかっている開発環境やログイン・ログアウトが絡んでくるFlashの場合、APIにリクエストを送る際にはいろいろとワナがあるようですね。今回はまさにそんなFlashを開発していたときに遭遇した出来事でした。
現象が起こった要因をまとめると、こんな感じです。
・Basic認証がかかっている環境だった。
・仕様上、ログイン状態のユーザーでないと画像のアップロード出来ない仕様。
・ログイン状態のセッション情報をCookieで保存していた。
・環境はWindows(Vista)。
そのときの状況を思い出しつつ書いてみたら、想像以上のくどい長文になってしまいました…。
その場で終わるトゥイーン3種
2008/09/24
したい事がよくあり、何度かに動きを分けてやればいいんですが面倒なのでその場
で動くだけのものをいくつか作りました。
ずーっとプルプルさせるのも、マウスに反応させるのもありです。
使う場面はいろいろですが今回はマウスに反応させてあります。
XML の扱い方いろいろ
2008/09/07
XML からデータを取り出してどのように処理させるかという処理の実装が、以外と人によって違うんだなぁと最近思い至りまして。
infoObj みたいな Object に一旦情報を移してやる人と、XML のノードをそのまま情報として渡してしまう人がいるのですが、性能的に問題なければ自分は大体後者でやっています。XML ノードを丸ごと渡すことの利点は情報が増えたり XML の内容が変わったときの改修の手間が楽というのと、XML をそのまま情報として保持しているので後でソースを見たときに理解しやすいというのがあります。
以下、写真のスライドショーの処理を例に書いてみました。
// 「一旦情報を移すやり方」
override protected function run():void {
_tUrlLoadThread = new URLLoaderThread(new URLRequest(INFO_XML));
_tUrlLoadThread.start();
_tUrlLoadThread.join();
next(loadedInfo);
}private function loadedInfo() {
var xml:XML = new XML(_tUrlLoadThread.loader.data);
var len:Number = xml.items.item.length();
for (var i:Number = 0; i < len; i++ ) {
// 先にデータを取りだして処理する
var photoInfo:Object = new Object();
photoInfo.url = xml.items.item[i].url;
photoInfo.title = xml.items.item[i].title;
photoInfo.date = xml.items.item[i].@date;
_photoInfoList.push(photo);
}
Main.getInstance().initSlide();
}// 「XML のノードをそのまま情報として渡すやり方」
override protected function run():void {
_tUrlLoadThread = new URLLoaderThread(new URLRequest(INFO_XML));
_tUrlLoadThread.start();
_tUrlLoadThread.join();
next(loadedInfo);
}private function loadedInfo() {
var xml:XML = new XML(_tUrlLoadThread.loader.data);
var len:Number = xml.items.item.length();
for (var i:Number = 0; i < len; i++ ) {
// とりあえず情報をノードごとまるっと渡して処理する
_photoList.push(new Photo(xml.items.item[i]));
}
Main.getInstance().initSlide();
}
曲線のグラデアニメ
2008/09/01
ASでラインアニメーションを作る際、線の途中で色変えたりアルファいじったり
する時には当たり前のようにあー細切れにしてlinetoでつないであれねー、と
やっていましたが、昔はそういえばシェイプトゥイーンでグラデーション変えて
簡単にできてた事を思い出したので調べてたらありました。
TweenMaxが速いぽい
2008/08/25
http://blog.greensock.com/tweenmaxas3/
TweenMaxが速いと聞いて実際に使ってみました。
使ってみた感触
カヤック10年史の3Dビューなど使ってみましたが確かにTweenerに比べると高速で負荷も軽いようです。
Tweenerなどに比べて大きな特徴は、大量のオブジェクトを動かすのが得意な部分ですが、反面どことなく動きというか処理が荒いような気がします。(気のせいかもしれません)
使い方は簡単
TweenMax.to(mc, 3, {x:311, y:340, ease:Bounce.easeOut});
Tweenerにおけるtime値が引数になってますが、ほぼ同じ感じでかけます。
DoTweenMaxコマンド
ついでにProgression用のコマンドにしてみました。
途中でへたれたのでMaxとLiteしかないです。&パッケージをどうしたらいいかわからなかったので適当にjp.progression.commandsにしてますが適当にどうぞ。
いっしょにTweenMaxもダウンロードしてください。
AS3のオレ様Loggerをご紹介
2008/08/23
AS3,FireBug,FlashPlayer10,trace,デバッガ
どうも時々ActionScriptとも戯れているプログラマのaragaです
僕はFlexBuilderを使って開発をするのですが、FlexSDKにはFlashと違ってビルド時にTraceアクションを省略するオプションがありません。
そこで、Flexで開発するときは、trace() は絶対に使わないでオレ様Loggerを使用するというのを僕の中のルールにしています。
このオレ様LoggerがFlashPlayer10と戯れたり、AIRのアプリを作ったりするときにけっこう威力を発揮するなと最近思い始めたので、少しご紹介いたします。
特徴
- エラーレベルによる出力の管理
DEBUG(=0),INFO,WARNING,ERROR,FATAL(=4) - ObjectとArrayの視覚化
ObjectとArrayを [key] => valueとして階層ごとにインデントを付けて視覚化できます - 出力方法をカスタマイズできる
出力処理部分にStrategyパターンを使用しており、実装するインスタンスを用途に合わせて変更するだけで、多彩な出力ができます。
(ILoggingを実装してput(string:String, level:int=0):voidを作るだけ) - 軽量
出力関数に4行でたどり着くので軽いです。(エラーレベル判定、出力文字追加、出力)
as3はxml解析が簡単に
2008/08/19
as2でXMLクラスを使用して解析するとすごく面倒で、慣れるまでに時間がかかってしまいます。
なのでas2で開発するときはいつもcasaframeworkを使用して解析してました。
そんな中as3でXMLクラスを使う機会があったので使用してみたところ、ものすごく簡単でびっくりしてしまいました。
なのでメモ程度にソースコードを載せておこうと思います。
progressionはじめたお
2008/07/29
どうも暑い夏も旧日本陸軍の風貌のさぶろうです
こう毎日暑いと規模感のあるflashサイトを作るときに必要な全体の設計力が落ちますよね
日々全体的な設計力、作業時間(もっぱら細かい演出に使う時間)不足に悩む私としましても
頭を抱える問題なわけであります。
そこでさしあたって噂のProgression Framework試してみることにしました
http://progression.libspark.org/
version 3.0.0 Betaも出ておりますが
とりあえずversion 2.0.22です
インストールには別途 Adobe Extension Manager が必要です。
今回はチュートリアルのビデオにそってEasyCastingModeですすめてみました
ふむふむ
うん出来た。
なるほどこれは意外と自分にあってるかもしれない。
クラスベースでしっかりやると
Spangle call Lilli line オフィシャルサイト: http://lilliline.com/
こんな感じや
写真制作・デジタル画像制作・ストックフォト|amanagroup: http://amana.jp/
こんな感じのサイトも作れるみたいです
なお噂の
・コマンドが超便利らしい
・右クリックがいいらしい
という部分はまたの機会に。
改行コードの検索
2008/07/25
str.split("\n"); // str = 文字列
という感じにブログの文言などを改行コードで分割しようとしたのですが、どうも "\n" で改行が検索されなくて、しばらくその機能をホーチング博士していたのですが、次のようにしました。正しいやり方かはちょっとわからないのですが、今のところ元気に動いているようです。
str.split(String.fromCharCode(13)); // str = 文字列
もし「こんなスマートなやり方あるよ!」という方がいらっしゃいましたらぜひお知らせくださいませ!
Number型を条件分岐に使うときは気をつけろ!
2008/07/22
最近ActionScript2.0で作られた某サービスが突然動かなくなったので対応しましたが、AS2.0の挙動で不可解な点があったのでご報告します。
ExternalInterfaceを使ってJSと通信している機能において以下のようなことが起きました。
1.Numberを含む可変のプロパティをObjectにまとめてJSからSWFに渡していたところ、
Number型だったはずのプロパティがStringに変わっていた。
これにより
switch(object.number) { case 1: hoge(); break; ・・・ }
というswitch条件が全て当てはまらなくなっていた。2.1と同じ変数をNumber型で型宣言している変数に代入していたが、Stringの挙動をしていた。
これにより
var flag:Number = object.number; if (flag) { //object.number==1の時に動く予定の処理 }
というif分が必ず条件に一致するようになったこの2つのバグより以下のことが考えられますので気をつけましょう。
Flashで全てのボタンを一時的に無効にする小技
2008/07/17
こんにちは
aragaです。先日初めてFlexではなくFlashCS3を使いました。
カヤック10周年サイトの「みんなのお祝いメッセージ」はアニメーションにこだわりを持っているので、一時的に全てのマウスイベントを無効にしたりしています。
こんなとき、全てのボタンにremoveEventListener()して、回復時に再度addEventListenerなんてしていたら、僕みたいな怠惰なプログラマは気が狂ってしまいます。
そこで、ちょっとした技を考えました。
右クリックメニューに別ウインドウで開く
2008/07/09
よくしますが、右クリックメニューに追加してみたいと思います。
せまいエリアでのテキスト表示
2008/07/03
リストの一覧表示時などに、きまったエリアのサイズ内にテキストを表示する場合に、
見出し的に表示しますが、その場合にそのまま流し込むと文字の半分で切れたりする
ので文字の最後を…に置換したりロールオーバーでスクロールさせたりしますが、その
サンプルです。
上が表示文字の最後を…などに置換するもの、
下がロールオーバーでスクロールさせて見えるもの。
文字列と表示したいサイズの幅を設定します。
こんな感じ。
tx_auto01.setText("あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ",150);

FLVPlayBackクラスの見落とし
2008/06/25
今まで携わった案件の中で動画プレーヤーを制作する機会が多々ました。
動画プレーヤーは機能的に同じものを制作することがほとんどで、使用するプロパティーやメソッドなどは決まっているようなものでした。
なのでリファレンスに目を通したのが結構前だったので最近久しぶりに読んでみると新しい発見(自分的に)がありました。
それはactiveVideoPlayerIndexプロパティーです。
このプロパティーを使用することで複数のFLVストリームを管理することが出来ます。
var domain:String = "http://~~"; var def_list:Array = ["title1.flv" , "title2.flv" , "title3.flv" , "title4.flv" , "title5.flv" ]; for (var flvNum:Number = 0; flvNum < def_list.length; flvNum++) { _root.my_FLVPlybk.activeVideoPlayerIndex = flvNum; _root.my_FLVPlybk.contentPath = domain + def_list[flvNum]; }
こんな感じでmy_FLVPlybkのactiveVideoPlayerIndexに番号をふりFLVを管理する感じでしょうか。
デフォルトの管理番号は0なので番号を切り替えて動画を再生するときは
_root.my_FLVPlybk.activeVideoPlayerIndex = 1; _root.my_FLVPlybk.visibleVideoPlayerIndex = 1; _root.my_FLVPlybk.play ();
こういった感じで動画を切り替えることが出来ます。
このプロパティーを知らなかったので今まで結構面倒な動画切り替えをしていていました。
今一度リファレンスちゃんと読み直すとまた新たな発見があるなと思える瞬間でした。
Flashのログ閲覧アプリThunderBoltをいれてみた
2008/06/25
FlashのTrace等ログを表示するものはfirefoxの拡張機能のFlashtracerやarthropodなどがありますよね。
今まではFlashTracerを使用していたんですが、ブラウザで他のFlashを表示していて、そのFlashがTraceを吐いていたりすると全部表示されたりするので(フィルタはかけられますが・・・)、見にくかったりしました。
というわけで、今回はThunderBoltを試してみました。
ソースはThunderBolt公式サイトにて配布されています。
ThuderBoltの便利な点としては、
- ユーザがデバッグログをレベル分け(DEBUG、INFO、WARN、ERROR)できる。
- 出力表示をレベル別フィルタリングできる。
- ストリングだけでなく、配列やオブジェクトの中身もツリー構造で表示してくれる。
- AIR製の外部コンソールに出力できる。
使用方法は、
RGB⇔HSV変換とCMYK変換
2008/06/19
Flashで色変化するものを作っている時、よく色を濁らせずに彩度のみを
変更してアニメーションさせたいことがあるんですが、その時に一度RGBを
HSVに変換して少し変えてもどして、という時のためのサンプルです。
実際はcolorutil.asなんかを使えば楽だしいいんですが、たまには自分で
書こうというわけでやってみます。
MCのスナップショットをとる
2008/06/12
MC(というかDisplayObject)のスナップショットをBitmapDataとして取る方法を自分なりにメモします
var spt :Sprite = new Niku() as Sprite; // リンケージで生成した表示クラス var bmp:BitmapData = new BitmapData( spt.width, spt.height ); bmp.draw( spt ); addChild( new Bitmap( bmp ) );
基本的にはこれでスクリーンショットとして取得したBitmapDataを表示することができます
ですが、もし原点が中身の表示オブジェクトに対して左上に来ない場合があります。
そうするとただBitamapData.drawしても切れてしまいます。
SWFAddressでページタイトルやアドレスバーを遊んでみる
2008/06/11
Javascriptを使ってページを更新することなくURLを変更することで SWF内にユニークなURLを設定できるというとても便利なものです。
ですが、今回はその本来の恩恵を一切うけとらずにページタイトルやアドレスバーの 文字をアニメーションさせてみたいと思います。
AS3のFileReference.postData的なもの
2008/06/10
以前書いたFileReference.postDataのAS3版を探していたらちゃんとありました。リファレンスでは見つけられなくて野中さんのFileReference.onUploadCompleteDataイベントで発見しました。ありがとうございます。
URLLoader.dataなどと違ってflash.events.DataEvent.UPLOAD_COMPLETE_DATA というイベントに含められて渡されるようです。
以下、DataEventの詳細はLiveDocsより引用します。
http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/flash/net/FileReference.html#event:uploadCompleteData
プロパティ 値 bubblesfalsecancelablefalseは、キャンセルするデフォルトの動作がないことを示します。currentTargetイベントリスナーで Event オブジェクトをアクティブに処理しているオブジェクトです。 dataファイルのアップロードが正常に終了した後、サーバーから返される未処理のデータです。 targetアップロードが正常に終了した後、データを受信する FileReference オブジェクトです。
受け取ったDataEvent.dataプロパティはStringで、XMLなりJSONとして処理することができます。
import flash.events.DataEvent; import flash.net.FileReference; import flash.net.URLRequest; import com.adobe.serialization.json.JSON; var fileRef:FileReference = new FileReference(); fileRef.addEventListener( Event.SELECT, onSelectFile ); fileRef.addEventListener( DataEvent.UPLOAD_COMPLETE_DATA, onUploadData ); fileRef.browse(); function onSelectFile( e:Event ) { var url :URLRequest = new URLRequest("/example/api/path"); fileRef.upload( url ); } // JSONを受け取ってみる function onUploadData( e :DataEvent ) { trace( e.data ); // { "success": 1 } trace( JSON.decode( e.data ) ); // [Object Object] }
File.nativePathの罠?
2008/06/09
mp3プレーヤーのAIRを開発していた時にハマった罠についてメモ。
File.nativePathだとOSXで読み込めず、Winで実行すると大丈夫。
これはいったいどういうことなんだ?と、検証機のMacBookの前で一瞬ハテナマークが飛び交いました。
ひとまず謎を解くためにものすごく単純なコードに落として検証してみました。
ドキュメントディレクトリーにあるhoge.mp3を読み込んで再生。
import flash.filesystem.File; import flash.net.URLRequest; import flash.media.Sound; var _path:File = File.documentsDirectory.resolvePath("hoge.mp3") trace(_path.nativePath);// C:\Users\murai\Documents\hoge.mp3 trace(_path.url);// file:///C:/Users/murai/Documents/hoge.mp3 var _sound:Sound = new Sound(); var _channel:SoundChannel= new SoundChannel(); _sound.load(new URLRequest(_path.url)); _channel = _sound.play(0,0);
Winだと
_sound.load(new URLRequest(_path.url));
でも
_sound.load(new URLRequest(_path.nativePath));
でも鳴るんですが、MacだとFile.urlの方でしか鳴りません。
スラッシュ(/)とバックスラッシュ(\)の違いはAIR側で吸い取ってくれるんですが、Macで使うにはこの書き方だとfile:///ってやつ("app-storage"のURL Schemeというそうです)が必要らしいです。
nativePathは素直にそれぞれのOSにあったパスを返してくれますが、urlはfile:///○○の形で帰してくれます。
Macで突然ファイルが読めなくなった!となったらまずここを確認してみると、あっさり解決するかもしれません。
リファレンス
File.nativePath
File.url
はじめてのFlash Lite1.1
2008/06/09
ときに、普段通りにコードを書いているとつまづく点があります。
その代表的な例として、以下の2つがあげられます。
【変数の参照方法】
これは以前、shimadaも書いていましたが、今回は
もう少しやっかいなtellTargetの使い方をしてみます。
たとえば、AS2.0で、
hoge_mc._x = 100; if(hoge_mc._x == 100){ fuga_mc._x = 200; }
というのを、Flash Lite1.1で書いてみると、tellTarget("hoge_mc"){ _x = 100; } tellTarget("fuga_mc"){ if(/:hoge_mc._x==100){ _x = 200; } }
のように、:/hoge_mc._x として、tellTargetの外側から別のtellTarget内 の変数を参照することができます。【funcitonが使えない】
そしてもう一つ、Flash Lite1.1にはfunctionがありません。
そのかわり、callというメソッドを利用します。
たとえば、funcHogeというラベル名のフレームを作り、その中に実行したい処理を
書きます。
call("funcHoge");
といかんじで、呼んでやれば、functionのように使うことができます。ただし、call を定義するときは、再生時に実行しないフレームに
書きましょう。一フレーム目に書くといきなり実行されるので注意が必要です。
AS2.0で当たり前のように書いていたことが、Flash Lite1.1だと動かなく、
調べているだけでも無駄な時間を費やしてMK5な瞬間があります。
今後も、そういった点に着目していき、記事を投稿していこうと思います。
CS3版 フォントのダイナミックなローディング
2008/06/06
FACEsさんのフォントのダイナミックなローディングをFlashCS3でもやってみました。「AXIS Std H」を埋め込んだサンプルをつくりました。
ホタルの動き その2
2008/06/05
Marilena Object Detection in AS3
2008/06/04
SPARK Projectにて、
Marilena Object Detection in AS3
を公開いたしましたので、そのお知らせです。
詳しくは上のurlを見ていただくとして、ポイントは、
・顔認識をサーバサイドのプログラム無しで、Flash(+認識用の静的なzipファイル)のみで行うことができる
・そこそこ現実的なスピードで動く
・モデル(haar-cascadeのxml)は事前にOpenCVの学習方法で作成したものを使用可能
Flashで顔認識したサンプルはこちら
Marilena ObjectDetection in actionscript3 example: FaceDetection
ぜひ、いろいろ遊んでみてください!
パーティクルで文字を浮かび上がらせてみる
2008/05/30
・今回作成してみたのはこちら(マウスダウンするとパーティクルが発生します。)
AstroのDynamic Sound GenerationとFileReference
2008/05/29
Dynamic Sound Generation,FileReference,FlashPlayer10,Flex,MP3FileReferenceLoader,Sound
こんにちは
先日入社したFlex好きPHPプログラマのaragaです。
AstroのDynamic Sound GenerationとFileReferenceをFlexで試してみました。
Flash Player10のインストールとFlexBuilderでのAstroの使い方は Spark project の wiki とか kamijoさんのブログを参考にしてください。
やりたいこと
- FileReferenceを使ってローカルのMP3を再生する。
- 再生中のMP3にエフェクトをかける。
Re:1フレーム目に書き出されるファイル容量
2008/05/28
ちょっと前のshuのエントリーで
しかし、リンケージ設定で最初のフレームに書き出しにチェックを入れていなくても、1フレーム目に書き出される容量がそれなりの量になってしまう事が有るような気がします。
なぜそういう風になるのかいまいちわかってないんですが、なんなのでしょうか。。
ナニカ知ってるひと教えてくださぃ。。。
となっていたので答えてみます。
別に普通にヘルプに書いてあるんですが、パブリッシュ設定の(CS3です)
この設定ボタンを押すと出てくる
このパネル。
フレーム内のクラスの書き出し という項目が "1"になってると思います。
MCのリンケージ設定にある、最初のフレームに書き出しと同じパターンで、こいつが悪い子です。
コレを2フレーム目とかに変えて、かつ、何もimportしない様にプリローダーを作れば綺麗にいけるみたいです。
パブリッシュパネル設定の"サイズレポートの作成"にチェックを入れるとパブリッシュ時に出力にSWFの部品(?)単位の容量が書き出されます。
色んなライブラリimportしてると結構な容量を食ってたりします。
意外と馬鹿にできないので、めんどくさがってflash.event.*みたいなことはしない方が良さそうです。
shuのエントリーにあった
プリロード用のswfをプロキシにしてメインのswfを読むなどの事をして乗り切ってます。
は一番手っ取り早い解なので、僕もこれで実装しています。
この辺アンケートとって見ても良さそうですよね。
皆さんはどんな実装をしてますか?
ObjectDumperでオブジェクトの内容も丸見え。
2008/05/24
あっという間に、弊社の「旅する支社」制度、自分の滞在最終日になりました。
この「旅する支社」制度、参加する社員がいっせいにイタリアオフィスに移動するわけではなく、数人ごとのチーム編成を組んでローテーションで時期をずらしながら約一ヶ月間滞在しています。
さて、本題のObjectDumperについて。
本当は「ポップアップブロックをブロックして指定サイズでウィンドウを開く方法」を記事にまとめるつもりだったんですが、いろいろ調べていくうちに迷宮に入ってしまったので、今回は最近Flashで感動したObjectDumperについて(いまさら!)まだ知らない方へ向けての意味も込めて記事にしてみました。
音の波形で遊ぶ
2008/05/23
CS3から音が音量だけでなく波形で取れるようになっていますので、
ちょっと遊んでみます。

こんな感じ。
これは等間隔に音の強さを取って、それをcurveToでつなげています。
このように横に並べて使わなくても、円形にする、一定以上の強さに
なった時だけオブジェクトを発生させるなどの使い道があります。
参考:サウンドスペクトラムのコンテスト
AS3 Sound Spectrum Contest Results!!
phpとの連携
2008/05/21
flashは外部との連携に非常に優れていて、仕事なんかでよくAPIやCGIなどにアクセスし動的に何かを行ったりすることがあります。
そんな外部との連携とよく行われるのに対し、あまりAPIやCGIのロジックの知識が無かった自分は勉強がてら静的なphpを書いてみました。
そこで今回作ったphpはflashから受け取った値を指定したメールに送信するという、シンプルなものを制作してみました。
AS2.0とAS3.0の違いでわかる定数クラス(またはメンバ)のメリット
2008/05/14
AS2からAS3に移った時に、クラスが増えたな、という印象がありました。
たとえばURLRequestMethodクラスとかTextFieldAutoSizeクラスとかやたらと値を取得するためのクラスがあります。
はじめはこうなっている意味がわからず、ただただ冗長なコードを鬱陶しく思っていました。
ですがAS2にもどってみて、エラーの見つけにくさやイベント名のばらつき("change"と"onChange"など)を逆に不便に感じてしまい、 特定の値に名前がついていることが開発者にとってとても重要なことに気づきました。
カスタムポリシーファイルの記述と読み込みのまとめ
2008/05/13
Flashから別ドメインにあるファイルにアクセスする際には、読み込みたいファイルが置いてあるサーバにカスタムポリシーファイルを設置する必要があります。 このファイルの設定や読み込み方にはまったので、まとめてみたいと思います。
- 基本的な記述方法
例をあげますと<?xml version="1.0"?> <cross-domain-policy> <site-control permitted-cross-domain-policies="all"/>//必須ではない <allow-access-from domain="level0.cuppy.jp" to-ports="80" secure="true"/> </cross-domain-policy>
のような形になります。
各属性に設定できる値は、
AIR:タスクトレイアイコンにメニューを設定する
2008/05/08
以前にタスクトレイにアイコンを入れて常駐させる記事を書きましたが、
ここで右クリックメニューを追加してみます。
var trayicon:SystemTrayIcon;
var traymenu:NativeMenu;
trayicon = (NativeApplication.nativeApplication.icon as SystemTrayIcon);
var traymenu = new NativeMenu();
trayicon.menu = traymenu;
var exitmenu:NativeMenuItem = new NativeMenuItem("終了");
exitmenu.addEventListener(Event.SELECT, function(){NativeApplication.nativeApplication.exit();});
traymenu.addItem(exitmenu);
trayicon.addEventListener(MouseEvent.MOUSE_DOWN, closewin);
こんな感じ。右クリックすると終了のメニューが出てきます。
選択する時のイベントはEvent.SELECTになります。
FlashLite1.1で最初にはまりやすい落とし穴
2008/05/08
FlashLite1.0と1.1は制限の多さから何かと嫌煙されがちです。
パスを指定する際、普段書きなれているドットシンタックス"."が使えず、スラッシュシンタックス"/"で記述する点もその理由の一つだと思います。
個人的に一番面倒だと感じているのが、シンボルを指定する場合に"tellTarget()"を使わないといけないところです。
this.A.B.symbol._alpha = 50;
と書いていたものがtellTarget("A/B/symbol"){
_alpha = 50;
};
慣れれば大したことはないですが最初は案外ミスってしまいます。
pullDownBar
2008/05/07
自分がflashを始めたころプルダウンメニューを制作しようとしてとても苦労しました。
また意外とネットに自分が欲しいサンプルが無かったりして大変だった記憶があります。
そこで今回はプルダウンバーを作ってみました。
※actionScript2.0
何かと1つのコンテンツを制作するときプルダウン機能を使用することが多いと思うので、サンプル程度に見てもらえればいいなと思います。(まだ自分もflash初めて浅いのでコーディングて突っ込みたくなると思いますがそこは大目に見てください 笑)
1フレーム目に書き出されるファイル容量
2008/05/07
kijimaも以前書いて(リンケージ設定をして容量の大きいswfファイルをローディングするときの注意点)いましたが、リンケージ設定などにより1フレーム目に書き出されるファイル容量が増えてしまうことはありますよね。
しかし、リンケージ設定で最初のフレームに書き出しにチェックを入れていなくても、1フレーム目に書き出される容量がそれなりの量になってしまう事が有るような気がします。
なぜそういう風になるのかいまいちわかってないんですが、なんなのでしょうか。。
ナニカ知ってるひと教えてくださぃ。。。
asクラスをインポートしていろいろしていくうちに増えていってるような気がするんですが、それ以降は未調査です。
今のところ原因がはっきりわからないので、プリロード用のswfをプロキシにしてメインのswfを読むなどの事をして乗り切ってます。
AIR:SQLiteのDBの読み書き
2008/05/02
前回はテキストファイルの読み書きをやったので、今回はDBを使ったデータ保存と
読み込みについてやります。サンプルは今回も自動保存メモ帳です。
SSL+PHP(サーバーサイド)+Flash
2008/05/01
http環境では動いていたFlashがSSLに移したとたん動かなくなった。
エラーの内容はioErrorのストリームエラー。
発生ブラウザはIEのみ。
「Safari、Firefox等はばっちり動いているのになぜ!!」って感じでいろいろ調べてみたら、どうやら、サーバーサイドプログラムのレスポンスヘッダーの影響によるものらしい。
レスポンスヘッダーに
Pragma: no-cacheがあったら、値を「no-cache」以外の値に変更すればokみたい。
参考にさせていただきました。
ありがとうございます!
可変するテキストフィールドとフキダシのサンプル
2008/05/01
たとえばツールチップみたいなフキダシをつくるときに、1行に収まる場合は文字に幅がフィットし、ある程度の文章量があったら幅固定で改行して流し込みたいことがあります。
テキストフィールドの値の長さによって改行モードを切り替えるサンプルです。
前から欲しかった拡張パネルをSWFで作ってみる
2008/04/28
ちょっと大き目のキャンペーンサイトをオーサリングするたびに思っていたんですが、
MCインスタンスを開いて、ネストされたインスタンス名をつけて、また戻って。。。という風に行き来が激しくて無駄な動きが多くなってきます。
一応デフォルトとしてウインドウの複製(ctrl+alt+k)というのがあるのですが、他のオーサリングツールと同時起動していたり、どんどんパネルを増やしていくとメモリ消費が激しいのか段々不安定になっていって使い物にならない。
そこで、解決できる拡張パネルとコマンドを作ってしまえば楽になるかも!と思い立ち、模索しながら ただいま絶賛作成中です。
で、いくつかハマったのでリマインド。
1.そもそもデバッグ環境どうしよう?
FLASH IDEの中のパネルを作るという事は、まさかパブリッシュして、FLASH再起動!?と思ってある程度整えてみました。
- windowSWFに直書き出し
WinVistaではC:\Users\[userName]\AppData\Local\Adobe\Flash CS3\ja\Configuration\WindowSWF になります。ここにパブリッシュ設定で書き出し先へ指定。 - キーボードショートカットを登録
windowSWFにあるswfはメニュのウインドウ→他のパネル に現れるのでコレをキーボードショートカットに設定。(僕はctrl+\にしました。)
これでパブリッシュしてショートカットで即プレビュー。
パネルを出したり消したりしてるので、周りのFlasherから不思議な目で見られてました。
2.jsflの関数を呼び出し
どうも、MMExecute()での1行書きだと効率が悪い+物足りない部分が出てきたので、jsflから呼び出すことに。
適当なjsflをどこかに保存して、fl.runScriptで簡単呼び出しができます。
c\temp\とかもいけます。
fl.scriptURI(現在実行中のjsflのパスを返す)というプロパティがあるので、組み合わせておくと余計なことを考えないでよくて便利です。
test.jsfl内に
function jsflFunc(){ return "testMessage!" }
と記述し、
var command:String='fl.runScript(fl.scriptURI , "jsflFunc")'
var mess="JSFL : "+MMExecute(command)
trace(mess)
これでJSFL : testMessage! と出れば成功。
どうやらうまくいったようです。
3.選択したdocument.selectionを保持したい
ヘルプの拡張機能の部分をざっと見たところ、どうやらElementに対してのユニークなプロパティは定義されていないようでした。
InstanceNameが取れるのでそれがユニークなはずだよね?ということなんでしょうか。
一応、fl.findObjectInDocByName(instanceName, document)とElement.setPersistentData、Element.getPersistentDataの組み合わせでなんとかなりそうですが、汚染しちゃうのが厄介。
いい方法を絶賛模索中。引き続きがんばります。
演出の基本ロジックサンプルその2
2008/04/24
その~と名前付けておいて2回目忘れていました。
今回は球面上の移動サンプルです。かなり昔のソースをAS3に移植しました。

うろうろするものが作りたかったんですが、XY平面で普通にやっちゃうと直線的だしなんか
奥行きも欲しいよね、ということでZ軸をもたせて球面上を動き回るものにしました。
AIR:タスクトレイ常駐させたい
2008/04/24
常駐系のメモパッドを作ろうとしてたらタスクトレイにアイコン出す方法は
すぐに見つかったんですがタスクバーから消す方法がFLEXでのサンプルしか
見当たらなかったので、いろいろやってみました。
今回はwindowsのみターゲットです。
AIR:flvプレーヤーを作ってみました
2008/04/21
正式版が出たAIRですがいざ作ろうとしたらbeta1,2,3の頃のそのまま使えない
サンプルが入り混じっていて今使えるコードが判りにくいのでサンプル作って
みました。AIR正式版で動作します。
FLVファイルをdrag&dropで再生するFLVプレーヤーです。
DisplacementMapFilterを整理する 3
2008/04/14
DisplacementMapFilterを整理する 2
2008/03/31
前回のサンプルで気になるのは、フィルタの効果が規則的すぎる点。
同じ場所には同じ様にかかっています。色は変化しているけどドットが削られている部分は
常に削られている。ずっと見てるとばれるね、自然じゃない。
DisplacementMapFilterを整理する 1
2008/03/31
いろいろと遊べそうなんだけど、把握しきれずにお決まりのゆらゆらとか球面拡大とか、
あと実験的な場でしか使いにくいDisplacementMapFilterについて整理してみます。
FPSカウンタ
2008/03/24
SWFをパブリッシュする際にフレームレート(1秒あたりのフレーム数)を設定する事ができますが、 再生される際に設定通りのレートがで動くわけではありません。 再生するマシンスペック等により実際のフレームレートは変動します。 実質どの程度のフレームレートが出ているかを計算する方法はあると思います。 ちょっとどのように計算するか聞かれましたので、需要あるのかなとあげてみたいと思います。
コードは以下のようになります。//変数定義 var currentTime;//現在の時間用 var frameTime;//フレーム間のミリ秒数用 var prevFrameTime = getTimer();//前フレームのミリ秒数格納用 var secondTime;//ミリ秒格納用 var prevSecondTime = getTimer();//1000ミリ秒経過を確認する変数 var frames = 0;//再生フレーム数 var counter = this.createEmptyMovieClip("counter", this.getNextHighestDepth());//毎フレーム計算するためのダミーMC counter.onEnterFrame = function(){ currentTime = getTimer(); frameTime = currentTime - prevFrameTime;//フレーム間の経過ミリ秒 secondTime = currentTime - prevSecondTime;//経過ミリ秒 if(secondTime >= 1000) {//1000ミリ秒(1秒)以上経過したら frames = 0; prevSecondTime = currentTime; }else{ frames++; } prevFrameTime = currentTime;//現在のミリ秒を再代入 } _root.fps_txt.text = frames.toString() + " FPS / "+frameTime+ " MS";
最後にステージに表示用のfps_txtというテキストフィールドを用意します。
プレビューする際に表示してあげたりすると、ちょっとできる感がでていいかもしれませんね。 ただ、あくまでも目安なのであしからずです。
ブレンドモードの確認用サンプル
2008/03/07
全画面FIX[AS3]
2008/03/07
kijimaが全画面について書いてるのでAS3版です。
コピペ用に溜め込んでるソースから放流。
stageWidthやstageHeightになってる事に気づけばそのままですね。
ソースは以下。
全画面Flashで映像を再生してみた(サンプル付き)
2008/03/07
Flashを始めたての頃、実は全画面Flashに密かな憧れを抱いていました。いかにも「俺はFlashなんだぜ」というアイデンティティを、ブラウザというキャンバスをめいっぱいに使って主張されるたびに、僕にはそれがまぶしく光り輝いて見えたのです。どちらかというと、憧れよりも嫉妬に近い感情だったのかもしれません…。
なので、今回は全画面で映像を再生するFlashのサンプルを作ってみました。

真ん中に配置されたボタンをクリック(onRelease)すると、このブログを開きます。右上にあるMCは、ウィンドウサイズを可変しても常に右上に表示されるようになっています。
ポイントは、html側の記述でobject要素に対してwidth:100%、height:100%とするところでしょうか。ブラウザによって全画面表示がうまくいかない場合があるようですが、htmlファイルを標準準拠モードではなく、DOCTYPE宣言を記述しない互換モードにすれば、問題なく表示できるようです。
映像を再生する部分は、先日おこなったフットサルの試合の映像FLVファイルをswfファイルに直接埋め込み、親swfから MovieClipLoaderでFLVを埋め込んだ子swfファイルを読み込む、といういたって簡単な仕組みになってます。ローディング直後にリサイズ前の映像が一瞬見えてしまいますが、とりあえずこの時点でのファイルをアップしておきます。
080307fullscreen_video.zipファイルの中身:fla,swf,html,jsなどパブリッシュ時に生成されるもの一式。
携帯の待ち受けFlash時計を作ってみた
2008/03/03
このブログをご覧の方ならすでにご存知だと思いますが、最近はWEB上だけでなく、身近にあるデバイス(機器)にもよくFlashの技術が使われています。
たとえばそう、携帯電話。…今回の記事のタイトルを見ればもうおわかりですね。この文章の流れは偶然ではなく必然です。 と、いらぬ前置きはこのくらいにして、早速本題へ入ります。
待ち受けFlashでできること
携帯本体から日付、曜日、時刻、バッテリー残量などの情報を取得できるので、それらの情報に連動させてカレンダーや時計などが作れます。今回はまず基本的な部分として、時計をつくってみました。zipファイルの中身は、flaファイル(CS3形式)とswfファイルの二つです。
080303clock.zip
左上に日付、曜日を表示。真ん中の段は左側が今日一日の残り分数、右側に現在の時刻を。下の段は左側に今日一日の残り秒数を、右側に今日の残り時間を表示しています。あえて一日の残り時間を表示したことで、24時間の尊さを改めて意識できる仕様になっています。(笑) auのmediaskinで動作検証しました。そのままお使いの際はswfファイルをメールに添付して携帯に送信してください。
モバイルFlashの制作環境について
今回は基本として待ち受けFlash時計を作ってみましたが、ほかにも携帯のメニュー画面となるインターフェースや、Flashでゲームも作ることができます。Adobe CS3シリーズから登場したDevice Centralというモバイルサイトの動作検証ツールのおかげで、モバイルFlash制作時の効率もぐーんとアップしたみたいです。
とはいえまだまだ携帯各社・各機種から出されている情報は足並み揃わず、ネット上に転がっている情報も少なく、Flashの容量制限もあることからか、モバイルFlash制作においてはまだまだ面倒な部分はたくさんあるように感じます。各キャリア×機種別で動作確認するとなれば膨大な数を検証しなければなりませんし。まぁ、こうやって個人で楽しんで作るぶんには友達にも手軽に見せられていいですよね。
AS3のgotoAndStop()問題とEvent.RENDERの使い道
2008/02/19
AS3でタイムラインでgotoAndStop()やgotoAndPlay()を呼んだ直後、ステージに配置した要素にアクセスできないのは有名な話ですが、この現象の解決策があるようです。
継承するときサブクラスで値の橋渡しが必要
2008/02/13
AS2で、継承するときの細かい挙動についてあいまいだったでいまさらながら検証してみました。
プロパティの継承
サブクラスで再定義されたプロパティは上書きされ、スーパークラスのものは同じようにアクセスできる
// A.as class A { private var _a:String= "A"; private var _b:String= "A"; function A() { trace( _a +" : "+ _b ); } }
// B.as class B extends A { private var _a:String = "B"; }
// Timeline new A(); // trace-> A : A new B(); // trace-> B : A
この場合、コンストラクタを再定義する必要がありません。
コンストラクタに引数がある場合
Aのコンストラクタに引数を定義します。
// A.as class A { private var _a:String= "A"; function A( p:String ) { trace( _a +" : "+ _b +" : "+ p ); } }
// B.as class B extends A { private var _a:String = "B"; }
// Timeline new B("hoge"); // trace-> B : A : undefined
というふうに、引数がうまく継承されません。
Bクラスを次のように変えるとうまくいきます。
// B.as class B extends A { private var _a:String = "B"; function B( p ) { super( p ); } }
こういう部分が非常にあいまいだったのでスッキリしました。
さらに、仕組みとしてしっかり理解するために
現象としてはこれでスッキリするんですが、仕組みとしてどういう規則があるのかいまいちわかりませんので、自分で租借しなおすためにも内部的にどういう意味になるのか調べてみました。
不思議なのは、継承の仕組みとしてプロトタイプチェーンという階層的なツリー構造をたどるのですが、コンストラクタだけ引数をスーパークラスの関数に引き継がれないことです。
野中さんの記事でそういうのを見た気がしたので探してみたらありました。
Flashテクニカルノート:ActionScript 2.0と1.0の継承について
[*6] クラスにコンストラクタが定義されていない場合、空の関数がコンパイル時に自動的に作成されます(「クラスの使用 - シンプルな例」参照)。また、サブクラスのコンストラクタ関数でsuper演算子による呼出しを行っていない場合、コンパイラは自動的にスーパークラスのコンストラクタへの呼出しを生成します(「クラスの作成と使用」参照)。
つまりコンストラクタに関してはチェーンをたどるのではなく、空の関数を生成するんですね。
- new B("hoge")する
- Bクラスのコンストラクタがない
- Bクラスのコンストラクタがないので空のコンストラクタを生成する
- Bクラスのコンストラクタ内でスーパークラスのコンストラクタを呼び出してない(ここで引数が渡されなくなる)
- 内部的にAクラスのコンストラクタの呼び出しが生成される
- 生成されたコンストラクタが呼ばれる
この状態を模式的にあらわすと下記のような仮のコンストラクタを生成しているような感じだとおもいます。
//生成された状態(引数がなくなってる><) function B(){ super(); }
プロパティやメソッドにおいては発生しないところなので混乱してしまいましたがこれでスッキリしました。
わからないときこそ説明する気持ちで調べて書いてみるとよくわかっていいですね
あと、実はstaticメンバについてまだ理解し切れてないのですが、それはまたつぎにします。
Dateクラスの便利なところ
2008/02/04
日付や時間を扱うときに利用するDateクラスは本やサンプルでは主に取得につかわれることが多いような気がします。自分も、主にローカルタイムの取得にしか使っていませんでした。
冷静に考えると、かなり初歩的な機能なので、ご存知の方も多いのかもしれませんが、お恥ずかしながら個人的に盲点だった使い方を書いてみます。
簡単にいうと日付を計算する関数
昔懐かしいCGIPerlなどの本には、カレンダーを生成したりするときに曜日やうるう年を自力で計算するアルゴリズムが載っていたものですが、そういうふうに直感的にやると年月日時間の各値を取り出した後に計算とかかなり面倒なことをしてしまいそうになります。
時間のインクリメントはまだしも、日付となると月ごとの日数やうるう年のことを考えると大変頭が痛い計算になりますが、これをDateクラスが簡単に解決してくれました。
var today :Date = new Date( 2008, 0, 31 );
trace( today );
today.time += 24*60*60*1000;today.setDate( today.getDate()+1 ); // 一日分のミリ秒
trace( today ); // 2月1日になってるはず
ということなので、カレンダーを生成するときには基準となる日付でDateインスタンスをつくりtime値を1日分ずつ増やしていけば曜日や月の繰り上がりを気にせずシンプルに書くことができます。
var newyear:Date = new Date( 2008, 0, 1 ); var dayLength :Number = 24*60*60*1000; var dateList :Array = []; dateList.push(newyear); for( var i=0; i<364; ++i ) { var date :Date = new Date(newyear.time + i*dayLength); dateList .push( date ); }
数としてのDateインスタンス
また、Dateインスタンスが1つあれば日付の計算用に(yearとかmonthとかdayとか)いくつも変数をつくる必要がありません。
もたとえば、時計のようなシンプルな実装でも、一時的に使うだけでなく裏側ではDateクラスで計算をして、その結果を見た目に反映するようにつくっておくと、何かとラクだと思います。
つまり、日付を取得するだけでなく、ある種の数として扱えると捕らえるとわかりやすいと思います
function add15Minutes() { this.date.time += 15*60*1000; // 15分進める updateView(); } function updateView() { hour_txt.text =this.date.getHours(); minute_txt.text =this.date.getMinuts(); second_txt.text =this.date.getSecondas(); }
livedocsやAS本にはなかなかこういった概念的な見方をする解説がないのですが、単に機能的なことだけでなく作法や考え方まで含めた解説が増えてくれるといいんですけど。
ちなみに、AS3の場合、timeをNumberとして計算しないとうまくいきませんでした。
こちらが操作している値自体はintでもいけそうなんですが内部的にダメっぽいですね。
AS3のMovieClip.rotation
2008/01/10
AS3ではrotationて0~360ではなくて-180~180なんですね。
地味に躓いたのでメモ。
0~360にマッピングすると 0~180, -180~0になるのですが
AS2と違って範囲内に丸められちゃうので、190は-170になってしまうみたい。
540度とかできないので処理的にちょっとややこしいなあ。
var _rotation = 540;
_rotation += 30;
mc.rotatino = _rotation;
みたいにデータと表現を分けていくといちおう問題はないけど実際の状態(rotaion)からなにか判定したい場合不便かも。
サーバーでキャッシュするときの注意点
2007/12/18
CDN( ContentsDistributeNetwork )という
アクセス負荷を軽減するためのサーバキャッシュ機構を利用する場合、
公開後のファイルの更新をしてもキャッシュを経由してしまうため、
同じファイルの更新はユーザに対して反映されなくなります。
これを回避するには。ルートSWFと読み込む下位SWFファイルに分け、
CDNの対象でないXMLによってファイル名を外部化(つまり動的に)することで
まだキャッシュされてない新しいファイルで更新することができます。
(古いファイルのキャッシュは残り続けますが)
ただし、このファイル構成を設定するXMLの情報をSWF内でXMLデータを上手に展開していないと、新しいファイル要素が増えたときにルートSWFの変更が必要になってしまいます。
この場合、ルートSWFのキャッシュだけは手動で消さないといけません。
あまりないかもしれませんが、ルートSWF内でXMLの値を設定クラスにバインドする処理をいれてしまって、ファイルが増えるタイミングでキャッシュのクリアをする必要がありました。
サーバ管理者が外部にいる場合こういう部分に気をつけないと、連携が煩雑になるので少々注意が必要ですね。
JPG への変換を分割するには
2007/12/11
JPGEncoder で画像を JPG に変換するときに、画像が壁紙級のサイズの場合結構時間がかかるようです (10 秒くらい)。
なんとか処理の進捗を見せられぬものかと思って画像を細かく区切って投げてみることにしてみました。ただ単純に縦方向に画像を指定された数に区切ってエンコードして、バイナリ配列につなげて送信するときにクエリーで分割したそれぞれのデータのサイズを一緒に送るイメージです。
サーバでは受け取ったデータをデータのサイズ情報で分割してそれぞれファイルに書き出し。最後にイメージマジックなどでまとめてもらうイメージでしょうか。
ここまで書いたところで、「果たして最後にサーバでつなげるという処理をしてまで進捗状況を見せるべきか??」という疑問にぶち当たってしまいちょっと放置してしましまいましたが、どこかのタイミングで使ってみようと思います (本当はヘッダー情報をいじってサーバでつなげなくても良いようにできればベスト)。
package { public class JPGUpLoader { private var _printBmd:BitmapData; // 送信するイメージ private var _masterbyteArr:ByteArray; private var _partition = 10; // 分割数 private var _encodeCnt = 0; private var _quely:String = "?size="; /** * コンストラクタ * * partition : 分割する数 * mcImg : jpg に変換する MovieClip */ public function JPGUpLoader(partition:Number, mcImg:MovieClip) { _partition = partition; _printBmd = new BitmapData(mcImg.width, mcImg.height); _printBmd.draw(mcImg); _masterbyteArr = new ByteArray(); _encodeCnt = 0; mcImg.addEventListener(Event.ENTER_FRAME, jpgEncoding); } /** * 毎フレームごとに変換処理を実施 */ private function jpgEncoding(evt:Event) { var posy:Number = 0; var h:Number = 0; if (_encodeCnt != _partition - 1) { h = Math.floor(_printBmd.height / _partition); } else { h = _printBmd.height - Math.floor(_printBmd.height / _partition) * (_partition - 1); this.removeEventListener(Event.ENTER_FRAME, jpgEncoding); } var srcBmd:BitmapData = new BitmapData(_printBmd.width, h); srcBmd.copyPixels(_printBmd, new Rectangle(0, 0, _printBmd.width, _printBmd.height), new Point(0, -posy)); var jpgEncoder:JPGEncoder = new JPGEncoder(100); var byteArr:ByteArray = jpgEncoder.encode(srcBmd); if (_encodeCnt == 0) { _quely += byteArr.length; } else { _quely += "," + byteArr.length; } _masterbyteArr.writeBytes(byteArr); _encodeCnt++; if (_encodeCnt == _partition) upImg(); } /** * 画像の送信処理 */ private function upImg() { var strReq:String = "upImg.php" + _quely; var req:URLRequest = new URLRequest(strReq); _imgPostLdr = new URLLoader(); req.contentType = "application/octet-stream"; req.method = URLRequestMethod.POST; req.data = _masterbyteArr; _imgPostLdr.load(req); _imgPostLdr.addEventListener(Event.COMPLETE, onUpLoad); } /** * エンコードの進捗率のゲッター */ public function get encodeCnt():Number { return _encodeCnt; } } }
と思ったら、、プログラマーの Typester さんからこんなアドバイスもらいました。
何で分割してんだろうとおもってJPEGEncoderのソース見てみたのですが、
http://as3corelib.googlecode.com/svn/trunk/src/com/adobe/images/JPGEncoder.as
これってencode関数のEncode 8x8 macroblocksってところをsetTimeoutで切り分けるだけで、進捗も出せるし、固まらなくなると思うけどどうだろう。
なるほど!さっそく試してみようと思います!
AS3.0旅情10 ~限りなく透明に近いSprite~
2007/11/26
SpriteはAS3で良く利用するクラスの一つです。
このクラスをクラスリンケージに設定して使うとき、不思議な感じのところがありました。
以前、単純にドットシンタックスで、プロパティ追加しようと試みたときのことです。
Macで入力カーソルが表示されない
2007/11/22
はじめまして、10月に入社したてのhidakaです。
テキストフィールドのテキスト入力やtextareaコンポーネントでそのmovieclipに
フィルタがかかっている場合、入力枠のカーソル(Iビーム)が表示されません。
また、ドラッグしてテキストを選択した場合、選択した部分が白くなります。
フィルタの量に関係なく発生するので、ぼかし0などトゥイーンの残りなどが
あった場合に起こります。テキストフィールドの入力枠でも起こるので、コンポ
ーネントにフィルタを使用した場合の不具合ではないと思いやすいので要注意。
vistaのサイドバーガジェットでのflashとjsの連携
2007/11/22
ExternalInterface,FlashVars,swfObject
vistaの標準のサイドバーガジェットでFlashを使用してjs側と
やり取りをする場合いくつか制約があります。
NetConnectionはタイムラインに参照がないと動かない?
2007/11/13
近頃ビデオ素材をあつかうことが増えてきてました。
だいたいサクッとモックをつくるときは簡易的に下記のようにするのですが、これがなぜかうまくいきません。
//クラス定義 class HogePlayer { function HogePlayer( v:Video, path:String ) { var nc:NetConneciton= new NetConneciton(); nc.connect(null); var ns:NetStream = new NetStream(nc); v.attachVideo(ns); ns.play(path); } }
// タイムライン var _myVideo:Video = this.myVideo; var player:HogePlayer= new HogePlayer( _myVideo, "foo.flv" );
NetStream.onStatusによるとNetStream.Play.Startが取れてるんですが、実際には動画は再生されません。
いろいろやってみた結果、次のようにするとうまくいきました
AS3.0旅情9 ~時を刻まないgetTimer~
2007/11/07
週末会社にて開発詰めの修正を行っていると、刻々と過ぎる時間の大切さを切に感じます。
今回は“時”つながりで、Flashに馴染み深い「getTimer」の小話です。
外部ドメインの画像を Bitmap 操作する際に
2007/10/22
画像を読み込んで PV3D で処理しようとしたところ表示されないという自体に陥りました。crossdomain.xml の表記が違うのでは??などと色々悩んだ末、Security.loadPolicyFile() で crossdomain.xml を明示的に読み込むと動作しました。
どうやら外部ドメインの XML などの読み込みと違って、外部ドメインの画像を読み込んだ時点では crossdomain.xml を暗黙的に読み込んでもらえず、またその画像を Bitmap 操作しようとしても暗黙的に読み込んでもらえず、明示的に読み込むようにしないといけないようです。
同じドメインの xml ファイルを先に呼んでいる場合は、すでに crossdomain.xml も同時に読み込まれるので問題ないです。(画像だけ読み込む場合が問題)
数値のリミット
2007/10/15
値を特定の範囲に収めたいときMath.min()とMath.max()を使う実装法です。
変数a100以内に収めようと思ったとき、たぶん普通に実装すると以下のようになります。
AS3.0旅情8 ~表示クラスを一括削除する~
2007/10/11
AS2→AS3間で、表示クラスの削除の方法も変わりました。
表示クラスとはMovieClipやSpriteの事で、SpriteはAS3から出来たMovieClipの元となるクラスです。
既知ですが簡単に整理します。(表示クラスは、以下、子と表記)
AS3.0旅情7 ~Classの所持品確認~
2007/09/19
さて、いきなりですが、一つのコンテンツに幾つかの子コンテンツがあり、必要に応じてプロパティ実装をしたと仮定します。
Interfaceを利用していれば、共有実装プロパティの概要は理解できますが、小規模のプロジェクトには余り利用しません。
mProjectorの注意点
2007/08/29
弊社PG再び。前回解説してくれたmProjectorのお話です。
前回mProjectorとMDM Zincの比較を行いましたが、今回は実際にmProjectorを使う場合のコードや注意点を簡単に紹介したいと思います。
クリックメニュー
mProjectorをインストールすると「mMenu」Objectが使用可能になり、「mMenu」に対して操作することによりメニューを管理します。
基本的には以下のような形式になります。
AS3.0旅情6 ~ポエム:概念に打ち砕かれし想念よ~
2007/08/27
旅の途中、美しい人に出会いました。記念に一句、したためます。
年に数回、出会えれるか出会えないか・・。今生は六年で五回也。
今回はXMLのデータ型のポエムです。
キーフレーム間をワンタッチで行き来する
2007/08/18
Flashの開発はキーフレームに配置したオブジェクトやキーフレームに記述したスクリプトを操作して進めていきます。そこで、前後のキーフレームをワンタッチで行き来できるようキーボードショートカットがあれば便利ではないでしょうか。
ということでjsfl作成してみました。
最終的なコードは以下のようになりました。
- 現在のフレームの一つ次のキーフレームに移動するJSFL
var dom = fl.getDocumentDOM(); var tl = dom.getTimeline(); var layers = tl.layers; var currentIndex = fl.getDocumentDOM().getTimeline().getSelectedLayers(); var activeLayer = layers[currentIndex]; var frames = activeLayer.frames; var n = frames.length; var currentFrameIndex = Number(tl.currentFrame); for(var i = currentFrameIndex + 1; i < n; i++){ if(i == frames[i].startFrame){ tl.currentFrame = i; break; } }
- 現在のフレームの一つ前のキーフレームに移動するJSFL
var dom = fl.getDocumentDOM(); var tl = dom.getTimeline(); var layers = tl.layers; var currentLayerIndex = tl.getSelectedLayers(); var activeLayer = layers[currentLayerIndex]; var frames = activeLayer.frames; var n = frames.length; var currentFrameIndex = Number(tl.currentFrame); for(var i = currentFrameIndex - 1; i >= 0; i--){ if(i == frames[i].startFrame){ tl.currentFrame = i; break; } }
作成したJSFLをショートカットキーに割り当てるには
- Windows 2000 または Windows XP :
- <ブートドライブ>\Documents and Settings\<ユーザー>\Local Settings\Application Data\Macromedia\Flash 8\<言語>\Configuration\Commands\
- Mac OS X :
- Macintosh HD/Users/<ユーザー名>/Library/Application Support/Macromedia/Flash 8/<言語>/Configuration/Commands/
以下に保存します。
保存したコマンドは[編集]-[キーボードショートカット] を使用して、[コマンド] ポップアップメニューから、[描画メニューコマンド] を選択します。メニューツリーのコマンドノードを展開し、使用可能なスクリプトのリストから選択することでキーに割り当てられます。
AS3.0旅情5 ~手軽に引ける辞書~
2007/08/07
僕はお昼時によく本屋に行きます。
かれこれ一年位続いていますが、心癒された事、得た知識は数知れずです。
今回は、そんな本屋に雰囲気が似ている「Dictionaryクラスの有用性」についてです。
FLASHをAIR以外でデスクトップアプリケーションにする方法
2007/08/06
弊社PGがいつのまにやらリサーチしていて、せっかくなので記事にしました。
以下 転載です。
既存のswfをexe化する案件があり、使用ソフトの選定を行いました。
AIRが使えれば問題ないのですが、今回は以下の理由で使用しませんでした。
- 事前にAIRのインストールが必要なこと
- 今回exe化するswfがas2で記述されていたこと
- AIR自体がベータ版であること
結果、以下のソフトを検証しました。
(検証OSはWindows Vista)
PaperVision3D で迷路を作成してみました。
2007/07/27
PaperVision3D → 迷路!
と脊髄反射の速度で思い至ったのですが、この度めでたく 3D の迷路を作成する機会に恵まれました。クーピーサイトのおまけコンテンツなのですが、トップにある 2D の迷路に対応した 3D の迷路を作成しました。2D の迷路の方は迷路作成機能もついていて、スタート地点とゴール地点を自由に結ぶと、そこから迷路が自動で生成されます。あと 3D の迷路の中にはアートメーターというサイトから新着の絵の画像を表示させています (CUPPYサイトの右上にあるの "3D" ボタンを押すとみれます)。
作成するにあたって PaperVision3D の情報の宝庫であるこのサイトを参考にさせていただきました (同じく迷路のサンプルがあり、大変参考になりました)。やっていくつかはまったポイントを挙げると。。
- 迷路の壁がキューブ状だったので、最初 Cube を使用したのですが、なんだか隣り合う壁がいまいち前後関係が変なことに (チラついたりしました)。。とりあえず Plane オブジェクトを 4 方向に並べることに。
- MovieScene3D から removeChild しても、オブジェクトがステージから消えるが、numChildren の数が減らない…。いろいろ参照をチェックして GC の邪魔となっている処理がないか洗ったが数が減らない…。とりあえず一歩進むごとに MovieScene3D を破棄して、新しい MovieScene3D を生成してそこに生きているオブジェクトを addChild するという苦肉の策に。正しいやり方があったら教えてください。。
- 壁の Material となる Sprite に Grow などかけてみたけど、イマイチ。。MovieScene3D 全体にドロップシャドウをかけたらいい感じに。
今回触った印象として思ったのは
- AS3 でもこのあたりの処理は重くなるので、色々と処理速度の対応はしっかりやらないといけない。(最初、2D と同じブラウザで表示しようとしたけど重すぎて断念)
- 3D のゲームが出始めたころはものめずらしかったけど、今では 3D の表現はゲームでは割と辺り前のものとなっている。その流れで、Web でも 3D の表現が普通になっていく可能性がある。3D であることで便利な見せ方とか研究していきたいですね。
- 今なら割と初歩的なことをやってもアイディア次第で面白いものが作れる。
まだまだ PaperVision3D の機能のごく一部しか使えていないので、これから精進していきたいです。最近、 PaperVision3D のバージョンが 1.5 に上がったようなので、変更内容など要チェックですね。
CS3で増えたプロパティ[FileReference.postData]
2007/07/20
http://livedocs.adobe.com/flash/9.0_jp/main/00001675.htmlpostData (FileReference.postData プロパティ)
public postData : String
アップロードまたはダウンロード時に送信する POST パラメータ
使用できるバージョン: ActionScript 1.0、Flash Player 8
これを待ち望んでました!!!
これだけでCS3に今すぐアップグレードしようかと思ったほどだ。
あとonCompleteの返り値も取れるっぽいですね(Require Flash Player 9.0.28.0 パラメータ)
ちょうど案件で使いたかった機能だけどすれ違ったなー。あと一ヶ月早ければ、と思う人がかなりいるに違いない。
AS3.0旅情4 ~小技:リンケージシンボル一括クリア~
2007/07/18
CS3の旅の途中、会社で正規のCS3を購入したのですが、個人的にもパッケージを購入したので、痒いところにようやく手が届き始めました。。
今回はちょっとした技「リンケージシンボル一括クリア」です。
withブロックの使い道
2007/06/30
withとは、特定のスコープに一時的にフォーカスして処理を一括して書けるものです。
主に見た目をスッキリする感じで使われることがおおく、 使い道としては描画系メソッドをまとめて書くくらいしか目にしません。
with( mc ){ lineStyle( 1, 0xff0000 ); moveTo( 0, 0 ) lineTo( 100, 100 ); }
これはスコープを柔軟にできるがゆえに混乱やバグのもとになるため、 作法として避けたほうがよいというのがあるのだと思います。
あまり使わないがゆえにすっかり忘れてましたが、そういう長短をふまえて使えば意外に便利ですよ。
という例です。
ExternalInterfaceがIEで動かない!!:formタグ編
2007/06/30
JavaScriptと通信する際、ExternalInterfaceを利用すると思いますが、どうもいろいろとくせがありハマってしまうこともありますよね。
ググってみるといろいろな事象があることがわかります。
ExternalInterfaceにハマる (Nega Diary)
_quality | ExternalInterface.call Internet explorerでnullが返ってくる件
など
某案件でJavaScriptと連携して行う処理があったので、例のごとくExternalInterfaceを利用したのですが、いくらやってもやってもIEだけ動かないという状況になりました。
上記のブログで書かれているような、allowScriptAccessのパラメータをalwaysに設定したり、idに「external」を含めてみたりしてもダメで、なんでだーーーー!!と四苦八苦、、、
いろいろいろいろ試行錯誤して、やっとこやーっとこ!!動くようになりました。
原因はFlashを貼り付けているタグの場所がHTMLのformタグの中に書かれていたため。 JSからFlashの関数をたたくときになぜか、FlashのIDが取得できないという状況になってしまう模様です。 お気をつけを!
LocalConnectionを使ったWindowsアプリケーションとFlashの連携
2007/06/27
今回は、カヤックBM11ブログの babooo voiceのテクニカルノート からの転載です。
babooo voiceは音声認識とYahoo画像検索APIを組み合わせた眺める系画像検索サイトです。
その中で、
Windowsアプリケーションで動いている音声認識エンジンと、
ブラウザ上のFlashとの連携を、
FlashのLocalConnectionを利用して行っています。
ポイントを解説した記事をこちらでもご紹介させていただきます。
テクスチャつきのシェイプをきれいにコンバートする
2007/06/06
Fireworksなどのテクスチャやドロップシャドウのついた素材を普通にFlashにコンバートすると、まとまってビットマップになってイマイチきれいじゃありません。

これをひと手間かけて、単色ベタに塗りなおしたシェイプとテクスチャだけの矩形と分けてコンバートします。
AS3.0旅情3 ~正確化した深度管理~
2007/06/01
最近、CS3(日本語版)のリリースまで、トライアル期限をノートとデスクトップで“わかち”あいながら、旅しています。
今回は小さいながら、AS3から正確化した、“深度管理”について触れようと思います。
Flash9 アルファ版から CS3 への移行について覚書き
2007/05/28
ついに Flash CS3 英語版が発売されたので、さっそく体験版をダウンロードして触ってみました。とりあえず気づいたところから軽く報告させていただきます。
まず驚いたのがコンパイルの早さ!Flash 9 アルファ版ではコンパイルの重さがだいぶ気になっていたのですが、CS3 版では 1 回といわず、ついつい 2 回 3 回と意味なくコンパイルを繰り返してしまいたくなるようなパフォーマンスです。また Flash9 アルファ版では、コンパイルエラーが出るとその内容の難しさで心が折れそうになったエラーログですが、CS3 版ではエラーログをクリックするだけでソースの該当箇所へと飛べ (!)、java の eclipse みたいな使用感で、これまたついつい意味なくコンパイルエラーを出したりしそうになります。
あと細かいところで言えば、クラスファイルにリンケージが貼られたムービークリップに、名前をつけたオブジェクトを置き、クラスファイルの方で変数定義をしなかった場合、エラーとなっていたのが、エラーとならなくなりました。
逆に、パッケージにおいて、階層の宣言 (ファイルの冒頭で "package com.cuppy {" と書くところ) を省略しても Flash9 ではそのままコンパイルされていたのですが、CS3 版ではエラーが出るようになっています。
あと、忘れてはならない便利機能としてモーションを AS3 に変換できる(!)というのがあります。分かりやすい動画チュートリアルがありましたので、どうぞ。
まだまだ他にも色々と便利な機能や、ちょっとはまってしまいそうな注意事項などたくさんあると思いますが、そういったことを教えていただければ幸いです。
16進数のRGBの各チャンネルの値を取り出す
2007/05/23
16進数のRGB値(たとえばこういうの→0xffcc33)から、RGBの各チャンネルを分解して取り出したいときがたまーにあるんですが、すぐ忘れちゃうのでメモっておきます
やり方はビット演算子をつかいます
AS3.0旅情2 ~ドットシンタックスの変容~
2007/05/21
FLASHCS3・・・、本当に便利ですね。(といっても体験版ですが)
悠々自適な旅をさせて貰っています。
今回は、“ドットシンタックスを利用した参照の変化”について、気になった部分を挙げてみます。
wmode=transparent で全角テキスト入力するには…
2007/05/18
wmode=trancate で全角テキスト入力するには…
IE で wmode=transparent な flash に全角テキスト入力すると表示が崩れてしまいます 。これは「テキスト入力スペースのあるブログパーツで背景透過したいんだけど。。」というときに非常に頭を悩ませる問題なのですが、IE で上手く表示されないだけに流石にこの問題を切り捨てるのはウォーキングワイルドサイドすぎるのでなんとかしたいところです。
で、解決方法というより、根本的な対処はできないので妥協策を講じてみました。その妥協の産物がこの paolo というブログパーツです。
「摩訶不思議!? IE で背景透過全角テキスト入力」
テキストをドラッグするとつっこみをできるというブログパーツなのですが、つっこみフォームをあたかも背景透過させているかのように表示させています。
ライブラリのビットマップを全部ロスレスにする
2007/05/12
FlashやFireworksにはJSFLというJSでアプリケーションを操作できるインターフェイスがあります。
ヒストリー、バッチ、コマンドの中身が実はこれなんですが、自作したりカスタマイズしたりすることができます。
もちろん保存してコマンドとして登録したり、パネル化したりもできるみたいです。
先日、ライブラリのビットマップの画質をすべて最高(ロスレス)する必要があったのですが、数的にどう考えても非効率なのでバッチ化できないかと考え、JSFLのコマンド作りに挑戦してみました。
AS3.0旅情1 ~特定階層の無効化~
2007/05/08
Flex2.0やFlash9 public alphaを用い、
AS3.0のサービス開発も徐々に普及し始めています。 p>
日本では、6月下旬にAdobe CS3(日本語版)が発売されるとの事で、
ますますAS3.0が身近になりますね。
せっかくなので、暇を見つけてAS2.0との比較をつらつらと語ろうと思います。
今回は、特定階層の無効化について、気になった部分を挙げてみます。
ニコニコ動画やYouTubeのFLV動画を取得する。
2007/05/05
ニコニコ動画がYouTubeからアクセス禁止を受けて一時閉鎖した際、 YouTubeからどうやって動画を取得していたかが少し話題になりました。
YouTubeAPIには、Flashの動画形式であるflvファイルのパスそのものは記述されていない ため、おそらくいったんページのHTMLを取得して、そこからflvのパスを 取得していると考えられます。
サンプルソースを書いてみました。
var _this=this; var _lv:LoadVars=new LoadVars(); var url="http://www.youtube.com/watch?v=DQoh5DsLJvc"; _lv.sendAndLoad( url, _lv , "POST" ); _lv.onData=function( _str ){ _this.parseHTML( _str ); } function parseHTML( _str ){ var targetLine:String= _str.substring(_str.indexOf("player2.swf"), _str.indexOf("\", \"movie_player") ); var vID=targetLine.substring( targetLine.indexOf("video_id=")+9, targetLine.indexOf("&l=")); var after_t=targetLine.substring( targetLine.indexOf("&t=")+3); var t; if( after_t.indexOf("&")!=-1 ){ t=after_t.substring( 0, after_t.indexOf("&")); }else{ t=after_t; } this._nowFlvPath="http://youtube.com/get_video.php?video_id="+vID+"&l&t="+t; trace("this._nowFlvPath="+this._nowFlvPath); }
パブリッシュしたところ、YouTubeのFLV動画が直接取得できました。 しかしアクセスし過ぎると、YouTubeに弾かれる恐れがあるので、 実行される方は確認程度にとどめてください。
現在は、ニコニコ動画自体からflvファイルを取得することができます。 例えば、下記のビデオの場合。
http://www.nicovideo.jp/watch/sm191763
動画IDである「sm191763」を、下記APIにパラメーターとして付与します。
http://www.nicovideo.jp/getflv?v=sm191763
すると、下記の返り値が取得できます。(user_idとnicknameは仮です。)
thread_id=1177422773& l=270& cms=SMILEVIDEO& url=http%3A%2F%2Fs-clb4.smilevideo.jp%2Fsmile%3Fv%3D191763.75663& link=http%3A%2F%2Fwww.smilevideo.jp%2Fview%3Fvideo_id%3D191763& ms=http%3A%2F%2Fmsg22.nicovideo.jp%2Fapi%2F& user_id=xxxxxx& nickname=xxxxxxx& done=true
URLデコードしてみました。
thread_id=1177422773& l=270& cms=SMILEVIDEO& url=http://s-clb4.smilevideo.jp/smile?v=191763.75663& link=http://www.smilevideo.jp/view?video_id=191763& ms=http://msg22.nicovideo.jp/api/& user_id=xxxxxx& nickname=xxxxxxx& done=true
上記のurlパラメータの値がニコニコ動画のFLV本体です。
試しにダウンロードするプログラムをFlashによるexe形式で作成しました。 ただし現在のニコニコ動画はクローズドサービスなので、あらかじめログイン している必要があります。
携帯Flashのsubstring関数のindex
2007/04/11
携帯コンテンツ(Flashlite1.1)の制作でsubstringやmbsubstring関数で妙な挙動をみつけました。
文字を一字づつとりだす処理をしていたら、文字列の一文字目が2度現れるというものでした。
str = "12345"; for( i=0; i<length( str ); ++i ) { trace( i add " : " add substring( str, i, 1 ) ); }
traceアクションを省略の罠
2007/03/16
罠にはまりました。
パブリッシュの設定項目に「traceアクションを省略」というのがありますが、 客先展開時にこれをつけてだそうとしたら急に動かないというバグが発生しました

フローティング処理のJSをExternalInterfaceクラスでコールする部分が発動しません。
遅延処理の残骸
2007/02/17
タイミング合わせに多用する setInterval と setTimeout(※1)。
これらの関数の処理を終え、初期化する際、clearInterval や clearTimeout を利用します。
但し、“処理が完了するのみで完全な変数の消去は行われていない”ようですね。
clearIntervalでintervalIDが消えたと思い undefined 分岐等で次処理を行うと失敗します。
以下にsetIntervalを用い簡単なコードで試してみます。
ASSetPropFlagsのススメ
2007/01/21
これまたマニュアルに載ってない、関数の設定をするASSetPropFlagsという関数の話です。
なんでコレを書くにいたったかというと、以前のビルトインクラスや関数拡張系のハックを行った際に不都合が出てくるからです。
まず該当するエントリーは以下です。
FlashTracerについて その2
2006/12/23
以前の記事に続いてFirefoxの拡張機能のFlashTracerについてもう少し詳しくつっこんでみたいと思います。
まず、フィルタ機能
上の方のインプットエリアにキーワードを入れるとそれを含んだ行だけ絞り込むことができます。
たとえばあらかじめクラス名やメソッドを付けて出力していると特定の項目にフィーチャーしたデバッグが可能になります。
クロスドメイン処理におけるSandbox違反回避のまとめ
2006/12/18
ActionScriptと他ドメインのファイルでデータをやりとりする際によく引っかかってしまうのが
*** セキュリティ Sandbox 違反 *** 互換性のないコンテキストにアクセスを試みました。
と表示されてアクセスを拒否されてしまうことです。
ということで、ひっかかってしまう処理として考えられる
- XMLをロードする
- ActionScriptからJavaScriptを呼び出す
- JavaScriptからActionScriptを呼び出す
について違反回避方法をまとめてみたいと思います。
Arrayの拡張
2006/12/14
最近level0では拡張ネタが流行っているので僕も流れに乗ってみます。
trace()、Objectと来たので、Arrayクラスでも。
ASのArrayクラスはとっても貧弱です。
まぁそれでも昔の用にeval()でつなぐ疑似配列よりはマシになったと思います。
しかし、やっぱり足りない物は足りないので拡張してしまいましょうってことで、シャッフルを追加してみましょう。
配列をシャッフルの方法は色々ありますが、Fisher-Yatesという有名なアルゴリズム(?)があるのでコンバートしてみました。
デバッグを工夫する(trace関数を拡張)
2006/12/01
強引な方法でデバッグを若干便利にする方法です。
AS2のtraceは引数がひとつだけなのでこれをリストで入力できたら素敵だと思いやってみたのですが、強引だとは思いつつ、結構便利に使えてしまいます。
その方法はtraceを拡張することです。
setIntervalとenterframeの時間制御のアレコレ
2006/11/26
1秒後に○○するというときってありますよね。
僕はいつもsetIntervalで制御するんですが、アニメーションと同期をとらないといけないなどの事情でenterframeで制御するって場合もあるかもしれないです。
そこで、ちょっと気になったので実験してみました。
矩形エリアに写真をフィットさせたいとき
2006/11/06
特定のエリアに写真とかをフィットさせる(収める)ときがあると思います。
よく見かける処理は縦をまずフィットさせてみて、はみでるようなら今度は横をフィットさせる というような2重処理です。これは直観的に理解しやすいのですが2回リサイズ処理するのでなんだかスマートじゃありません。
これを条件式で一度にまとめらないかと思って考えたことをまとめてみました。
- 対象エリア area_mc ( _width: 300, _height: 200 )
- 写真 picture_mc ( _width: 320, _height: 240 )
独自クラス内に、ユーザが利用可能なイベントハンドラを定義する
2006/11/01
ビルドインクラスの多くは、独自の関数を持っています。
Tweenクラスの関数onMotionChangedなども、その例の一つですね。
ユーザが必要があれば定義可能なその仕組みは重宝すべきものだと思います。
そこで今回、独自クラスを配布する事を前提に簡単な仕組みを作ってみました。
ユーザが関数を任意で利用可能でかつ処理開始後に、それを実行する形です。
以下にiamという独自クラスを制作しての検証を行います。




