2008年2月29日 星期五

Action Script_5

接下來,繼續介紹AS與影片片段元件的一些關係。

影片片段提供不少AS屬性,讓我們在影片播放時可以控制元件。
以下列出一些:(請注意,英文字母前面的是底線"_",而非橫線"-")
屬性
說明
_x 數字(像素) X座標
_y 數字(像素) Y座標
_xscale 數字(百分比) 寬度的縮放
_yscale 數字(百分比) 高度的縮放
_height 數字(像素) 高度
_width 數字(像素) 寬度
_alpha 數字(百分比) 透明度
_rotation 數字(角度) 旋轉
_visible true/false 顯示與否(顯示/隱藏)
當然,不只這些屬性,這些是最常用的。
下次開始,我們會用一些簡單的範例跟各位介紹AS的實際用法。

待續............................................

2008年2月27日 星期三

Action Script_4

FLASH中最重要的核心元件就是影片片段(MovieClip),因為它支援最多的AS,
最能夠程式化,是最能用AS來控制的元件。

因此,我們先仔細釐清元件(Symbols)與實體(Instance)之間的關係,
以便將來使用AS加以控制時,可以更加得心應手。
1.將圖形轉換成元件時,在元件庫中會看這個元件,
   可是,同樣的圖形可以轉成不同的元件,
   所以,同樣的內容,可以是不同的元件,不同的名稱。
2.在元件庫的元件稱為"原型",可以想像為元件的"本尊"。
   本尊只能有一個,可是"分身'可以有無數個。
   換言之,在元件庫中的都是本尊(元件),出現在場景中的全都是分身(實體)。
3.存檔時,只儲存本尊的相關資訊,當動畫檔播放時,才會即時將分身"分"出來。
    因此,只有本尊會占用檔案大小,分身所使用的檔案大小幾乎可以不計。
4.本尊若有所改變,則每個分身會同時產生變化。
    但是,分身可以加以修改,擁有一些不同於本尊的屬性。
5.要使用AS去控制場景中的分身時,必須先將這些分身予以命名,
   這樣的話,AS才能辨識出各個分身誰是誰。

待續...............................

2008年2月23日 星期六

Action Script_3

其實,個人認為最正確的寫法是將AS寫在影格上,
假設場景中有10個元件,都加上AS,如果要除錯時,是不是要一個一個找?都沒效率。
如果能夠建立一個as圖層,將所有語法都放在這個圖層上,在管理與除錯上勢必更加便利。
主要作法如下:
    物件的實體名稱.事件名稱 = function(){
                執行動作;
   }
以下是加在影片片段上的
事件
說明
onPress = function(){}
在影片片段上按下左鍵時觸發動作。
onRelease = function(){}在影片片段上放開左鍵時觸發動作。
onReleaseOutside = function(){}在影片片段上按下左鍵,並在移出按鈕區域時放開滑鼠而觸發動作。
onRollOut = function(){}滑鼠游標移出影片片段區域時觸發。
onRollOver = function(){}滑鼠游標移入影片片段區域時觸發。
onLoad = function(){}當影片片段完成下載,出現在時間軸時觸發動作。
onUnload = function(){}當影片片段從時間軸上被移除後觸發動作。
onEnterFrame = function(){}以SWF檔案的影格速率重複啟動。
onMouseDown = function(){}按下左鍵時觸發動作。
onMouseMove = function(){}移動滑鼠時觸發動作。
onMouseUp = function(){}放開滑鼠按鍵時觸發動作。
onDragOut = function(){}按下左鍵並按著滑鼠拖曳到物件外面區域時觸發動作。
onDragOver = function(){}按下左鍵並按著滑鼠滑過物件區域時觸發動作。
onKeyDown = function(){}按下指定的鍵盤按鍵。
onKeyUp = function(){}放開指定的鍵盤按鍵。
onData = function(){}當影片片段接收資料時觸發動作。


待續....................................

2008年2月22日 星期五

Action Script_2

在影片片段加入語法的方法為:
onClipEvent(事件){
     執行動作;
}
而影片片段的事件如下:
事件
說明
load當影片片段下載到目前時間軸時,觸發動作。
unload當影片片段由目前時間軸被移除時,觸發動作。
enterFrame該執行動作以影片片段的播放速率連續觸發。
mouseMove每次移動滑鼠時觸發動作。
mouseDown每次按下滑鼠左鍵時觸發動作。
mouseUp放開滑鼠左鍵時觸發動作。
keyDown按下鍵盤某按鍵時觸發。
keyUp放開鍵盤某按鍵時觸發動作。
data接收到某些資料時觸發。

