跳到主要內容

Progression3 flash Framework

這幾天熱血的研究了
Progression flash Framework
分享一下學習心得, 基本上, 可以不用寫到任何的程式碼, 就可以快速的完成一個小型的專案
最酷的是, 他把 SWFAddress 整合的很好, 還有一些現成的轉場效果, 這些都不需要寫任何的程式。
1.先下載 3.1.62 mxp 外掛, 並安裝, 重新啟動 Flash CS3。
2.上方工具列:Window /Other Panels/Progression Project 開啟面版

面版長的這個樣子, 有許多的設定, 可以自已玩看看


3.設定好後, 按下 Create new project, 選擇要存檔的路徑, 就會自動幫你產生所需的檔案

4.再開啟 Progression Scene Editor面版, 開啟新增所需要的場景
在這個範例,我們的網站架構就只有三頁, Index , About , Contact
Progression的使用概念, 可以把他想成html一樣, 一個場景(Scene), 就相當於一頁html
然後該html有什麼元素, 就在Scene設定
開啟面版時, 預設就會有一個Index的場景, 按下Insert nested Scene

再按下Insert Cast Item, 這個就該場景要有什麼元件。
完成後如下圖:

5.接著再按下面版的 Export the Cast as Symbol

就可以看到元件庫產生對映的元件了。

設得要將設定好的面版, 按File Save as, 蓋掉專案裡的deploy/easycasting.xml
該.xml長的像這樣。












6.製作回首頁的按鈕:
新增一個MovieClip, 並置任意的圖片, 然後開啟Component面版, 將 RootButton組件拉里來
啟動 Component Inspector面版, 可以看到許多參設可以設定, 在這我們就直接用預設值。

7.製作About按鈕和Contact按鈕,一樣新增元件, 只是用的組件是RollOverButton。
設定按下後的連結

8.在元件庫找到對映的Page元件, 放置你自已的設計圖, 發怖就完成了
如果要套用轉場效果, 一樣在 Component可以找的到Effect Component, 拉過來就可以用了
SourceCodeDownload

留言

Gray Liao寫道…
Hi hi,我是Webgene的Gray,第一次來這留言。最近正好試著想整理出類似功能的東西,不過還是一團亂......看到有這個真的很開心啊~~感謝分享
milkmidi寫道…
Gary,hihi
對呀,最近我也在研究這些Framework, 從中學習他的優點再來改寫成自已的Framework
:::east:::寫道…
會不會太神了!!~剛剛才從日本官網那瀏覽,剛好搜尋到這裡,請問奶綠該怎麼設定preloader呢?請指點一下<(_ _)>謝謝!!
milkmidi寫道…
你指的是主場景的preloader
還是載入其他.swf時的preloader呢
:::east:::寫道…
麻煩奶綠老師可以都說明一下嗎??謝謝:)目前找到的都是日文資料,只能用簡單的翻譯跟破爛的五十音,所以常常看不大懂,囧
milkmidi寫道…
我也看不懂日文也
但他官網有英文版
至少還可以參考一下
我都是從那兒學習來的
HARDMOUSE寫道…
Is this support CS4?
milkmidi寫道…
yes, support CS3 and CS4
george表示…
呼! 終於有時間可以開始研究progression 剛用了一下比gaia方便好用,一定要好好學習,不然每次案子都覺得花很多時間在做些很基本的功能=_=,之後有遇到問題還要請教奶伯伯..........^^
milkmidi寫道…
對呀, 跟Giga比起來我比較喜歡Progression, 寫了二個專案後, 真的很好用
Jones寫道…
請問奶綠老師
為什麼我按Export the Cast as Symbol
會沒有反應~~~~卡住了><
Green表示…
奶綠老師你好,最近再研究progression 對於preloader有些問題,一開始專案建立時會有建立一個preloader,我不曉得是個算是載入主場景的preloader還是其他,不過再輸出你的範例的時候,他出現了找不到castpreloader的基底類別跟無法覆蓋的錯誤,請問該怎麼解決呢?謝謝
Green表示…
找出問題了,路徑沒有設好,謝謝老師。
why?寫道…
奶綠老師~~~
請問一下
如果只用全組件的做法
有辦法達成獨立網址
和swfObject寫嗎?
我一直測試使用全組件的做法
無非就是不想coding
結果html根本看不到任何東西
還有請老師解答
先感謝您了~~~
milkmidi寫道…
全組件式的寫法
可以呀
一樣會有獨立網址的功能
coding只是比較靈活而己
why?寫道…
奶綠老師
這篇文章中您製作的範例
它的連結遺失了
因為我自己做出來的結果有誤
HTML的語法好像有出錯
因此想借用老師的範例來找出問題
非常感謝您!!!
milkmidi寫道…
Sorry, 之前空間有問題
我更新連結了,請重新下載
why?寫道…
超感謝您!!!!
why?寫道…
奶老師
可否再請教一下
如果用全組件的做法
請問要如何在flash設定Progression Project
才能在產出的index.html中
出現以下的js

