タグ:HTML5

動画をHTML5 video用のmp4, webmに変換できるフリーウェア XMedia Recodeの使い方

HTML5のvideoタグを使うとプラグインを使わずにムービーを再生することができますが、現時点では動画形式・コーデックが規格として統一されておらず、mp4形式とwebm形式でムービーファイルを用意する必要があります。今回は、Windows用のフリーウェアであるXMedia Recodeを使って、ムービーファイルをHTML5 video用のmp4, webmに変換する方法を紹介したいと思います。

CreateJSでドラッグして回転させる動きに挑戦

CreateJSを使って、中村勇吾さんがFlashで作られたintentionalliesのドラッグして回す動きをHTML5 canvasで作ってみました。中村勇吾さんは、私が最もリスペクトするクリエーターで、初めてこのサイトを見たとき、どうやって処理しているんだろうという好奇心とその動きの気持ち良さに暫く没頭して操作していたのを覚えています。

EaselJSのMatrix2Dクラスを使った変換行列の操作

EaselJSには、Matrix2Dクラスが用意されており、移動・回転・拡大/縮小・傾斜といったオブジェクトの変形を変換行列を使って行うことができます。ActionScript3.0のMatrixクラスと同様に3×3の正方行列なので、基本的な操作方法はFlashと似ていますが、オブジェクトへの適用方法など若干の違いはあります。今回は、いくつかのサンプルを通してEaselJSのMatrix2Dクラスを解説していきたいと思います。

EaselJSのPointクラスをFlashライクに拡張しよう

現在のEaselJSのPointクラスは、まだバーションが0.50であることもあり、必要最小限の機能しか定義されていません。JavaScriptは、定義済みのオブジェクトでもprototypeを通して拡張することができるので、勉強も兼ねてEaselJSのPointクラスをActionScript3.0と同様に扱えるように拡張してみました。ファイルをダウンロードできるようにしていますので、よろしければご自由にお使い下さい。

CreateJS用のリキッドレイアウトライブラリを作ったよ

CreateJS用のリキッドレイアウトライブラリを作ってみました。LiquidLayouter for CreateJSは、CreateJSを使ったフルcanvasのコンテンツをより簡単に実装するためのJavaScriptライブラリです。HTML5 canvasをサポートしたWindows, Macの各ブラウザだけでなく、iPhone, iPad, Androidでも動作確認しています。MITライセンスで公開していますので、商用でも無料でお使い頂けます。

バージョンアップしたCreateJSを試してみたよ

先日、CreateJSの新しいバージョンが公開されました。CreateJSのサイトからダウンロードできます。新しいCreateJSでは、バグフィックスと共に様々な新機能が追加されており、ますます便利になっています。今回は、バージョンアップにより変更された点や追加された新機能をレポートしたいと思います。

EaselJSのMouseEventを理解しよう

EaselJSには、MouseEventを処理するonClick, onDoubleClick, onMouseOver, onMouseOut, onPress, onMouseMove, onMouseUpといったイベントハンドラが用意されています。記述に関してはActionScript2.0に似ていますが、デフォルトでonMouseOver, onMouseOutが使用できない点やonMouseMove, onMouseUpの扱いなど、若干注意すべき点があります。

CreateJSでキラキラと輝くTwinkle表現に挑戦

CreateJSを使って、HTML5のcanvasでキラキラと輝くTwinkle表現に挑戦してみました。EaselJSのGraphicsクラスに用意されたdrawPolyStar()メソッドを使って星形のShapeインスタンスを作り、なんちゃってGlowFilterでcanvas上のテキストをキラキラと輝かせてみます。

TweenJSのTimelineを使ったテキストアニメーション

前回の投稿「トゥイーンで簡単canvasアニメーション!TweenJSの使い方」では、TweenJSの基本的な使い方を紹介しましたが、TweenJSにはTimelineクラスが用意されており、Flashのタイムラインに似た概念で複数のトゥイーンをまとめて操作することができます。今回は、TweenJSのTimelineクラスを使って、EaselJSのTextクラスをアニメーションさせてみます。

トゥイーンで簡単canvasアニメーション!TweenJSの使い方

TweenJSは、Grant Skinner氏が開発しているCreateJSに含まれるJavaScriptトゥイーンライブラリです。CreateJSのサイトからダウンロードできます。本来、JavaScriptでのアニメーションには比較的面倒な記述が必要になりますが、TweenJSを使うと驚くほど簡単な記述でオブジェクトをアニメーションさせることができます。