Flash Template 動畫模組分析及AS語法程式編輯教學示範

我們之前在講碩士的時候 多數都是講單一的 那整個網站的完整的東西呢 我把畫面切過來 是這邊有弄一個 Flash Template的網站模組 這個網站模組裡面呢 有很多Free的東西 記得我們之前跟各位提過對不對 用關鍵字去查 那關鍵字是什麼呢 那比如說你打上 Flash記得空一格 你只要打上Flash Template 你看喔 有Flash Template的Free 還有Website 這個是網站的話就是完整的 如果你今天接到一個案子 要做一個完整的網站 OK 那你就選這個 那這裡面就有很多 免費的網站可以下載 那你要知道它的關鍵字 下載完之後 當然喔你平時就要用功 下載到什麼地方 下載到你的隨身硬碟裡面 像我就有一個 Flash Free Template 網站模組的收集 收集完之後呢 我會還有一個呢 叫做模組分析應用 把原始的模板放在裡面 然後呢 應用過之後分解的東西 再來做 這樣子可以增強你自己 在這方面運用的功力 所以搜尋從這裡來 這個國外模板是要收錢的 當然也有Free的 像這個有Free的 免費的 比如說 回家之後 把這個網站給下載 這個模組喔 你點進去這裡就有模組 那它呢 來做一個網站 已經非常成型了 因為一般公司 按鈕大概五個到六個而已 那這裡面呢 已經幫你 會自動的什麼呢 秀圖 我們不是說過 商品要秀圖嗎 說明字就在這邊 回家的時候 把這個下載 然後呢 你可以Demo看 老師怎麼下載 在這邊 這裡就會有一個Download 才1.65MB而已 而且是Free的 下載之後 就裡面修改 怎麼改 就會遇到重重困難 那個就是要修改的地方 好 那我們今天呢 在老師虛擬電腦裡面 這個細槽這邊 老師呢 已經在這個 課程教材區這邊 放上了一個叫做 Flash多媒體 網站開發的模組教材 其中喔 我這裡放了三個 簡易 中間 最困難 因為它連結資料庫 PHP就連結資料庫 這個是連結XML 注意看喔 現在呢 我們之前有上過 Flash加XML 是現在最重要的主流 因為控制器就在 XML檔上面 好這個也是 好那進來之後 我這裡有一個修改過的東西 例如原本這個喔 3D的喔 還有倒影 還有說明喔 你摸過來就可以說明 例如你今天是 賣衣服 公仔 或是什麼之類的 或是 他生產的器材 都可以這樣子秀 一點呢 說明圖 圖現在要是一樣大喔 那等一下我要教你 怎麼改成變大的 那文字呢 從哪邊 就是這個呢 是從這個XML來控制 好 關鍵字來 筆記本寫上喔 ITEM 就是項目 以後呢 你寫的時候 看人家的分析編輯的東西 看到那個關鍵字 就知道那個字 是在這個行業 專用的術語 ITEM呢 就是項目 什麼項目 這裡有十個項目 好 這個部分呢 假如喔 結合我們的電子書 我們把它 組合成一個檔案的時候 因為 如果你這樣出去喔 XML會被人家露出來 被人家看見 那你可以用打包工具 把它包起來 就變成一個執行檔 對方就看不出來 好 那我們現在呢 要來研究它 怎麼樣的更改喔 好 研究當然喔 不要用這個來喔 用這個來 就會不見了 壞掉了對不對 所以請把它複製起來 勾到你的一紙貼紙 貼紙貼到這裡面來 我們再來研究 項目把它改一下 好 那我們對著它來研究喔 好 那我為了讓你知道 所以我這裡有一個 一個是 左一個是右 像這個喔 剛剛是左邊嘛 這個一點就是在右邊 好 那我這邊已經做好一個講義 講義在這 告訴你喔 怎麼修改那個程式嘛 然後就會變左邊右邊 這個就是 我們要慢慢看懂別人的喔 我們要踩在別人的肩膀上 比較容易成功嘛 這是我們講的觀念 那來源呢 哇 那個網路上多的是啊 要精密的 要精細的 隨時都有 做開發網站 用這個 才會快喔 前面我們教你是看得懂 然後學會修改 今天就像你修車師傅 怎麼做你不用管 你只要會拆下來 再裝回去 這樣就好 會檢測安全性 那你就可以當修車師傅了 材料是怎麼做的啊 那個材料怎麼 韌性如何啦 那個不干你的事 同樣的 我們呢 只要會改別人的組件 把對方的產品放上去 這樣子我們就可以收到錢了 好 那 來囉 這一個XML檔 我們打開 我們來教你怎麼改喔 那這個 不用到G-Weber 用筆記本開就可以了 來 先做這一塊 熬洗之前就像 醫生要開刀一樣 觀察 你不要冒然 就直接肚子把它切下去 對不對 一定要先觀察嘛 對不對 好 首先我們先了解一下結構 一個呢 就是有一個3D 這樣的一個XML檔 一個呢 就是裡面有圖 人家好奇對不對 其中把一個拿掉 換成我自己的圖 玩玩看 檔名 好 我把這個刪掉喔 我們拿一個進來 好 從哪邊拿 那我們這裡有圖片 那我們 從這個呢 媒體素材區 圖片區這邊 我們找一個圖片喔 這邊有一些商品圖片 OK 例如我要讓它賣一支 好 手錶好了 那我們把它copy起來 對不對 貼到這裡面來 好 當然喔 名字要跟它一模一樣 它是一個叫做PNG 3.PNG size呢 注意看一下喔 128x128 然後這個呢 哇 600多 注意看 它都是小圖喔 我們這個那麼大一CAN 這樣子 當然喔 有問題對不對 好 那我們這邊 是不是要改一下size 否則進去會太大 對不對 改size呢 我們用xmview來 對不對 我們這裡這邊可以改 殺雞不用牛刀 不用開到那個什麼 photoshop去 從這邊 我們就可以改囉 譬如說我在這邊 它剛剛是128 注意看一下喔 我這裡可以改成220 開始的時候 接近它 但不要跟它一樣 因為我們要觀察 有沒有錯誤嘛 就像醫生一樣 先讓你吃一點 別的什麼藥 然後看看有沒有副作用 沒有副作用就繼續下去嘛 對不對 好那我們這邊就存檔起來 好 存好之後喔 當然喔 來刷一下喔 開啟我們的3D 可以進得來喔 表示我要來 召喚它沒問題 哇喔 它怎麼影子不見了 喔 這就是後面了喔 所以 就算我們要改別人的東西 如果你本身 對這個結構不瞭解 你還是無用武之地嘛 所以我們現在要教你 怎麼樣改喔 一個一個來 我們察覺 影子怎麼不見了 那一定是 位置嘛 因為我們大小不一樣 所以位置就會不同 好來 先從這個地步 可以把你的東西呢 夾進去喔 先改一個 這是一個 放圖的地方 一個動畫檔 一個XML 這樣就主控了 這個母檔 就是可以修改的地方 好那我們呢 從這邊可以檢測 你看我夾進去就有了 對不對 你看這個叫做說明 有沒有 說明3 那在哪邊呢 在這一個 它項目的這一個裡面來 第三項就這一個 有沒有 好 就算你這裡語法看不懂 中文字已經可以看得見 這是說明3嘛 對不對 把這個改喔 改一下 改什麼 改成說 例如我輸入測試圖片喔 請問要不要存檔 要啊 你改片當然要存檔 記得喔 一次不要改太多 就像一樣 你看 像那個貓咪或是狗 有沒有 牠對於陌生的東西 牠會先用牠的手去撥一下 如果覺得 軟了就吃下去了 對不對 如果嚇到牠就跑 回來再弄一下 弄一下這樣子 所以我們一樣喔 我們學東西的時候 先先改一點點 然後看有沒有變化 一次不要改太多 一次改一點點 然後看 這樣子跑 然後呢 到這邊來 欸 字可以改了耶 那表示什麼 原來這邊就是控制項目嘛 對不對 那裡面呢 點進去喔 有什麼說明圖 哇 慘了 位置是不是不一樣 就卡住囉 那裡面有字嘛 對不對 好 這裡面的字呢 當然我們也可以怎麼樣呢 剛我們改一次成功對不對 我們就大方一點來改了 那我現在沒有辦法 沒有時間打很多的字 那我這裡就隨意打一些字 然後存檔進去 看它字會不會變更 當我們都懂了之後 我們就要大方的 大刀的來改變了 對不對 好 記得喔 你改好之後一定要存檔 存完檔之後呢 我們踹 點進去 欸 字可以改了 好來 現在讓你喔 先從這裡來 現在呢 我們要全部換掉喔 而且喔 這裡是幾張 十張 對不對 好了 那我們現在喔 把這裡的全給刪掉 記住原來的編程法 PNG之一 之二之三 這樣子跑 然後呢 原始的名字先記起來了 刪掉它 接下來把我們的圖 那它幾個 十個 一 二 三 四 五 六 七 八 缺一個 十 二 四 六 八 十個 十個把它複製起來 拉到這裡面來 那它很大喔 它現在就是六百多 對不對 沒關係 我們這個時候喔 用XFU 整體來處理的 剛剛是一個 小客器 現在是全部了 進來之後 全選 這個我們已經 課堂上示範過了 對不對 全選之後呢 首先 先從更名開始 好 這邊命名樣板 這邊喔 然後PNG 之 警號 因為 它是之幾之幾 之一之二之三 有沒有 這樣子來喔 OK 副檔名都是改成PNG檔 好 那這樣子呢 我們就有囉 啪 經典了喔 接下來呢 我們把它更改 從這裡喔 P字轉換 從這邊 來源路徑 刪除 取代 這個改為PNG 轉換 調整 輸入尺寸喔 好 我們要多少呢 它本來很小對不對 一百二十八喔 那我們這裡用 兩百五十 切好之後 接下來喔 兩百五十 老師會不會太大 對 我們就是要改大一點 因為你看喔 原本它的框框小小的 你看 這樣子全部都進來了喔 OK 但擠成一團 因為它原本尺寸太小 所以呢 我們現在喔 打開這個路檔 八百乘六百 size我們當然要改 改為多少呢 例如喔 我現在要打一點 一二零零 然後呢 我這邊的高度呢 我可以設為 比如說八百 好 然後呢 我按確定 這樣子就進去了喔 嗯 那這個框到底是啥框呢 欸 剛剛不是有一個文字的部分嗎 好啦 我們有沒有學過那個動態文字 有嘛 那這個東西呢 就是你看 動態文字 有一個名字喔 好 那這個就可以移動位置了 範圍大小你可以移動 你要大一點就大一點 字型 顏色都可以改的 好 那這邊都是新送體 對不對 因為可能是 大陸人做的嘛 所以我們從這邊改為 什麼呢 微軟正黑 好 那這邊改為裝置字體 這個是多行喔 從哪邊開始 size 你想要大一點就改大一點 這就是我們從之前喔 學到的經驗喔 就從這邊移轉過來 要不要存檔 當然要囉 存檔起來之後 欸 怎麼會有這個警告 因為原本它是舊版本 就是比較低的 可能是Flash CS3或是CS4 那現在CS5我們505存嘛 它會警告 你就不用理它 順儲存就對了 接下來我們就測試 你看 我就在這邊喔 整一點 你看 就跑這樣子來了 好來 現在喔 第一件事情喔 我們圖全換了 size我們變大了 就是面積變大了 OK 好 然後來 測測看喔 對 沒關係 你慢慢看得懂喔 為什麼呢 如果你看不懂的地方 框住它 然後呢 按這一個 問號 它就會打開 它的求助電子書 就是help的那個部分 而且呢 它會幫你連 連到你問的那一塊 OK 從這裡喔 比如說 這一塊 點到它 它就會去連結 好 這個是增強你自己語法的一個 做法 可以問到它原來的這個程式 好那 這裡面到底是什麼呢 來在筆記本寫上喔 改的時候 先改數字 中文字 就是英文字的那個藍色 都不能動喔 這些看到英文字的 都先不要動 只要只能動 數字的部分 這是我們在 如何修改別人的語法之間 先學到的喔 等你有能力的時候 纔能夠動它的英文字 沒有之前 改數字的就好 好那我在這邊 已經有一個獎勵嘛 獎勵就是說 打開了之後呢 在這一行有沒有 這一行裡面 這裡 底線X我們知道是座標嘛 Y軸是Y軸座標嘛 我只要改這兩面尺寸喔 它就會改變 什麼意思呢 來了 你看到原始的 原始的 這一個你看喔 座標是在200X 那什麼意思 就是那個圖喔 放大之後的位置 那你看喔 我們一般來講 如果我們開了 這個Flash裡面 把尺寸打開 靠近左邊的 X軸是水平啦 靠近左邊的數字比較小 如果你讓圖 要跑到右邊來呢 那數字要大 所以 從這裡喔 它的語法是這樣子 你看 X軸 在200 200當然是在左邊 那我現在讓它 跑到右邊呢 大一點喔 好 那改多少呢 例如我把它 記得喔 它上下有一個對稱 這邊 我會改800 好 然後喔 存檔起來 對不對 然後測試 一點 你看 我的圖就改 跑到右邊 那個右邊去了 但是我的 疊到了 沒關係 那個字呢 我知道 字是什麼 你看 那個字就避開啦 我們從這裡喔 從這裡 就是要知道說 喔 原來 我們 從別人的數字改 其他都不用動 為什麼 如果動的話 你就不需要這個模板啊 你要用這個模板 就是它原本設計好的東西嘛 我只要 只要改變它的 一些數據 就會成為我所用的 好 那 開始的時候 我們看不太懂 沒關係 像這個XY軸 我們看得懂啦 這是座標嘛 那我們改一下 喔 這裡有所謂的透明度喔 那你知道100的話 就是不透明瞭嘛 那如果我們把它變成50呢 會怎麼樣 欸 改變了之後喔 我們要當好奇寶寶 什麼東西 改一下 那如果不快 錯了怎麼辦 改回來就好了 沒什麼動作 好像沒動作對不對 欸 好啦 就改回來 沒關係 改回來 像這樣當好奇寶寶 動一下喔 欸 那剛剛這是250 如果我變450會怎麼樣 不知道啊 試試看啊 記得它有對稱喔 位置不一樣啊 本來是在上面嘛 現在是在底下嘛 喔 原來 這個語法 X軸Y軸 就是在控制那個圖啦 大圖 是高一點呢 還是位低一點呢 是這樣子的位置 喔 原來是這樣子 那我們就懂了喔 懂了之後 再把它恢復喔 OK 那這裡呢 有一個座標 是8000對不對 這是6000 啊 這邊有講到了 哇 好心人 它說了喔 你看這是大陸的字 大陸座對不對 它講滑鼠的速度快慢 喔 原來這裡是控制速度快慢 這是我們的座標 然後呢 我們現在這裡看喔 從後面這邊 是一個.5對不對 它如果是.8或怎麼樣 我們就改一下 那來囉 我的意思就是 要改變別人的這些資料 從它的數字改起 不要動它任何的英文字 結構都要動喔 這樣子改 改一點測一下 好來 先讓各位喔 改一下那個座標的位置 大一點 因為 你在介紹case的時候 不可能是一樣一樣大 一模一樣大的東西 一樣都會大一點 這樣子我們纔能夠完全掌控 對方的東西成為我們的 好啊這個大呢 你看我現在是用 這個是250 250對不對 好在我們flash裡面喔 你看 剛剛已經 從語法那邊可以知道了對不對 現在呢 是要動用到什麼呢 剛剛是場景這邊嘛 知道那個語法 現在呢 我們要開始從它的 元件庫裡面的 元件來看喔 像我們剛剛不是講到 ITEM嗎 就是項目 你看它的倒影就在這裡 這個東西呢 你看 一層一層進去 你看這裡面就在這 這個就是它的容器 我們這個課堂上有教過嘛 對不對 容器指定進來啊 纔能夠塞到那個地方去啊 你看它一定有一個實體名字 有沒有看到 所以這個東西就是 你前面我們學過的喔 要套到這裡來 那這個容器呢 SIZE多大 128 128 誒 剛剛是原本是不是128 所以我們這裡是不是要變大一點 啊 那我現在變400 OK 當然OK喔 喔喔 糟糕 對方的影像都變大了喔 你看喔 影像的影子被蓋住了嘛 這裡找喔 為什麼要找 找到最原始的那個檔 最原始的檔 你看一層包一層嘛 好 那 接下來喔 這個檔是什麼 陰影的 本來很小嘛 那要大一點啊 那接下來這邊喔 這個位置你也要移動喔 如果你這個位置你沒有動到 沒有用到它的話呢 來到這邊來喔 你位置沒有對的話 你看影子就跑出來了 剛剛我們是看不到影子 現在影子就跑出來了 那底下那個要改啊 因為底下這個在這邊 這個是一個 它的那個顏色的部分 那我們從這裡輸入多少咧 250 注意喔 這個呢 位置就要在這 那怎麼對呢 啊 因為我們這裡有一個 剛剛有一個點喔 這邊 有一個陰影的中心點 那你要對的時候就這樣子 讓它對齊 這個也是一樣喔 讓它對齊 喔喔 這樣就不對了喔 因為是倒影嘛 好 倒影的時候記得喔 要下來一點點 要看到一點黑黑的那個點 差一點點喔 好啊這個倒影呢 要遮住它 這是原來的結構喔 你看我的影子就來了 喔喔 有一個位置坐標跑掉了吧 你看陰影就會在 啊怎麼跑掉了 這要改剛的位置喔 有沒有看到 現在喔 這個位置差一點點 有沒有看到 陰影這邊位置差一點點 表示剛剛你對齊的時候 沒有對好 所以回到剛的位置來 剛的位置喔 這邊 那這裡做法原因就是 因為你看喔 它中心點的位置 你看沒有對齊嘛 我們中心點要對齊啊 纔好找到它的東西 這就是原始作者有沒有 在做的時候啊 沒有對的那麼好 害得我們要改它的東西的時候 哇 就是沒有對齊 不過我們知道原理嘛 要來去 對齊 再測一次喔 還差一點點有沒有 這邊還差一點點 位置還差一點點 所以我們再對 同樣的喔 這邊 原來在這啦 為什麼 R E F 好啊從這邊 Size都一樣喔 但坐標沒對好 那你可以用這邊來 它就對齊了 回到剛的喔 剛這個是合成的部分 這一個 有沒有 這個 位置又錯開了有沒有看到 再對一次 就是要這樣子找喔 好再來喔 這邊就有一個尺寸 你看 底線X 那這個地方 本來350就可以改一下 你看 本來集成一團的 我就散開了 好那Y軸我會了對不對 然後我會了之後呢 改Y軸啊 本來125嘛 改 就變這樣了 50囉 因為往下 尺寸越大 圖東西往下 尺標啊 左上角就是00有沒有 Y軸這邊垂直往下 數字越大嘛 你的圖要下來一點 當然尺寸就要大啊 啊你那個圖要左邊 右邊一點點 尺寸當然要大啊 所以你有了基本這樣概念 看這個你就 不會了 有問題 剩下就是 老師啊剛那個 沒有對齊有沒有 這個沒有對齊 啊就是把 尺的圖啊 這邊沒有對好嘛 你看坐標你看歪掉了嘛 你看中心點在這啊 你看歪了 怎麼怎麼 調一調 記得齁 這個是最原始 你看有沒有 這又動了 有沒有看到 這又動了 你一動它就會動了 對齊了那個中心點 有沒有 就是原來做的很乾淨 我們就做 記得齁 因為有倒影 一上一下 你看 我已經 快要交的時候啊 我在上課不是說 要你一定要對齊 那只是中心點嗎 所以 前人重數後人乘兩 以後你的東西 搞不好會被人家抓去改啊 對不對 這個時候呢 就要做好一點 免得像我這樣子 改他的東西 我一邊改一邊罵他 對不對 OK 好所以這裡 這樣子來喔 X軸跟Y軸這裡 老師 你知道我不知道啊 沒關係 我剛講了齁 我們當好奇寶寶 動一動 轉一轉 不行 往後退 就這樣 那這樣子呢 早晚你都會了 一次兩次經驗 OK 例如 現在圖是在右邊嘛 我要不要改成左邊呢 當然可以啊 記得回到這邊來 記得齁 改變完之後 做註解 後面加兩條斜線 如果呢 我輸入200 這個呢 就是在 左邊 啊如果呢 是800 就會在什麼 右邊 這樣子以後你 以後你看到他 你就懂了啊 記得齁 他有一個上下對稱的 老師你怎麼知道 上下對稱的 你看他一樣的時候 你就好奇了 喔所以一次不能改一個 兩個都要一起改 因為你看 這好一樣啊 有沒有 TW12 TW 這裡是450嘛 那我要調高一點 請問數字越大還是越小 欸越小啊 老師啊我要調到那個 距離多大會比較好呢 哇那就要算座標了嘛 對不對 因為原來喔 你看喔 這一個點 座標就是這個 以這個為基準嘛 那你往上看的時候 到底是要調哪一個 如果你的圖形用在這邊 然後我這邊拉一個 五字線對不對 那這邊是150嘛 欸啊你就輸入150之後 會不會對的剛剛好呢 踹對看就知道啦 不用老師 你自己踹就好 齁 那各位以前你的學習喔 都太依賴 變成說一個人講什麼 你才會動嘛 哇結果你看 這個中心點 是以這一條線為準 有沒有看到 有沒有 這一條線是不是跟這個齊 所以我剛剛要算的時候 這裡面就要算多少 上面這個高度是多少 250嘛 所以我這樣算 哇不對了 我要把這個座標 再加250進去 所以這邊 250 350 所以是400 這樣子調來調去 你就會懂囉 你看 這樣子 而且陰影也都OK 啊老師陰影喔 砍了 可不可以縮短一點 好 陰影在這嘛 對不對 調這個啊 來囉 陰影是什麼 透明跟不透明之間嘛 如果呢 你這個是什麼 不透明對不對 啊這個是透明嘛 這是不透明對不對 往前擠一點 是這樣子嘛 老師這樣調對不對 我不知道 測了就知道了嘛 好 哇 太下來了 OK 老師啊 從這邊就OK了啦 老師 這個傢伙是 α50 這個呢 就是不透明嘛 這個α50呢 如果呢 多一點 是看多一點 還是數字大一點 看少一點 不知道沒關係 調調看就好了嘛 不用背 不用記 調了就知道啦 哇 好像怎麼樣 看清楚多一點喔 所以 不是往左 就是往右調嘛 你看到這個數字 就差不多囉 你看 一直把它變成什麼 高級 老師 啊你現在是十個 人家客人要 九個怎麼辦 九個就拿掉啊 你把這個拿掉啊 啊如果要十一個呢 那就往後面加囉 你名字先不要改喔 你看喔 一樣表示有一個會重複嘛 刷看有幾個 有沒有重複的 第十這個啊 你看這個跟這個就是十啊 有沒有看到 來喔 再看清楚 原來扣一個就是了嘛 那把這裡 一樣是十喔 十十一喔 來 這樣就加進去的東西了 哇不停了 來喔 這個第九 第十一 快捷鍵喔 就動到這裡 第 啊那減掉啊 例如我只要八個就好了 所以加跟減對我們來說 不是問題 改字你就會改了 你看喔 現在只有八個而已啊 從這邊調整 就是它的密 從這邊就是密度 密度你看喔 像密度就緊一點喔 OK