跳到主要內容

Flash Timeline to TweenMaxJS

大家好,我是奶綠茶
因為專案的需求
現在客戶都要製作 html 的網頁
但在製作動態效果上就有些麻煩
都只能用 js 寫出來
使用 createJS 轉出來是 HTML5 Canvas 版本
快樂  IE8 不支援
所以筆者寫了一個 Flash 的小外掛
能將 Flash 裡的時間軸動畫輸出成 html 的程式碼
動態的部份是使用 TweenMax 來製作
這樣就可以用熟悉的工具拉時間軸動畫
且支援舊的 Browser
不是所有的 Flash 裡的效果都有支援轉換
一定要本來 html 做的到的功能才行
感謝老婆大大 Betty 提供的idea(聽老婆的話就對了,羞)
Adobe Flash CS6 Timeline to TweenMaxJS alt tag

將目前的時間軸轉成 TweenMax JS 版程式碼

使用方法:
1. 下載 flashTimelineToTweenMaxJS.zxp 2. 開啟 FlashCS6(FlashCC).
3. 在 PC 上,中文 OS 安裝英文版 Flash 軟體時, 安裝 extensions 會有語系問題
解決方法是從 Flash / Help / Manage Extensions 啟動並安裝
alt tag
4. 製作你的時間軸動畫或點我下載 Demo.fla .
5. 第一個影格不能是空.
alt tag
6. 點擊上方工具列 / 命令 / flashTimelineToTweenMaxJS 
alt tag
7. 在同 fla 資料夾下即可看到匯出的 html 檔.
8. html 需要引用 TweenMax 和 jQuery 的 Library.

createJS 轉出來的是 html5 canvas 動畫, 快樂 IE8 不支援
我的小工具只是將動畫轉成 TweenMax 的程式碼,省去前端攻城屍 Coding 時間
zxp_source 資料夾裡是完整的 Source Code 

完整的 SourceCode 我放在 Github 上
https://github.com/milkmidi/flashtimeline_to_tweenmaxjs

轉載請註明出處

留言

sato表示…
您好!
我发现了一个伟大的代码wonderfl。
我想在我的游戏中使用这些代码。
因此被称为:“许可协议保留所有权利”,我来到这里参加许可。
是否可以使用?

http://wonderfl.net/c/g1dQ
sato表示…
Thank you!

I am very grateful!

這個網誌中的熱門文章

奶綠茶新書上市_密技公怖_程式碼下載

奶綠茶第一本 Flash 書籍上市啦 博客來書籍館 Flash 3D 特效宅急便 - 商業範例隨學隨 把我對 Flash 的研究與熱愛, 全寫在其中 本書的前幾章, 特別安排 ActionScript3.0 的許多範例 好讓你一步步瞭解 as2 和 as3 的差別 再安排製作動畫不可缺少的 Tweener 類別和一些常用的數學動畫公式 最後當然就來到本書的重點 PV3D 啦 從 PV3D 的原理, 基本架構一點一點的介紹 再透過許多實用的範例, 從中瞭解 PV3D 製作的小技巧 有任何書籍相關的問題, 也請不吝指教 感謝一路走來, 幫助過我的前輩們, 邦邦、Ticore、神魂、Maso、Erin 旗標出版社 小編 Bready 米蘭數位所有夥伴 米蘭數位ActionScript Team:Jason,Ash,Mark 本書大鋼: 1.ActionScript3.0概論 分析AS3的概念與語法, 從基本的滑鼠事件、外部載入、氣泡事件介紹起 適合熟悉AS2, 想轉戰AS3的人員。 2.程式碼製作動畫 使用簡單的數學公式, 套用到程式裡, 脫離死版的影格動畫。 3.製作動畫的好夥伴:Tweener 除了套用數學公式外, Tweener類別也能加速我們開發出更多的動畫效果, 不需辛辛苦苦的找公式。 4.自定類別 AS3的精神, 是在於強大的物件導向, 當然也要熟悉類別的寫法與使用。 5.Flash3D - Papervison3D 如果在Flash玩轉3D效果, PV3D是最好學, 最快上手的3D Flash Engine, 從簡單的3D概念, PV3D類別, 事件等。 6 漫天飛舞的Paper3DWorld效果 7 迷你旋轉木馬式秀圖效果 8 最經典! CoverFlow 圖像展示效果 9 天旋地轉 TiltViewer效果 10 FlatWall3D電視牆效果 11 經典旋轉木馬 Carousel3D 秀圖效果 12 光源材質展示與簡易型的方塊彈跳效果 13 載入外部3D模型與動畫 14 超立體旋轉九宮格 Box3DWorld 15 空間感與透明感兼具的 SpaceGallery 16 螺旋式 SpiralCarouse 影像展示 17 Flash10 3D功能 18 Flash效...

奶綠茶photoGalleryV3.5

奶小茶的photoGalleryV3.5原始檔 2007/12/30 更新小Bug,請重新下載 線上Demo: http://milkmidi.com/photogallery/galleryv3.html 1.支援SWFAddress,讓FLASH可以有上一頁下一頁和每張獨立網址的功能 2.圖片路徑圖說經由XML來設定 3.背景依據顯示圖片,自動變化成最接近的顏色 4.非商業用途,歡迎使用並修改(如果覺得我製作的好,也煩請加入我的logo) 5.可結合後端伺服器 00.art 相本集資料夾 com 奶綠茶的Class檔 swfaddress SWFAddress資料夾 swfobject swfobject資料夾 XML galleryV3.fla 原始檔 index.html 主檔html SWFAddress.as SWFaddressEvent.as Source Code Download 解壓密碼:回覆文章,即可看見Password

FLARToolKit

什麼是FLARToolKit 簡單來說, 就是透過Webcam, 將虛擬的物件與真實的世界結合, 呈現在使用者的畫面 Demo影片: http://www.youtube.com/watch?v=TW6_X9qBeds&feature=related Youtube有許多相關的影片。 一開始的版本並不是Flash, 後來日本的程式設計師 Saqoosha 將其改寫成Flash版 並搭配PV3D。 你可以下載其原始碼來研究, 程式碼都是公開的。 http://www.libspark.org/wiki/saqoosha/FLARToolKit/en http://saqoosha.net/flartoolkit/start-up-guide/ 要玩這個技術, 需要具備幾個點: 1.熟悉FlashActionScript3.0 , 特別是類別的部份。 2.略懂PV3D的架構, 因為裡面是用到PV3D的核心Engine。 3.需要有一台Webcam, 4.開始玩樂吧。 即然跟Flash有關, 而且也是PV3D, 奶小茶我當然是不會錯過 使用的是官網的Focus 3D模型車和FlarToolKit製作的Demo, 原始碼官網都有提供喔。 PV3D的相關課程, 可以參考 飛肯學苑 奶老師所開設的PV3D班。 奶小茶Demo的原始碼按我下載