Recodeの使い方HTML5のvideoタグを使うとプラグインを使わずにムービーを再生することができますが、現時点では動画形式・コーデックが規格として統一されておらず、mp4形式とwebm形式でムービーファイルを用意する必要があります。webmに変換する方法を紹介したいと思います。canvasで作ってみました。中村勇吾さんは、私が最もリスペクトするクリエーターで、初めてこのサイトを見たとき、どうやって処理しているんだろうという好奇心とその動きの気持ち良さに暫く没頭して操作していたのを覚えています。/縮小・傾斜といったオブジェクトの変形を変換行列を使って行うことができます。ActionScript3.0のMatrixクラスと同様に3×3の正方行列なので、基本的な操作方法はFlashと似ていますが、オブジェクトへの適用方法など若干の違いはあります。今回は、いくつかのサンプルを通してEaselJSのMatrix2Dクラスを解説していきたいと思います。続きを読む2012/11/07カテゴリー:JavaScriptEaselJSのPointクラスをFlashライクに拡張しよう現在のEaselJSのPointクラスは、まだバーションが0.50であることもあり、必要最小限の機能しか定義されていません。JavaScriptは、定義済みのオブジェクトでもprototypeを通して拡張することができるので、勉強も兼ねてEaselJSのPointクラスをActionScript3.0と同様に扱えるように拡張してみました。ファイルをダウンロードできるようにしていますので、よろしければご自由にお使い下さい。続きを読む2012/10/29カテゴリー:JavaScriptCreateJS用のリキッドレイアウトライブラリを作ったよCreateJS用のリキッドレイアウトライブラリを作ってみました。CreateJSは、CreateJSを使ったフルcanvasのコンテンツをより簡単に実装するためのJavaScriptライブラリです。Androidでも動作確認しています。MITライセンスで公開していますので、商用でも無料でお使い頂けます。続きを読む2012/10/01カテゴリー:JavaScriptバージョンアップしたCreateJSを試してみたよ先日、CreateJSの新しいバージョンが公開されました。CreateJSのサイトからダウンロードできます。新しいCreateJSでは、バグフィックスと共に様々な新機能が追加されており、ますます便利になっています。今回は、バージョンアップにより変更された点や追加された新機能をレポートしたいと思います。onMouseUpといったイベントハンドラが用意されています。onMouseUpの扱いなど、若干注意すべき点があります。続きを読む2012/08/07カテゴリー:JavaScriptCreateJSでキラキラと輝くTwinkle表現に挑戦CreateJSを使って、HTML5のcanvasでキラキラと輝くTwinkle表現に挑戦してみました。EaselJSのGraphicsクラスに用意されたdrawPolyStar()メソッドを使って星形のShapeインスタンスを作り、なんちゃってGlowFilterでcanvas上のテキストをキラキラと輝かせてみます。続きを読む2012/07/31カテゴリー:JavaScriptTweenJSのTimelineを使ったテキストアニメーション前回の投稿「トゥイーンで簡単canvasアニメーション!TweenJSの使い方」では、TweenJSの基本的な使い方を紹介しましたが、TweenJSにはTimelineクラスが用意されており、Flashのタイムラインに似た概念で複数のトゥイーンをまとめて操作することができます。今回は、TweenJSのTimelineクラスを使って、EaselJSのTextクラスをアニメーションさせてみます。Skinner氏が開発しているCreateJSに含まれるJavaScriptトゥイーンライブラリです。CreateJSのサイトからダウンロードできます。本来、JavaScriptでのアニメーションには比較的面倒な記述が必要になりますが、TweenJSを使うと驚くほど簡単な記述でオブジェクトをアニメーションさせることができます。