HTML5のCanvasで画像をリサイズ＆トリミングして中央表示する方法

HTML5のCanvasではCanvas以外のHTML要素とCSSだけではできないような、
複雑な効果を使ったアニメーションのビジュアルなども、Canvasに対応したブラウザであれば表示することができるというメリットがありますが、
それを実現するためには、高度なJavaScriptや画像処理の知識が必要であったりして、
実際に制作するには若干ハードルが高かったり、
制作のために多くのコードを書かなければならなかったりといった問題があります。
&nbsp;
CanvasなどのHTML5の技術をより扱いやすくするためのJavaScriptのライブラリの一つに、
Adobeの制作したCreateJSがありますが、
FlashのCS6ではFlash上で制作したアニメーションなどを、
CreateJSを使ったHTML5の形式で書き出す拡張機能があります。
さらにFlash CCでは、拡張機能ではなく、HTML5での書き出しを前提とした制作も可能になっているようです。
&nbsp;
この機能を使えば、Flashを通してより簡単にCanvasアニメーション等を制作することができます。
今回はこのFlash CS6で、実際にCanvasアニメーションを作ってみました。
&nbsp;
↓作ってみたもの
<a class="demo" href="/demo/ninomiya/51/" target="_blank">DEMO</a>
&nbsp;
<h2>方法</h3>
<h3>1.Flash CS6に「Toolkit for CreateJS」が入っているか確認する。</h4>
Flash CS6を最新の状態にアップデートしていれば、今回のHTML5の書き出しに必要な
「Toolkit for CreateJS」という拡張機能が入っているはずなのですが、
入っていない場合は↓<a href="http://www.adobe.com/jp/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html" target="_blank">こちら</a>よりダウンロードして拡張機能をインストールする必要があります。
<a class="link" href="http://www.adobe.com/jp/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html" target="_blank">Flash Professional Toolkit for CreateJSの使用</a>
<a href="/uploads-archive/2014/09/ss01.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5775" src="/uploads-archive/2014/09/ss01-300x190.jpg" alt="ss01" width="300" height="190" srcset="/uploads-archive/2014/09/ss01-300x190.jpg 300w, /uploads-archive/2014/09/ss01-1024x651.jpg 1024w, /uploads-archive/2014/09/ss01-228x145.jpg 228w, /uploads-archive/2014/09/ss01.jpg 1380w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
「ウィンドウ」&gt;「Toolkit for CreateJS」
&nbsp;
<h3>2.Flashアニメーションの制作</h4>
Flash CS6でモーショントゥイーンやActionScript3などを駆使してFlashアニメーションを制作します。
今回DEMOで作ってみたのは、Canvasでないと再現が困難になる、パスのマスクを使ったアニメーションです。
<a href="/uploads-archive/2014/09/ss02.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5776" src="/uploads-archive/2014/09/ss02-300x190.jpg" alt="ss02" width="300" height="190" srcset="/uploads-archive/2014/09/ss02-300x190.jpg 300w, /uploads-archive/2014/09/ss02-1024x651.jpg 1024w, /uploads-archive/2014/09/ss02-228x145.jpg 228w, /uploads-archive/2014/09/ss02.jpg 1380w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
<h3>3.「Toolkit for CreateJS」でHTML5を書き出し</h4>
「ウィンドウ」&gt;「Toolkit for CreateJS」でToolkit for CreateJSを開き、
パブリッシュをクリックして書き出します。
これで書き出しは完了です。
<a href="/uploads-archive/2014/09/ss03.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5778" src="/uploads-archive/2014/09/ss03-300x190.jpg" alt="ss03" width="300" height="190" srcset="/uploads-archive/2014/09/ss03-300x190.jpg 300w, /uploads-archive/2014/09/ss03-1024x651.jpg 1024w, /uploads-archive/2014/09/ss03-228x145.jpg 228w, /uploads-archive/2014/09/ss03.jpg 1380w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
&nbsp;
Toolkit for CreateJS似寄る書き出しでは「ぼかし」などのフィルターに対応していなかったり、
半透明のマスクはActionScript3を理解していなければ制作ができなかったりするなど、新たな壁も見つかりましたが、
Canvas制作への道が少し開けたような気がします。
&nbsp;

Blogブログ

Articles

Contact Us