Flash Template 動畫網站開發模組應用編輯教學示範

在老師的教學網站這邊,我們有一個就是提到FLASH的模板的部分 FLASH模板是這樣子,屏除商業的購物車買賣之外 很多需要做展示,其中像這樣的一個展示的系統 也就是說FLASH的模板這樣的一個展示系統 這些它可以作為像什麼,它就像一個 現在因為FLASH,Dolby就要走向3D嘛 所謂的3D不是你們學的3D Max 它走的意思是說,讓我的展示有虛擬3D的意象 像這樣子有一個立體的展示的 這個用在於像一些,譬如說我是一個攝影家 我想要建一個網站,那我當然就要秀照片 那你秀照片的情況之下呢 你希望請你幫我設計一個這樣的一個互動式的網站 好,那我們就可以透過像這樣的一個模板 來增強自己的功力嘛 因為我們FLASH基本學會囉 剩下的東西就是怎麼樣 我們要追尋更高階的技術 那怎麼搜尋更高階的技術呢 你買書會來不及 因為書裡面編一本書至少要一年嘛 那麼你這樣子書太慢 我們就會透過這樣的一個搜尋的網站 找到FLASH的模板 來加以修改 增強我們的功力嘛 快速能夠接到案子 這是一個介面喔 當然不只它喔 這個模板不只它喔 收集的方式一定是你用雲端書簽 把你的那個呢 相關的網站 一定怎麼樣 在平常時間就要記錄起來 像我就會記錄這樣關鍵字 這樣子你找到的這個模板就會非常的多 那關鍵字有 等等這樣的一個關鍵字 好 有些是要賣錢的喔 譬如說它要賣到這個六十八 因為老實說六十八塊喔 哪那麼便宜啊 那是美金 OK 好 那這裡面呢有一個Preview Preview就是預覽喔 那預覽的話呢 因為它要賣給你看 總要Demo給你看嘛 Demo看的話就是第一層 它會Demo出來 這樣的話呢 我們透過Source 我就可以抓到這個Demo 這樣的話呢 我就可以運用到這個呢 模板運用 這就是我們找取模板的時候的一種方法 像這個呢 用在於 它Demo這樣來看的話 雙網設計師就很適合啦 對 雙網設計師 要不要下網站 下網啊 想要看 當然是好幾個設計 當然要下網站啊 好 那這樣的網站 當然就不是什麼 不是購物的囉 它就是要Flash動畫去秀 所以為什麼我們在教學內容當中喔 Flash要教 購物車也要教 原因就在這 因為你要因應這個市場 市場絕對不是一個單一的 說就是這一種 不會 它是有很多種型態的 所以其中呢 Demo 照片 就是秀照片的 是一個啦 好 那這些喔 然後你抓下來之後做什麼 當然要套用囉 所以在老師的這一個呢 虛擬電腦裡面 在這個地方喔 老師已經放上 比如說 這一個課程教材區這邊 這裡呢 老師已經放上了一個叫做 Flash多媒體網站的開發模組 上一次我們已經學了這個 好 這個呢 比較簡單的喔 那麼我們先來一個比較複雜的 那複雜的話呢 有連結資料庫的 這個就是要PHP有沒有 這就要連結到資料庫去了 Why 因為它有PHP的語言結構 代表它要用到資料庫的設定 所以我這裡連整個網站的結構 它開發的這個結構說明 我都把它放在這邊 那國外網站啦 當然就是一個這樣子來 其中喔 這樣的一個結構的前提 是這個 所以我們這樣做 比較簡單 中間比較困難 這一個呢 就是Flash加XML的控制 XML是一個延伸標記語言 從一個 注意喔 前面這個東西我們學過的嘛 這個呢 只有一個XML 這個呢 是很多個 你看 1、2、3、4、5、6個 分別分開控制嘛 分開控制 你纔能夠掌控更多的範圍 然後呢 這裡面就是放你的image 就有大有小喔 好 那這個網站呢 是在這個 說明的話 是這一個啦 好 這樣的網站 就是 例如 像這樣的一種網站 它讓你下載的時候 也告訴你完整的結構了 所以我們要學 從這裡來學 喂 看到一個新的沒 CMS 我們很熟的字眼有沒有 前面怎麼加一個Flash呢 喔 代表就是說 CMS系統 我們本來都是靜態的嘛 它現在是 可以用Flash進去的 喔 也就是說這個模板呢 可以用Flash去做 欸 那人家開發 當然要收你一點錢喔 所以中本有那種開發公司 來收錢 做模板來收錢的嘛 所以這有一個preview對不對 有一個是mark 讓你可以購買 樣式都很多這樣 所以在國外 網站開發 網站設計師開發 很多 他是去買模板的 他就用模板的方式來開發 當然這些 我們就要收集囉 那你收集很多也沒用 Why 在你還沒有辦法 運用它之前 你收集了那麼多 對你來說 等於零 如果你會運用了 收集那麼多 比如說你收集了三百個 代表你會三百個模板 如果你連模板怎麼用 你都不會 那你收集了三百個 等於是零 因為你都不知道怎麼用嘛 好 所以老師呢 在這個教材裡面 我們已經有了這個模板囉 那我這裡放了 簡單 中間 困難的三套 好 那我們上禮拜 上一次已經學會這個了 那這一次我們來學這個 這裡面呢 有這個程式的編碼 的說明喔 怎麼樣使用 怎麼樣使用有沒有 例如 這一個的xml檔 裡面做什麼 做什麼 然後下一個xml檔 做什麼 他都已經說明瞭 ok 所以 技術文件 在這裡面已經有 那他有 這一個呢 word檔跟pdf檔兩種 好 連同他開發的母檔都有了 那這個是index 我們來看內容的 喔 原來是這個 這裡面呢 有棋盤式 有這種 排列的模式 好 這裡面當然就是show 他的產品喔 show什麼東西的產品呢 去show 這裡面 每一張照片 或是產品 都有說明的文字 然後我會透過他 下一張下一張的閱讀 那如果我們把它變成是 我們個人的作品集 這就是一個很好的 demo的型態囉 好 這個瞭解了 剩下我們是來 怎麼運用他 怎麼運用他呢 這裡有一個母檔 對不對 當然我們把它打開來看囉 剩下的就是 我們要有一個xml的控制 那控制呢 當然就是要換掉圖 好 那 要做之前 當然瞭解他的結構 裡面的結構做什麼 哇 像這個來講的話 他就是一個播放的運用 播放器的運用 那我們不動他 show是做什麼呢 原來這裡是放的是 AS語法 Flash的語法 所以我們不動他 那我們能動的東西呢 就剩下 img 這裡也要換圖 然後呢 再來就是xml 我們要來控制他 再來注意看喔 這裡有 1 2 3 4 5 表示他有順序的 這個沒有 所以我們先從這個看 好 這裡就是控制他 你看喔 由這個控制他 第一個 2 3 4 5 有沒有 所以我就是老大 控制你們 1 2 3 4 5 這五個手下 控制的在就這裡 那代表什麼 我可以加第六個手下囉 只要我在這裡 copy這一段喔 這樣子我就可以增加 第六個手下 只要我把這裡名字變成六 這裡變成六 原來囉 那相對的 我當然也可以減少囉 刪掉就減少 所以如果我要做第六個 那麼我這裡就要變成 怎麼樣呢 複製再貼上 而且要更名為第六個 好 老師你怎麼會知道 這個東西 我們就是變成做久了 就有經驗了 看別人的東西 你就會被分解 那你第一次 當然就聽老師講解 之後你就要嘗試 才會有辦法控制喔 這個之外 還有一個控制 就是Flash Flash這裡面呢 也寫了一大堆 可能你在這個階段 還無法認識的 那沒問題 我們之前有經驗 先變更什麼數字嘛 名字都先不動的 我們學著怎麼變更數字 然後再找出 跟外部檔案的關聯 一樣嘛 你進入一個陌生環境 都先觀察嘛 對不對 你到一個公司去上班 先觀察嘛 對不對 當然先少說話嘛 看看同事說些什麼 對不對 這樣纔不會得罪人啊 然後看一下 這個職場誰是老大啊 對不對 要不要拜碼頭啊 這些 好囉 這裡就是我們看到的程式 哇 老師好複雜喔 對啊 如果不複雜 當然也不需要你嘛 人家花大錢請你 大家不是瘋子 幹嘛請你呢 喔 因為你會嘛 你有你的專業技術 你的專業技術 當然會看懂複雜的東西 好 同樣的喔 我們現在先來解構 解構什麼 解構別人的程式 好 我們已經把它 摳到磁碟機來喔 這樣子我們纔有辦法呢 來研究 學習 怎麼樣套用別人的 動畫網站的模板 我們要看別人一個完整的工程 當然比較複雜囉 所以我們就要培養 怎麼找到那個線索 好 首先呢 我們剛從這個 image圖來 來囉 我摳了一張婚紗 從這裡摳了一張 婚紗的照片進來 首先把名字 更名為一模一樣的 再來喔 把尺寸呢 變更為一樣大 這樣子我就可以混進來囉 好 那我們知道 從它的結構喔 有大圖跟小圖 大圖跟小圖 好的 那如果喔 我把這個呢 要再進來一次喔 大圖我已經可以做了 我現在做一次小圖給你看 小圖的話呢 它要多大 先按照它的規矩來喔 我們剛講喔 入鏡要隨俗嘛 先按照它的尺寸 最後呢 才變更嘛 好 那我們現在是25 20 好 那我這一個呢 首先名字要跟它 更換一模一樣 所以把這一個 名字更名複製起來 然後呢 再把它砍掉 接下來把這個 陌生的這個喔 新進來的這個喔 重新命名 名字就取代它了嘛 然後我們對著它 點左這兩下 來透過呢 XM View喔 進行影像的什麼呢 調整大小 把這個維持比例取消 輸入我們要的尺寸 剛我們已經用直 把這個尺寸寫下來 25 20 就這麼小了 然後呢 我們再按儲存 覆蓋它 這樣子我們就變更完成了喔 所以這一個就是它的小圖 這是它的大圖 回頭呢 測試我們的 重新更新我們的這個版面 然後呢 重新來排 欸 你看就進來了 欸 那我找到它了嘛 然後呢 我們再點下去 欸 大圖就進來了喔 因為它是排第一張 所以為什麼要改第一張 當然就是 我們要馬上看到樣子 欸 底下呢 這裡有字喔 說明這個產品的字 好啦 我們這個是運用 國外的模板 當然它寫的是英文喔 好 那我們怎麼 把它找出來呢 欸 從image這邊看到喔 C1 我們在這邊 C開頭 後面有一個1 欸 我們就判定它 是它囉 那我們來找找看 開啟這個 記事本 好 對照了我們這邊 你看喔 這就是它的抬頭 TITLE就是抬頭嘛 抬頭就是標題字啊 欸 你看字是不是一模一樣 底下呢 有小圖跟大圖喔 原來是從這裡讀到它們喔 再來 後面呢 就是一段它的字 從這裡 L O R E M 開頭 L O R E M 所以你能動的字 就是在這裡 不是把前面給砍掉喔 注意看那個字 有沒有 不是卯起來就全砍 喔 那你是盲目的對不對 這樣的話 你就根本沒辦法學好這些事情 所以一定是怎麼樣 詳細的去研究別人的東西 那我在這裡 老師 我可不可以改中文字呢 喔 那是另外一個問題 因為編碼嘛 那我們先從英文字改改看 例如 隨便打一些字 然後我們記得喔 要存檔喔 存檔起來之後 重新整理 再點選它 哈 可以改 表示 我可以控制這個字的內容了 再確認一次喔 這裡面的字 從這邊 到哪 你要注意喔 不要刪過頭 你看喔 有一個呱胡起頭嘛 哇 字好多喔 那一定會有一個什麼呢 呱胡做結尾 所以我就不會弄錯了 好 好 那我們隨便打個字喔 一樣 存檔 重新整理 然後呢 再點選一次 也 表示 英文換英文沒問題 好 剩下的呢 我們將來就要嘗試喔 如果換成中文可不可以呢 因為 這個東西要秀出來 它一定是一個文字 框嘛 老師你怎麼知道 這個就要回到我們的 Flash裡面來囉 因為你要 套進來一定是一個文字框去秀 所以回頭我們就要找這邊來了 哇 這麼多 所以我們就要 慢慢把它找出來 當然這裡 我們就要慢慢來找喔 它的運用 喔 上面你看 控制的原來 上面看到的這些 在這 本來它只有圖案沒有字對不對 你想要加字進去就可以加了 因為你找到它了嘛 喔 這個原來是下一頁 下一頁 從這裡找喔 好 當然我們不可能 像未卜先知一樣 欸 你要第一個找著之後 欸 找到它了 你看喔 是不是呢 我們來確認一次 因為這個影片片段裡面喔 裡面喔 你看 喔 原來了 它有一個叫做 Title Image 這裡 有一個 動態文字了 底下呢 也有一個文字的 所以這個是當標題的話 來看一下喔 像不像 喔 你看 有按鈕嘛 這個當標題 這個當下文 就是內文的部分 那麼 它呢 字型是用英文字型 當然我打中文字 它就秀出來了 如果我想要秀中文 那當然就要改成什麼呢 可以被讀取的字型喔 例如 微軟正黑體 使用裝置文字內刊 OK 好 換另外一個喔 這個也是一樣 把字型 變更為 我們一定可以的 就是微軟正黑 新西敏跟標凱 這三個 當然要儲存喔 儲存之後 當然就要怎麼樣呢 發行喔 記得喔 這個東西是哪一個檔 不要弄錯喔 因為剛剛我們開的時候 喔喔 糟糕啦 我呢 還是這個sample的 那就不對了 所以這個東西 要到我們這邊來 變更的這個喔 不然到時候 你弄出來就弄錯了 有沒有看到 很多學生就是這樣 他從哪邊來的 這搞不清楚 然後就直接 老師都不行 好 所以我們從這邊 點選的時候 字變了 喔 有個字沒出來 表示對字型的時候運用 那你就要注意到囉 OK 所以我們從這裡 試著一點一滴 把它分解 找到