[読了時間:1分] ウェブコンテンツに魅力的な動きを付与できるFLASH。しかし、Adobe社の公式オーサリングツールは高額で、デザイナーじゃないと手が届きにくかった。その対抗馬として注目を浴びている次期ウェブ標準仕様のHTML5をベースに、手軽にアニメやスライドを作成できるツール「Hype」が米時間の5月20日にお目見えした。 Mac OS X用ソフトとして既にApp Storeで販売中。価格はUSストアでは29ドルで、日本だと3500円と割高だが日本語ローカライズ版が入手できる。 ツールは、FLASHオーサリングツールなどを使用したことがある人なら、数分もあれば使い始められるだろう。始めてこの手の作品を手がける人は少し手まどうかもしれないが、チュートリアル動画があるので、これを一通り見れば見よう見まねでスタートできるだろう。また、今回のバージョンでどのようなことができるのかは、ギャラリ

今回は「PixelBenderでサーモグラフィ表現を作ってみよう」ということで PixelBenderフィルターを作っていく過程を合わせて書いてみます。 本来、サーモグラフィは見かけの温度を色として表示するため 赤外線強度を測定できるカメラを使用しなければ実現はできないのですが 画素のルミナンス（明るさ）を色に置き換えることで、 サーモグラフィっぽいビジュアルを表現してみます。 必要な処理について考える まずは各ピクセルについてどのような処理が必要か考えます。 今回PixelBender内での処理の工程としては下記の図のようになります。 途中で入るレベル補正は、なくても構いませんが、 より細かい調整ができるように処理を入れています。 実際に作ってみる 1.Adobe Pixel Bender Toolkitを起動 2.まずはカーネルについて記述 < languageVersion : 1.

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

こんにちは、堀口です。 ということで、今回からしばらく、話題のtweenライブラリ BetweenAS3の使い方をやはり人気のtweenerと比較しながら紹介していきます。 なおtweenerは現在開発が終了しているライブラリで、BetweenAS3は現在開発中のAlphaバージョンとなりますので、利用する際はよく考えてお使いください。 何事もとりあえずやってみるという事が大切な気がするので、 難しい事は書かずに、こうやれば使える！というかんじで進めます。 ライブラリのバージョンと配布先 今回使用する各ライブラリのバージョンは以下のとおりです。 tweener1.33.74 - http://code.google.com/p/tweener/downloads/list BetweenAS3 r3022 - http://www.libspark.org/svn/as3/BetweenA

お久しぶりです！ どうもtaichiです。 随分と長いことlevel0書いていませんでした！ 久々の投稿になります！ で、 本当に突然なんですが、Flashのシェイプトゥイーンって面白いですよね！ 過去にもシェイプトゥイーンを利用して 立体表現とか、ボーンツールと合わせてみたりと色々試しましたが、 今回はシェイプトゥイーンでこんなエフェクトを試作してみました。 ↓↓↓ 細いストライプが画面を横切るエフェクト。 テレビや映画で時折見かけるこの映像効果。 Flash(のタイムラインで)簡単に出来ないかな—っと考えて試してみてたら 意外にも１分ちょっとで簡単に作れてしまう方法だったので紹介してみようと思います。 １．シェイプで図形を先ず用意 ・ストライプを左右に移動させるので長方形を用意。 今回は長尺でつくるので80フレーム(30fps)にしています。 ２.開始と終わりのキーフレームを先に準備

PC用に作ったFlashアニメーションをiPhoneでも使いたいという話があり、 Flashアニメを連番画像で書き出してアニメGIFにする以外に 何かいい手はないかと調べていたところ、Gordon.jsというものを教えてもらいました。 http://github.com/tobeytailor/gordon JavaScriptでswfを解析し、ベクターグラフィックをSVG形式で描画するため iPhoneのSafariを含めたSVGが利用できるブラウザであれば FlashPlayerを使わずswfアニメーションを表示できるようです。 こんな感じ 実際にいろいろ実験してみて気付いたところとしては、 ・対応しているのは「FlashPlayer1」向けに書き出されたswfのみ ・画像は表示されない、ベクターのみ（グラデーション可） ・ローカルでは動作しない（環境によるのかも） FlashPlay

「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 BIGLOBEのサービス一覧

ZedBoxはActionScript製のオープンソース・ソフトウェア。JavaScriptの進化やHTML5の登場によって、これまでであればFlashでしかできなかった表現がブラウザだけで可能になりつつある。とはいえ一般に浸透するのはまだ先のことなので、しばらくはFlashの優位性は動かないだろう。 そしてさらにFlashは進化している。音楽や動画といったマルチメディア系に強くなった今、次なる分野は何が考えられるだろう。その一つが3D空間だ。3Dがスムーズに動くようになればゲームをはじめ様々な分野で活用されることだろう。その一端をZedBoxで見ることが出来る。 ZedBoxは2.5Dを標榜している。つまり3Dではない。なんちゃって3Dとでも言えるかも知れないが、その代わり表示はとてもスムーズだ。サンプルとして球の周りに球が浮かんで回るFlashが提供されている。マウスの動きに追従し、滑

