分享製作時鐘~

[教學一]

製作軟體:すっきんやねん!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鍵再點第二個物件,如此就能同時選最多個物件了。)

arrow
arrow
    全站熱搜

    金魚不是魚 發表在 痞客邦 留言(0) 人氣()