Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
こんにちは、池田です。1年半ぶりの更新となります。ご存知の方も多いと思いますが、私の記事執筆の活動はClockMaker BlogからICS MEDIAに舞台を移動していまして、ICS MEDIAで積極的に発信しています。ぜひあちらのサイトをチェックくださいませ。 さて、この度「CreateJS入門サイト」を立ち上げました。 CreateJS入門サイト – ICS MEDIA このサイトの公開に伴い、編集後記を全2回で公開します。 CreateJS入門サイトを作った理由 CreateJSはFlashのようなコンテンツを作ることのできる便利なフレームワークです。Flash経験者であれば少ない学習コストではじめることができ、2012年の登場以来(参照記事「リッチなHTML5コンテンツのためのフレームワーク『CreateJS』が公式サイトを公開」)、多くの元Flashクリエイターに利用されていま
CreateJS勉強会 (第6回)でのライトニングトーク「意地でもCreateJSでWebGLを使ってみよう」（発表者：川勝）の発表内容を記事としてまとめました。CreateJSのWebGL機能は高いパフォーマンスが得られるものの、表現の制約があります。本記事ではCreateJSのWebGL機能を拡張することで、その制約を超えて望みの表現を実現する方法を紹介します。 CreateJSではWebGLレンダリングに対応 CreateJSの中で、描画機能を提供しているEaselJSはWebGLでのレンダリングに対応しています。WebGLではレンダリングにGPUを使用できるため、高速に描画が可能です。CreateJSではWebGLを使用すると、従来のContext2D形式に比べて環境によっては最大51倍もの高速化が見込めます（参照「WebGL Support in EaselJS - Create
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
HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript
動くサイトにプログラムが必要な時代は終わった。〜デザイナー歓喜のAnimate CCとSpineの紹介
はじめまして。 ガールフレンド(仮)でアニメーションを担当しています。峯岸と申します。 本日はガールフレンド(仮)のぷちガールアニメーションの制作に関してご紹介したいと思います。 ぷちガールちゃんとは？ ガールフレンド(仮)ではぷちガールちゃんという機能があり、ゲーム内でバトルをしたりイベントに参加したりするときに応援してくれる小さなガールがいます。 "会いに行く"機能では、ぷちガールちゃんにアニメーションをつけて可愛く動くよう実装されています。 ボーンアニメーションとは？ 体にボーンを階層的に設置してゆき、その骨格のつなぎ目を基準にキーフレームで動きをつけてアニメーションをつけていく技法のことです。 スケルタルアニメーションや、スキンドメッシュアニメーションとも呼ばれています。 ガールフレンドでは、アニメーション制作にFlashを使用しているため、ガールの各パーツを関節ごとにムービークリ
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」と「TweenJS」を使ってデモを作ってみました。 demo 今回のブログ記事では「EaselJS」と「TweenJS」の使い方をデモの作り方を通して紹介します。 ライブラリの紹介 「EaselJS」と「TweenJS」はFlashのエンジニアとして著名なGrant Skinner氏が開発しているJavaScriptライブラリです。「EaselJS」がHTML5 CanvasをFlashライクに使うためのライブラリで、「TweenJS」が汎用的なトゥイーンライブラリです。 ▲EaselJS HTML5のCanvas要素はHTML上に自由に描画することのできる新しい要素で、工夫することでFlashのように豊かな表現を作ることができます。ただCanvasではJavaScriptでちょっと
こんにちは。受託開発担当のMasaです。 前回 TweenJSの記事の続きで、今回はテキストのアニメーションを紹介します。 前回の予告では TweenJS を拡張した JSTween プロジェクトの TextTween を紹介すると書きましたが、コンストラクタを呼び出すだけで終わってしまうため、EaselJS + TweenJS でのテキストアニメーションを紹介することにしました。 有名なフレームワークなので説明は省略します。尚、現在の最新バージョンは v7.0 なのでこれを使用します。 とりあえず何かテキストを表示します。 canvas は必ず必要です。Stage は最上位のコンテナで、update することで子オブジェクトを描画します。 <!DOCTYPE html> <head> <script src='easeljs-0.7.0.min.js'></script> <script
CreateJSでHTML5 Canvasを操る 第1回 CreateJSとは 第1回目はCreateJSの概要と、おおまかな機能、またCreateJSの理解に必要な概念を解説します。簡単なデモを多く用意したので、まずはどんな表現ができるのかを実感してもらえるといいと思います。 CreateJSとは CreateJSは、Canvasを便利に扱うためのライブラリ群で、JavaScriptの知識があればHTML5のCanvasを直感的に制御し、コンテンツを作ることができます。CreateJSというと、Flash経験者のためのライブラリと捉えている人がいるかもしれませんが、JavaScriptでコードを書いた経験があれば、だれでも使いこなすことができます。 現在のところFlashがかつてになっていたウェブ上のダイナミックな表現を可能にするツールとしても注目されています。 これまで、ウェブの動的コ
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.
EaselJS の DisplayObject には、いくつかマウスイベントを扱うためのメソッドがあります。今回は、それらを利用したマウス操作への対応方法を紹介します。 利用できる関数は以下の 5 つです。名前も使い方も AS2 のイベント処理に良く似ています。 onClick : ユーザーがマウスボタンをクリックした onPress : ユーザーがマウスボタンを押した onDoubleClick : ユーザが表示オブジェクト上でダブルクリックした onMouseOut : マウスポインタが表示オブジェクトの外に移動した onMouseOver : マウスポインタが表示オブジェクト上に移動した 見てのとおり、Flash Player のマウスイベントと比べると数は少ないです。もっとも、この辺りの仕様は、CreateJS が出荷されるときには変わっているかもしれません。 イベント発生時に呼び
まずは概要から さて、前回のチュートリアルでEaselJSを動かす環境は出来ました。 EaselJSで開発する環境を整える 次は描画の基本となる材料を揃えて実際に絵を描いてみましょう。EaselJSでお絵かきを行うには少なくとも一つのcanvasタグが必要です。そして、その上にレイヤー状のオブジェクトを重ねていくことで描画を行っていきます。図にすると以下のようなイメージです。 ここに書かれているStageオブジェクトとelementがEaselJSの担当範囲。 とはいえものは試しです。実際に組んでみましょう。 HTML部分 <div id="wrapper"> <canvas></canvas> </div> できました。簡単すぎますね。ここにEaselJSは様々なモノを描いていくわけです。次にCSSでスタイルを整えます。 CSSでcanvasをWindow全体に広げる ここでは画面全体
CreateJSは、HTML5でリッチコンテンツを制作するためのJavaScriptライブラリのスイート（特定用途のソフトウェアを詰め合わせたパッケージ）です。Flashデベロッパーとして著名なGrant Skinner氏（gskinner.com）が開発を行っており、MITライセンスのオープンソースソフトウェアとして商用でも無償で利用できます。 急激に拡大している利用 2013年5月4日～8日に開催されたAdobe MAX 2013における、Grant Skinner氏のセッション「CreateJS: Building Rich Interactive Experiences in HTML5」によると、CDNにホスティングされているCreateJSライブラリのヒット数が急激に増加しており、現在では2億ヒット（月間）を超えています。 その中でも、日本からの利用は世界で第2位を記録しており
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
