將Flash動畫轉換成HTML 5並將多個FLASH轉換後的程式置入在HTML裡面運用

首先製作Flash動畫的時候必須要選擇用AS3來製作，而且動態越簡單越好......免得轉出來檔案大得驚人.....這裡有Adobe提供的轉檔說明
基本上，只有Adobe Flash cs6以上才支援Flash轉HTML5動態的功能，而且在裡面下AS指令~轉換後的爆走機率很高，所以還是乖乖的純轉動畫就好=..=......啊如果硬是要寫AS在裡面還是可以啦~~debug之路會很艱辛而已
( ￣ c￣)y▂ξ .......然後3D功能不支援，所以別做這麼高科技的行為~

再來就是把Flash做輸出成HTML5的動作，這個部分如果是用flash cc的話，Adobe提供的轉檔說明下面有說明，我就不再寫了，至於是用Flash cs6的話~就要下載外掛CreateJS，安裝後就可以開始來轉HTML5動態了
PS:當然我們無敵的Google大神也有來一隻Flash轉html5的外掛swffly~~但是因為轉出來的code太啊雜了........我不建議用這個轉=..=....至於有多啊雜......請見下圖

我只做了一個非常簡單的動作，黑色方框無限循環往右移動

用Swiffy轉出來後卻得到這麼一大串code.......

但是如果我用Adobe的CreateJS轉，卻可以拿到這麼乾淨的code

可見的Adobe真的很害怕HTML5這股洪流啊~~跟他們家Dreamweaver那堆見鬼的內建組件產生出的code比起來~~這個真的研發的很認真=..=+

再回到如何從Flash cs6發布HTML5的部分，安裝好CreateJS後，開啟要轉檔的Flash檔案，選取上方工具列的視窗>其他面板>Toolkit for CreateJS

叫出這個面板之後，如果動態沒有啥特別要設定的，就可以直接按Publish輸出了，但如果有要特別指定外連檔案要放哪邊，就可以點Edit Settings去做修改，至於可以修改什麼，因為內容跟用Flash cc轉一樣，所以請自個兒去Adobe提供的轉檔說明看吧.......

再來就是把生成出來的HTML code放進你要放的頁面裡啦!

基本上，轉出來的JS code都要拷貝過去，以這個檔案為例，就是下圖有用紅框框起來的都要拷貝過去!

再來就是如果同時有多個Flash轉HTML5的動態要放進來，code要怎麼改啦!!

其實這部份很簡單，只要改下圖有畫紅線的那幾個code就好( ￣ c￣)y▂ξ

For example:

然後檢視就會變成下圖

其實只要轉出的HTML裡所有JS連結都有拷貝過去，然後主要用來驅動的JS在合併時候，只要修改var裡的canvas name跟下面的function name就大致搞定了，不過在做動畫的時候要特別小心，兩個Flash用到的物件名稱千萬不能一樣，不然會出現誤讀變數的問題!

For example:

這是fal1的js

這是fal2的js

上面這兩張圖在lib.元件1的名稱都一樣，所以造成了下面這個畫面

會造成這個問題的原因，就是因為按照fal1.js與fal2.js的讀入順序，程式只抓到fal2.js的lib.元件1這個function name，不過為了安全起見，在flash裡面製作動態的時候，物件名稱還是通通以英文命名比較保險，免得code爆走......

至於內部更詳細的code運用，可以參考Adobe的這個網址Getting started with the Flash Professional Toolkit for CreateJS

Bookworm - 網頁介面設計模式 Designing Web Interfaces : Principles and Patterns for Rich Interactions

作者： Bill Scott、Theresa Neil 著

這本是我少數除了程式語言外嗑到眼睛轉圈圈的一本工具書

不知道是翻譯的問題還是裡面的專業術語跟台灣用的不一樣，吞的有點辛苦@..@

不過大體上來說，這本是只要你是在執行網頁專案的企劃、設計或程式都該看的書

裡面很多有關於UX很重要的內容，主要是在教觀念上的邏輯，不過應用方式就有點老舊了......畢竟是本老書啊!!

不過對於要走網路這行的人，我還是很推薦這本書

Facebook - Facebook App simple upload!! and I hate you Facebook App!!

這是因為剛好遇到要在Fcaebook上頁籤的客戶~~

讓我又再次的被折磨到快腦死.........

其實所謂的在Facebook上頁籤~其實就是製作Facebook APP~

就是把網頁、圖或小遊戲放在Facebook的應用程式集裡面~

