2012年1月30日 星期一

eComing Club 2月21日晚間讀書會實體活動「網路接案.幸好我先知道這些事」

這是一個2.5小時實體的書友聚會活動,站長接受知名的部落客&講師Robin邀請,前往分享導讀我的新書「網路接案.幸好我先知道這些事」,除了書籍的內容分享之外,也希望能藉此機會在現場認識更多書友與互動交流!

許多人想嘗試網路接案,但加入後才發現事情並不是如先前想的那一回事。網路接案是條怎樣的路?如何歷練與準備?當然還有接案管道、接案網站介紹以及成功接案的要訣等等,重要的是將分享一些接案甘苦談與實踐案例。
  • 詳細資訊與報名請到 http://blog.robin.idv.tw/3074
  • 活動時間:2012年02月21日(星期二)下午七時至九時三十分
  • 場地:YWCA 402教室 (台北市青島西路7號)
  • 人數:40人(請肯定能出席再報名,以免影響他人權益)
  • 費用:事先報名200元;現場報名350元 (現場繳交,僅提供飲料與小點心,請先用餐)
  • 報名方式:一律採線上報名
  • 參加資格:熱愛學習且願意和其他參加的朋友認識(不是要把您的個人資料給其他人,而是現場總要和別人交流交流吧!)
  • 備註:
    1.活動當天請攜帶個人名片
    2.所有收入,扣除餐點場地等費用,全部捐贈予”明陽青少年清寒救助協會”
    【明陽青少年清寒救助協會】~ http://blog.pixnet.net/myasa2004
    3.eComing Club簡介:http://blog.robin.idv.tw/2408


2012年1月29日 星期日

如何設定Silverlight的背景透明效果

授課時曾經數次有學員問到,Silverlight動畫可否做到像Flash動畫的背景透明效果(對於設計銜接上的彈性會較高)?答案是當然可以,只是每次都沒有很適當的場合或時間可以說明,現在將細節做法公布在此囉!

程式設計師的做法:
請找到xaml檔,例如在Expression Blend裡的MainPage.xaml,點選滑鼠右鍵,選擇外部編輯(預設應該會開啟記事本之類的文字編輯器),或直接使用Visual Studio進行編輯,將裡面的<UserControl>裡的 <Grid x:Name="LayoutRoot" Background="White"/> 程式碼,改為 <Grid x:Name="LayoutRoot" Background="transparent"> ,然後再開啟網頁,將Silverlight的.xap檔案插入後,切換到網頁程式碼模式,將 <param name="background" value="white" /> 改為 <param name="background" value="transparent" /> ,並再將下一行裡插入 <param name="windowless" value="true" /> 即可!

上面這種辦法是程式設計師採用修改程式碼的方式,可是對於美編設計師來說,可能會覺得像是無字天書看不懂或者是擔心改錯code,那有無適合美編設計師的修改模式呢?答案當然是有的,請參考以下資料。

美編設計師的做法:
在Expression Blend裡,點選「物件與時間軸」裡的「LayoutRoot」,在「屬性」裡,將Alpha數值按著滑鼠左鍵不放,往左拖曳。關於Alpha參數與Background 屬性的細節說明,若您有興趣,可以到此處的MSDN取得更詳細資料。
1

也就是將Alpha數值變成0%,此時可以看到工作區裡的白色背景已經不見了,變成透明背景,製作透明背景,必須將背景設定成單色,不能將背景設定成漸層色或者是放入一個填滿背景區域的圖片呦!
2

過來就是您在Blend裡製作動畫等步驟,做完記得「專案 / 執行專案」,取得Silverlight的.xap檔案。

接著請開啟Expression Web,新增一個網頁,因為我們要測試透明背景是否正常,建議按下滑鼠右鍵,選擇「網頁屬性」,將「色彩 / 背景」設定成跟白色差異性較大的其他顏色。
3

請將之前在Blend裡產生的.xap檔案放到網站中,滑鼠游標置入網頁裡要放入的位置,選擇「插入 / 媒體 / Silverlight」。
4

請在置入的Silverlight上按下滑鼠右鍵,選擇「ActiveX控制項」。
5

請在「物件標籤」裡設定此Silverlight的寬高尺寸。
6

重點是要在「參數」裡,點選「background」這個屬性,點選「修改」鈕。
7

將「資料」裡面改輸入成「transparent」,按下「確定」鈕。
8

回到參數的畫面後,按下「新增」鈕。
9

「名稱」請輸入「windowless」,「資料」請輸入「true」,按下「確定」鈕。關於windowless屬性的細節說明,若您有興趣,可以到此處的MSDN取得更詳細資料。
10

剛剛新增的「windowless」參數已經出現在「參數」裡的清單中了,請再按下「確定」鈕。
11

完成後請到瀏覽器測試看看,應該可以看到您的Silverlight物件的背景是透明的呦!
12

您也可以將網頁放入背景圖片,測試一下Silverlight物件仍舊維持著背景透明的效果。
13



