PixelBenderで輪郭抽出 | _level0 - KAYAC Front Engineer Blog
Flashで輪郭抽出を行う方法はいくつかあるかと思いますが、 畳込みフィルターよりも、（ビジュアル的に）綺麗な輪郭抽出にチャレンジしてみました。 今回はPixelBenderで輪郭抽出アルゴリズムのひとつの、Sobelオペレータを実行しています。 Sobelオペレータについては、Web上にたくさんドキュンメントがあるかと思うので 僕のつたない説明より、そちらを参考にしていただいた方が良いかと思いますが 前後のピクセルの差分をもとにゴニョゴニョする感じです。 サンプル pbjファイルはこちら pbkソースはこんな感じ < languageVersion: 1.0; > kernel EdgeDetection < namespace : ""; vendor : "Shimada Kousho"; version : 1; description : "detect edge"; > { i
PixelBenderで波紋エフェクト | _level0 - KAYAC Front Engineer Blog
AfterEffectにある波紋のエフェクトをPixelBenderで作ってみました。 こんな感じになりました。 右上のボタンでフィルターのオンオフを切り替えられます。 PBJファイルはこちら パラメータはこんな感じで調整 //波紋の中心座標 shader.data.center.value = [200, 150]; //波紋の広がる半径 shader.data.radius.value = [250]; //波の幅 shader.data.width.value = [50]; //波の高さ shader.data.height.value = [8]; //波のフェーズ（これを0～360でループさせることで波のアニメーション） shader.data.phase.value = [0]; PBKソース < languageVersion : 1.0; > kernel Ripple
たった3行！Flashで公式Tweetボタンをつくる | _level0 - KAYAC Front Engineer Blog
すごい! つまりどういう事かっていうと、 tweetButton.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { navigateToURL(new URLRequest("http://twitter.com/share?text=" + escapeMultiByte("tweet button test. #wonderfl") + "&url=" + escapeMultiByte("http://level0.kayac.com") + "&via=" + escapeMultiByte("vesperworks"))); }); ってできちゃうんです。 素晴らしい。短縮URLになって、viaもつきます。 下にwonderflでボタンをつくってみました。押すと実際に上のコードの挙動が確かめられます。
音楽ゲームを見てみよう | _level0 - KAYAC Front Engineer Blog
すごい音楽ゲームが出てた。 ちょっと前の話になりますが、E3でサウンドとシューティングゲームが一体化した、凄いゲームがQ Entertainmentから発表されてましたね。Kinnectsを使って、体全体を使って音楽に乗れそうなとても期待できる内容でした。 最近、wonderflでサウンドのビジュアライゼーションを見かける機会が増えています。 音楽ゲームは、サウンドのビジュアライゼーションとかなり関わりが深いと言えるでしょう。 ということで、今回は、よりサウンドビジュアライズへの造詣を深めるために 音楽ゲームの表現について探ってみましょう。 大雑把にまとめてみる 音楽ゲームは、一時期ものすごいブームでした。 ビートマニアやダンスダンスレボリューションが色んな媒体で取り上げられたり、 プレイ動画が何本もあげられたりしていたのは記憶に新しいし、未だにたくさんの情報がネット上に溢れています。 そ
Progression4の新機能Resourceを試してみる | _level0 - KAYAC Front Engineer Blog
Progressionの新機能で個人的にうれしいのが読み込んだデータのキャッシュ機能です。 効果音のMP3や外部画像などを一度読み込んだら使いまわすことができます。 これはLoaderCommandのcacheAsResource(初期値true)をtrueにすると行われる処理です。 ポイントはLoaderCommand系の第二引数のinitObjectにidまたはgroupを設定することで、後でそのidまたはgroupでキャッシュしたデータをどこからでも取得することができます。 var r:Resource = getResourceById( id ); var list:Array = getResorucesByGroup( group ); なので複数の場所で同じファイルをロードする可能性がある場合はあらかじめResourceの有無をチェックしてからLoaderCommandを呼
FITC TOKYO の GrantSkinner先生のスライドを読みましょう。 | _level0 - KAYAC Front Engineer Blog
FITC楽しかったですね！大満足のMuraiです。 Flashの神様たちが一同に集い、生のお話が聴ける貴重なイベントだったので、多くの方が足を運ばれたと思います。 そのFITCで、FlashIDEのビルトインコンポーネントまで作られているGrantSkinner先生の超絶スライド。即実践でつかえる高速化手法 Quick as a Flashがとてもというか、勉強にしかならないのでご紹介。 http://gskinner.com/talks/quick/ 内容は、大体下記の様な感じです。（ごめんなさいかなり荒いです） 一般的な最適化の方法Player毎のスピードの差異、型の扱いの違い etcベンチマークの方法や、環境の違いによるベンチマークの結果の違い etc体感スピードと実行スピード etc1フレーム間で何が行われているか、処理落ちの仕組み etcコードレベルでの最適化手法割り算よりかけ算
【sketch】ストライプ模様 | _level0 - KAYAC Front Engineer Blog
haraです、こんにちは。 今回はsketchネタです。 以前参考にさせてもらったnutsuさんの作品 こちらのFMatrix2Dを使っている処理のところがよくわからないので、にゃあプロジェクトさんのMatrixのページやら、AdobeのMatrixのページやら、FrocessingのDocsのFMatrix2Dのページやらとにらめっこしながら読んでみました。 こちらのコード中で、ラインを描くcc1x〜pp2yはvx,vyのベクトルにより得られたMatrixの移動値tx,tyに傾斜と変形の値c,dを足しています。 var cc1x:Number = -obj.w*obj.vmt.c + obj.vmt.tx; var cc1y:Number = -obj.w*obj.vmt.d + obj.vmt.ty; var pp1x:Number = (obj.c1x+cc1x)/2; var pp
毛っぽいものをASでつくる | _level0 - KAYAC Front Engineer Blog
AdobeMAXがなんかもりあがってますね。英語をしゃべれるようになるはずがもう10月…。 英語そっちのけで作った某サンプルの解説します。 ケサランパサランみたいなものの正体は基本的にはパーティクルです。 パーティクルの軌跡を残して毛みたいに見えるようにしています。 こういうときはとりあえずデータの塊をクラスにするといいです。 class Particle { public var x:Number = 0; public var y:Number = 0; public var vx:Number = 0; public var vy:Number = 0; public function Particle( x:Number=0, y:Number=0, vx:Number=0, vy:Number=0 ) { this.x = x; this.y = y; this.vx = vx;
DisplacementMapFilterで自由に画像を変形させる（マップを描く編） | _level0 - KAYAC Front Engineer Blog
タイムライン派のお手軽スクリプト第１弾。 「DisplacementMapFilterで自由に画像を変形させる（マップを描く編）」です。 前回のエントリーでDisplacementMapFilterの概要と使い方を ざっくり書かせてもらいましたが、今回はマップの描き方について。 ----------------------------------------------------- 通常マップ画像は、正確な変形やインタラクティブな変形をさせる場合 1ドットずつスクリプトで計算をして色を決めて、スクリプトで描くことが多いです。 でもマップ画像は所詮画像！ ざっくりとした変形であればお絵かきソフトで書いたほうが （僕の場合は）多少早かったりします。 とりあえず、前回のエントリーでサンプルとして出してた台形変形用のマップを書いてみます。 ツール 今回はFireWorksを使って作っていきますが
DisplacementMapFilterで自由に画像を変形させる （基礎編） | _level0 - KAYAC Front Engineer Blog
最近、中途で入社しました シマダ コウショウ です。 KAYACのFLASHチームには、もう一人シマダさんがいるので名前の方で呼ばれています。 今後ともよろしくお願いします。 ------------------------------------- 記念すべき初投稿は、タイムライン派のお手軽スクリプト第１弾。 個人的に大好きな「DisplacementMapFilter」について。 FLASH8（as2）から利用できるようになったフィルタなので ネタとしてはちょっと古いですが、 先日AS2案件で使うことがあったので その仕組みから、マップの描き方まであらためてまとめてみたいと思います。 「DisplacementMapFilter」については、以前日高さんがまとめた記事もあるので ぜひそちらも合わせてお読みください。 -----------------------------------
デザイナー向けのTweenの話 | _level0 - KAYAC Front Engineer Blog
少し前になりますがAPMTWeek中に開催されたSpark勉強会で登壇させていただきました。 悲しい事情で直前にスライドを紛失してしまったので資料とかを公開できないのですが簡単に振り返って記事にしておきたいと思います。 他の方が優秀すぎて恐縮だったのでテクニックというよりは現場的なアイディアの発表になりました。 モーションデザインの共有の話 デザイナーとFLASHerと分業する場合、デザインする領域がレイアウトとか静止画だけでなく画面遷移や演出のモーションというところまでひろがります。 そうしたときにどうやってコミュニケーションをとっているのでしょうか。 絵コンテを描く 途中の中割りまでつくってもらう 口頭で説明 などなどあるかと思いますが、なかなか共有するのが難しい領域ではあります。 特にビューンとかギューンみたいな擬音が頻出すると一見わかりやすいようで実装に落とし込むときにちょっと困る
はじめてのGoogleMapsAPI | _level0 - KAYAC Front Engineer Blog
コンチはー！kijimaです。 最近案件でgoogleMapsAPIを使っていますが、初めてのことだったので備忘録として記事に書いておきます。 ちなみに、FlashCS3ユーザー向けチュートリアルページというものがすでに用意されています。そちらを参考にしつつ、進めていきたいと思います。 まずは、使用したいURLを登録してgoogle Maps APIキーを取得します。 こちらのURLにアクセスして、利用規約に同意の上で使用したいURLを入力します。 すると、ランダム英数字からなるAPIキーが取得できます。サーバーにアップする場合はこのAPIキーが必要になってきますが、ローカル環境でswfをパブリッシュして確認するだけだったら必要ありません。 次に、Google Maps API for Flash SDK をダウンロードします Google Maps API for Flashのページの右
flvとpngシーケンスを比較する | _level0 - KAYAC Front Engineer Blog
最近 aftereffectsとAIR漬けのhidakaです。YUREXもヨロシク。 以前にパーティクルにFLVも検討するといいよ。と書きましたが、動画をFlashにコンバートして使う際にFLVにするか、PNGシーケンス（画像コマアニメ）にするか、という選択があります。 ■FLV版 ■PNGシーケンス版 この負荷だと、PNGシーケンス版のほうが速く動いています。(自分の開発機では) ただし、他の処理などで負荷が高くなってきた場合には、これが逆転してくることがありました。 負荷が上がりタイムラインのコマ落ちをしてくる状態になると、PNGシーケンスはコマ落ちがしやすくなります。FLVのほうがコマ落ちに対しては強い印象。これは最初に映像データを読み込んでいるからでしょうか、PNGだと1コマごとに新しい画像を表示するので遅れる模様。 単純な負荷の比較では、PNGシーケンスのほうが軽くできますが、高
色化けの原因の考察 | _level0 - KAYAC Front Engineer Blog
どうも 冬の寒さにも負けずflashやってますか？ 寒さで震えてコード書くのが早くなって嬉しい悲鳴がでているさぶろうです。 さて僕は今、飲料のキャンペーンの携帯版サイトの構築をさせていただいております。 具体的な作業内容は飲料のキャラクタをモーショントウィーンで lite1.1なので100KB以下にして動かすというものでした。 そこで起った問題の一つに色化けがありました。 僕の制作フローとしては ・aiベースの素材から全体のテンプレートになる基本アニメ作る ・三コマくらいでイラレで動きの決め絵作る ・flashにパーツごとコピペして形を調整 ・動きをつけて書き出し。という感じなんですが、 商標化されたキャラクタなのでカラーのレギュレーションがとても厳しいのです。 まずソースファイルをCMYKでいただくのですが、最初それを直コピペしてました。 途中色が違うと突っ込みが入り途中からソース側の色
alphaプロパティで気づいちゃったこと | _level0 - KAYAC Front Engineer Blog
アルファの値を操作するときって、alphaプロパティの値を設定しますよね。 たとえば円のムービークリップ(circle_mc)を半透明にさせたいときには、 circle_mc.alpha = 0.5; ってかきます。 そのとき円の中にもひとつ円のムービークリップ(circle_mc.inner_mc)がはいってると、見た目的には、もちろんこれも半透明になりますよね。 たとえば、ここで、中の円だけ透過させたくないときには circle_mc.inner_mc.alpha = 2; としてやれば、親の透過を打ち消したように見せることができるんですね。 ちなみに親のalphaを0.25にして子のalphaを4にしてもおなじように透過させず表示させることができるみたいです。 下のような感じ。 リファレンスにはalphaの値の範囲として0~1と記述されていますが、なんとなくやってみたらできたのでした
【Progression】右クリックで表示されるコンテキストメニューを非表示にする。 | _level0 - KAYAC Front Engineer Blog
こんにちは、progression勉強中のkijimaです。 Progressionフレームワークの魅力である右クリック（コンテキストメニュー）による「前に戻る/次に進む」遷移。 しかし、ときとしてコンテンツによってはコンテキストメニューによるシーン遷移をさせたくないときがあります。コンテンツ全体で一括非表示にする方法を探していたんですが、こんな記述でOKのようです。 新規プロジェクトを作成した際にできるindex.as、_onInit関数内に記述。 //コンテキストメニューを非表示 Progression.uiContextMenu.enabled = false; CastObjectContextMenu.enabled = false; CastButtonContextMenu.enabled = false; 実際に記述すると、こんな感じ。 protected override
【Progression】Singletonパターンを使ってどのシーンからも変数を参照できるようにする。 | _level0 - KAYAC Front Engineer Blog
【Progression】Singletonパターンを使ってどのシーンからも変数を参照できるようにする。 こんにちは、さいきん深夜のドライブが日課のkijimaです Progressionで実装していると、どのシーンからも共通の変数にアクセスしたいことってでてきますよね。 以前twitter（otoyasumi）で「どのシーンからもアクセスできるようにはみんなどうしてるんかなー？」ってつぶやいてたらikedahidenoriさんが「データ保持用のクラスつくってSingletonパターンでアクセスしてます」と仰ってたので、それがラクそうだなと思って僕もその方法で実装してみました。 と、そのまえにSingletonパターンについて たとえば、ユーザー登録してログインするFlashコンテンツでいうところのユーザーIDやニックネーム、あと各クラスで使いまわす共通するパラメーターがあったとします。
携帯Flash さらなる軽量化 | _level0 - KAYAC Front Engineer Blog
以前、記事にもしましたが、まだまだ軽量化できる方法はあるようです。 この辺のネタは、結構ネット上にあるので、そのまとめと 前回明記しなかった方法と合わせて紹介します。 ・画像の容量を落とす これは、以前書きましたが、やはり鉄板中の鉄板です。 ・複雑なベクターは使わない パスの量を減らすか、Flash上でも「修正」→「シェイプ」→「最適化」で も調整できます。 ・キーフレームは極力なくして、無駄なフレームはなくす 実際の経験上、大きな違いがありました。数百以上のフレームを扱うとき、 場合によっては、ファイルを分ける決断も必要です。 ・変数名はシンプルに短く ほとんど気にしたことがなかったのですが、100Ｋ以内というシビアな容量を キープするためには必要なことのようです。 あと、フレームラベルの文字数もできるだけ少なくすることも効果あるようです。 ・トゥイーンはできるだけ使わない。 これも一度
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEのポップアップブロックのブロック | _level0 - KAYAC Front Engineer Blog
【sketch】花っぽいものを描く | _level0 - KAYAC Front Engineer Blog