KAYAC Front End Engineer チームによるHTML5 iOS Android ActionScript Flash イベント デザイン ニュースのブログ

年の瀬も押し迫ってきました昨今、皆様いかがお過ごしですか。 haraです。 今回は、先日12月5日に自由が丘で投影いたしましたインスタレーションを紹介いたします。 このコンテンツは、自由が丘駅前で行われたクリスマスイベントで展示されたものです。 高さ約3mのドレス状に組まれたシートに対して映像を投影し、ゴスペルコンサートの 賑やかし要素として入れさせていただきました。 基本的に「女神のドレスが変容していく」という設定で映像を展開し、 最後はクリスマスツリー風の演出で締めくくりました。 普段あまり見かけないビジュアルに仕上がったので、街の皆様にはいつもと違う夜を体験いただけたのではないでしょうか。 実装はopenFrameworksを用い、プロジェクタはEPSONのEB-G5350を使っています。街灯が明るい中でしたが、特に問題とならない明るさ・鮮やかさが出ていると思います。 詳しい技術解説

海賊王をめざす男 マツです。こんにちは。 プロジェクトファイルのテンプレートを生成してくれる AIR アプリで Android 用のモバイルプロジェクトをつくりましょう。 Adobe AIR Launchpad http://labs.adobe.com/downloads/airlaunchpad.html airlaunchpad_p3_102510.air をインストールします。 AIR アプリを起動したら、Mobile を選択します。 Application Name などの設定を行います。 生成するサンプルを選択したら、ジェネレートを完了させます。 指定の場所に zip ファイルが生成されるのでそれを Flash Builder Burrito でインポートすると Android 用のモバイルプロジェクトが確認できます。 ビルドすると選択したサンプルのリストが表示されます。 Ac

こんにちは、haraです。 前回の投稿でちょっと告知してました、ART-Meterの絵画にプロジェクションというのをやってみましたよ。 ARToys:PATTERN ARToys:PATTERN from Makoto Hara on Vimeo. こちらは前回お見せしたものをそのまま発展させたものです。 人影を表示させて、浮遊するオブジェクトが反応するようにしています。 コードの特徴についてはそれほど珍しいことはやっておらず、人の動きに対する反応はオプティカルフロー、オブジェクトの動きはBox2Dです。 どちらも参考書に載っている通り。 http://openframeworks.jp/download.html ARToys:AQUARIUM ARToys:AQUARIUM from Makoto Hara on Vimeo. こちらはかなりひねって、「絵画から出てくる餌を食べる魚」と

こんにちはtaro(@9re)です。 今日は中々ご紹介出来てなかったflex 4のちょっとした小ネタを提供しようと思います。 コンパイラ・オプションについては、以前にもいくつかご紹介させていただいています configファイルで遊んでみる(0) - 導入編 configファイルで遊んでみる(1) - タグの調べ方 -compiler.external-library-pathで始めるSWF分割術 さて今回ご紹介する-compiler.omit-trace-statementsというオプションは、名前の通りの機能なのですが、ヘルプを出してみます。 > mxmlc -help advanced omit -compiler.omit-trace-statements エイリアス -omit-trace-statements trace ステートメントを省略するかどうかを切り替えます 早速試して

トゥイーンライブラリの対象は何も表示オブジェクトのx,y座標に限ったことではありません。数値はもちろんBooleanやタイムラインフレーム数も動かすことができます。 今回はタイムラインをTweenerで動かしてみました。 まず、トゥイーンさせるためのフレームアニメを作成しましょう。せっかくなのでシェイプトゥイーンで作ってみます。 ＊シェイプトゥイーンにはイージングを付けることが出来ないのですが、Tweenerを使うことでそれが可能になるというちょっとしたハッピーもあったりします。 このアニメは1〜150フレームまで用意されています。が、実際にトゥイーンさせるのは1〜100フレームです。なぜ50フレーム余分に作っておくかと言うと、easeOutBack等の「目的地をすこし飛び越えて戻る」タイプのイージングがあるためです。飛び越えた分のアニメまで余分に作っておけばこれらのイージングでもちゃんと