另一方面,使用下列語法在按鈕上設定:
on(事件){
     執行動作;
}
事件
說明
press在按鈕上按下左鍵時觸發動作。
release在按鈕上放開左鍵時觸發動作。
releaseOutside在按鈕上按下左鍵,並在移出按鈕區域時放開滑鼠而觸發動作。
rollOut滑鼠游標移出按鈕區域時觸發。
rollOver滑鼠游標移入按鈕區域時觸發。
dragOut在按鈕上按下左鍵,並按著滑鼠移出按鈕區域時觸發動作。
dragOver在按鈕上按下左鍵,並按著滑鼠滑過按鈕區域時觸發動作。
keyPress"< key >"按下指定的鍵盤按鍵。

待續......................................

2008年2月20日 星期三

Action Script_1

使用FLASH不一定要使用ActionScript(以下簡稱AS),可是如果希望對於動畫流程有所控制,
想製作擁有互動功能的動畫,就需要使用AS。
AS演進至今為3,0版(CS3版),在功能上不斷改良,語法結構上接近JavaScript,有一定的文法與標點符號規則,
AS主要功能是用來與FLASH的影片溝通,除了控制播放流程與程序外,還可以讓影格中的物件執行動作。
因此,先在此介紹幾個較常用的指令:在時間軸控制項函數中

函數說明 
gotoAndPlay 讓播放畫面移到場景中的指定影格,
並從該影隔開始播放。 
gotoAndStop讓播放畫面移到場景中的指定影格,
並停止播放。
play 讓時間軸往前播放。 
stop停止正在播放的動畫或元件。
nextFrame 令播放畫面往上一個影格移動。
prevFrame令播放畫面往下一個影格移動。












待續........................

2008年2月17日 星期日

網站的前置作業

從今天開始要展示一個網站的建立。
網站內容是一種新的蔬菜湯。
架構不複雜,分為首頁、認識蔬菜湯、嚴選物件、問與答、網站導覽。
並分別命名為index、product、material、qna、view,很簡單但與內容相關的檔名。
就這五頁,已經先將文字與圖片收集好,之間再視需要加入動畫或是其他東西。

首先開啟DW,新增網站,因為該公司名為"upwell",因此已在E槽新增一個"upwell"的資料匣,
直接定義此資料匣為網站根資料匣,
在此建議,將根資料匣直接放在分割區內,而不要放在桌面或是我的文件匣中,
此外,所有要用的檔案皆以小寫英文名命名,不論是圖片、網頁或是資料匣。
新增網站完成後,就繼續新增五個網頁檔,並將index.html設為首頁。

下一個動作會到Photoshop建立網頁的版型,屆時就會有圖片或是影片檔。
請待續.................................................

2008年2月1日 星期五

Flash推薦書

推薦幾本flash相關書籍,供大家參考。
Flash CS3 躍動的網頁,作者是威銘研究室,由旗標出版,
講解說的蠻詳細的,不過Action Script著墨不多,適合入門者練習。

flash網頁設計與動畫製作,作者為金允基,Pcuser出版。
作者是韓國人,所以所有範例皆為韓文,但是沒關係,
因為你要研究與注意的是與法,將哪些韓文換成中文,你就可以好好練習一下,
書中的範例很多樣化,有些相當炫,不錯!
但是,建議你思考的是,如何將喜歡或是看上眼的效果放在同一個網頁或網站中。

神魂顛倒FLASH8,碁峰出版。
這本書很棒,內容深淺處都提到,有些範例頗具深度,可以好好研習一下,

flash這套軟體對我的定義而言,真的是一套入門容易進階難的軟體。
建議各位學習時,絕對不要漏地的重點是圖層的安排、元件的運用,
最重要的是Action Script的使用,
對沒有程式設計經驗的人而言,剛開始真的會有些小難,
請各位加油,當你對語法的運用到一個程度時,你會很爽的!加油!

2008年1月26日 星期六

Dreamweaver相關、不錯的書

介紹幾本內容相當實用的書籍
1.Dreamweaver 8 無限延伸-網頁設計整合進階技巧(附光碟),文魁資訊出版。
   介紹如何使用ImageReady切片,再利用dreamweaver建立樣板,
   實用度很高,很少有介紹這部份的書。
