パーティクル編集ツール Particle Develop - ICSParticle DevelopはHTML5製のデザインツールです。雪や炎、キラキラなどのパーティクル表現を作成でき、ベクター画像として保存することができます。
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">
[JavaScript] 3次ベジェ曲線をCanvasに引いてみたい | CreateJS, EaselJS « きんくまデザイン
こんにちは。きんくまです。 今回は3次ベジェ曲線をCanvasに引いてみたいです。 ベジェ曲線っていうのは、そうですIllustratorなんかでパスを操作するときのやつですね。 こんな感じの 実は以前ActionScript3でも書いたことがあるんですが、今回はJavaScriptで書いてみたかったので。 >> [AS3] Illustratorのような3次ベジェ曲線を書く（5年も前の記事ですよ！びっくり） 実際にできたもの イメージはこんな感じ（下の画像は動きません） 動かせるやつは、これです 赤丸が始点と終点。緑がコントロール（アンカー）ポイントです。 どうやってやるのかというと公式があります。 >> Cubic Bézier curves これだとよくわかんない！ってことで、もっとわかりやすく解説されているサイトがありました。どうもです。 Hakuhin先生ですね！AS1か2で書か
![[JavaScript] 3次ベジェ曲線をCanvasに引いてみたい | CreateJS, EaselJS « きんくまデザイン](https://cdn-ak-scissors.b.st-hatena.com/image/square/dfa3048d2db6ab8c57c861c83ab8437e1f560831/height=288;version=1;width=512/http%3A%2F%2Fwww.kuma-de.com%2Fwp%2Fwp-content%2Fuploads%2F2015%2F12%2Fbezier_snapshot.png)
HTML5モーション制作のテクニックとデータ最適化の必要性―CreateJS勉強会/池田発表資料 - ICS MEDIA
2015年9月4日（金）、CreateJS勉強会 (第6回） がICTCOで95人の定員規模で開催されました。勉強会のフォローアップとして、発表資料「HTML5モーション制作のテクニックとデータ最適化の必要性」（発表者：池田）のスライドを一部抜粋して記事という形で公開します。 バナー広告にみるFlash(SWF)の衰退とHTML5の隆盛 HTML5モーションコンテンツの代表的な活用分野として「ウェブページ」「ゲームコンテンツ」、そして「広告」があります。今回は「広告」をテーマとして最近の話題から紹介します。2015年9月1日にリリースされたGoogle Chrome 45からウェブページ内の主要でないFlash(SWF)コンテンツがブロックされるようになりました（参考記事「In June, we announced (https://goo.gl/TF7dmD) that Chrome w
project-nya.jp - このウェブサイトは販売用です！ - フラッシュ にゃあ にゃんこ プロジェクト ウェブ ジェクト ひろゆき リソースおよび情報
このウェブサイトは販売用です！ project-nya.jp は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、project-nya.jpが全てとなります。あなたがお探しの内容が見つかることを願っています！
CreateJSの私的まとめ - Qiita
EaselJS canvas描画ライブラリ。最近WebGLに対応した。 http://blog.createjs.com/webgl-support-easeljs/ Stageに表示オブジェクト（DisplayObject）をくっつけていくスタイルで記述していく。Stage自体も表示オブジェクトにあたる。 Stageをルートとして表示オブジェクトのツリー構造をつくっていくあたりがActionSctiptぽいらしい（ASやったことないので適当） setTimeoutなどのタイマーを一元管理するTickerクラスも含まれている。 MovieClip EaselJSでMovieClipクラスを使うためのプラグインのようなもの。 EaselJSとTweenJSに依存している。Toolkit for CreateJSを使う場合は必須。 MovieClipクラスを一言で言うと、タイムライン（Twee
PreloadJSで「悩ませないローディング」の作り方―CreateJS勉強会 - ICS MEDIA
先日行われたCreateJS勉強会 (第5回)にてPreloadJSで「悩ませないローディング」の作り方というテーマでライトニングトークさせていただきました。時間の関係でお伝えできなかった部分も含め本記事でまとめました。みなさまのローディング作りのご参考になれば幸いです。 PreloadJSとは？ PreloadJSとは、CreateJSのライブラリモジュールの1つで外部ファイル（画像・音声・JSONなど）の読み込み処理を担当しています。読み込み状況をイベントで監視して読み込み率（0.0〜1.0）を取得できます。その読み込み率を演出用のJavaScriptに渡してあげることで、読み込み状況に合わせた演出を実現できます。 ソースコード PreloadJSで外部ファイルを読み込むソースコードです。今回はLoadQueueクラスを使って拡張子の違うファイルをまとめて読み込んでいますが、同じ勉強会
WebGLに対応し高速化したCreateJSの描画性能を探る - ICS MEDIA
インタラクティブコンテンツ制作に役立つHTML5向けのフレームワークCreateJS (使い方は入門サイトを参照ください)。2014年1月に公式ブログでWebGLサポートが発表されました（参照記事「WebGL Support in EaselJS」)。公式ブログによるとパフォーマンスが従来比の6〜50倍にも達するとのことです。 果たしてどのぐらいの性能があるのか気になりましたので、以前の検証記事「HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証」を元に、WebGL対応版のCreateJS(描画を扱うJSライブラリ「EaselJS」)のパフォーマンスを比較検証してみました。検証に用いたデモは次のリンクをクリックすることで再生できます。 CreateJS (EaselJS 0.7.1) : 従来版。CanvasのContext2Dが利用されている
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
第18回 クラスの継承と透視投影 | gihyo.jp
前回の第17回「簡単なクラスを定義する」で予告したとおり、今回のお題は引続きクラス定義と透視投影を使ったコードだ。Keith Peters氏が著書『ActionScript 3.0 アニメーション』でつくられたサンプルの動きをもとに、CreateJSでスクリプティングした。ユーザーインタラクションは含まれていない。 Shapeクラスを継承する3次元座標のクラス定義 早速、3次元座標のクラスを定める。前回と違うのは、座標だけでなくボールのシェイプも、このクラスでつくってしまうことだ。EaselJSなら、Shapeクラスを使えば円形のシェイプが描ける。では、この機能を丸ごといただこう。こういうとき、プログラミング言語では、Shapeクラスを「継承」して3次元座標のクラスを定義する。 JavaScriptの継承は他の言語と少し変わっている。継承したいクラス（「スーパークラス」）のオブジェ
WebGL Support in EaselJS - CreateJS Blog
Please note that SpriteStage & SpriteContainer classes are now deprecated and have been replaced by the much faster and easier to use StageGL! As WebGL becomes more widely supported in browsers, we’re proud to announce that after working in collaboration with Mozilla, a shiny new WebGL renderer for EaselJS is now in early beta! Following research, internal discussions, and optimizations, we’ve man
CreateJSで遊んでみる 1日目 EaselJS | WebDelog
CreateJS CreateJSはHTML5の技術を利用した インタラクティブなコンテンツを作成するためのJavascriptのライブラリ群です。 @gskinner 氏が開発をしているとのこともあり、 stageを作ってオブジェクトをaddChildしていくところやメソッド名など、 Flashで開発されていた方も馴染みのある構文が用意されています。 Adobe Flash Pro CS6からはToolkit for CreateJSという機能を使って、 ワンクリックでFlashで作成したアニメーションを CreateJSを使ったアニメーションに変換して書き出す といったことが簡単に行なえるようになっています。 そんなCreateJSを触りながら覚えてみようかなー と突然思い立ったので『CreateJSで遊んでみる』というテーマの元、 とりあえず使ってみる → まとめてみ
HTML5 Canvasでパーティクル表現！パーティクルエンジンParticleEmitterJS | ClockMaker Blog
にゃあプロジェクトさんに教えてもらったのですが、HTML5用のパーティクルエンジン「ParticleEmitterJS」が面白そうだったので試してみました。次のような表現がビジュアルエディターを使ってHTML5で簡単に作ることができます。 Demo (Require the browser supported HTML5 Canvas) Demo (Require the browser supported HTML5 Canvas) ParticleEmitterJS は CreateJS のフリーの拡張ライブラリで、簡単にパーティクルエフェクトを作ることができます。パーティクルエフェクトはゲームやコンテンツ表現の演出強化や、雲や炎などのシミュレーションにも利用できます。パーティクルは基本的に数値演算を利用するためプログラマの領分という印象が強いですが、ParticleEmitterJS
ParticleEmitterJS | Purple Monkey Studios
Summary A javascript particle emitter for use with the excellent CreateJS, which you can use to create stunning visual effects for you own projects Free to use Free web based editor Influenced by existing frameworks Full documentation available Example of usage Introduction ParticleEmitterJS is a free extension for the CreateJS suite of JavaScript libraries, allowing developers to quickly add visu
Flash Toolkit for CreateJSで作るスマートフォン用アニメーショ
2014.7.19 に開催された第二回ゲームサーバ勉強会で使用したスライド http://peatix.com/event/42642
HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 - ICS MEDIA
HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 2013年3月15日に開催されたCreateJS勉強会（第2回）で発表したWebサイト「日本全国花粉飛散マップ」ですが、CreateJSとTypeScriptを使って制作しました。 今回の作品のポイントとしては、次の3点があげられます。本記事では次を具体的に説明します。 HTML5で制作、デスクトップだけでなくスマートフォンやタブレットでも再生可能 CreateJSで、DOMではできないHTML5 Canvasならではの表現 TypeScriptを用いて低学習コストで効率的な制作の実現 スマートフォンやタブレットでも閲覧可能 このWebサイトは環境省が提供している資料を元に、過去9年分の花粉の飛散量をパーティクルを用いてビジュアライズしたものです。花粉の量に比例して、パーティ
Android × Canvas の即死ポイントとその回避策 | buccchi.jp
CreateJS を使ったWebアプリをいくつか作ったのですが、iPhone はサクサクでも Android でやたらハマる。 Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。 機種や OS のバージョンにより動作がさまざまなため確認しきれない。 というとこでハマったポイント3つを共有します。 誰かもっとよい解決策を教えてくれるとありがたい。 即死ポイントその1 Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる 回避策 Canvas 領域を広めにとっておき、Canvas ではなく Container 側をリサイズ。 はみでた部分は css でトリミング。 これで落ちなくはなるが全体的にボケる。 2013.7.7 追記 その後、以下の方法を試したところ落ちずに動作すことが確認できました。 描画とかGPUアクセラレーション
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
createjs
CreateJS をはじめる人が知っておくとラクなこと - Qiita
HTML5フレームワークにおける表示オブジェクトのパフォーマンス検証
