FN1404001 | CSS3: 3次元空間に立方体をつくって回す ー transformプロパティ | HTML5 : テクニカルノート
CSS3のtransformプロパティは、要素に回転・伸縮・傾斜・移動などの座標変換を加えます。さらに、transform-styleプロパティも合わせて用いれば、要素が3次元空間で変換できます。記事「Creating an animated 3D CSS cube using 3D transforms」のサンプルを参考に、CSSで3次元空間に立方体をつくって回してみます(サンプル001)。 サンプル001■CSSで3次元空間に立方体をつくって回す 01 3次元空間の座標変換で使うCSSプロパティ CSSのtransformプロパティは、要素に座標変換を加えます。具体的には、要素の回転や伸縮、傾斜、平行移動がプロパティで定められます。transformプロパティの値には、変換関数を与えます。次表001に掲げたのは、2次元平面の座標変換を行う関数です[*1]。 表001■transform
FN1208001 - TweenJSでインスタンスにトゥイーンアニメーションを加える - HTML5 : テクニカルノート
CreateJS SuiteのTweenJSライブラリを使うと、いくつものトゥイーンを組合わせてインスタンスに加えられます。また、値の変化のさせかたも、さまざまなイージングの関数から選べます。TweenJSでインスタンスのトゥイーンアニメーションをつくってみましょう。 01 ランダムな塗り色で星形を描く インスタンスはShapeにして、星形を描くことにします。まだ、トゥイーンアニメーションは設定しません。「EaselJSで描いた星形を回す」で書いたコード001に少し手を加えたのが、以下のコード001です。Canvasの真ん中にランダムな色で星形が描かれます(図001)。 コード001■EaselJSでCanvasの真ん中にランダムな色の星形を描く <script> var createjs = window; </script> <script src="easeljs/utils/UID
FN0905001 - 四元数(クォータニオン) - Flash : テクニカルノート
1. 四元数とは 「四元数(しげんすう)」とは「クォータニオン(quaternion)」とも呼ばれ、ひとつの実数(スカラー)とひと組の3次元べクトルで表される数です[*1]。3次元べクトルは3つの要素で成立ちますので、ひとつのスカラーと計4つの数(元)で構成されるため、この名がついたのでしょう。 四元数は、4次元べクトルとしての性質をもちます。しかし、それに加えて、ベクトルにはない乗法が定義されています。とくに、四元数の乗算で、3次元座標空間における回転を表せることが特長です。 [*1] 実数をt、3次元べクトルをV = (x, y, z)としたとき、四元数Qは後述「3. 四元数の定義」のとおりつぎのように示されます。 Q = (t; V) または Q = (t; x, y, z) 2. 複素数 四元数は、複素数を拡張した数と捉えることができます。そこで、四元数を説明する前に、複素数につい
FN0810003 - Matrix3Dクラス - Flash : テクニカルノート
説明 Matrix3Dクラスは変換行列を表し、3次元(3D)のDisplayObjectの位置や方向を定めます。この行列は変換の機能を果たし、移動(x、y、z軸上の位置変更)や回転、拡大・縮小(サイズ変更)などを実行します。Matrix3Dクラスはまた透視投影も行い、3次元空間の点を2次元(2D)の視点に移します。 ひとつの行列にはいくつもの変換を組合わせることができ、それらの変換を3次元DisplayObjectに1度で適用できます。たとえば、ひとつの行列を3次元座標に適用するだけで、回転して移動することも可能です。 DisplayObjectのzプロパティや、回転あるいは拡大・縮小のプロパティを明示的に設定すれば、対応するMatrix3Dオブジェクトが自動的に作成されます。 3次元DisplayObjectのMatrix3Dオブジェクトには、transform.matrix3dプロパテ
FN0811001 - 変換行列を数学的に捉える - Flash : テクニカルノート
1. 行列とは 「行列」とは、数を行と列の長方形に並べて、その演算規則を定めたものです[*1]。並べた数値全体を()または[]で括って示します。たとえば、2行×2列の行列は、つぎのように書き表します(図001)。なお、行と列の数が等しい行列は、「正方行列」といいます。 図001■2行×2列の正方行列 行列は、一定の決まりにしたがって並んだ複数の数値を、まとめて計算できることが便利な点です。行列の中のひとつひとつの数は、「成分」または「要素」と呼ばれます。 2. 行列の乗算 行列は、足し算や引き算のほか、掛け算ができます。加減算が対応する要素同士を足し引きすればよい[*2]のに対し、乗算のやり方は少し変わっています。座標空間を扱う変換行列では、掛け算が重要な役割を果たします。 たとえば、平面のxy座標を2行×1列の行列(列ベクトル)[*3]で表すと、2行×2行の行列と掛け算ができます。その場
FN0708001 - 指定座標を中心にMovieClipを回転させる - Flash : テクニカルノート
ActionScriptでタイムライン上のインスタンスを回転すると、基準点が中心になります。したがって、オーサリング(ムービー作成)時に、回転の中心にしたい座標を基準点に合わせておく必要があります。しかし、たとえば外部ファイルをインスタンスにロードする場合には、基準点は読込んだイメージの左上隅になり、座標を選ぶことができません。 この場合のひとつの対応方法は、ロードのターゲットとなるインスタンスを、さらに別のMovieClipシンボルに入れ子にしておくことです。そして、ターゲットインスタンスを移動して、その回転の中心座標を親の基準点に合わせます。そのうえで、ターゲットでなく、親のインスタンスを回転するという手法です。 しかし本稿では、直接インスタンスを回転し、中心座標はスクリプトで補正するという方法をご紹介します。 1. ActionScript 2.0の場合 － MovieClip.lo
Macromedia Flash - テクニカルノート一覧
スクリプティング | トラブルシューティング | Tips | オブジェクト指向プログラミング | リファレンス | ActionScript 3.0 | Stage3D | 数学 | ドキュメント正誤表 | スクリプティング FN0108016 名前のない関数(匿名関数/関数リテラル) FN0109008 if/else if/elseアクションを使った処理 FN0110001 1から連番の配列をつくる(ループ処理) FN0110003 for...inループについて FN0110002 素数を調べる(ループ処理2) FN0201001 素数を調べる(ループ処理3) FN0201004 String.splitメソッドを再定義する[上級テクニック] FN0203003 スコープチェーン FN0204001 superでスーパークラスのメソッドを実行する FN0204002 __proto
FN0506003 - ActionScriptとその基本概念について - Flash : テクニカルノート
Platform: All Version: MX 2004 and above Index 01 ECMAScriptとしてのActionScript 02 スクリプトとは【Advanced】 03 クラス(オブジェクト)について 04 オブジェクト・クラス・インスタンス【Advanced】 05 メソッドとプロパティ 06 ActionScript 2.0とFlash Player 7【Advanced】 07 ActionScript 1.0 vs 2.0 本稿では、ActionScriptとその背景にあるプログラミングや仕様上の基本概念について解説します。基本とはいえ、概念説明ですので、必ずしも初心者向けの内容ではありません。スクリプトについての基礎知識が前提とされます。その中でも中級者向けと思われる節には、【Advanced】と付記してあります。基本用語は「Word」という項目で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
no.078 - 巻頭言: 渋谷のコギャルはコスプレ最高！ - FumioNonaka.com Newsletter
FN0905002 - Vector3Dクラス - Flash : テクニカルノート
FumioNonaka.com - ActionScript 3.0 Mailing List
FN0709001 - 静止テキストがStaticTextインスタンスとして認識されない - Flash : テクニカルノート