要說難~~也沒難道讓你上稿上到哭出來~~但也沒簡單到看看書或上網查查資料就好........

簡單來說~~這就是一件會讓你大喊放過我的要命工程=..=

先來說說事前準備~~

1. 要有一個健康的伺服器~這次的我是跟戰國策租借商業型伺服器~不過如果案件沒有很趕......其實租借米國的伺服器會比較便宜~~不過遇到問題會比較麻煩~~只能用信件通知~~而且是英文信.......
2. 再來就是要在Fbcebook APP上稿最重要的事情~~申請SSL憑證(SSL介紹可以看這邊)!!這個看似複雜的東西~其實是可以請伺服器租借的公司代辦~不過因為台灣的SSL要跟國外申請~所以最少要7個工作天~要有心理準備~所以這次我是申請伺服器的時候~順便請戰國策一起申請SSL~~不過之後還是有些問題.................但至少對方是說中文的.....就比較好溝通=..=
3. 再來就是要把要放在Facebook APP的網頁或遊戲上傳到申請好的空間~通常是放在FTP裡的httpdocs這個資料夾裡面~不過在做這個網站的東西時~要注意!!盡量不要有外Load的東西~不然上稿後~Facebook會出現安全性畫面!!最好連js都是放本機裡面做呼叫!!

以上~~通通準備好後~~就來上稿吧@.@

1. 首先~登入facebook(屁話=口=)~然後再網址列打入https://developers.facebook.com到開發人員頁面

2. 點選上方的應用程式下拉霸~選製作新應用程式

3. 然後就會跳出這個彈跳視窗~在Display Name輸入想要的APP名稱~通常跟頁籤名稱會一樣~類別也要選~但是他類別很少~所以就選個跟你要放的APP最接近的類別就好~不過在使用的時候要小心~~這東西很容易因為點到白板外的範圍就跳掉了~~然後一切重來=..=

4. 然後他就會跳出這個很難辨認的認證碼~輸入認證碼後再按送出就好~~之後就等他跑跑跑~~跑到出現下一個畫面.......不過認證碼請看清楚再填....不然也是全部重來T^T

5. 進到這個畫面~~終於是建好了一個Facebook APP的ID了~這個畫面是以後建好APP後可以來監看流量的地方

6. 點擊測欄的設定進到最恐怖的地方吧!!先在電子郵件的地方填上自己的信箱~然後按下新增平台

7. 然後在他的彈出視窗先選左上角的App on Facebook

8. 然後原本的應用程式ID面板下面就會再多出一個App on Facebook的面板~找到Canvas URL這個欄位填入http://domain name/記得尾巴一定要打上" / "~在右邊的Secure Canvas URL這個欄位填入https://domain name/一樣尾巴的" / "要打上~至於下方的Canvas Fixed Width跟Canvas Fixed Height要不要選是就看你要放入的APP有沒有按照他的預設規範寬760 px X 高800px去做了~如果小於就選是~如果大於就選否~現在的預設都是否~都設定完後~就在點一次新增平台

9. 再來點選上排的網站這個選項

10. 這邊就簡單多了~在網站URL跟Mobile Site URL(這個是讓使用者用手機經由Canvas Page路徑進來的時候可以正常顯示畫面的地方~只是不會包在Facebook框架之下)都鍵入http://domain name/就好~之後再按一次新增平台~來新增最後一個平台

11.在這個畫面選擇下排左邊數來第二個專頁頁籤選項

12.在這頁找到Page Tab Name欄位填入頁籤的名稱(這個可以跟Display Name一樣或另外命名)~然後找到Page Tab URL欄位填入http://domain name/~在下方找到Secure Page Tab URL欄位填入~https://domain name/~~再來就是點頁籤圖像下面的圖示加入一張111px X 74 px的頁籤圖

13.點選選擇檔案按鈕~選一張111 px X 74 px小於1mb的圖

14.圖加好後點下方的儲存按鈕~把所有設定存起來~記得~沒按這顆按鈕前千萬不要關掉或離開這個頁面~不然所有設定都會失去~~剛剛就都做白工了=..=

15.儲存後再點選左邊欄位的App Details也就是第四顆按鈕~去設定一些APP詳細資料~主要是新增在應用程式集顯示時的縮圖

16.活動標語可以打跟Page Tab Name一樣就好~不過不能有數字或特殊符號跟空白在裡面

17.再來捲到最下面~會看到反光圖示這個區塊~這次主要是要新增標誌1024 px X1024 px跟圖示16px X 16px~新增方式跟新增標籤圖示一樣~新增完後一樣按下下面的儲存按鈕