var so = new SWFObject( "preloader.swf", "external_flashcontent", "760", "440", "8" );
why?寫道…
老師我懂了
這是舊版的寫法
我已經用新版的了~~~
why?寫道…
老師不好意思!
再請教您一個小問題
我去網路上爬到swfaddress+google analytics
的協同作法
請見
http://www.zedia.net/2008/swfaddress-and-the-new-google-analytics-gajs/
我想知道在他說明的最後一行

sript type="text/javascript" src="js/swfaddress.js?tracker=pageTracker._trackPageview">/sript

是否有其必要?
不知道這樣寫和原本progression內建的GA設定
有無差別?
又要麻煩老師了~~~
再次感謝您!!!
milkmidi寫道…
我倒是沒這樣寫過
都是直接在html加上google的code
而送訊號也是用自己的類別
目前執行上都沒遇到什麼問題
Yujing Wang寫道…
PROGRESSION裏面的階層我搞不清楚,為什麼父階層的圖形會不見....那就沒意義了耶....
milkmidi寫道…
父階的圖層?
你是組件式寫法嗎
還是Class的寫法呢
匿名表示…
嗨,謝謝回應~我想在某一父頁裡面細分幾個子頁面,在子頁面切換時同時保有該父頁的背景以及分頁按鈕,我是用組件作的....不知道您聽得懂嗎><,謝謝
milkmidi寫道…
在easycasting.xml裡
該場景要出現的物件
就要寫cast一次
ex:
<scene name="index" cls="jp.progression.scenes.EasyCastingScene" title="index">
<cast cls="AboutPage"/>
<scene name="about" cls="jp.progression.scenes.EasyCastingScene" title="index | about">
<cast cls="AboutPage"/>
</scene>
這樣index和about場景 ,就都會有 AboutPage物件, 如果要靈活應用的話,還是要寫程式碼
Yujing Wang寫道…
多謝奶綠兄指點囉~我也已經放棄組件,直接用CLASS STYLE做了~~感謝分享!
milkmidi寫道…
寫Class比較靈活,
而且也比較有趣
列夫 LINLI寫道…
組件寫法真的有問題

網頁的大小選擇百分之百

可視物件沒辦法動態定位

看來還是得專心研究CLASS寫法才行
milkmidi寫道…
是滴, 還是需要寫程式碼比較靈活
匿名表示…
為了怕忘記,我也開始用class style了,
終於了解為什麼老師說command模式很優! 實在是非常直覺好用!很多地方比AS3聰明耶~ 看了這篇文章後
http://flabaka.com/blog/?p=1846
就更期待Progression 4的推出... ^ ^
milkmidi寫道…
是呀,我己經在專案使用Progression4.0 Beta版, 程式碼更精簡
Yujing Wang寫道…
哈囉,我試著安裝4.0 beta,可是在other panel卻沒辦法出現progression project的選項...請問您有安裝過嗎?還是您使用SWC檔案?
milkmidi寫道…
我也裝不起來,可能要等到英文版的mxp
寫道…
看了很多關於老師的教學 很受用
但一直想要安裝progression 3英文版 官網卻不給下mxp檔 只能下swc檔 那swc檔似乎不能裝在flash cs4裡 把swc檔放到C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\Components
沒作用..
放到C:\Program Files\Adobe\Adobe Flash CS4\zh_tw\Configuration 沒有Components資料夾
想像老師求救了...謝謝
milkmidi寫道…
swc不用放到那個資料夾下, 你可以直接使用
在檔案/偏好設定/ActionScript/ActionScript3
中間有個元件庫路徑的欄位
把你的swc直定進去就可以使用了
不然可以給我你的mail, 我寄3.1.62英文版的mxp檔給你
寫道…
阿~ 原來是這樣用阿@@"
我的信箱是chen.weihan@msa.hinet.net
麻煩老師了~ 謝謝
班森天堂寫道…
It begins to create a new Progression project.
... Extracting project data.

It failed in creating a new project.
Error: Processing is interrupted because there is a problem in the project setting.
Cause of problem: The platform which does not support. value = Flash 11

flash cs5 是否不支持
milkmidi寫道…
CS5有支援呀
請問你裝的是Progression4還是3呢

這個網誌中的熱門文章

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 組合, 可寫成一行,或…