サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
2024年ランキング
100th.blog96.fc2.com
遅ればせながら、最近になってPapervision3Dを使い始めてみました。 で、おそらく大勢のヒトがやってみたであろうcoverflow風の表示をオレもやってみました。実はcoverflowってちゃんと見たことないのですが、フンイキで。。。 並んでるカバー（のつもりの板）をクリックすると、それが中央に表示されます。 今回のサンプルでは、Papervision3D_2.0.883.zipとtweener_1_33_74_as3.zipを使用しています。 なのでサンプルコードをパブリッシュするためにはそれぞれのzipファイルをダウンロードして、flaファイルと同じ場所に展開しておく必要があります。 サンプルのスクリプトは、flaファイルの最初のフレームにフレームアクションとしてこんなカンジに記述しました。 import org.papervision3d.objects.primitives
前回のエントリにひきつづき、Pixel Benderをflashでフィルタとして使用してみました。なので、実行するにはFlash Player 10が必要デス。 今回は、エッジ抽出です。 左上の読込ボタンをクリックしてフィルタをかけたい画像ファイルを選択すると、エッジ抽出後の画像が表示されます。 反転ボタンで、明暗が反転します。テキストボックスに0.0～1.0までの値を入力して二値ボタンで、二値化します。 反転ボタンと二値ボタンはもう一度押すとキャンセルされます。 今回も、メインの処理はPixel Bender Toolkitを使って作って、ソレをflashでフィルタとして使用しています。 Pixel Bender側のソースはこんなカンジです。 <languageVersion : 1.0;> kernel edge5 < namespace : "Your Namespace"; ven
気泡っぽいパーティクル 粒子がつぎつぎと沸いてくるタイプのサンプルです。 ステージ中央からマウスカーソルと逆の方向に向かって移動する粒子がつぎつぎと生成されます。粒子はだんだん大きくかつ透明度が低くなって、その後だんだん小さく透明度が高くなって最後には消えます。 このサンプルでは、パーティクルとしてスプライトを継承したクラス(Particle)を作りました。フレームイベントで、パーティクルの表示領域となるスプライトを生成しステージに配置、表示領域となるスプライトにパーティクルを配置、マウスの位置から表示領域となるスプライトを回転。という風にしています。 パーティクルは白い円にグローフィルタをかけたもので、ｙ軸方向にゆらぎながらｘ軸方向に進みます。フレームイベントで透明度やサイズを変更しています。 パーティクルのソースコード(Particle.as)はこんなカンジです。 package {
flash CS4にアップグレードしました。イロイロと新しい機能が増えてるみたいですね。 というワケで、以前DisplacementMapFilterを使って作ったレンズと似たようなモノを、今回はAdobe Pixel Bender Toolkitで作ったフィルタをflashで使用して作ってみました。 左側の画像の上でマウスカーソルを動かすと、レンズの中心座標がマウスカーソルの位置になります。 右側は元画像デス。 Pixel Bender toolkitで作成したレンズなフィルタを、画像（ムービークリップ）にフィルタとして設定しています。 Pixel Bender側のファイル（lens.pbk）はこんなカンジです。 <languageVersion : 1.0;> kernel Lens < namespace : "Your Namespace"; vendor : "Your Vend
テキストを一文字ずつ表示するサンプルです。タイプライター表示っていうんでしょうか。 上の欄に文章を入力して「表示」ボタンを押すと、その文章が下の欄に一文字ずつ表示されていきます。インターバル欄に数字を入れると文字を表示する時間間隔が変わります。 また、文章中に{数字}と入れるとその部分でインターバルを長くすることができます。{10}とかをそのまま出したいときは{{10}と書けばよいデス。 今回は、次に表示すべき文字を戻すIntervalStringクラスを作ってみました。 package { /** * 指定インターバル毎に文字を取り出せるクラス。 */ public class IntervalString { /** 元の文字列 */ private var _src:String; /** インターバル */ private var _interval:int; /** カウンタ *
カラーピッカーのサンプルを作ってみました。 上部のカラーパレットをクリックすると、クリックしたところの色が選択されて右下に表示されます。 Ｒ、Ｇ、Ｂ、色相、彩度、明度のテキストフィールドは、選択した色のソレゾレの値デス。コレの数値をいじると選択色はその値の色になります。 色相、彩度、明度はソレゾレＨＳＶ色空間のＨ値、Ｓ値、Ｖ値となってます。のハズです。 カラーパレットは、どんなのが標準的か知らないのでｘ方向にＨ値を変化させて、ｙ方向は上半分がＳ値のグラデーション、下半分がＶ値のグラデーションになってマス。あ、描画はBitmapDataにsetPixelしてマス。 スクリプトはこんなカンジです。 import flash.display.BitmapData; import flash.geom.Transform; import flash.geom.ColorTransform; //
イワユル円グラフを表示するサンプルです。 A,B,Cの入力欄に数値を入力して「実行」ボタンを押すと、入力値の比率に応じた円グラフが描画されます。 どうやって描画してるかってーと、 鋭角が１度の三角形のスプライトをグルッと360度分作る（非表示で）データの比率にあわせて、作成したスプライトをColorTransformで着色ENTER_FRAMEイベントでスプライトを表示していくといったカンジです。今回のサンプルではこのへんの処理をSpriteを継承したクラスにまとめてみました。 で、そのクラス(PieChart.as)のソースコードはこんなカンジです。package { import flash.display.*; import flash.events.*; import flash.geom.*; /** * 円グラフ。 */ public class PieChart extend
粒子がつぎつぎと沸いてくるタイプのサンプルです。 ステージ中央からマウスカーソルと逆の方向に向かって移動する粒子がつぎつぎと生成されます。粒子はだんだん大きくかつ透明度が低くなって、その後だんだん小さく透明度が高くなって最後には消えます。 このサンプルでは、パーティクルとしてスプライトを継承したクラス(Particle)を作りました。フレームイベントで、パーティクルの表示領域となるスプライトを生成しステージに配置、表示領域となるスプライトにパーティクルを配置、マウスの位置から表示領域となるスプライトを回転。という風にしています。 パーティクルは白い円にグローフィルタをかけたもので、ｙ軸方向にゆらぎながらｘ軸方向に進みます。フレームイベントで透明度やサイズを変更しています。 パーティクルのソースコード(Particle.as)はこんなカンジです。 package { import flash
スライスした画像に対して、揺れ／振幅／回転の３種類の変形をするサンプルです。 harayokiさんのバスキュールサイトのツボの所エントリに、スライスしたムービークリップを使って変形するテクニックが解説してあって面白そうだったのでマネしてみました。 といっても、オレが作ったサンプルはかなり泥臭い書き方になってますケド…。 いずれの変形も、元の画像（ムービークリップ）を高さ１のムービークリップに分解してonEnterFrameで位置や幅を変えています。 揺れは、各ムービークリップがサインカーブを描くように_xプロパティを設定しています。フレーム毎に角度を変えて、画像が波打ってるように見せています。 振幅は、揺れとだいたい似たようなカンジなんですが、こっちは幅を変えています。 回転は、表示中の画面の上辺と、次に表示する画像の下辺が90度の角度で接してると仮定して、ソレがグルっと下向きに回転するよ
TOTOのトップページにあるフラッシュが面白いのでさっそくマネしてみました。だいぶ貧相なカンジになりましたケド。 水面を横切るようにマウスカーソルを上下させると波形を変えられマス（ステージを一回クリックする必要があるかもしれません）。 空気を通して見た画像に水を通して見た画像をちょっとずらして重ねておいて、水を通して見た画像にマスクをかけて、フレーム毎にマスクを変形（再描画）することでそれっぽく見せています。 水面の揺れは、バネで連結した（っぽい）点を１６個並べてソイツラを曲線でつないで（実際は各点を制御点に、各点の中点を端点とする二次ベジェ曲線）います。各点は時間がたつと元の位置に戻るようにもとの位置ともバネ（っぽいナニカ）で接続しています。ただし、各点はｙ方向にのみ移動します。 今回のサンプルでは、上記の水面をあらわす点をWaterPointクラスとして定義しました。WaterPoin
ランダムに配置した点を７つのグループにわけるサンプルです。 各点の色が、その点が所属するグループをあらわしています。 「再配置」ボタンを押すと、ランダムな座標に点が300個配置されます。この時点では所属するグループはバラバラで、近くにある点が別のグループに属していてもおかまいなしデス。「グループ化」ボタンを押すと、点は位置が近いグループに配属しなおされます。グループ分けがすんだら背景色が各グループの領域として塗り分けられます。 グループ分けの仕方は、まず各グループごとに所属する点の重心位置を求めます。すべての点について、各グループの重心座標との距離を求めて、もし自分が所属するグループの重心座標よりも別のグループの重心座標の方が近かったらそっちのグループに異動します。コレを、異動する点がなくなるか、100回くりかえすまでやります。Ｋ平均法というらしいデス。たぶん。 グループ分けが終わったら、
イージングにバネっぽい動きを使ってみました。 「ばね」はバネの強さで、数字が大きいほどひっぱる力が強いデス。 「減衰」は収束する速さで、小さいほど収束するのが早いデス。1でまったく減衰しないデス。 「位置」は'_x'プロパティ、「大きさ」は'_width','_height'プロパティ、角度は'_rotation'プロパティ、「ブラー」はBlurFilterのブラーの強さをフレーム毎に変化させています。 変化量は、変化量をp'、直前の変化量をp、「ばね」をk、「減衰」をa、バネの伸びをlとすると p' = p * a + l * kといったカンジで算出しています。 ActionScriptは以下のようなカンジです。import flash.filters.BlurFilter; // ばね定数 var k:Number; // 減衰定数 var a:Number; // 初期情報の保存 j
湯気がたってるような表現をするサンプルです。 やってることはFlash CS3で水面ぽい画像表示と似たようなカンジで、ENTER_FRAMEでフレーム毎にオフセット値を変えながらBitmapData#perinNoiseでパーリンノイズを生成してます。ただしDisplacementMapFilterを使うんじゃなくて、白いスプライトのマスクとして生成したビットマップを設定しています。ソイツをお好み焼きの画像に重ねてマス。 今回はBitmapクラスを継承して湯気を描画するSteamクラス（Steam.as）を作ってみました。 package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.BitmapDataChannel; import flash.geom.Point
カラーピッカー カラーピッカーのサンプルを作ってみました。 上部のカラーパレットをクリックすると、クリックしたところの色が選択されて右下に表示されます。 Ｒ、Ｇ、Ｂ、色相、彩度、明度のテキストフィールドは、選択した色のソレゾレの値デス。コレの数値をいじると選択色はその値の色になります。 色相、彩度、明度はソレゾレＨＳＶ色空間のＨ値、Ｓ値、Ｖ値となってます。のハズです。 カラーパレットは、どんなのが標準的か知らないのでｘ方向にＨ値を変化させて、ｙ方向は上半分がＳ値のグラデーション、下半分がＶ値のグラデーションになってマス。あ、描画はBitmapDataにsetPixelしてマス。 スクリプトはこんなカンジです。 import flash.display.BitmapData; import flash.geom.Transform; import flash.geom.ColorTransf
ステージ上でマウスボタンを押すと、押してる間ジワジワっと液体が広がるようなカンジになります。 シミの描画は、塗りつぶしで曲線で閉じた図形を描いてるダケです。マウスボタンを押してる間はその図形がだんだんデカクなるという寸法デス。 曲線の描画方法は、座標の配列を作っといてソイツラをコントロールポイントに、配列上で並びあった座標の中点をアンカーポイントにしてGraphics#curveToを実行しています。Foundation Actionscript 3.0 Animation:Making Things Move!に書いてあったテクニックです。 そんで、じゃあ座標の配列はどうやって作ってんのかってーと、ボタンを押した時点でマウスカーソルの座標を保持するオブジェクトをいくつか作ります（サンプルでは２０個）。で、ボタンを押してる間は、ソイツラが放射状に離れてくようにしてます。ソレゾレの座標の離れ
マウスカーソルを画像の上にもってくと、レンズっぽく拡大されます。 レンズで部分拡大のCS3版デス。 以前エントリしたモノと同じで、入力値にあわせてDisplacementMapFilterを作って、マウスカーソル周辺の画像に適用しています。 右側に出る青緑っぽい画像が、生成したマップ画像です。 今回は、レンズ用のDisplacementMapFilterを生成するファクトリクラスとフレームアクションで構成してみました。 ファクトリクラス(LensFilterFactory.as)はこんなカンジです。 package { import flash.display.BitmapData; import flash.filters.DisplacementMapFilter; import flash.geom.Point; /** * レンズフィルタのファクトリ。 */ public clas
12個の円が虫の群れっぽい動きでマウスカーソルを追いかけるサンプルです。 この手の群れを表現するのにはBoid理論というのをよく使うそーで、このサンプルも一応それらしい作りにしています。 Boidでは、個体にSeparation／Alignment／Cohesionの３つのルールに基づく動きをつけることで全体として群れになるようにします。 Separationは各個体を分離するルールで、近づきすぎたら距離をとる。というのが基本みたいデス。 Alignmentは個体を整列させるルールで、個体が群れ全体の動きにつられるというカンジです。 Cohesionは群れを結束させるルールで、各個体が群れに収まろうとする動きデス。 このサンプルでは、上記ルールに基づいた３つのベクトルをフレーム毎に算出し、現在の動きを示すベクトルと算出した３つのベクトルを合成することで次の動きを決定しています。 この計算と
マウスカーソルの動きにあわせて曲線が変化するサンプルです。ゴムひもの端をつまんで動かすようなカンジ（？）です。 曲線はGraphics#curveToメソッドを使って描画しています。 サンプルではマウスカーソルの動きに連動する描画オブジェクトをいくつか用意して、そいつらの座標をコントロールポイント、２つのコントロールポイントの中点をアンカーポイントとしてcurveToメソッドを連続で使用しています。 中点をアンカーポイントにするのは、たしか「ActionScript 3.0 Animation」のcurveToのサンプルでやってたやり方だったと思います。 コントロールポイントとなる描画オブジェクトは、ターゲットとなる描画オブジェクトから一定の距離に減速しながら近づく動作をします。サンプルではコレをスプライトの派生クラスとして実装してみました。 package { import flash.
ツルツルの床っぽく、タイルが次々と落下してくるのが床面にうつりこんでいるようなサンプルです。 タイルをクリックすると、背景がそのタイルの色になります。 このサンプルでは、ステージの上部２／３に落下するタイルを描画するムービークリップを配置して、フレーム毎にそのムービークリップから上下反転／縮小した画像を切り取り、下部１／３に表示しています。 また、床面のムービークリップにはアルファマスクをかけてソレっぽく透過するようにしてます。 ActionScriptはこんなカンジです。 import flash.geom.Matrix; import flash.display.BitmapData; import flash.geom.Rectangle; import flash.geom.ColorTransform; // 背景 var depth:Number = _root.getNext
Flash CS3が届いたということもあり、以前エントリしたDisplacementMapFilterを使った水面ぽい画像表示をCS3で書き直してみました。 某オブジェの写真がゆらゆら揺れます。速度／変化量に数値を入れて「設定」ボタンを押すと揺れ方が変わります。また、画像の上にマウスを持ってくとDisplacementMapFilterで使用している置き換えマップ画像が表示されます。 今回は、水面ぽく表示する表示オブジェクトのクラスを作ることにしました。せっかくCS3だし。作ったクラスのインスタンスにaddChildすることで、任意の表示オブジェクトを水面ぽく表示できるという寸法デス。 クラスはWaterSurfaceという名前でWaterSurface.asというファイル名デス。ソースはこんなカンジです。 package { import flash.display.*; import
画像をタイル状に分割するエントリと同じようなモノをFlex2でも作ってみました。 フラッシュ版と同じように、横／縦の分割数を入力して「分割」ボタンを押すとタイルが生成されます。 ソースコードはこんなカンジ。 package { import flash.display.*; import flash.events.*; // 画像をタイル状に分割するサンプル public class Tile extends Sprite { // 横方向分割数入力欄 private var colInput:LabelInput; // 縦方向分割数入力欄 private var rowInput:LabelInput; // 分割ボタン private var splitBtn:LabelButton; // 元画像 [Embed(source='image.jpg')] private var Im
一枚の画像をタイル状に分割するサンプルです。 横／縦の分割数を入力して「分割」ボタンを押すと、画像が分割されます。 分割した画像は、ちょっとクリアっぽい加工をしたムービークリップにして、マウスでドラッグできるよーになってマス。 分割元となる画像はムービークリップとしてステージに配置しています。画像のクリッピングは、bitmap#draw()を使ってマス。 このサンプルのActionScriptはこんなカンジです。 import flash.display.BitmapData; import flash.geom.Rectangle; import flash.geom.Matrix; import flash.geom.ColorTransform; import flash.filters.BevelFilter; // 分割数の初期値 col_txt.text = "12"; row
天井からぶらさげる 天井からひもがぶら下がってる風にボールを配置します。 ボールはつかめます。 各ボールは間隔が固定されて数珠つなぎになってます。先頭のボールは天井に固定、それ以外のボールは重力で下に落ちようとします。 つかんだボールはマウスカーソルの位置に固定されます。 このサンプルのActionScriptは以下です。第一フレームのアクションとして記述しています。 // 節の数 var pointCnt:int = 10; // 節の間隔 var dist:Number = 20; // x座標 var initX:Number = stage.stageWidth / 2; // 重力加速度 var gravity:Number = .5; // つかんでいる節 var target:Object = null; // 節の配列 var pointArray:Array = [];
DisplacementMapFilterにパーリンノイズ画像を設定するよくあるサンプルです。 速度と変化量を設定して表示ボタンを押すと、左側にフィルタを適用した画像、右側にフィルタに使用している画像が表示されます。 やってることは、まずパーリンノイズのオクターブ毎に変化スピードを決めといて、フレーム毎にオフセットをそのぶん変化させてパーリンノイズ画像を作って、DisplacementMapFilterにセットするというカンジです。 以下が上記サンプルのActionScriptのソースです。 image_mcというのがフィルタを適用する元画像（ムービークリップ）です。 import flash.display.BitmapData; import flash.geom.Point; import flash.geom.Matrix; import flash.filters.Displac
このページを最初にブックマークしてみませんか？
『天井からぶらさげる 百匹目の猿』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