18.再回到最上方~點擊Wed Preview跟Mobile Preview去看一下圖示有沒有正確顯示


19.再來就是要把APP放進粉絲團頁簽了~~說到這個真的是要好好罵罵Facebook~改版前可以設定好就自動加入頁籤~~現在卻麻煩到我要找外掛來放頁籤~~這啥鬼狀況=口=~~加頁籤的外掛很多~但我強者朋友給了我一個無敵好用的.html來安裝頁籤~FB添加頁籤的新方式2011214開始.html~下載這個檔案後~直接點開這個.html檔~會出現這個畫面~再把應用程式編碼的數字碼拷貝貼上到APP ID後方欄位裡~按下Add TabPress to Your Fan Page按鈕

20.在這邊點~選擇Facebook粉絲專頁的下拉式選單~選擇你要加頁籤的粉絲團

21.按下新增粉絲專頁的按鈕後~他就會自動跳到你的粉絲團了~通常新增的頁籤會顯示在最右邊!!

22.最後一個步驟!!回到開發人員頁面~點Status & Review在右邊會有一個是否的切換bar~~點下去

23.按下彈出視窗的確認按鈕~這樣你的頁籤就正式上線了~這個指令的差別是在於~你允許誰來看這個頁籤內容~如果只允許自己看到~~就把按鈕換到否~如果要公開上線~就把按鈕換到是!

再來就是確認一下頁籤內容有沒有正確上線了
第一個地方是在粉絲團自己頁籤點進去後的畫面~會向下圖這樣~內容做的很偷懶~~不過就外框架會是包在粉絲團裡面~通常右邊不會有廣告~有也很少~

第二個地方就是在獨立APP檢視時的畫面~~他的連結在設定的基本資料的App on Facebook區塊的Canvas Page的欄位裡通常會是https://apps.facebook.com/應用程式ID~這樣的配置

用這個連結進去看的畫面會是下圖這樣~

一般給媒體端的正是連結會是上面這種~因為只有這個連結在使用者用手機連進來的時候~才有辦法自動轉址到能正確檢視的畫面去~

PS:有時候會遇到SSL廠商那邊沒設定好~導致Fierfox出現安全性錯誤的問題~這個通常只要聯絡對方工程師就可以解決~至於IE9以下就沒救了~~除了看運氣~~基本上無解...........科技總是與老東西互相衝突啊~~~~~~~~~~~~~~

呼~~以上~~打完收工!!
不過Facebook的遊戲規則是以秒為單位再改的.........誰知道他下次又會生出什麼新規則來為難我們T^T..............這篇搞不好時間久了~~真的就只能參考了...........

HTML & CSS - Codecademy : HTML & CSS

Learn HTML & CSS Programming | Codecademy Online Tutorials

今天憑藉著堅強的意志力~
花半天粉不認真地上完了這網站的HTML & CSS課程~
雖然本來就會html+css但是因為全英文的教學.........還是花了我很多時間去閱讀......orz

上完的感想是..........內容非常的基本中的基本.......
真的是師父領進門~修行看個人的一個網站~
內容不難~但不建議用chrome去用這個網站~
在練習到文字尺寸的時候~會出現bug........然後就會莫名其妙的卡關了=..=

這裡的課程上完~大概就像上完小學課程吧!!
非常簡單~而且超級基本....

Bookworm - HTML5+CSS3智慧型手機專用網站設計 HTML5+CSS3 for building smartphone-optimized websites

作者 : エ・ビスコム・テック・ラボ 著

花了很長一段時間~終於把這本書嗑完了~
真的是用~"~<--這個表情在嗑啊!!
接下來就是實作了@..@

這是一本很詳盡解說HTML5與CSS3在手機與PC之間如何有效編排轉換的書~
不過翻譯錯誤的中文有點多.......code的部分是沒啥翻譯上的問題~但中文解說的部分錯字有點多.......希望碁峯出書前可以再仔細檢查一下=..=
對於決心朝前台互動設計師之路前進的我來說~
這本並沒有很難~對有網頁切版基礎或前台互動程式設計的人來說這本並不難~
這本其實教得比較偏技巧跟技術的整合與Debug上該注意的技巧等等的內容~
她解釋了很多在製作手機與PC需互通版型時所會遇到的問題與解決方法~
連未來的前台程式發展走向也有顧慮到~
讀完之後~只能說~~這本不愧是被認定為目前HTML5+CSS3的聖經了!!

想走F2E這條路的人~~誠摯推薦這本書啊!!