CreateJS入門サイト - ICS MEDIA
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
PreloadJSで「悩ませないローディング」の作り方―CreateJS勉強会 - ICS MEDIA
先日行われたCreateJS勉強会 (第5回)にてPreloadJSで「悩ませないローディング」の作り方というテーマでライトニングトークさせていただきました。時間の関係でお伝えできなかった部分も含め本記事でまとめました。みなさまのローディング作りのご参考になれば幸いです。 PreloadJSとは？ PreloadJSとは、CreateJSのライブラリモジュールの1つで外部ファイル（画像・音声・JSONなど）の読み込み処理を担当しています。読み込み状況をイベントで監視して読み込み率（0.0〜1.0）を取得できます。その読み込み率を演出用のJavaScriptに渡してあげることで、読み込み状況に合わせた演出を実現できます。 ソースコード PreloadJSで外部ファイルを読み込むソースコードです。今回はLoadQueueクラスを使って拡張子の違うファイルをまとめて読み込んでいますが、同じ勉強会
CreateJSで遊んでみる 2日目 TweenJS - WebDelog
CreateJS触ってみたいなーということで、 ドキュメントとサンプルコードを見ながらもまったり書いていこうと思います。 2日目 TweenJS https://github.com/CreateJS/TweenJS/ 上のURLの飛び先からZIPボタンを押してダウンロードしてきます。 展開するとlibフォルダの中にtweenjsが入っています。 現時点での最新版v0.4.0を使います。 TweenJSはCreateJSのライブラリ群の一つです。 指定した時間で、現在値から指定した数値までオブジェクトのプロパティの値を変化させてくれる Tweenを簡単に作成することができます。 同じライブり群のEaselJSに依存していますので、 先にEaselJSを読み込んだ後にTweenJSを読み込むようにしましょう。 事前にTickerクラスでsetFPSを呼び出し、 FPSを設定しておくことができ
FlashからCreateJSに出力されたCanvasアニメーションをスマフォ用に組み込んだ断片メモ
CreateJSのコードを組み込んでみた 前提、ともかく現在の仕事においてアニメーションの導入という要件が出てきて、JavaScript書いてる者としてどのように解決しようかと相談した結果、下記の状況・前提からFlashのToolkit for CreateJSを利用することに決めた次第。 自分でアニメーションの動きを作ったことない アニメーターな方がFlasher 取り急ぎカッコ良く動いて欲しい が、今後を考えるとCSSでFlashの動きから書き起こすのダルい という理由から下記のソリューションを導入する方向になりました。（今の時点で本当にデプロイまで至れるかは、まだ手探りなので参考までに） CreateJS | A suite of Javascript libraries and tools designed for working with HTML5 Flash to HTML5
TweenJS と描画系ライブラリーの組み合わせ | Yomotsu net
GraphicalWeb Advent Calendar 2012 の 25日目の記事です。 CreateJS を構成するライブラリーの一つに、TweenJS があります。TweenJS は、アニメーションのタイムラインや tween を仕込むことができる機能を有しています。 EaselJS と TweenJS の組み合わせCreateJS を構成する EaselJS と TweenJS を組み合わせてアニメーションを実現するなら、次のようなコード (抜粋) で可能です。 createjs.Tween.get( circle, { loop: true } ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 300 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .
CREATEJSで遊んでみる | DevelopersIO
今回はEASELJSとTWEENJSで遊んでみようと思います。 EASELJSはCANVASを使っての描画周りを助けてくれるライブラリ、TWEENJSはトゥイーン作成を簡単にしてくれるライブラリで、どちらもCREATEJS SUITEの一部です。CREATEJS SUITEには他にはSOUNDJS、PRELOADJSというライブラリがあります。 今回は、画像をくるくる回転させながら表示させてその後徐々に透明にして消すサンプルを作ってみます。 まずは、EASELJSを使ってオブジェクトを配置させます。今回は外部から画像を読みこんで表示させるだけなので大した事はしませんが、APIがASに近いのでASに慣れた人ならすぐに複雑な事も出来るようになるのではないでしょうか。 まずはbodyにcanvasを作っておきます。 <body> <canvas id="mycan" width="640" he
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
