Flashの広告をHTML5に変換

最近、Flash広告の自動再生をブロックするブラウザーが増えています この機会に、コンテンツをHTML5 Canvasに変換して出力用に最適化するという Flash Professional CCの機能を紹介します この短いアニメーションは ActionScript 3ベースのFLAファイルです テストしてみると Flash Player用のSWFファイルが作成されます では、これをHTML5 Canvasに変換してみましょう コマンド／他のドキュメント形式に変換を選択し 「HTML5 Canvas」を選択して「OK」をクリックします Canvasベースのドキュメントが作成され、これを編集していきます 出力パネルを見ると、フレームのスクリプトをコメント化したという警告があります これは、最後のフレームにActionScriptがあったためです 一方タイムラインの内容は、ActionScript 3ドキュメントの タイムラインとまったく同じです 最後のフレームを選択してアクションパネルを開くと 警告のとおり、ActionScriptがコメント化されています ここで、コードスニペットパネルを開き 「アクション」にある「クリックしてWebページに移動」をコピーします このパネルに戻って、ActionScriptを削除し 「stop」を「this.stop」に変えてから コピーしたコードスニペットをペーストします また、このURLも変更できます 移動先を「blogs.adobe.com/flashpro」にし、この部分は「this.stage」に変えます Canvasの作業では、ベクトルよりもビットマップ画像の方が効率的な場合があります このため、ドキュメント作成時の考慮点として ベクトル画像をビットマップにレンダリングすることが挙げられます このシェイプグループを選択して 右クリックし、「ビットマップに変換」を選択すると このようにビットマップになり、ライブラリに保存されます 他のエレメントいくつにでも、同じ処理を適用できます パブリッシュ設定でも、いくつか考慮したい点があります ビットマップが多数ある場合、IABドラフトではサーバーリクエスト数が最大15であるため すべてのビットマップを1枚のスプライトシートに書き出すと ビットマップの数にかかわらず、サーバーリクエストが2つで済みます スプライトシート自体に1つ、その関連データに1つです また、ドキュメント内のテキストをアウトラインに変換しておくと ユーザー環境によってはサポートされていないフォントも、きれいに表示されます では「OK」をクリックして配信してみましょう Flash PlayerとCanvasで見た目もアニメーションもまったく同じですね このように、Flash Professional CCで作成した広告コンテンツをもとに おなじみのワークフローに従って、異なるコンピューターやモバイルデバイスの ブラウザーに対応するコンテンツを作成できるのです