台科大教育部計畫案「技職校院建立策略聯盟計畫」網頁設計專題製作與學術競賽,第四年舉辦的課程花絮

這是台科大針對策略聯盟的高中職學校學生開立的專班,是由教育部計畫案「技職校院建立策略聯盟計畫」而來的推動課程之一,之前已經舉辦過三屆,站長很榮幸第四年仍是擔任此課程講師,本次課程共36小時,分成6次課,上課時間為週六每次上6小時。

下表是本次課程大綱,主要以微軟的Expression Web、Blend、Design的軟體操作為主,搭配Encoder、Deep Zoom Composer、Microsoft GIF Animator、Paint.NET為輔。

 

日期

課程進度/內容

1. 11/26
  • 微軟網頁設計軟體的架構說明
  • 什麼是Silverlight動畫
  • Expression Web基本介面與操作
  • 網路上的多媒體資源與服務
  • 插入網頁背景音樂與插入影音檔
  • Expression Design的基本介面與操作
  • 使用Deep Zoom Composer製作擴大縮小的Silverlight動畫
  • Expression Web插入Deep Zoom
2. 12/3
  • 背景線條光芒閃爍GIF動畫
  • Paint.NET簡易影像處理
  • Expression Encoder Screen Capture錄製教學影片
  • Expression Encoder的基本介面與操作
  • Expression Web插入Silverlight視訊檔
3. 12/10
  • 個人作業實作(一段放大縮小的Silverlight動畫網頁與自我介紹影片)
  • 上台報告(每人三分鐘)成果驗收
  • 作品缺失檢討與複習
  • 繳交分組名單
4. 12/17
  • Expression Blend的基本介面與操作
  • 簡易Silverlight動畫設計
  • 使用Expression Web將圖檔與動畫置入
5. 12/24
  • 使用Expression Design設計圖案並結合Expression Blend製作Silverlight翻頁廣告動畫
  • 使用Expression Web置入Silverlight動畫與設計表格式排版頁面
  • 動態網站範本的使用
6. 12/31
  • 複合路徑去背
  • 電視旋轉木馬Silverlight動畫
  • 分組(3~5人為一組)籌劃討論主題式網站,包含架構規劃、資料蒐集、鍵入與加入視覺美編調整設計
  • 上台展示主題式動畫網站報告成果驗收與各組成品觀摩


以下為各小組繳交的作品(2~5人一組),跟往年不同的是,今年很高興看到有幾組是由不同學校的學員所組成的,打破了往年每組一定都是同一間學校所組成的,這樣的改變我認為是好的,學員們可以借此認識到別校的朋友。


第一組的主題是「官將首」,是由士林高商、大安高工的同學所組成的,藉由本次專題,我也才認識何謂官將首。
7-3

在此不得不提一下士林高商的曾主任,曾主任去年也有全程參與本課程,而且很用心的下課後還帶學生到圖書館查資料,真的是把學生當做自己的孩子在照顧,實在是就感心耶!
7

下圖報告的這兩位同學跟曾主任,有一次下課後,還跟我邊聊天一路走到公館,品嚐一下我兒子最愛的小泡芙與蝦仁燒,也算蠻有意思的插曲啦!
4

下圖為本組作品,上方的視覺主題的部份,主要是用到我們課程裡講到的Silverlight立體翻頁動畫,左方的選單是使用Design搭配Web製作的。
7-1

第二組的主題是「婚紗」,由士林高商的兩位同學組成(其實一開始我設定是最低3人為一組,因為怕學員負擔太重,沒想到居然有學員願意少人數多做,真是努力的一組啊!)。
1

下圖裡的圖案,是用Paint.NET做去背。
2

下圖為本組作品,上方的視覺主題的部份,是Silverlight旋轉動畫,左方的選單是使用Design製作外框字搭配使用Web。
2-1 

第四組的主題是「能仁家商介紹」,下圖為Silverlight Deep Zoom效果。5

第四組的成員合照,都是由能仁家商的學員組成的。6

下圖是本組作品,不過我發現部分有沿用去年的網頁作品。
6-1 

第五組的主題是「客家文化」。
12

這組是由金甌女中的同學組成的。
13

下圖是本組的網站首頁,區分成四個選單,但由於時間關係,很可惜只有完成其中兩個單元。
13-1

第六組的主題是「復興商工之美」,小組成員想當然耳,都是復興商工的學生囉!
11

下圖是本組網站形象頁作品,用的是我最後來不及講但有給操作步驟講義的旋轉木馬Silverlight動畫,本組學員很有心照著講義實作出來。
11-1

下圖為學員之前的美術作品,使用Silverlight Deep Zoom效果動畫。
11-2 

第七組的主題是「台灣人愛不離腳的夜市」。
14 

這組是由智光商工的同學組成,首頁閃爍的背景光芒線條,是使用課程裡教到的Expression Design與Microsoft GIF Animator製作的。
15

下圖為夜市美食,使用Silverlight Deep Zoom效果做呈現。
15-1

