FN1209005 - EaselJSでインスタンスにマスクをかける - HTML5 : テクニカルノート
2012年8月にCreateJS Suiteの新しいバージョンが公開されました。そして、新たなEaselJS 0.5.0にはDisplayObject.maskプロパティが備わり、インスタンスをShapeオブジェクトでマスクできるようになりました。本稿ではこのプロパティを試します。 01 ふたつ重ねた同じ画像のインスタンスの下側にフィルタをかける まずは、同じ画像が読込まれたBitmapインスタンスをふたつ重ね、その下側のインスタンスにフィルタをかけます。そして、次項で手前のインスタンスをマスクで抜くつもりです。 使うフィルタはふたつです。第1に、ColorMatrixFilterで画像イメージをセピア調に変えます。DisplayObjectインスタンスへのフィルタのかけ方とColorMatrixFilterの操作については、「EaselJSのフィルタColorMatrixFilterでイ
Flash Professional Toolkit for CreateJSの使用 | Adobe Developer Connection
必要な予備知識 以前のバージョンの Flash Professional 必要なアドビ製品 * Adobe Flash Professional CS6 (体験版ダウンロード) * Toolkit for CreateJS Toolkit for CreateJS for Flash Professional CS6をインストールするには、単純にAdobe Extension Manager CS6を使ってToolkit for CreateJS.zxpを開き、Flash Professionalを再起動するだけです。 ※本記事の内容は、2012年9月に公開されたToolkit for CreateJS 1.1をベースにしています。Toolkit for CreateJS 1.0をお使いの方は、Flash Professional CS6のアップデータを適用してください。アップデー
FN1204005 - EaselJSで外部ビットマップファイルを読込んで回す - HTML5 : テクニカルノート
EaselJSで外部から読込んだビットマップファイルをCanvasに表示し、さらにアニメーションで回してみます。EaselJSの基本的な使い方や必要な設定については、「EaselJSで図形を描く」をお読みください。 01 円のShapeインスタンスをふたつつくる ビットマップはPNGファイル(Pen.png)で用意しました。HTMLドキュメントと同じ場所に画像用のフォルダ(images)をつくり、その中に納めます(図001)。 図001■PNGファイルを画像用フォルダに納める HTMLドキュメントの<body>要素には<canvas>要素("myCanvas")が記述され、描画のためのJavaScriptの関数(xInitialize())を呼出しているものとします。EaselJSの基本的な設定については、前出「EaselJSで図形を描く」をお読みください。 <body onload="x
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
