21. var manifest = [ {src:"images/card.jpg", id:"card}"}, {src:"images/rea_gear1.png", id:"rea_gear1"}, {src:"images/rea_gear2.png", id:"rea_gear2"}, {src:"images/rea_gear3.png", id:"rea_gear3"}, {src:"images/rea_gear4.png", id:"rea_gear4"} ]; //複雑なアニメーションほど画像の読み込みが多数発生す る HTML内に出力されるjs記述(画像部分一部抜粋) 22. var imgStr64={ rea_gear1:“bace64化された文字列”, rea_gear2:“bace64化された文字列”, rea_gear3:“bace64化された文字列” }
今回のお題は、ランダムに動く粒子の間に相互作用を加えたアニメーションだ。ランダムな動きにオブジェクト同士のインタラクションを交えると、有機的なアニメーションになってくる。Jared Tarbell氏がかつて「Node Garden」という作品を発表された。Keith Peters氏はそのノード間にバネ運動を加えて、著書『ActionScript 3.0アニメーション』で解説している。本稿はその表現をCreateJSで書いてみようと思う。 ステージのランダムな位置に、ランダムな方向と速さで動く小さなオブジェクトをたくさん置く。それらのオブジェクトの間に引っぱり合うバネのような力を与え、さらに互いを線で結ぶ(図1)。できあがりのコードは、jsdo.itに上げてある(例によって後で書き直すかもしれないが)。 図1 ランダムに動くオブジェクトの間に引合う力を与えて線で結ぶ ランダムに置いた
HTML5で複雑なアニメーションを実現する最適な方法とは? CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ:GIFアニメーションを使う方法 おまけ:Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
上記画像のような演出デモを作ってみたので解説します。( デモ ) ネ申の砂場あそび 先日、CreateJS の生み親である Grant Skinner ネ申が申されました。 Started posting a few little demos & experiments to the CreateJS sandbox github.com/CreateJS/sandb… More to come. — Grant Skinner (@gskinner) April 15, 2013 「 CreateJS/sandbox に小さい実験デモを公開していくよ。 ( 意訳 ) 」…とのことなので、現在公開されている Kaleidoscope.js を弄ってみました。 Kaleidoscope.js の Haxe 用 extern クラス Haxe/CreateJS な人は下記コードをご自由にどうぞ
先日の投稿TypeScriptを使うの続きです。TypeScriptでCreateJSを用いると非常に便利です。何が便利かというとCreateJSのクラスを継承したクラスが簡単に作れるところです。 とりあえずサンプルはこちらです。 こちらのサンプルで用いている赤いボールはTypeScriptを使用して以下のように定義されています。 /// <reference path="../ts/easeljs/easeljs.d.ts" /> /// <reference path="../ts/tweenjs/tweenjs.d.ts" /> class SpringBall extends createjs.Container{ public spring:number = 0.01; public friction:number = 0.9; public vx:number = 0; pub
Flash Professional CS6からは、「Toolkit for CreateJS」拡張機能を利用して、Flash Professionalで作成したコンテンツを、CreateJSフレームワークを使ったHTML5コンテンツ(以下、CreateJSコンテンツ)へ変換することができます。つまり、1つのFLAファイルからFlashムービーとCreateJSコンテンツを書き出すことが可能になりました。 ただし、ゲームのようなスクリプトを多用するコンテンツの場合、ActionScriptとCreateJS(JavaScript)との間で、全てのコードをそのまま流用できるというわけではありません。 とはいえ、もともとActionScriptはJavaScriptと同じECMAScript規格から発展した言語なので、かなりの部分のコードを共有できます。さらに、「CreateJS(JavaSc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く