milkmidi Blog

發表文章

目前顯示的是有「html5」標籤的文章

素材製作好工具 TexturePacker-4.x

大家好，我是奶綠茶 Flash 己經 byebye了現在是 HTML5 時代為了增加效能與載入速度會把用到的素材圖片，壓成一大張或是要製作成 SpriteSheet 現在 TexturePacker 4.x 推出來，來看看有什麼好用的新功能把所有的圖片拉進來奶綠我最常使用的是 CreateJS 和 PixiJS 選擇要輸出的格式，支援超多的啦再按下 Publish 就會匯出你需要的格式，真的很方便可以免費的下載使用 https://www.codeandweb.com/texturepacker 免費版會把你的一張圖更改掉，所以也只能用在教學或是測試專案要用還是需要付費買一套的喔 TP:B65E3ECD TP:B65E3ECD

閱讀完整內容

HTML5 Application cache 離線版網頁

大家好，我是奶綠茶 HTML4 時代，網頁一定要連網才看的到但有時在特定的場合，不一定有網路或是網路不穩定就什麼都看不到現在 HTML5 提供了一個離線版的技術原理就是用 HTML5 Application cache 事先把需要的檔案存在使用的裝置(PC, iOS, Android) W3C的介紹： http://www.w3schools.com/html/html5_app_cache.asp Application cache 有三個特性 1. 離線瀏覽(已經快取，直接從裝置載入) 2. 載入速度快(已經快取，直接從裝置載入) 3. 漸少伺服器的檔案請求(已經快取，直接從裝置載入) (已經快取，直接從裝置載入)，很重要，所以要說三次以下為程式碼時間 1. 在你的 html tag 加上 manifest 的屬性，並直定一個 milkmidi.appcache 的文件檔 <html manifest="milkmidi.appcache"> </html> 網頁載入時，同時會一起載入 milkmidi.appcache 文件該文件就是用來定義那些檔案要被快取 2. Manifest 文件新增一個空白的記事本文件，副檔名存成 .appcache 即可有三個特別的關鍵字要注意 CACHE MANIFEST CACHE MANIFEST app.css milkmidi.png app.js 告訴 Browser 要快取住 app.css , milkmidi.png , app.js這三個檔案檔案路徑和 html 一樣，因為我的 demo 三個檔都跟 html 放在同一層路徑如果你有開資料夾路徑的話，記得也要寫進去不要快取的檔案 NETWORK NETWORK login.aspx 一般來說，快取都用在存放檔案(css,js,圖片等) html 檔因為 K 數小，一般都很少快取如果你的展示環境並沒有網路，一定要全都快取的話就可以把你的 html 檔也寫進 .appcache 裡或是用第三個關鍵字來處理 FALLBACK FALLBACK offline.html 有網路時，就會連你的 index.html 離線...

閱讀完整內容

CreateJS系列教學-第一篇 AdobeCC2014 Export

大家好，我是奶綠茶 Adobe今年推出了 CC2014 系列工具，身為 "阿豆比米" 是一定要來研究一下有什麼新功能。就從最熟悉的 FlashCC2014 來介紹起很多學生問我該不該再學 Flash 因為行動裝置上不能執行 Flash , 且 HTML5 的普及，Flash 的黃金時代已過去，但這不表示 Flash 工具就從此退役喔。對設計師來說，Flash還是世上最好用的動畫工具，今天就來介紹如何使用 Adobe FlashCC2014, 將 Flash 裡的時間軸動畫輸出成 HTML5 的格式，這樣就能同時支援桌機與行動裝置平台。軟體啟動可以看到新的啟動畫面，這也是每次有新版本推出時筆者最期待的功能之一。延續 Adobe Flash CC, 使用介面可以調整成暗色系接著我們新增檔案，選擇 HTML5 Canvas 格式 AdobeCC20014 支援了 WebGL 的輸出，這個等下一篇再來介紹。在屬性面版可以看到是 HTML5 Canvas 文件如果想把舊有的 AS fla 轉成 HTML5 Canvas fla文件的話只要執行上方工具列 / 命令 / 從 AS3 文件格式轉換為 HTML5 Canvas 即可將舞台大小設定為 640 x 400 寬度 640 是因為當 Mobile Web viewport 設定成 width=device-width 時大多數的裝置的寬度會得到 320, 因應 Retina 顯示, 所以要 320 乘 2 = 640。接著我們拉個簡單的動畫, 讓圖示由左到右，再到下，再到左，再回來本來的位置做一個口字型的移動。時間軸長這樣在第一格影格寫上程式碼要注意喔，因為是 HTML5 Canvas 文件所以是寫 JavaScript, 而不是 ActioinScript 完整的 CreateJS JavaScript 提示，這對初學者有很大的幫助分邊在指定的影格下 this.stop(); 讓動畫播到此處時暫停，然後點擊後再播放為了能讓任意處點擊都有效，所以在下方放置一個白色(或透明)的色塊在第一個影格寫上點擊事件要注意一下，因為是 JavaScript...

閱讀完整內容

html5 easel 3D Ball

大家好，我是奶綠茶今天來分享關於 html5 的技術試寫一個簡單的 3D Ball 效果使用的 html5 Framework, 是 gskinner 大神所開發的 easeljs 為什麼要選這套呢，因為是 gskinner 開發, 就一定是好東西還有一點是他長的很像 AS3 的寫法, 真的超像的對 Flash Developer 來說，真的不難，轉載請註明出處

閱讀完整內容