跳到主要內容

人人都會Progression4 第 01 安裝篇

第二次AS讀書會後, 相算大家對 Gray 分享的 Progression 相當的熱血
奶小茶我就來補充幾篇文章。希望對大家學習有幫助。
在寫這篇文章時,使用的版本為:Progression4.0.22 日文版
1.
先到官網下載 mxp 檔來安裝
http://progression.jp/ja/download/
他有分 CS5 和 CS4 之分喔,別裝錯版本。
找到 Progression 4 日本語版パッケージ , 點下去下載
小茶我在這以 CS4 中文版為範例, CS5 也是一樣的裝法
目前只有日文版,不過沒差,我們也只是要他的類別和組件而已
開啟Adobe Extension Manager來安裝,
安裝好後,應該你的flash裡不會出現任何的面版
因為預設是會裝到 jp 語系下,所以我們要手動的把檔案copy過去
2. 檔案copy
路徑在:
XP/2000
C:\Documents and Settings\{UserName}\Local Settings\Application Data\Adobe\Flash CS4
Vista/Win7
在開始那,輸入%localappdata%,才能連的進去
C:\Users\{UserName}\AppData\Local\Adobe\Flash CS4
Mac(感謝高見龍提供)
/Users/USER_LOGIN_NAME/Library/Application Support/Adobe/Flash CS5/ja_JP

此時應該會看到zh_TW和ja資料夾,把ja資料夾裡的檔案整個copy到zh_TW裡即可
重新啟動Flash後,在其他面版就可以看到Progression4的面版了



這個面版, 其實用不太到, 一方面他是日文, 看不懂, 另一方面, 直接改 code 比較快。
那裝這個要做什麼, 最主要是要安裝他的 Component!。


而 flashDevelop 使用者,也有樣版可以下載。
原檔連結:點我

或是下載筆者整理過的檔案, 我只是把他的日文翻成中文
http://code.google.com/p/milkmidi/downloads/list
下載並解壓縮。
啟動FlashDevelop, 上方工具列:Tools/Appliection Files...按下後,會開啟資料夾路徑。
將解壓縮好的檔,copy 過去,蓋掉即可。

重新啟動FlashDevelop
之後就可以直接新增一個Progression4的專案了


經筆者測試, 開啟 Progression 專案面版, 要新增一個專案時, 如果是中文版的Flash
會發生下列的 JavaScript 錯誤:
xmlPanel: 引數數目 1 無效。
改裝英文版的Flash(CS3,CS4,CS5皆可)就可以正常使用

因為官方的說明文件, 會很貼心的把日文說明拿掉, 所以小茶我就自已 compile 一份日文的說明文件檔,
有需要的朋友可以到這兒下載:
http://code.google.com/p/milkmidi/downloads/detail?name=p4proj_4022_tw.zip&can=2&q=#makechanges

補充: JavaScript 錯誤有解了
可以參考這一篇教學。
http://tw.myblog.yahoo.com/jw!TK9s.oyREQdVA8fuC7y8/article?mid=650&prev=-1&next=188

留言

Gray Liao寫道…
感謝分享
請問一下奶綠...
目前Progression 4的API Reference有哪裡可以下載下來嗎?因為它現在會判斷系統的語系,偏偏現在又只弄了日文版的說明,英文版還是空的,導致現在連上去看Description都是空的.如果可以下載回來,至少就可以拿掉語系判斷,看看它的日文說明...
milkmidi寫道…
他最新版的4.0.2 API好像還只有線上版的
我也還找不到可以下載的地方
匿名表示…
CS5的版本,安裝後..按"新規作成"會出現錯誤訊息,
"發生下列的 JavaScript 錯誤:
xmlPanel: 引數數目 1 無效。"
milkmidi寫道…
這個問題我也遇到
在CS3,CS4,CS5都會有
還在查查為什麼
匿名表示…
我搬到tw的資料夾後在FLASH還是沒看到面板耶,怪怪
停號寫道…
哈囉老師,我又遇到了一個問題想向老師請教。如果網站想做一個castbutton讓他不論切到哪個scene都置頂的話 我現在只會在每個scene都new一個出來,請問有別的方式嗎?這個button的功能就是回到上一層而已,我看到除了組件式寫法外,progression的class裡也有一個parentbutton,可是我試不出他的用法說~"~
milkmidi寫道…
如果要回上一層的話,有二個方法。
使用ParentButton。
或是直接寫code:
new Goto( new SceneId(manager.current.parent.sceneId)).execute()
高見龍寫道…
幫忙補充一下Progression4在Mac安裝zxp之後,安裝路徑為:
/Users/USER_LOGIN_NAME/Library/Application Support/Adobe/Flash CS5/ja_JP

供mac使用者參考 :)
高見龍寫道…
另外在4.0.2,昨天發現一個神奇的bug,就是它的src的資料夾裡的Preloader.en.as的語法是有錯的(在第39行以及第52行各多了1個大括號,Preloader.jp.as是正常的),我在mac上建立新專案的時候,它自動選擇en版,然後generator一跑完,馬上就會有編譯的錯誤了,也許是不小心忘了去掉的。

只要手動去把多的大括號刪掉就能正常編譯了。
高見龍寫道…
抱歉樓上忘了說明,上面指的"src資料夾"是指Progression安裝的資料夾底下的en/Configuration/Progression/Projects/files/src
Focus1921寫道…
CS5的版本,按"新規作成"會出現錯誤訊息,
"發生下列的 JavaScript 錯誤:
xmlPanel: 引數數目 1 無效。"