第九組的主題是「港工之美」,這組因為是事後補交,所以沒有拍小組合照。
a

第十組的主題是「社團網頁」,是由稻江商職的兩位同學所組成,這組可惜最後一天因學校有是無法前來報告,但有事先繳交作業,形象頁有製作一個放大縮小的Silverlight動畫,選單是採用Design設計。
b

第十一組的主題是「飛輪少年」,是由松山工農加上內湖高工的三位同學組成的。
8

講到這裡得提一下,下圖中間的賴同學,去年也有參加我的課程,聽助教講賴同學每次都很早到且很認真,值得給他拍拍手掌聲鼓勵一下。
9 

這組的陳同學也很有心,有開立了一個facebook社團,後來有不少同學有加入進去,台科大Expression Studio課程facebook社團
9-1

這一組的網頁是唯一有採用CSS加上DIV架構組成的網頁,因為這個部分是去年的課程內容,上方則有做一點Silverlight文字動畫效果,很高興賴同學有學以致用。
9-2

第十二組的主題是「"假"伯斯」。
10

會叫做這個主題,是小組成員對於頻果電腦的賈伯斯有些諷刺,例如ipad似乎是等於用四台iphone所組成,因為小組成員覺得ipad與iphone的程式或者是外觀,賈伯斯只是在一旁監督,並沒投入產品設計,其實這樣的論點我是覺得似乎有些偏激些,即使賈伯斯只有負責行銷或出點子,也是很有價值的呦(一間公司裡業務行銷企劃等仍是很重要)!
10-1 

下圖為本組作品,是用平板電腦的外框來做主體設計構思,有點像是我最後一個範例電視旋轉木馬Silverlight動畫裡的電視外框,應該用的是Design切圖與製作選單,搭配Web製作出來的網站,上方視覺圖則有使用一點Silverlight圖片移動的動畫效果。
10-2 

最後一天課程結束,來個大合照囉(雖然沒全員到期)~!YA剪刀!16
石頭,立志加油,我要學好Expression Studio!
17
布,訝異狀,糟糕!這個姿勢很像大家不太捧場…18 
這是隨意動作版!
20

這班聽說是四屆以來,報名人數最多的一次(70多位報名,錄取電腦教室滿額的40位),但仍有幾點不足未來可以再改進的:

  • 使用Expression Encoder安裝耳麥時錄製聲音時,電腦環境相容性與設定有問題,導致多浪費了不少時間,有點不完美。
  • 因為錄取滿額的40位學員(其實原本規劃是預計招收35位),但電腦教室總有一些電腦會故障暫時無法使用,加上有些學校的老師也來聽課,導致實際可電腦操作的座位不足,影響到學員學習。
  • 雖然大部分學員相當認真,但仍有少部分學員與組別上課心不在焉,似乎志不在此,浪費了一個寶貴的名額,真的是很可惜!
  • 講師的電腦頻出狀況,導致後面課程我是自備筆電過去,但這樣會跟學員的電腦環境有差異。
  • 因為電腦環境有出些狀況,加上學員分次上台報告拖得太長(大家一開始說不會講,一上台後幾乎大部分都超時,笑!),導致後面時間有點不夠用不過這個部分是因為去年有學員反應說能有機會自我介紹以及多認識別校的同學,看來我需要檢討改進一下如何拿捏得當囉!
  • 可能因為學員都是高中職的年輕,較少或恐懼上台報告,一方面課程並沒有很強制的約束力讓學員有動力與壓力,這個部分或許之後若我還有機會擔任類似課程講師時,也要納入規劃考量為宜。


2012年1月27日 星期五

Microsoft Expression Studio走唱團照片花絮(下)

這是微軟舉辦的Expression Studio走唱團全省走透透的研習活動,一樣都是我所講授的,最後兩場因為都是在台南較晚才舉辦,所以改開一篇將花絮內容放置在此…

2011年10月20日-崑山科技大學
第十二場在台南市大灣路的崑山科技大學。
0      
上課地點位於圖書資訊館,需從後面做電梯上去才能到達。
6

簡介Expression Studio系列軟體。
1

出席的學員還蠻踴躍的,本次研習主要是介紹Expression Web這套軟體的初步操作。
2

展示一些Silverlight的新技術功能。
3

結束填寫問卷。
4

崑山科大的景色很棒,下圖是從圖書資訊館出來後旁邊的湖景。
7

當天的天氣很好,風景漂亮!
8      
校園還蠻遼闊,有許多景點可以看。
9

2011年11月28日-成功大學
第十三場在台南市台南市大學路的成功大學,嗯~!因為我趕著離開,忘記拍校景了…
6

教室位置有點不太好找。
1

說明Expression Studio架構。
2 

解釋微軟的軟體搭配架構。
4
下圖是學員實際操作Expression Web的情形。
5

觀看上集請點選此:Microsoft Expression Studio走唱團照片花絮(上)
觀看中集請點選此:Microsoft Expression Studio走唱團照片花絮(中)


Related Posts Plugin for WordPress, Blogger...

訂閱RSS