2.Dreamweaver 搞不定的網頁設計效果:CSS 關鍵救援密碼,
   作者為施威銘研究室,旗標出版。
   介紹CSS對於版面的處理,網頁元素在版面中位置的控制,區塊位置控制。
3.Dreamweaver CS3 網頁設計驚嘆號至高的網頁特效172招,
   作者為李啟宏,悅知文化出版。
   內容提供並介紹100多種擴充元件的使用,有些真的超好用!

各位若對這些書有興趣,可以考慮買回家實作,
不過,建議到網路上找二手書,新書太貴了,
但是,所附的光碟一定要還在喔!

網站建置_3

個人對於各種軟體用法粗分如下:
以Dreamweaver為核心,
使用photoshop建置樣版與處理圖片,
有時也會使用illustrator建立樣板及建立按鈕,建立動畫要使用的各類角色,
使用Xnview或是Irfanview批次處理多張圖片,
使用Flash建立動畫,
使用WinAVIConverter為影片轉檔。
若要用到資料庫,就用Access作個資料庫,使用asp與網頁連結。

為何要用到資料庫?
舉凡留言板、討論區、新聞公告、電子報、會員管理,甚至計數器都要用到資料庫。

為何沒有用到音樂相關軟體?
因為對於一個網站而言,很難找到適當的、可以與網頁內容或主題搭配的背景音樂。

待續...............................................

2008年1月22日 星期二

網站建置_2

正所謂"綱舉目張"!建置網站之前,必須細細思考整個網站要呈現的主題與風格,
如果是公司網站,當然必須相關人士好好開個會!
重點是,先將網站的層層架構建立起來,
如:首頁底下還有幾層網頁,超連結如何來來往往...等。
一般來說,以企業網站而言,
首頁、公司簡介、產品介紹、網站導覽等是基本頁面,
其他則視各公司需求增加。

建立好架構之後,建議畫出幾張草圖,標示出要做的內容。
1.架構的圖形,當然,如果要用Word或是其他軟體作也可以。
   此時,該已經可以將各頁面的檔案名稱建立好,如:index.html(首頁)、product.html(產品)
2.頁面的草圖,通常會有兩張主要頁面,一張是首頁,一張是內容頁。
   頁面中要擺上哪些元素,如:公司Logo、公司名稱、標題、插圖或背景圖片。
接著,就要開始蒐集資料,包括文字稿、照片與圖片,若需要,要開始建立動畫與影片。

因此,網站建置可以粗分為三個階段,
籌備期(蒐集與分類各種資料)、施工期(個人是以Dreamweaver為軸)、維護與更新期。
事實上,很多網站會無以為繼,通常都是忽略維護與更新的重要,
可以想像,昨日、今日與兩周後的今天,看到的資料都一樣,相信沒有人有興趣常來拜訪!
建議,可以在首頁某個角落放置一段文字,宣告更新的頻率或時間,想信可以稍稍解決這個問題。

待續........................................................

2008年1月19日 星期六

網站建置_1

個人認為,網站的建置不該是一時衝動所產生。
網站主題必須明確,一以貫之,不可能在介紹3C產品的網站中出現介紹服飾的頁面!
怎麼看都不搭!
此外,整個網站的風格應該是一致的,
否則極易混淆網友的視聽,另外給人不夠專業的印象。

現在的個人網站較少遇到,該是部落格盛行的結果,
這是件好事,因為部落格的內容不需一致性,可以暢所欲言。
但是有幾件事提醒大家,網路是個公開的場所,
不論是部落格或是網站中的圖片或影片都是公開呈現,必須注意到版權,
曾被問到,使用搜尋所找到的圖片可以放在自己的網站嗎?
答案是,不一定行。
能被搜尋引擎找到的圖片或影片,只能說明該物件存在某個網站中,
並不代表可以被使用,除非與該網站連絡過,確認可以使用,
不然,即使是引用、介紹,對方絕對有權來"關切"。

個人實例,兩年前曾經建過個網站,純粹介紹個人拜讀過的書籍,
其中介紹到一本"天下文化"所出版的書籍,除了簡述一下內容,還引用對方網站上的書本封面。
幾天後才想到這方面的問題,連忙發信與天下文化聯絡,
對方的回覆是,若未牽涉到販售,無妨!

下次再與大家分享建置網站的流程與使用到的軟體.............................

Don’t ... #shorts

Don’t insist on being “right”.