跳到主要內容

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表示…
找出問題了,路徑沒有設好,謝謝老師。
俊吾寫道…
奶綠老師~~~
請問一下
如果只用全組件的做法
有辦法達成獨立網址
和swfObject寫嗎?
我一直測試使用全組件的做法
無非就是不想coding
結果html根本看不到任何東西
還有請老師解答
先感謝您了~~~
milkmidi寫道…
全組件式的寫法
可以呀
一樣會有獨立網址的功能
coding只是比較靈活而己
俊吾寫道…
奶綠老師
這篇文章中您製作的範例
它的連結遺失了
因為我自己做出來的結果有誤
HTML的語法好像有出錯
因此想借用老師的範例來找出問題
非常感謝您!!!
milkmidi寫道…
Sorry, 之前空間有問題
我更新連結了,請重新下載
俊吾寫道…
超感謝您!!!!
俊吾寫道…
奶老師
可否再請教一下
如果用全組件的做法
請問要如何在flash設定Progression Project
才能在產出的index.html中
出現以下的js

var so = new SWFObject( "preloader.swf", "external_flashcontent", "760", "440", "8" );
俊吾寫道…
老師我懂了
這是舊版的寫法
我已經用新版的了~~~
俊吾寫道…
老師不好意思!
再請教您一個小問題
我去網路上爬到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
而送訊號也是用自己的類別
目前執行上都沒遇到什麼問題
TEST寫道…
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物件, 如果要靈活應用的話,還是要寫程式碼
TEST寫道…
多謝奶綠兄指點囉~我也已經放棄組件,直接用CLASS STYLE做了~~感謝分享!
milkmidi寫道…
寫Class比較靈活,
而且也比較有趣
Unknown寫道…
組件寫法真的有問題

網頁的大小選擇百分之百

可視物件沒辦法動態定位

看來還是得專心研究CLASS寫法才行
milkmidi寫道…
是滴, 還是需要寫程式碼比較靈活
匿名表示…
為了怕忘記,我也開始用class style了,
終於了解為什麼老師說command模式很優! 實在是非常直覺好用!很多地方比AS3聰明耶~ 看了這篇文章後
http://flabaka.com/blog/?p=1846
就更期待Progression 4的推出... ^ ^
milkmidi寫道…
是呀,我己經在專案使用Progression4.0 Beta版, 程式碼更精簡
TEST寫道…
哈囉,我試著安裝4.0 beta,可是在other panel卻沒辦法出現progression project的選項...請問您有安裝過嗎?還是您使用SWC檔案?
milkmidi寫道…
我也裝不起來,可能要等到英文版的mxp
Unknown寫道…
看了很多關於老師的教學 很受用
但一直想要安裝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檔給你
Unknown寫道…
阿~ 原來是這樣用阿@@"
我的信箱是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呢

這個網誌中的熱門文章

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

大家好,我是奶綠茶 今天來教大家如何申請一個無限免費速度又快的網頁空間 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 S

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

奶綠茶第一本 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