Fanvas,swfファイルをhtml 5 canvas jsソフトウェアツールプログラムに転送
4902 ワード
Fanvas,swfファイルをhtml 5 canvas jsソフトウェアツールプログラムに転送
Fanvasとは?
Fanvasはswfをhtml 5 canvasアニメーションに変換するシステムで、Actionscriptで実現される解析器、js実行ライブラリの2つの部分から構成されています.
Flashがアニメーションを作るのは最も成熟して最も効率的な方法ですが、端末は基本的にFlash再生をサポートしていないため、端末のアニメーション制作に多くの面倒をもたらしました.
FanvasはFlashとCanvasの完璧な結合で、swf(ベクトルとビットマップを含む)をcanvasアニメーションに完璧に変換し、美術の妹に一度に作らせ、あちこちで運行させることができます.の
へへへ~~~美術の妹にもH 5の急行に乗せてもらいます.
Fanvasの技術的難点は?
1、swfに対応する各種フォーマットは、主に各種ベクトルコマンドと多種多様なピクチャフォーマットである.
2、効率的なhtml 5運行ライブラリを実現し、ビットマップキャッシュ、自動汚れ識別、汚れ再描画などの技術を自主的に実現した.
Fanvasの強みは?
swfをH 5アニメーションに変換できるツールは、Fanvasのほかにも有名なgoogleとadobeの製品であるswifyとflashccがあります.対照的に、Fanvasには次のようなメリットがあります.
1、swfファイルから直接Html 5アニメーション(googleのswifyとadobeのflashccはサポートされていません.両方の製品はflaソースファイルで処理する必要があります).
2、編成したJSONデータを簡素化し、swf変換後のjsデータファイルを非常に小さくし、flashccから導出したものより20%から50%小さいのが一般的である.
3、簡素な運行ライブラリは、混同後35 k、gzip後10 k程度しかない.swifyとflashccの実行ライブラリが混同された後、100 Kを超えた.
4、オープンソース、ユーザーが二次開発できる(Fanvasの文字または著作権声明を保留してください).
使用方法
swfをインポートするには、変換が完了したらcanvasアニメーションjsをエクスポートします.
具体的にはbinディレクトリの「使用説明」を参照してください
ソースコードの説明
exporterはas 3である.0実現したswfファイル解析器は、解析後にjsonデータを出力する.
runtimeはjs実行ライブラリで、jsonデータを解析し、最終canvasアニメーションに変換します.
素材仕様
Fanvas 3.0は、通常のFlashアニメーションを完璧にサポートし、汚れた領域の再描画技術を追加し、より効率的に動作します.使用方法は少し変更され、元の2.0アニメーションはcanvasの幅に適していたが、3.0では、fanvasが自動的にアニメーションの幅の倍数に設定されるため、canvasのwidthとheight属性を設定しないでください(初期化されたscaleパラメータを参照).画面上のcanvasのサイズを制御する必要がある場合は、cssを使用します.これにより、モバイル端末において様々なスクリーン密度を適合させることが容易になる.ボタン、テキスト、補間シェイプはしばらくサポートされていません.変換前にflaにボタン、テキスト、または補間シェイプがあるかどうかを確認し、先に削除する必要があります.デザイナーにとっては、テキストをばらばらにしたり、画像を使ったりして、特殊なフォントの使用に有利ですが、補間形状という機能の使用率は極めて低く、使用をお勧めしません.使用中に何か問題があったり、Fanvasに新しい機能を追加したい場合は、kenko、メールボックスに連絡してください[email protected].
マスク仕様:Fanvas 1.0仕様に従う必要はありませんが、canvas 2 dのメカニズムに限定され、マスク層はグラフィックまたは形状のみであり、ムービークリップではありません.しかし,この制限は実際の設計に影響を及ぼさず,グラフィックのように時間軸の変化を行うことができる.また、Canvasアニメーションではマスクネストマスクはサポートされていないため、flashではステージからエンドエレメントまで1回しかマスクできません.
フィルタ仕様:フィルタ(色調変化を含む)を使用すると、素子はステージ上で緩やかに変化することができますが、素子内部には時間軸の変化はありません.この素子は第1フレームでスクリーンショットにキャッシュされ、その後、素子の代わりに1枚の図が続くため、素子内部の変形は表示されません.これは,フレームごとにフィルタ処理を繰り返すとcanvasが耐えられないためである.特に発光と投影であり,この2つはcanvasが原生的にサポートする機能であるため,上フィルタ仕様に制限されない.
Fanvas使用手順 fanvasを起動する.swfプログラム、具体的な方法:まずflashplayerを開きます14_sa_debug.exe、fanvasをドラッグswf swfをインポートdataをエクスポートする.js.このdata.jsはswfのデータを表す.swfにビットマップがある場合、zipパケットがエクスポートされ、ピクチャとjsが含まれます.ピクチャ名を変更せずにhtmlの同じ階層ディレクトリまたは相対パス/絶対パスにピクチャを配置します. ターゲットページにcanvasラベルを作成し、canvasの幅を設定します(元のswfとは異なり、fanvasがストレッチ表示されます).または、エクスポートしたファイルをdemoディレクトリに直接上書きしてindexを開くこともできます. fanvas-min.js,dataを導入する.js,domが完了するとfanvasを呼び出す.プレイすればいいです.
Playは3つのパラメータを受け入れます.の1番目はcanvas dom要素またはcanvasのidです. の2番目はdataである.jsの変数名(data.jsを開くとvar swfData={}の構造が見つかります).1ページに複数のアニメーションがある場合は、異なるdataを作成する必要があります.jsはそれぞれ異なる変数名を使用する. の3番目は再生構成であり、ビットマップ化キャッシュとピクチャの格納パスをオンにするかどうかを含むオブジェクトである. cache:0/1/2、デフォルト0.すべてのベクトルパターンを実行時にビットマップするかどうかを制御します.ビットマップ化すると実行効率が向上しますが、プロセス中にcanvas幅を変更したり、ベクトルマップを拡大したりすると、ぼやけてしまいます.0はキャッシュしない、1は1倍キャッシュ、2は2倍キャッシュを表します.2より明確な効果が得られますが、パフォーマンスが低下します. autoPlay:true/false、デフォルトtrue.falseはアニメーションを最初のフレームに止めます.その後resumeを呼び出してアニメーションを に再生させる必要があります. clearAll:0/1、デフォルト0.1は汚れた領域を使用しないで再描画し、フルスクリーン再描画に変更し、アニメーションに再生不良が発生した場合、フルスクリーン再描画に変更しようとします. showFPS:0/1、デフォルト0.フレーム周波数を表示します. scale:0.1~3.0、デフォルト1.アニメーションはscaleの倍数などの割合で縮小して描画され、このパラメータを利用して携帯電話の画面密度を適切に配合することができ、scaleを適切に低減してローエンド機種の再生のスムーズさを高めることができる. onFrame:function、アニメーションの再生中にフレームごとにこの関数がコールバックされます.関数の最初のパラメータは、再生されたフレーム数です. imagePath:画像の保存パス.画像とhtmlファイルが同じ階層のディレクトリに配置されていることを示すように構成しなくてもいいです.例えば現在のhtmlはhttp://www.abc.com/swf/1.htmlPlay関数転送」/imagePath 1/"は、http://www.abc.com/imagePath1/img0.jpg画像を引く.入力./imagePath 1/"は、http://www.abc.com/swf/imagePath1/img0.jpg写真を引く.canvasドメイン間の問題を回避するために、画像とhtmlを同じドメイン名に保存する必要がある
Demo
Fanvasの再生制御インタフェース fanvas.replay:再生を再開し、canvas domまたはidに転送するには、playメソッドに対応する必要があります. fanvas.pause:再生を一時停止し、canvas domまたはidに転送し、playメソッドに対応する必要があります.単一ページAppの場合、canvasを削除する前にpauseを呼び出し、Timerを停止させることをお勧めします.そうしないと、メモリの漏洩とパフォーマンスの浪費になります. fanvas.resume:再生を再開し、canvas domまたはidに転送し、pauseメソッドに対応する必要があります. fanvas.gotoAndPlay:あるフレームにジャンプして再生し、canvas domまたはidとフレーム番号を入力します(1から). fanvas.gotoAndStop:あるフレームにジャンプしてそこに止まり、canvas domまたはidとフレーム番号を入力します(1から).
コントロールインタフェースとonFrameを組み合わせることで、より多くの面白い効果を自由に発揮することができます.
ダウンロード先:https://github.com/Tencent/Fanvas
Fanvasとは?
Fanvasはswfをhtml 5 canvasアニメーションに変換するシステムで、Actionscriptで実現される解析器、js実行ライブラリの2つの部分から構成されています.
Flashがアニメーションを作るのは最も成熟して最も効率的な方法ですが、端末は基本的にFlash再生をサポートしていないため、端末のアニメーション制作に多くの面倒をもたらしました.
FanvasはFlashとCanvasの完璧な結合で、swf(ベクトルとビットマップを含む)をcanvasアニメーションに完璧に変換し、美術の妹に一度に作らせ、あちこちで運行させることができます.の
へへへ~~~美術の妹にもH 5の急行に乗せてもらいます.
Fanvasの技術的難点は?
1、swfに対応する各種フォーマットは、主に各種ベクトルコマンドと多種多様なピクチャフォーマットである.
2、効率的なhtml 5運行ライブラリを実現し、ビットマップキャッシュ、自動汚れ識別、汚れ再描画などの技術を自主的に実現した.
Fanvasの強みは?
swfをH 5アニメーションに変換できるツールは、Fanvasのほかにも有名なgoogleとadobeの製品であるswifyとflashccがあります.対照的に、Fanvasには次のようなメリットがあります.
1、swfファイルから直接Html 5アニメーション(googleのswifyとadobeのflashccはサポートされていません.両方の製品はflaソースファイルで処理する必要があります).
2、編成したJSONデータを簡素化し、swf変換後のjsデータファイルを非常に小さくし、flashccから導出したものより20%から50%小さいのが一般的である.
3、簡素な運行ライブラリは、混同後35 k、gzip後10 k程度しかない.swifyとflashccの実行ライブラリが混同された後、100 Kを超えた.
4、オープンソース、ユーザーが二次開発できる(Fanvasの文字または著作権声明を保留してください).
使用方法
swfをインポートするには、変換が完了したらcanvasアニメーションjsをエクスポートします.
具体的にはbinディレクトリの「使用説明」を参照してください
ソースコードの説明
exporterはas 3である.0実現したswfファイル解析器は、解析後にjsonデータを出力する.
runtimeはjs実行ライブラリで、jsonデータを解析し、最終canvasアニメーションに変換します.
素材仕様
Fanvas 3.0は、通常のFlashアニメーションを完璧にサポートし、汚れた領域の再描画技術を追加し、より効率的に動作します.使用方法は少し変更され、元の2.0アニメーションはcanvasの幅に適していたが、3.0では、fanvasが自動的にアニメーションの幅の倍数に設定されるため、canvasのwidthとheight属性を設定しないでください(初期化されたscaleパラメータを参照).画面上のcanvasのサイズを制御する必要がある場合は、cssを使用します.これにより、モバイル端末において様々なスクリーン密度を適合させることが容易になる.ボタン、テキスト、補間シェイプはしばらくサポートされていません.変換前にflaにボタン、テキスト、または補間シェイプがあるかどうかを確認し、先に削除する必要があります.デザイナーにとっては、テキストをばらばらにしたり、画像を使ったりして、特殊なフォントの使用に有利ですが、補間形状という機能の使用率は極めて低く、使用をお勧めしません.使用中に何か問題があったり、Fanvasに新しい機能を追加したい場合は、kenko、メールボックスに連絡してください[email protected].
マスク仕様:Fanvas 1.0仕様に従う必要はありませんが、canvas 2 dのメカニズムに限定され、マスク層はグラフィックまたは形状のみであり、ムービークリップではありません.しかし,この制限は実際の設計に影響を及ぼさず,グラフィックのように時間軸の変化を行うことができる.また、Canvasアニメーションではマスクネストマスクはサポートされていないため、flashではステージからエンドエレメントまで1回しかマスクできません.
フィルタ仕様:フィルタ(色調変化を含む)を使用すると、素子はステージ上で緩やかに変化することができますが、素子内部には時間軸の変化はありません.この素子は第1フレームでスクリーンショットにキャッシュされ、その後、素子の代わりに1枚の図が続くため、素子内部の変形は表示されません.これは,フレームごとにフィルタ処理を繰り返すとcanvasが耐えられないためである.特に発光と投影であり,この2つはcanvasが原生的にサポートする機能であるため,上フィルタ仕様に制限されない.
Fanvas使用手順
Playは3つのパラメータを受け入れます.
Demo
function init() {
fanvas.play('testCanvas', swfData, {cache:1, autoPlay:true, onFrame:null, imagePath:"./img/"});
}
Fanvasの再生制御インタフェース
コントロールインタフェースとonFrameを組み合わせることで、より多くの面白い効果を自由に発揮することができます.
ダウンロード先:https://github.com/Tencent/Fanvas