這個部分是因為新開專案時Progression所使用的xml,沒有繁中語系的關係,我已經將目前最新版的Progression 4.0.12重新封裝成可以適用於繁中版(zh_TW)Flash CS5的zxp安裝檔(置於SkyDrive):Progression4-ja-CS5_fix_zhtw.zxp安裝後無需到appData下搬移檔案,也可以順利使用繁中版Flash來開新專案。
milkmidi寫道…
哇巫,謝謝分享喔,我來整理一下
AS表示…
to 奶綠大
使用 Progression 4
照著官網Component style guide 去製作為何最終發布時按鈕幾乎都失效且無法顯示在場景內。
是否有機會可以看到 Progression 4 基本的製作教學?
milkmidi寫道…
好的,我再補上系列教學

這個網誌中的熱門文章

webpack2 入門實戰 1

大家好,我是奶綠茶
前端戰場不再只是寫寫 js / css , 各種框架、前處理工具百花齊放
身為前端工程師,不只要把程式寫完,還要寫好
老師說:選對好工具,事情就完成一半
如果你還在一隻 JS 打完全部程式,一隻 css 寫所有的 style
每次存檔還在手動 reload 網頁, 圖片壓 K 壓到不要不要的
透過奶綠伯的系列教學,讓你了解 webpack2 帶來的優勢
學會 webpack 可能不會加薪,但至少可以準時下班(誤)
1. 安裝 nodejs
請參考 gulp 安裝編

2. 安裝 global webpack , 筆者使用的是 2.2.1 版本
npm i webpack@2.2.1 -g
3. 在專案的根目錄放一隻 webpack.config.js
entry:你的主 js 進入點
output.filename:webpack 打包後的檔名
output.path:webpack 打包後的路徑
var path = require('path'); module.exports = { entry: './src/app.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
4. require , module.exports
現在前端都 module 化
可以每個獨立的功能都寫成單一的 js module
除了好管理,也方便讓團隊使用
寫一隻 module_exports_util.js
每隻經過 webpack 打包的 js , 都會是獨立的檔案
所以變數都是私有的, 外部成員都無法得到
在這個 module 裡,我們想開放二個函式
add , getName
所以在最後的 module.exports 指定
筆記加入 jsdoc , 為了方便在開發時,能夠有型別的提示

var name = "milkmidi"; /** * @param {number} num1 * @param {number} num2 * @return {number} */ function ad…

超好用的無限免費網頁空間,無廣告,無流量限制

大家好,我是奶綠茶
今天來教大家如何申請一個無限免費速度又快的網頁空間
1 首先到 https://github.com/ 申請帳號(一直下一步,下一步,下一步)
2 到你的個人頁,切換上方的 tab 到 Repositories, 按下右鍵的 new

3 Repository name
一定要是這樣的格式 username.github.io
我的 github 網址是 github.com/milkmidi
那就要輸入 milkmidi.github.io
選擇 public, 這樣別人才看的到
private 有其他用途, 而且要付費才能使用
完成後按下 Create repository


5 安裝 SourceTree
github 並不支援 FTP 或是網頁上傳,一定要透過指令碼
在這我們選用有圖型介面的軟體,方便大家學習
https://www.sourcetreeapp.com/
下載並安裝
啟動後登入你的 github 帳號

6 clone 你的 github io 專案
右上角有個 Clone or download 點選後
複製 https 連結(不要選到 ssh )


7 將 https 的連結貼到 SourceTree



8 上傳 html
到本機 github.io 資料夾,放一個 index.html
切換到 SourceTree, 這時會看到 Unstaged files 的欄位
選擇 Stage All


9 git 要求每次的 Commit, 都一定要打說明文字(好習慣)
輸入完成後,按下右邊的 Commit


10 發佈(Push),這樣就完成啦
可以到你的 http://milkmidi.github.io/ 去查看檔案有沒有出來


其他
Commit 可以想像是做一個記錄,你可以很多的 Commit
最後再一次 Push 上去
github 原本是給程式設計師用的版本控管服務
免費版提供無限空間讓你放檔案,但一定要是 public
想要有私有的 Project ,就只能付費
github.io 只能放靜態檔案,php, aspx 服務並不支援。
祝大家學習愉快

轉載請註明出處

奶綠的 github.io Source Code

webpack2 入門實戰 3 scss,html,file-loader

大家好,我是奶綠茶
上一篇介紹了 webpack 的核心功能 loader
這篇再來補強各種常用的 loader
css-loader:解悉 css 檔
extract-loader:這個有點難翻,下面會介紹
file-loader:存成實體的檔案, 如圖片
html-loader:解悉 html 檔
sass-loader:解悉 scss 檔
url-loader:解悉圖片路徑
webpack.config.js
module.exports = { resolveLoader: { // 所有用到的 loader, -loader 可以不用打 moduleExtensions: [ "-loader" ], }, resolve: { // 在 require 檔案, 如果不想寫完整的路徑 // 可以加入這些目錄, 讓 webpack 自動尋找對的檔案 // 請注意我們加入了 src/img 路徑,後面會再介紹到 modules: [ path.resolve( 'src/html' ), path.resolve( 'src/img' ), path.resolve( 'src/css' ), path.resolve( 'src/js' ), path.resolve( "node_modules"), ], // 在 require 時可以不用打副檔名 extensions: [ ".js", ".scss" ] }, } 再來就是 loader 的介紹
scss
在這要做多組合的應用
先將 .scss 透過 scss-loader 轉換, 並產生 sourceMap 檔
再過 css-loader
最後再過 style-loader
{ test: /\.scss$/, // 多個 loader 組合, 可寫成一行,或…