どうも、太一です。 今回はAfterEffectsCS4のXFL書き出し機能を色々試してみた時のメモです。 FLV形式で書き出した時の比較は以前の記事で試しているので、 今回はAEのコンポーネントをPNG形式で書き出して利用してみました。 ーー アニメーション素材はPhotoShopCS4でアニメーションさせたいオブジェクト毎に レイヤー分けして用意します。 折角なのでクリスマスカードを作ってみる事にしました。 完成したpsdファイルをAfterEffectsのプロジェクトに追加。 プロジェクト内のpsdを更にコンポジションに追加すると、 psdのレイヤー構造が保たれている事が分かります。 ここではデュレーションを10s程に設定し、フレームレート30で設定しました。 AEの持つモーションプリセットの中でも、テキストアニメーションを利用する際は あらかじめ、「レイヤー」→「編集可能なテキスト

携帯Flash開発で、アウトラインの制限をなくし、より豊かなアニメーションにする方法や、空間を感じさせる演出、最適な再生速度を考える 連載第2回「ケータイFlashでさくさく動くIllustratorデータの作り方」の記事でも紹介した“ポケットフレンズ・コンチ”。 連載第2回では、『携帯Flashで動かしやすいキャラクターデザイン』をテーマにIllustratorデータ作成のテクニックを解説しました。 今回は、そのコンチを実際に携帯Flash（Flash Lite）で動かしてみます。 携帯Flashの常識を打ち破れ！ 携帯Flashでキャラクターを動かす際、処理速度が遅い、データが重い、アニメーションが制限される、という理由でアウトラインがないキャラクターをデザインすることが常識とされてきました。 が、連載第2回でも解説しましたが、ビジュアルを重視する“ポケットフレンズ・コンチ”では、デザ

ActionScriptでトゥイーンを作ろうとしたとき、始まりと終わりで別々のカスタムイージングを指定したいと思うことが多々あります。例えば、始まりはSineぐらいの緩やかなスタートにして、終わりはExpoぐらいの急なストップを指定したいという場合です。 Flash Professinalでは8以降のバージョンでタイムラインアニメーションであればカスタムイージングを作ることができますが、スクリプトでは始まりと終わりが別々のカスタムイージングは簡単に実現できません。そこで、そんなトゥイーンを簡単に作れるように、スクリプトジェネレーターを作ってみました。 デモ(Flex 4) (右クリックの[ソースを表示]でソースの表示可能) wonderfl版 (Flex 3) ライブラリ＆サンプル(CS4) 使い方 上記のライブラリ＆サンプルからソースファイルをダウンロードします。jpフォルダにライブラリ

スクリプトで動きを制御する際は、数式などで動きを表すことが多く 直感的に動きを作れなかったり、思い通りの動きをさせるのにすごく時間がかかったりすることがあります。 タイムラインで作れるものはタイムラインで作っちゃえばいいのですが 変数だったり、仮想空間での座標などスクリプトからしか設定できないものもあります。 そんなときにはタイムラインでさくさくっと動きを作って、 その座標値だけをスクリプトから利用すると、すばやく直感的に動きを作れたりします。 以下の例ではPaperVision３Dのカメラの位置を、タイムラインで直感的に制御します。 タイムライン上で動かしているMCのX座標やY座標をスクリプトで取得して、 それをPaperVision３DのカメラのXYZ座標に割り当てて対応させています。 function setCameraPosition(e:Event = null):void {

久しぶりに爆速シリーズを 今回はロウソクの炎のアニメーションです。 ↑クリックすると消えます これだけで炎が瞬く部分は完成です グラデーションやフィルタの数値は自分の好みに合わせて作ってください 次回は炎の消える所か煙の表現を説明します

"Flash制作に欠かせない3つのツール"というお題で KAYACのFlasherが記事投稿していく企画が始まりました。 僕はアニメーション作成がメインなので他のflasherとは ネタがかぶらそうですね。 ただASバリバリの人には なにも参考にならないかも・・・ とりあえず"ツール"という言葉を拡大解釈して 普段重宝しているものをご紹介します。 1.ペンタブレット コマアニメーションを作る時には必須のツールですね。 絵を描きやすいだけでなく、 ブラシツールで筆圧を取れるので マウスでは難しい表現が簡単にできます。 デメリットはシンボルをダブルクリックした際に位置がズレやすい点ですが、 これは前に紹介した"同じ位置で編集"をショートカットに登録しておけば防げるので問題無しです。 Intuos4のSmallを使用しています。 小さいと手首の動きだけで画面全体を移動出来るので スピード重視でこ

評判がよかった爆速!!!アニメーションの作り方の記事 爆速!!!"歩く"アニメーションの作り方 爆速!!!"走る"アニメーションの作り方 爆速!!!"動く点線"アニメーションの作り方 爆速!!!"鳥の羽ばたき"アニメーションの作り方 正面編 爆速!!!"鳥の羽ばたき"アニメーションの作り方 真横編 爆速!!!"光の反射"アニメーションの作り方 結構やった気がしてたけどまだ6件しか投稿してないのか・・ そろそろ爆速ネタを復活しようかとおもってます。 なにか見たいものがあればコメント欄でお伝えください！ 爆速の作業にはかかせない これだけは登録した方がいいというショートカットを５つご紹介します。 1.同じ位置で編集   ・編集＞同じ位置で編集 "シンボルを編集"と似ていますが "同じ位置で編集"は何階層でも潜れるというメリットがあります。 以外と盲点。 用はシンボルをダブルクリックした時と同じ