どうもtaichiです。 過去にFlashで映像を利用する記事をいくつか書きましたが、 今回は、HD画質の映像でFlashのアニメーションを利用する場合どうしようか 考えたときの記事をひとつ。 Adobe Premiereなどで映像を編集していると、 テキストやタイトルのエフェクトが少なくモヤモヤします。 AfterEffectsで作ることもありますが、 簡単なアニメーションの時ほど”Flashで作ればもっとサックリ作れるのに”っと思ってしまいます。。 Flashで映像書き出しを行うと、 ステージサイズに関係なく、 720×480で映像が書き出されます。 最近すっかり家庭用でも当たり前になったハイビジョン映像で利用したい場合、 最大で1920×1080pxで書き出す必要が出てきます。 使いたいところだけ利用したいだけなのに面倒！！ っということで、 以下の方法を試してみました。 ①まずはイ

人が必ず立ち止まる場所で、 自然に視界に入るところに、 自分が映っている違和感を感じ、 ただ見ているだけなのに、 既に自分が参加している広告。 それが僕が感じたこの2つの広告の共通点です。 このパラレルワールド的な第三者視点の感覚。 AR概念の使い方。 デジタルサイネージ。 そういったモノは、何もARToolkitを使ってますとか、PTAMだとか、パーティクルがどうとか、マーカーを印刷するとか、そういう事では無いのですよ。 そう改めて考えさせてくれるステキな広告です。 街の中に”見てもらえる場”をつくり出す技も素晴らしいし、 ちょっとした信号待ちの時間で、楽しませたり、考えさせて、覚えてもらう、そんな”広告”としての力も、あたりまえのように備えている。 こういうモノを作りたいですね。

お久しぶりです。インターンから正社員にジョブチェンジした新卒の堀口です。 ちまたではHTML5が騒がれていますね。 大抵Flashと比較されるのでFlash vs HTML5 みたいな構図が出来上がりつつあるの？？ みんなFlash嫌いなの？ って気持ちになってきますが、そもそもぼくはFlash vs HTML5というのに疑問を感じます。 お互のいい所を引き出せるクリエイターになりたいです！ いい機会なので、HTML5も覚えちゃいたいですね。 ともかくまずはHTML5に触ってみないと何も始まらないので、先週末に少し遊んでみました。 以前プログラマーの先輩に見せていただいたブラウザ上へのファイルのドラッグアンドドロップが衝撃的だったので、 ぜひこれをやりたいの、僕は。 ＊調べたらブラウザ上へのファイルのドラッグアンドドロップはFirefox3.6の対応のみでした。 ということでこんなデモを見

CS4から3軸回転(rotationX,rotationY,rotationZ)ができるようになってうれしくて毎日ぐるぐるさせてますが、sprite自体は平面なので回転によってはペラペラしてしまいます。 なので常に前を向かせてみました。 最初、回転している親のrotationX,rotationY,rotationZをみて補正しようとしていましたが、どちらを向いているかさっぱりわからなくなってきたのでmatrix3Dを使います。 //自分の位置を保存 var v3:Vector3D=new Vector3D(this.x,this.y,this.z) //回転している親のmatrixを複製 var mat3D:Matrix3D=pO.transform.matrix3D.clone(); //反転 mat3D.invert(); //位置を補正 mat3D.position=v3 //代入

最近は久々にAS2であれこれしてるうちにProg4のAS2版みたいのができちゃいました。Prog3ならCellfusionさんのがあるって途中で気づいてたんですが後に引けない感じで…。需要があればそのうちご紹介します。 DoBetweenAS3コマンド さて、BetweenAS3にoverwriteが実装されより実戦向きになってきたと聞いたのでそろそろTweenerから乗り換えてみようと思い、Progression4用にカスタムコマンドをつくりました。 ※2010/2/19時点でwonderflにはoverwrite版は反映されていません コンセプト 考え方としては、DoTweenerライクに使えるというか、インターフェイスを合わせることを重視してます。※(追記)transitionにIEasingインスタンスを指定する必要があります。一緒なのはパラメーター名だけ。 これによりBetwee

haraです。 今回は光の表現を試みてみます。 光の表現？ 光の表現、もう少し詳しく言うと、「空間を感じさせる光の表現」ですね。 これの難しいところは、単純に「暗い中に明るい色でモチーフが描かれている」だけでは 光を表現した感じにはならず、空間があって、その空間全体に光の影響が出ているところを 見せないといけないところかな、と思います。 今回は、素直にこの発想で試作してみました。 クリックするとじわじわと浮かんでいくパーティクルが発生しますが、このパーティクルの発生と同時に強い光が放たれて、画面全体が照らされたようになります。 どうでしょう、そこそこに光らしく表現できているでしょうか。 仕組み 仕組みとしてはごくごく単純で、手前で発生させているパーティクルを背面に配置しているBitmapDataに、拡大率をランダムにずらしながら描写しているというものになります。 動きの素材にしているパーテ

