Code Monkey home page Code Monkey logo

flashforward's Introduction

FlashForward (FlashLite to HTML5 Animation project)

概要

FlashLite1.1相当のSWFをHTML5で動くアニメーションにコンバートします.

特にFlashが動かないiOS上で最も最適されて動くことを意識しています

License

The MIT License http://www.opensource.org/licenses/mit-license.html

Information

ディレクトリ構成

├── docs    -- ドキュメント
├── parser  -- パーサープログラムを言語別に配置します
│   └── php
├── runtime -- ランタイムプログラムを言語別に配置します
│   └── javascript
└── sample
    ├── ff  -- デフォルトでパース後の中間コードの保存ディレクトリです
    └── swf -- サンプルSWFファイルです

サンプルの実行

$ sh sample/build.sh

sample/ff以下にsample/swf下のswfがパースされて展開されます

runtime/javascriptをブラウザで確認できるようにして、runtime/javascript/index.phpにアクセスしてください

またApacheの場合は.htaccessを設置しておりますが、そうでない場合は、svg及びsvgzをsvgとして認識できるように設定してください

プログラムの構成

クライアントサイドでの負荷軽減、データの分散、特にFlashの動的生成時の最適化を意識し、 中間コードの仕様に従って、パーサープログラムと、ランタイムプログラムで役割を分担しています

現在は下記の構成でそれぞれを実装しています

  • パーサープログラム PHP5.3
  • ランタイムプログラム JavaScript

なお、JavaScriptはSVCとcanvasで実行できますが、現在のところ、SVGが最適です. (2011/07/05現在、canvasにはまだ不具合も有ります)

PHPプログラムはMedia_SWFに大幅に修正を加えたものになります。 Media_SWFとの互換はなくなっている可能性が有ります

データコンバート

データコンバートは下記コマンドを実行します

$ php parser/php/bin/convert_swf.php `path to source swf` `path to output target dir`

なおサンプルのswfは、下記のコマンドで一括コンバートします

$ sh bin/build.sh

コンバートしたSWFは下記の構成で複数のファイルに変換されます

dir/
  - index.json
  - defines/
      - *sprite.json
      - *sprite.svgz
      - *font.svgz
      - *bitmap.jpeg
      - *bitmap.png

より詳細な中間コードの仕様は docs/SPEC.md を参考にしてください

PHPコンバートスクリプトのオプション

$ php parser/php/bin/convert_swf.php --help

Usage

$ /usr/bin/env php parser/php/bin/convert_swf.php <option> [swfname] [output directory]

Options

--help, -h, -?                 ヘルプを表示します
--version, -v                  バージョンを表示します
--compress, -c                 圧縮オプションを使います(SVGをzlib圧縮してsvgzとします)
--compact, --minimum, -m       ファイル最小化オプションを使います(ムービークリップによらず可能な限りファイル数を最小にします)
--swf, -f                      変換対象のSWFファイル名(パラメータでも構いません)
--output-dir, --save-dir, -o   保存先ディレクトリ(パラメータでも構いません)

Arguments

swfname                        変換対象のSWFファイル名(Optionでも構いません)
output directory               保存先ディレクトリ(Optionでも構いません)

JavaScriptのminify

JavaScriptのディレクトリに移動すると下記のMakeを実行できます

$ make all           --- minと同様
$ make build         --- .jsをdistディレクトリに1ファイルに結合
$ make min           --- buildした.jsをGoogle Closure Compilerでminify
$ make install       --- minifyしたjsをbinディレクトリにバージョンに分けて配置
$ make clean         --- dist dirをrm
$ make recompile     --- make clean all

ボタン操作の代替策

ボタンタグには対応しておりませんが、FlashLite1.1のcall()をJavaScriptから明示的に実行する事で、 ユーザーアクションに対応させる事が出来ます。

var player = new FlashForward.Player("path/to/index.json", "screen", "svg");
player.play();

document.onkeydown = function (ev) {
  switch (ev.keyCode) {
  case 13:
    if (player.context.stage) {
      player.context.stage.callAction("click");
    }
    break;
  }
};

flashforward's People

Contributors

ken39arg avatar yoya avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.