![HTML5CanvasでのActionScriptアセットの変換と再利用| Adobe Flash Professional CC](https://i.ytimg.com/vi/Gdhj2cKHPx8/hqdefault.jpg)
コンテンツ
- フラッシュプラットフォームの基本
- HTML5プラットフォームの基本
- FlashプロジェクトをHTML5に変換する
- Edge、HTML5の新しい開発ツール
- YouTubeをHTML5に変換する
- レガシーオブフラッシュ
取り除く:
Flashはすぐになくなることはありませんが、多くの専門家は最終的にHTML5に置き換えられると考えています。 Flashに多額の投資をしている企業や開発者にとって、この移行が何を意味するかをご覧ください。
2011年11月、アドビは、Androidデバイス用のFlash Player 11.1およびBlackBerry Playbookのリリース後、モバイルデバイス用のFlash Playerの開発を中止し、代わりにモバイルデバイス用のHTML5アプリケーションの構築ツールに集中することを発表しました。アドビシステムズ社は、パソコンブラウザーでのFlash Playerのサポートを繰り返しましたが、多くの人は、AdobeがPCバージョンのサポートを終了するのは時間の問題だと考えています。これは、Flashアプリケーションに多額の投資を行っている企業や、Flashアプリケーションの構築に必要なプログラミングスキルの習得に時間を費やしている開発者にとっては悪いニュースです。FlashとHTML5の違いをいくつか見て、これら2つのプラットフォーム間の移行を容易にするためのヒントとツールを提供します。
フラッシュプラットフォームの基本
Flashは、実際には次のコンポーネントで構成される独自のAdobeプラットフォームを指す包括的な用語として使用されます。- Flash:主にアニメーションの設計と作成に使用されるツール
- Flex:ソフトウェア開発キット(SDK)を含む、アプリケーションの構築に使用される開発環境
- MXML:Flashプロジェクトで使用されるマークアップ言語
- ActionScript:スクリプト言語
Flashは、次の主要なファイル形式を使用します。
- .fla:Flashプロジェクトファイル
- .flv:Flashビデオファイル
- .swf:.flvファイルを含む可能性のあるコンパイル済みFlash / Flexアプリケーションファイル
HTML5プラットフォームの基本
HTML5は、以下で構成されるオープンスタンダードプラットフォームです。- HTML5:Webページの作成に使用されるマークアップ言語
- Cascading Style Sheets 3(CSS3):HTML5 Webページ上のオブジェクトのフォーマットを指定するために使用されるスタイルシート言語
- アプリケーションプログラミングインターフェイス(API):ドラッグアンドドロップやクロスドキュメントメッセージングなどの機能をサポートするAPI
- JavaScript:アニメーションを有効にするためにHTML5で使用されるスクリプト言語
HTML5ファイル形式には次のものが含まれます。
- .htm / .html:HTML5 Webページファイル
- .css:CSS3スタイルシートファイル
- .mp4:H.264ビデオコーデックおよびAACオーディオコーデックを含むMPEG 4ビデオファイル
- .webm:VP8ビデオコーデックとVorbisオーディオコーデックを含むWebMビデオファイル
- .ogg:TheoraビデオコーデックとVorbisオーディオコーデックを含むOggビデオファイル
FlashプロジェクトをHTML5に変換する
複雑なFlashプロジェクトをHTML5に手動で変換することは、プラットフォームの違いにより、労働集約的で時間のかかるプロセスです。開発者は、FlashとActionScriptで作成されたアニメーションをHTML5とJavaScriptに変換する必要があります。幸いなことに、FlashからHTML5への変換を自動化するのに役立つツールがいくつかあります。AdobeはWallabyをリリースしました。これは、Adobe Labs Webサイトから無料でダウンロードできる実験的なツールです。 Wallabyは、Flashプロジェクトファイル(.fla)を入力として受け取り、HTML5をエクスポートし、CSSおよびJavaScriptファイルをサポートします。ただし、Wallabyリリースノートには、変換されない機能のかなり長いリストが含まれています。最も重要なものは、ActionScript、ムービー、およびサウンドです。 Wallabyは、アニメーション化されたグラフィカルコンテンツをHTML5に変換するために主に設計された限定的なツールであるため、Webページデザインツールを使用してWebページに統合できます。
Google Labsは、コンパイル済みのFlashアプリケーションファイル(.swf)をHTML5に変換する無料のWebベースのツールであるSwiffyをリリースしました。その後、出力をWebページに埋め込むことができますが、開発者が編集するのは簡単ではありません。 Wallabyと同様に、SwiffyはすべてのFlash機能を変換するわけではありません。 SwiffyはActionScript変換をサポートしていますが、バージョン2.0のみです(ActionScriptは現在バージョン3.0です)。 Swiffy出力は、Scalable Vector Graphics(SVG)をサポートするブラウザーでのみ実行されます。
Edge、HTML5の新しい開発ツール
HTML5が最適なプラットフォームになると、HTML5、CSS3、およびJavaScriptを統合する設計および開発環境を提供する新しいツールが登場します。2011年8月、アドビはEdge開発ツールのプレビューバージョンをリリースしました。エッジにより、デザイナーはHTML5アニメーションを作成し、既存のHTML5プロジェクトにアニメーションを追加できます。 Flashデザイナーは、ステージ、プロパティウィンドウ、アニメーションタイムラインなど、Edgeユーザーインターフェイスのなじみのある要素を認識します。ただし、EdgeはCSSおよびJavaScriptファイルを生成し、そのアニメーションコンテンツはJavaScript Object Notation(JSON)データ構造に保存されます。
この記事の執筆時点で、Edgeは4回目のプレビューリリースを予定していました。各リリースに新しい機能が追加されています。
YouTubeをHTML5に変換する
HTML5への移行の兆候の1つは、YouTubeがHTML5ビデオプレーヤーを使用してビデオを表示するオプションを提供していることです。HTML5オプションを提供する前は、すべてのYouTubeビデオはFlashビデオプレーヤーを介して配信されていました。ユーザーはほとんどすべての形式のビデオファイルをアップロードでき、YouTubeは各ビデオを必要なFlash(.flv)形式に変換します。
YouTubeは現在、H.264ビデオコーデックとHTML5配信用のWebM形式でビデオをエンコードしています。 HTML5形式の動画を表示するには、HTML5動画タグとYouTubeで使用される動画形式をサポートするブラウザが必要です。