目次
1. 背景
2020年12月31日、AdobeはFlashのサポートを正式に終了し、2021年1月12日にはFlash Playerを完全に利用することができなくなりました。これにより、Flashを使用している多くのアプリケーションやウェブサイトはHTMLへの移行やエミュレータを使用するなどの代替手段を模索することになりました。
CAIメディアも例外ではなく、いくつかの製品でFlashを使用していたため、サポート終了に伴い、これらの製品を新しい技術に移植する必要が生じました。
2. 自社製品におけるFlashの利用状況
自社でFlashを利用していた主な製品は、CD-ROM教材『完全攻略！ゲームで覚える 英単語8000』と『英語は勉強しないで』の2点です。これらは、近年では流通が減少傾向にあった当社のCD-ROM教材の中でも、長期に渡りご好評いただいている商品でしたが、Flashのサービス終了と共に、販売中止を余儀なくされました。
3. 移植方法の選定
お客様から復活を求める声をたくさんいただき、販売終了に追い込まれた商品をなんとかふたたび使えるようにするため、Flashを使った製品の移植を行うことが決まりました。
移植にあたっては、いくつかの選択肢を検討しました。たとえば、swf2jsやRuffleなどのFlashエミュレータは、既存のswfファイルをそのまま活用できるメリットがある一方で、アニメーションの再現性や将来的な保守性に課題がありました。
特に、swfファイルのみのプロジェクトでは既存アニメーションに手を加えにくく、またWindowsアプリケーション内で動作させる必要があったため、C#やC++のコードとの連携も考慮する必要がありました。
これらの点から、最終的にAdobe Animateを使用してHTML5に移植する方法を選択しました。
4. 移植プロセス
移植プロセスの概要は以下の通りです。
– flaファイルが存在していた場合はAdobe Animateを用いてHTML5 Canvas形式に変換
– swfファイルしか残っていなかった場合はffdec（JPEXS Free Flash Decompiler）でflaファイルに変換後、同様にHTML5形式へ移行
– 音声やActionScriptの移植、シーン分割・結合、C#やC++アプリケーションとの連携などを考慮しながら移植
詳細な手順や技術的なポイントについては、FLASH製品移植プロセス詳細にまとめていますので、そちらをご参照ください。
5. Adobe Animateでの移植についてのメリット・デメリット
5.1 メリット
1. 元のアセットの活用：
– flaファイルのアセットやタイムラインをそのまま活かして移植できるため、デザインの再現性が高い
– 既存のアニメーションやモーションをほぼそのまま移行できる
– 使用されている各画像についても、採用する解像度に対応していれば流用できる
2. 現代のWeb技術との互換性：
– HTML5/JavaScript基盤のため、最新のブラウザで問題なく動作する
– Flash Player依存から脱却し、長期的な保守が可能になる
3. レスポンシブ対応：
– パブリッシュ設定でレスポンシブ対応を有効にすることで、様々な画面サイズにある程度は対応可能
4. DOM操作との連携：
– CreateJSのDOMElementを利用して、HTMLのinput要素などを重ねて表示できる
– Canvas描画とHTML要素を組み合わせて柔軟なUIが構築可能
5. アプリケーションとの連携：
– WebView2を活用することで、C#やC++アプリケーション内との連携が可能
6. パフォーマンスの向上 :
– これは今回移植した弊社製品の場合に限られるかもしれませんが、一部Flashでは重かったアニメーションが、HTML5に移植することで軽くなった部分もありました。
5.2 デメリット
1. 手作業による移植の必要性：
– ActionScriptからJavaScriptへの自動変換は行われないため、手動での書き直しが必要
2. 音声ファイルの問題：
– 再生時間が短い音声ファイルをAdobe AnimateでHTML5化すると、音声データが破損することがあるため、swfファイルから抽出する必要がある。
3. ActionScript情報の消失：
– Adobe Animateでflaファイルを開くと、ボタンなどに登録されていたActionScriptが破棄されるため、元の動作を復元するためにffdecでswfファイルを確認しながら作業する必要がある
4. HTML5/CreateJSの制約：
– Canvas上に直接テキスト入力ができないため、HTMLのinput要素を重ねるなどの工夫が必要
– スクロールバーなどの一部UI要素は自作する必要がある
5. Adobe Animateを使用したHTML形式への自動変換時の問題：
– シーンごとに自動分割されて出力されるため、すべてを1ファイルで完結することが難しい
今回のプロジェクトでは、Adobe Animateを使用してHTML5 Canvas形式に移植する方法を選択しました。上記のようなメリットとデメリットを考慮しながら進める必要がありましたが、最終的にはFlashに比べてなんら遜色ないアニメーションを実現できたと思います。
自社商品『完全攻略！ゲームで覚える英単8000』の
HTMLサンプルをお試しいただけます。
当社のFlashコンテンツの移植サービスについて
詳しくはこちらをご覧ください。