クラスライブラリやASDocsを読んでないと気付かないかもしれないのですがProgressionにはさまざまな便利なクラスやUtilityメソッドが存在します。 その中のひとつで何気に強力なプロパティを6つ紹介します。 CastDocument.topCastDocument.bottomCastDocument.leftCastDocument.rightCastDocument.centerCastDocument.middleこれらのプロパティはステージの四辺の座標を取得するためのものなのですが、StageAlignやStageScaleModeの組み合わせで微妙に変わってくる面倒な計算を行ってくれます。 topが上辺のY座標、bottomが下辺のY座標、leftが左辺のX座標、rightが右辺のX座標。またcenterがX方向の中心、middleがY方向の中心となります。 たとえば

Progression4.0.1 Beta1.1がリリースされWonderflにも組み込まれています。 4.0以降ではリスト系コマンドのショートハンドなど少し機能が変わっているのでその辺をまとめてみます。 commands内のパッケージ構成が大幅に変わってます commands.display.* : AddChildなどの表示系 commands.lists.* : SerialListなどリスト系 commands.manager.* : Gotoなど遷移系 commands.media.* : サウンド系 commands.net.* : 通信系 commands.tweens.* : Tween系 といふうに構成としてはわかりやすくなりました。インポート文が増えてしまいましたが、入力保管機能のあるエディタを使えば、さほど不便はしないと思います。 また増えたコマンド減ったコマンドもた

こんにちは、秋雨続きでも憂鬱にはならない（と信じ込む）kijimaです。 Flash開発に欠かせない、動画・サウンド。扱うにあたってファイル形式がたくさんあってよくわからない！という声をよく聞き、また自分もその一人だったので、今回まとめてみました。

デザイナーを挟まずに自分で素材を制作する場合、 illustrator,photoshopを使わずFlashだけで作る事が多いと 前に紹介した事がありますが、 Fireworksもイラスト書く時に使ったりします。 ※弊社のサービス、ものづくり応援サイトdododayのアバター illustrator,photoshopと比べると癖があるので、 イラストを書くには慣れが必要かもしれませんが、 絵を描けない人でも自動シェイプ は知っておいて損はないと思います。 ウィンドウ＞自動シェイプ でパネルが立ち上がります。 パネルからステージへドラッグ＆ドロップで それぞれのシェイプが自動で生成されます。 一見しょぼいイラストが生成されるので 何だこの機能と思いがちですが、 生成されたものを元に素材を作ると 1から自分で作るよりも圧倒的に爆速です！ ↑この時計もfireworksの"スタイル"を貼付けて

haraです。 今週の時計は、針がミサイル（あるいは車や飛行機と言ってもいいですが）のように、指定した位置に指定した向きで移動する時計です。 Rocket Clock ミサイルぽい動きって時折ほしいなーと思うことがあるのですが、指定の位置と角度へ違和感なく移動させるというのはなかなか実装が面倒に思えて手を出していませんでした。 今回は、TweenerのCurveModifiersを使ってそこそこ簡単にそれっぽいものができたのでご紹介します。 TweenerのCurveModifierを使って、指定の位置へ、指定の角度で移動させるために、大体こんな感じのポイントを移動させるようにしました。 移動元から目標までの間に、A, B, Cのポイントを取ります。 これらをTweenerの_bezier属性に入れることで、目標への移動時に、それほど違和感のないルートを通りつつ向きを合わせて移動することが

以前出演したDTL.asのイベントで知り合った ライゾマティクスの真鍋大度さんのラボにお邪魔してきました！ もう100万PV以上あるダイトさんのelectric stimulus to faceの動画は DTL.asでも一番笑いが起こってました。 世界でも注目されていて、 外国からもオファーが来まくっているみたいですね。 ブログ見てても色んなところに行っているようで、 く～うらやましい！ 続きを読む 今回撮影してくれたのが映像作家の本間無量さん。 今までで一番電流を流されているらしい・・。 この動画の左上の方ですね 準備中のダイトさん。 自分で腕で電流をチェックしています ぺたぺたとセンサーを貼っていくのかなーと思っていたら、 筋肉の位置を手で探りながらの作業で結構大変そうです。 貼り終わったら、 一箇所づつ電流を自分で上げていき、 限界だと思うポイントで手を上げて知らせる作業。 「今まで