HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
CreateJSでハマったこと - 株式会社CFlatの明後日スタイルのブログ
長らく仕様策定に手間取っていたHTML5が大きく推進することになった理由の一つには、やはりAppleがiPhoneのFlashへの非対応を発表したことがあるでしょう。HTML5自体はいまだ完全には標準化されていませんが、主要ブラウザでは既にcanvasによる描画処理をサポートするようになっており[1]、今後徐々にFlashからHTML5への移行が進んでゆくものと思われます[2]。 FlashのプロジェクトをHTMLに変換するツールにはSwiffy(Google)、SWF Animation Converter(マルチでバイスlab.)など何種類かありますが、今のところブラウザ互換性や、ActionScript部分への対応状況などの問題により、これといった決め手がないのが現状です。 その中で、Adobe Flash Professional CS6にcanvasアニメーション用フレームワーク
IE8でpreloadjs-0.2.0.min.js、画像ファイル読み込み時にエラー - jsdo.it - Share JavaScript, HTML5 and CSS
2012/12/5現在 IE8とpreloadjs-0.2.0.min.jsで画像URL読み込みをすると 'HTMLAudioElement'は宣言されていません。 というエラーがでます。 エラー確認コード、以下をIE8で開いてください。 http://jsrun.it/n0wri/8d5R/ ただし拡張子のない画像URL読み込みではエラーにならないようです。 このあたりはきちんと検証していません。 ・解決法 IE8以上でPreloadJSを使用する場合、3つあるダウンロード場所のうち GitHub https://github.com/CreateJS/PreloadJS/ からZipをダウンロードし、libsフォルダの preloadjs-NEXT.min.js を利用するようにします。 ・関連 CreateJS Support ie 7 and 8
msto.jp - it転職 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CreateJSでスマフォ向けwebアプリを作りました | buccchi.jp
CreateJSを使って「ぬりぬり育成 ジェルミィ」という mixi アプリを制作しました。 のでその感想なんかを。 結論から言うと CreateJS 最高です。 上記QRコードよりスマフォでアクセスしてください。 ※ mixi へのログインが必要となります。 ログインメンドイ！って人はPC体験版をどうぞ。 http://vaseline.jp/nurinuri/ CreateJS でなにができるのか CreateJS には、大きく4つのライブラリが含まれています。 EaselJS canvas を as 的に扱える。as になれてる人ならすんなりいける。 TweenJS アニメーションを制御。なにかしらのトゥイーンライブラリを使ったことがあればすんなりいける。メソッドチェーンで記述できるので直感的。 SoundJS 音を制御。今回は見送り、独自に実装。 PreloadJS 外部ファイルの
EaselJS の概要 (CreateJS のフレームワークその 1) - akihiro kamijo
前の記事で紹介した Flash Professional Toolkit for CreateJS は、CreateJS と呼ばれるオープンソースのフレームワーク群の使用を前提としています。そのため、Flash Pro から書き出された html ファイルと js ファイルは、Canvas の API を利用する代わりに CreateJS の API を呼び出します。 デモビデオ内で紹介されたコードは、こんな感じでした。 (lib.shadow2 = function() { this.initialize(); this.shape = new Shape(); ... ということで、書き出されたコンテンツの編集をするには、CreateJS の使い方を学ばないとダメそうです。 （単純なタイムラインアニメーションは別として...） ただし、これは、AS3 の知識がある人には、むしろ良い話か
EaselJS のマウスイベント処理 - akihiro kamijo
EaselJS の DisplayObject には、いくつかマウスイベントを扱うためのメソッドがあります。今回は、それらを利用したマウス操作への対応方法を紹介します。 利用できる関数は以下の 5 つです。名前も使い方も AS2 のイベント処理に良く似ています。 onClick : ユーザーがマウスボタンをクリックした onPress : ユーザーがマウスボタンを押した onDoubleClick : ユーザが表示オブジェクト上でダブルクリックした onMouseOut : マウスポインタが表示オブジェクトの外に移動した onMouseOver : マウスポインタが表示オブジェクト上に移動した 見てのとおり、Flash Player のマウスイベントと比べると数は少ないです。もっとも、この辺りの仕様は、CreateJS が出荷されるときには変わっているかもしれません。 イベント発生時に呼び
TweenJS の概要 (CreateJS のフレームワークその 2) - akihiro kamijo
EaselJS から提供される Ticker は、一定間隔で tick イベントを他のオブジェクトに伝える機能を持っています。これと TweenJS を組み合わせてアニメーションを実現するのが CreateJS の基本です。 前の記事でも触れたように、CreateJS に MovieClip が追加される可能性があるため、アニメーション制作の手段は、更に増えるのかもしれません。ともあれ、今回は TweenJS の使い方をご紹介します。 なお、現在公開中の TweenJS のバージョンはまだ 0.1 で、Readme にもアルファ版であることが明記されているので、CreateJS が登場する時には、仕様が変わっているかもしれません。その点はご注意下さい。 Ticker まず、Ticker の使い方です。フレームレート （もしくはイベントの間隔） を指定して、定期的に時間の経過を通知するオブジ
akihiro kamijo: CreateJSアーカイブ
ちょっと前の話になってしまいますが、ちょうど 1 ヶ月ほど前に CreateJS の各ライブラリが更新されました。重要度の高いバグへの対応などが含まれています。もうすぐ公開されるはずの Flash Pro CC にも、こちらのバージョンが同梱されてくるものと思われます。 この更新では、一部の API の整理が行われたり、簡単な機能の追加が行われたライブラリもありますが、基本的には、バグの修正をはじめとするライブラリの品質向上が主な目的とされました。 その一環として、ドキュメントやチュートリアルも大幅に強化されています。しかし、 従来のドキュメントの記述が無効になるような大きな変更が無いこと ドキュメントの修正の一部は日本語化の作業からフィードバックされたものであること という理由で、現在進行中のドキュメント日本語化プロジェクトは、特に対応をとらず、従来どおりに進めることとなりました。 （と
リッチなHTML5コンテンツのためのフレームワーク「CreateJS」が公式サイトを公開 | ClockMaker Blog
Flashのエンジニアとして著名なGrant Skinner氏が開発している、「CreateJS」の公式サイトがオープンしました。 http://www.createjs.com/ CreateJSはHTML5を介してリッチなインタラクティブコンテンツの制作をサポートする、JavaScriptライブラリとツールのスイートです。CreateJS SuiteにはEaselJS、TweenJS、SoundJS、PreloadJS、とZoeのツールがあります。 私のブログでもEaselJS、TweenJSを使ったインタラクティブコンテンツのデモを幾つか制作して紹介してきましたが、Flashで培われた技術がそのまま利用できる点で非常に使い勝手のいいツール群だと思っています。 EaselJSとTweenJSでテキストエフェクト EaselJSを使った流体パーティクル入門 今回は公式サイトで明らかになっ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
createjs
FN1205002 - PreloadJSで外部画像ファイルの読込みを待つ - HTML5 : テクニカルノート
http://kudox.jp/java-script/createjs-liquidlayout
http://kudox.jp/java-script/createjs-shape-twinkle
http://www40.atwiki.jp/spellbound/pages/1902.html
UNTITLED