Next2Dプロジェクトとは

JavaScript製FlashPlayer「swf2js」から派生したプロジェクトです。
swf2jsはエミュレーターとして完成し、そこで得た技術を次代に活用するべく、Next2Dプロジェクトを開始しました。

Next2Dには、大きく3つの機能があります。

Next2D Player

WebGL対応の2D描画ライブラリで、ブラウザやデバイスの互換性を気にすることなく、リッチでインタラクティブなグラフィックス、クロスプラットフォームなアプリケーションやゲームを作成することができるライブラリ
Next2D Playerの特徴

Next2D NoCode Tool

NoCode開発を主体としたWebブラウザ上で動作するオーサリングツールです。
イメージしたアニメーションを直感的に作成することができ、書き出したデータはWebにアップロードすることで簡単に公開することができます。
出力したJSONは、Next2D Playerで読み込むことが可能です。
NoCode Toolの特徴

Next2D Framework

MVVMアーキテクチャを採用。個人でもチームでも、規模を問わず、最新の開発手法で効率的な開発をサポートします。
Next2D Frameworkの特徴

主にこの3つの機能を有しています。
GitHubのリポジトリは以下となります。

昨年のアドベントカレンダーで、少しだけ「Next2D」の紹介をさせていただきました。
Flash Advent Calendar 25日目 - ありがとうFlashPlayer -
今日の記事は上記の記事の続きとなります。

FlashPlayerのサポート終了

昨年、FlashPlayerのサポートが終了しました。
その結果、世の中には沢山のSWF資産が冬眠することになったかと思います。
そんな資産を再利用できる(?)NoCode Toolの紹介を今日は行いたいと思います。

Next2D NoCode Toolとは

一言で紹介すると、Webブラウザ上で動作するオーサリングツールです。
インストール不要、会員登録も不要、アクセスすれば誰でも利用できるサービスです。
サイトはこちら：NoCode Tool

基本のワークスペースはこのような名称になっています。

Tool Area

描画ツール、テキストツール、プロジェクトの読込・保存、書き出し設定や言語設定など各種ツールと設定項目が設置されているエリアになります。

Screen Area

現在のフレームでStage上に表示されるDisplayObjectの閲覧・配置・重ね順など、描画情報を確認できるエリアになります。Command+EnterまたはCtrl+Enterで、Playerのプレビュー再生が行えます。

Timeline Area

レイヤーやアニメーションのキーフレームなどを操作するエリアになります。Label名の設定や、フレームに任意のJavaScriptを埋め込む事ができ、レイヤー毎のTweenの追加・削除のコントロールも可能です。

Controller Area

拡大縮小/回転/カラー操作/BlendMode/Filterなど、Screen AreaのDisplayObjectの操作を行えるエリアになります。テキストデータはサイズ、スタイル、行揃えなどの設定ができ、ビデオ・音声データはループ設定や音量の設定が可能です。Libraryタブから外部データ(画像、MP4、MP3、SWF)を読み込む事ができ、JavaScriptタグではプロジェクト全体に埋め込まれたJavaScriptの一覧を確認・編集ができます。

SWFを読み込む

本日は、昨年の続きという事でSWFファイルをどのように読み込むかを動画で紹介できればと思います。

動作動画

SWF読み込み手順

Controller AreaのLibraryを右クリックしてSWFを読み込む(直接ドロップも可能です)
MovieClipをScreen Areaにドロップ
Controller Areaで好きなサイズに変更
Screen Areaで右クリックして動作プレビュー

SWFファイルはどのバージョンでも読み込み可能で、これまでの資産を再利用できます。
また、これまで通りAnimateCC(Flash)、Illustrator、AfterEffectsなどAdobe製品からSWFを書き出し、NoCode Toolで読み込む事でNext2D Playerで再生が可能です。
つまり、過去の資産の再利用もこれまで通りの運用スタイルも可能にすることができます。

SWFファイルの対応範囲

Shape
Bitmap
MovieClip
Matrix
ColorTransform
Blend Mode
Filter

非対応機能

ActionScript
Text

なぜ非対応機能があるのか

swf2jsでエミュレートできている機能をなぜNoCode Toolで対応しないのか
それは、このカレンダーを通して説明させて頂ければと思います。

本日は最後まで記事をご覧いただきありがとうございました。
NoCode ToolにはSWFを読み込む以外にも色々な機能があります。
そちらは明日以降でご紹介させて頂ければと思います。