Skip to main content

[AIR] JoSi FXGtoLayout

JoSi FXGtoLayout

v0.3.0, Adobe AIR 3 runtime

這個又是一個 "就是" 系列懶人小工具,主要是針對 Adobe fxg 格式做分析轉成 Mobile 開發用的視圖程式碼,加速畫面配置使用。

為什麼會製作這個工具,原因主要是本人在使用的 Corona SDK 與 Titanium SDK 都沒有好用的視覺化編輯工具。一般設計師產出 layout 檔會使用 PhotoShop 來製作,在不多花錢的原則下,畫面對齊的基準就是其輸出的 fxg 資料做對應,如果要一筆一筆將資料鍵入,做久也是會膩的,所以花了點時間將這個工具做出來...



不過目前版本僅支援 Corona SDK 格式輸出。



目前版本 0.3.0 feature:
  1. 拖曳並放置 fxg 檔案後,轉換的文字會直接貼到剪貼簿。
  2. 產生之物件名稱以 d:userLabel 為主(即 PhotoShop 圖層名稱),所以請注意命名。
  3. 僅支援 Corona SDK 格式輸出。
  4. 僅支援 fxg <<BitmapImage /> 標籤,PhotoShop and Flash 輸出皆可使用,差別是 Flash 會採用 newImage。
  5. 先這樣囉!
輸出之程式碼範例:(輸出 by Photoshop) 

----------------------------------------------------------------------
-- JoSiFXGtoLayout
-- Author:Erin Lin
-- erinylin.blogspot.com
-- Copyright (c) 2013 Erin Lin( Yu-Shan Lin )
-- File Name:file:///---/menu.fxg
----------------------------------------------------------------------
local function moveTo(target, x, y)
target:setReferencePoint(display.TopLeftReferencePoint);
target.x=x; target.y=y
end

local _imgPath='menu.assets/images/'

local bg_ = display.newImageRect( _imgPath..'bg1_0.png', 640, 960 )
moveTo( bg_, 0, 0 )
group:insert( bg_ )

local bg_ = display.newImageRect( _imgPath..'bg2_1.png', 640, 960 )
moveTo( bg_, 0, 0 )
group:insert( bg_ )

local logo = display.newImageRect( _imgPath..'logo_2.png', 586, 925 )
moveTo( logo, 17, 0 )
group:insert( logo )

local btn_stage = display.newImageRect( _imgPath..'btn_stage_4.png', 184, 184 )
moveTo( btn_stage, 199, 578 )
group:insert( btn_stage )

local btn_option = display.newImageRect( _imgPath..'btn_option_6.png', 134, 134 )
moveTo( btn_option, 372, 720 )
group:insert( btn_option )

local btn_ta = display.newImageRect( _imgPath..'btn_ta_8.png', 161, 160 )
moveTo( btn_ta, 26, 682 )
group:insert( btn_ta )

local btn_score = display.newImageRect( _imgPath..'btn_score_10.png', 162, 162 )
moveTo( btn_score, 491, 612 )
group:insert( btn_score )

將產生的程式碼直接 ctrl-p or command-p 到 Corona SDK 的 storyboard template 之 scene:createScene function 內即可,當然前提是 fxg 輸出時的 assets 檔案夾記得 copy 到工作環境下。

Comments

Popular posts from this blog

[Flex] PureMVC standard with Spring extensions

由於上次稍微玩了一下 Robotlegs 依賴注入(DI) 主導的 MVC 框架,而著名也使用依賴注入的 Java / Java EE 的 Spring framework 出了 for ActionScript 的版本,剛好在最近 Spring ActionScript 1.0 正式 release 了(想了解 Spring 是啥咪東東的話請自行找 google 大神),這個版本除了基本框架外,也包含了 Cairngorm 與 PureMVC 的外掛...想當然耳,就拿來測試一下用在 PureMVC 內的感覺囉!! 參考了 官方範例 中 PureMVC 唯二的範例原始檔,以下使用的是「設定檔依賴注入 facade 透過 addConfigSource() 的方式來 init 」:(其實除了 embed 外,都是外部載入) Online Demo with source code 工作環境:FlashBuilder, Flex SDK4 請下載 PureMVC Standard 版本 再下載 Spring ActionScript 最新版本後,除了 spring-actionscript-cairngorm 不需要外,都放到 /src 下(記得只需要 org 開始...),也別忘了lib 內的 swc 檔 copy 到 /libs 下 Spring 的 injection 並不像 Robotlegs 直接來個 [Inject] metadata 的自動化那樣方便,但是其冷血度(檔案的鬆偶程度)更勝後者!如果你要使用設定檔(applicationContext.xml) 來做注入的話,準備工作就挺多的...XD 依照 applicationContext.xml 內設定的方式分別寫入 constructor 或者是 setter 依賴注入(本範例統一使用 setter injection) 為了跟大家都沒關係所以都使用 interface 來處理,所以你會在範例中發現大家都有介面...(並沒有真的研究過 Spring,也許還有其他作法) 準備 compiler 時候要用的 classe。由於在 setter, getter 的寫法上都使用 interface,所以真正用到的 class 需要預先在輸出階段就打包到程式內。 基本上 PureMVC 類 class...

PureMVC 我也會 [0]

最近感覺 PureMVC 又熱了起來,也剛好好久沒有更新文章了, 就順便將去年底做的企業內訓 PureMVC 課程部分整理寫出來, 要講 PureMVC 當然要先從啥是 MVC 講起: Model-View-Control 出處: 維基百科 MVC ,大概節錄一段: (控制器Controller)- 負責轉發請求,對請求進行處理。 (檢視View) - 介面設計人員進行圖形介面設計。 (模型Model) - 程式設計師編寫程式應有的功能(實作算法等等)、數據庫專家進行資料管理和數據庫設計(可以實作具體的功能)。 其實到 Flash 的世界來講,Model and Control 都是由 .as 處理,而 View 便是 .fla+.as ,為了要鬆綁之間的關係,Event 機制就相當重要。其實每個人對 MVC 的最佳解釋都不同,真的要多練習才會有所領悟。 簡單來說: Model = 餐廳廚房 data: 西餐類 action:依照點菜單做餐點 action: 做完餐點就是將餐點放在出菜口按下通知鈴等服務生來 Control = 服務生 action: 聽到大門歡迎鈴就要說「歡迎光臨」 action: 看到客人揮揮手要去收點菜單 action: 聽到廚房通知鈴看是哪桌的餐點去送菜 View = 餐廳外場 view: 田園式的西餐廳裝潢 action: 客人進門會有歡迎鈴 action: 客人揮揮手叫服務生過來服務,是哪個服務生都無所謂,重點只要會收點菜就行了。 action: 客人收到餐點準備開動 當餐廳要改成外炒店,這時候只需要將大廚換成會中餐廚師,其出的菜就是中式快炒。 當餐廳外場由田園式外觀重新裝潢成華麗感夜店風,其進門的客層也會有所不同。 重點就是當你換掉一個地方時,對其它的部份不會造成太大的影響或者根本無所謂,這就是 MVC 所講求的境界... 一般來說,小專案有沒有必要使用 MVC 就是由各位自己判斷了,當你習慣將程式切分開來,發現 debug 不是一件痛苦的事情時,這時候有沒有強制使用 MVC 倒不是重點,因為你已經養成良好的撰寫習慣。但是開始接觸大型專案配合 team work 時,在沒有一個共用的核心框架前提下,這個專案開發到最後一定會是一個多手多腳的怪物,共用核心框架的價值就在這邊展現,這...