このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

FlashをCanvas等に変換 gree/LWF(Lightweight SWF)を使ってみました。

この記事は最終更新日から1年以上が経過しています。

 gree/LWF(Lightweight SWF)を使ってみました。

LWFとは、GREEエンジニアが開発したオープンソースで、独自ファイルフォーマットに基づくアニメーションエンジンで、Flashコンテンツから変換したアニメーションデータを、UnityとHTML5(Canvas)で再生できる様にするツールになります。また、Unityにも使える様になっています。

何はともあれ使ってみましょう。

lwf (Lightweight SWF)

lwf  GitHub

https://github.com/gree/lwf

こちらにソースがあるのですが、準備するのが困難なので(一度やってみましたが上手く行かなかったです。)

簡単に設定出来るように「lwfs」というのが用意されていますので、そちらを使いましょう。

LWFS 〜LWFへの変換と確認をより簡単に!〜

lwfだけだと、「どうやるのどうやるの??」状態に陥りかねないので(なかなか情報が少ない)より簡単に「変換」「確認」を行えるLWFSというのが用意されています。

LWFS  GitHub

https://github.com/gree/lwfs

では、早速ダウンロードしましょう!

LWF ダウンロード

上記のリンクをクリック、ページ下部にリンクがありますので、クリックしダウンロードページでいきます。

ダウンロードページ

http://code.google.com/p/lwfs/downloads/list

ダウンロードページは以下の様になっております。

「LWFS for mac os x」:mac用ファイル

「LWFS for windows」:window用ファイル

「LWFS_work for examples」:デモファイル

となっております。

上から最新のファイルとなっておりますので、お使いのパスコンに該当するファイルをダウンロードしましょう。

zipファイルをダウンロードし、解凍しましょう。

解凍したlwfディレクトリには、以下の様なファイルが格納されているかと思います。(macの場合)

この、startをクリックすると、lwfsが立ち上がります。

lwfsを起ち上げるとデスクトップに「LWFS_work」と「LWFS_work_output」の2つのディレクトリがデスクトップ上に出来、ブラウザが起ち上がると思います。

これで準備完成。それではデモファイルをダウンロードしましょう。

デモファイルで試してみる

先ほど、lwfsをダウンロードしたページにデモファイルもあったのでそちらをダウンロードします。

ダウンロードページ

http://code.google.com/p/lwfs/downloads/list

「LWFS_work for examples」:デモファイル

中身は何個かデモファイルが格納されていますので、「01_animated_building.swf」というファイルを

先ほどデスクトップ上に出来た「LWFS_work」ディレクトリに格納します。すると。

ブラウザが自動的に更新され、webkitcss、canvas、webglのリンクとstatus、last modifiedが表示されたかと思います。

これはそれぞれ、

webkitcss:css3アニメーションを含んだ変換

canvas:canvasによる書き出し変換

webgl:WebGLに対応した変換

status:状態

last modified:更新日時

となっています。

では、canvasをクリックしてみましょう。

すると、現在確保できているfpsの状態、qrコードが表示し

アニメーション確認も出来る様になっています。

書き出しのソースを確認してみますと、

おぉ。canvasで書き出されているのが確認できます。

次回は、手元にあるswfファイルで検証してみたいと思います。

各リンク先

lwf  GitHub

https://github.com/gree/lwf

LWFS  GitHub

https://github.com/gree/lwfs

ダウンロードページ

http://code.google.com/p/lwfs/downloads/list

Related Article

LATEST NEWS

RANKING

ARCHIVE

SPONSOR

現在、掲載募集中です。



Links

現在、掲載募集中です。



About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。