分享製作時鐘~
[教學一]
製作軟體:すっきんやねん!SkinMaker PRO 2.9 ダウンロード
可以在官網下載
再來電腦必須要有.NET Framework 2.0 不然製作軟體沒辦法開喔
SkinMaker PRO 2.9介面:
第一步:定義=>基本定義
這裡要設定時鐘的大小(基本画像幅・高は)
時鐘的作者(作者名),作品名稱(スキン名称)以及個人網站位址(非必要)
還有作品的密碼(パスワード)防止原始檔給別人解析(非必要)
時鐘的大小務必設定成150x150
因為使用在部落格上最大只支援到150
超過150到時候放到部落格上會被壓成150x150會很難看
第二步:定義=>画像ファイル定義
將你的時鐘圖片素材全選拉到使用パーツ画像裡按保存即可
第三步:定義=>デジタル定義
第一次點這個的時候系統會要求你輸入一個名稱,這裡我是設定為time
然後在右邊的視窗設定0~9以及: . /相對應的圖片
如果要顯示星期幾的話,月~日也要設定
其中注意的是0~9以及: . /一定要設定,不然時間跑不出來
第四步:スキン設定
此時最左邊的應該都是全白的,因為我們還沒有把圖片放到時鐘上
我們就先把背景叫進來,在左邊空白處右鍵=>追加=>命名(レイヤー=>追加)
這裡我是輸入為"背景",接著點中間画像的下拉式選單選背景的那張圖
這樣背景就放入完成了
再來是放入時鐘的12,3,6,9刻度
一樣在左邊空白處右鍵=>追加=>命名(レイヤー=>追加)
這裡我是輸入為"數字",接著點中間画像的下拉式選單選刻度的那張圖
這樣刻度就放入完成了
然後再來是放入時鐘的分針,時針,秒針
在左邊空白處右鍵=>追加=>命名(レイヤー=>追加)
分別命名為分針和時針和秒針
在回転的下拉式選單裡分別要設定為"分と同期","時と同期(12h)","秒と同期"
這樣分針,時針,秒針就放入完成
再來是放入時鐘的時間和日期顯示
在左邊空白處右鍵=>追加=>命名(レイヤー=>追加)
這裡我分別命名為日期和時間
接著在画像的下拉式選單選日付和時刻
然後デジタル的下拉式選單選剛剛在デジタル定義裡輸入的名稱~time
這樣時間和日期顯示就放入完成
做完就像上面上那圖一樣
左邊有背景,數字,秒針,分針,時針,時間,日期的元件在
然後プレビューウィンドウ視窗可以預覽時鐘:
元件在時鐘上的位置和時間日期的調整也是在プレビューウィンドウ這個視窗做調整
プレビューウィンドウ這個視窗的+是放大顯示,-是縮小檢視,=顯示最大
上下左右箭頭是把該元件的位置做調整(用滑鼠搬也可以)
另外如果在プレビューウィンドウ的視窗發現元件的上下順序不對
只要在スキン設定視窗的左下並び順按上下箭頭做調整即可
最後ファイル=>ガジェット用スキン書き出し
這樣會產生一個資料夾裡面有一個Skin.xml和時鐘的所有圖檔
最後就是要把時鐘做發佈的功能了
首先先到官網下載すっきんやねん!Flash版 Ver.2.3.1 ダウンロード
解壓縮後資料夾裡面會有sukisukiFlash.swf跟另一個readme.txt
把sukisukiFlash.swf上傳到你的網路空間
接著把剛才時鐘產生的Skin.xml和圖檔連同資料夾一起上傳到你的網路空間
接著在官網的做設定
1.Flashファイルの場所:
就是你的sukisukiFlash.swf的位置
你可以選擇用自己上傳的或是官網的
2.オリジナルスキンのエンコード済み URL:
就是你的Skin.xml的位置
這個網站比較特別,先把位置做特殊處理才可以
網址要特殊處理的話可以在這個網站做處理
比方說我的Skin.xml的位置是http://aaa.bbb.ccc/Skin.xml
處理後變成http%3a%2f%2faaa%2ebbb%2eccc%2fSkin%2exml
所以オリジナルスキンのエンコード済み URL我就輸入http%3a%2f%2faaa%2ebbb%2eccc%2fSkin%2exml
オリジナルスキンを利用する記得打勾
3.サイズ / Size
這裡內定是150X150
我試過改更大的但是沒有用
系統還是會變成150X150,所以這邊就跳過吧
4.オプション設定 / Option setting
這裡是設定你的時鐘發佈在部落格上要顯示什
像我的話我是勾:
日付表示 / Display Date
時間表示 / Display Time
アニメーション / Enable Animation
スムーズ秒針/ Second hand smoothly
設定の保存 / Enable save setting
接著按表示的按鈕下方就會跑出你時鐘的圖案以及發佈的HTML語法
最後把HTML語法複製貼到你的部落格就完成囉~~
[教學二] Flash時鐘製作2-加入動圖及縮小鐘盤
這篇則是如何加入動圖或是透明小swf圖還有縮小鐘面配合主圖製作方法^^
一. 準備動作:請先點擊下載→ Clock時鐘源碼
二. 認識Flash MX界面:
最上這行是文字工具列↓
第二行是主要工具列圖示↓若是在界面上看不到這行工具列
↓就按文字工具列的視窗進入再點工具列選主要就會出現
第三行就是時間軸,物件的表演時間長短都在這裡控制↓
←左邊的是繪圖工具圖示 再來就是工作台↓
電影尺寸可控制螢幕大小,就是圖片多大電影尺寸就設多大。背景可改變螢幕顏色。
三. 時鐘製作開始:
1. 請打開 Macromedia Flash MX 軟體
按主要工具圖示開舊檔案,找到你下載的時鐘源碼,將時鐘源碼叫入Flash MX裡。
或者按上方文字工具列的檔案→點擊開舊檔案
2. 叫出元件庫,按視窗點選元件庫,點擊後會跳出視窗。
3. 將圖片讀入元件庫
讀入的圖是要當時鐘面的主圖,所以要選一張美美的動畫圖喔^^
→
↓放進元件庫之前會出現這個詢問,選第二個按確定
↓圖片被放在元件庫,拉住拉桿找到叫入的圖
(在元件庫裡面被叫入的圖,後面都有複製兩字)
4. 點時間軸拉桿把底圖名稱的時間格拉出來
5. 將讀入的主圖片拉到工作台的源碼時鐘上
(※這裡很重要的,一定要先將時間軸的底圖點選反白,才能將元件庫裡的主圖拉到工作台上放置。)
圖片有藍框圍起來的情況,表示這張圖片可以任意移動位置
(就是當滑鼠移到工作台的主圖時,游標會變成→,這時就可以點著主圖不放,
移動滑鼠拖曳圖片,將圖拖到適當位置放置,現在我把主圖放在時鐘中間。)
放好主圖後可以先看預覽。到這裡也算是完成第一階段的時鐘^^
按文字工具列的控制,再點測試影片,看看主圖在時鐘上的效果。
看到了吧↑現在是鐘盤太大,圖片太小,不過為了配合奇摩欄位,這尺寸是剛好。
所以我們就來把鐘盤變小。
6. 縮小鐘盤面配會主圖片大小
↓
把鼠標移到八個黑點的其中一個位置可縮放鐘盤尺寸
若要縮放鐘盤寬高則點四個角落的其中一黑點,游標會變成這樣 ,
→ 這時按住黑點不放直接拖曳滑鼠,往內外拉可縮放鐘盤尺寸配合圖片適當大小。
若要縮寬度則點左右兩個其一黑點可任意調整寬度,游標會變成這樣 後就可調整寬度。
若要縮放高度則點上下中間的兩個其一黑點可任意調整高度,游標會變成這樣 後就可調整高度。
ps:若要正比例縮放,則在拉尺寸同時要按住鍵盤的Shift按鍵,就能長寬正比例縮放了。
實地操作↓ 拉拉拉^^
↓拉到主圖片裡覺得適當了就放開滑鼠
好,鐘盤拉好了,位置有點向下,那麼就再調整一下鐘盤位置。
八個黑點消失了,就可以移動整個鐘盤。
這時滑鼠移到鐘盤位置,游標會變成,就可以調整位置了。
→ 移移移^^
移好後,放開滑鼠↓
時鐘完成了,可以按控制,看看測試影片^^
嗯..可以了,只是螢幕太大了,時鐘沒有佔那麼大空間。好,那就縮小螢幕尺寸。
(本來開啟軟體後,是要先設定螢幕尺寸的,但是為了配合時鐘源碼,我才在最後這裡調整電影尺寸,等到熟練這軟體了,把源碼叫進來後,就設定電影尺寸配合主圖片尺寸,程序都OK的。)
7. 設定電影尺寸
在工作台下方有個屬性背景的工具列,若這工具列像動作影格指令那樣只有一行灰色看不到內容 那麼點一下屬性背景前方的白箭頭,屬性背景內容就會出現了。
按確定後,結果螢幕畫布跑掉了,物件們有一半在灰色工作台上,
那麼就要移動物件到螢幕畫布上。
(因為這次是為了配合時鐘源碼圖,所以沒有先設定電影尺寸,不過下次不能這樣做,
因為現在物件只有兩個要移動還不會很複雜,若是物件很多時,那可麻煩了。
所以記得,每次製作時鐘時,叫入時鐘源碼後,再來就是設定電影尺寸,然後再開始加物件進來。)
8. 移動物件到電影畫布上
(如何同時選取兩個物件以上,就是先點一個物件後,
按鍵盤的Ctrl鍵再點第二個物件,如此就能同時選最多個物件了。)
留言列表