FLASH CC 2015 CANVAS （四）製做響應式設計（自適應）的項目

 

注意 此貼 爲我的邊「開荒」邊寫，因此不保證就是最佳作法，也不免有錯誤（若是發現我會更新文章）！ 正式教程會在後續開始更新

 

相信你在看了（第二節）（第三節）以後已經可以知足絕大多數的互動需求了。那麼也該談到製做「自適應」的項目了，（前端換了個說法叫「響應式設計」）

咱們仍是先對比下AS3的寫法 （若是你未曾用過AS3，那不用理會便可）

AS3:
import flash.events.Event;

stage.addEventListener(Event.RESIZE,resizeF)
function resizeF(e)
{
    trace(stage.stageWidth,stage.stageHeight)
}

SWF項目 全部須要「自適應」的 元件都須要咱們放在這個這個函數裏以控制他們的座標。

CANVAS項目 其實也同樣，只是監聽resize 換個寫法而已

CANVAS:
window.addEventListener('resize', resizeCanv);
function resizeCanv(e)
{
    console.log('resize')
    var newWidth = window.innerWidth;
        newHeight = window.innerHeight;
    console.log(newWidth,newHeight)
}

這段代碼，能夠寫在FLASH CC的任意位置的時間軸（例如根時間軸，MC的時間軸上），不過我確定建議 寫在根時間軸的第一幀（固然根據具體項目而定）

AS3的同窗，可能不知道 window.innerWidth 這些屬性，因此建議去 w3school  看看就行。（這些屬性真的只須要記住就好了，或者搜索，例如要獲取DIV的相對父級的座標，DIV相對瀏覽器窗口（body）的座標， 一搜一把一把的）

 

好了 都能取到窗口縮放後的 width,height了 那麼剩下事就須要你本身去完成了

是否是很簡單。

 

可是，若是你是一個資深的前端開發者，你習慣了用JQuery,以及一些很是好用的開源庫。而且不喜歡在FLASH CC Canvas 裏面寫交互代碼。

那麼你也能夠在html中用你熟悉的庫來控制 FLASH中的元素。（你僅僅是用FLASH這個IDE來 很是方便 的完成時間軸動畫而已）

例如 使用JQuery監聽舞臺縮放的代碼,你能夠在HTML中寫JS：

var newWidth,newHeight

$(window).resize(resizeF);
function resizeF()
{
    newWidth=$(window).width();
    newHeight=$(window).height();
    //控制FLASH中 須要響應的元素 
    exportRoot.須要控制座標的元件名.x=1234
}    

測試，發佈，真不錯效果實現了!

 

 

可是若是僅僅這樣就夠了那怎麼行！我習慣在FLASH軟件中寫代碼：

首先在你的 頁面引入 JQuery ，而後在FLASH CC裏面直接使用JQuery！ 是的！就是這麼爽！

$(window).resize(resizeF);
function resizeF()
{
    newWidth=$(window).width();
    newHeight=$(window).height();
    console.log(newWidth,newHeight)
}    

至於爲何，相信你本身就會明白！這裏我就不解釋了！

JQuery都能用了，相信其餘庫你本身也明白怎麼用了。！

 

補充：（雖然是補充，但看了絕對不後悔！——一個「補充」的自白）

差點遺漏了一個"scale"。若是個人項目不須要每一個元件根據顯示的寬高來移動座標，而是單純的直接將畫面放大或縮小。

在HTML中JS中 以及 在FLASH CC JS中 也能夠直接這樣：(代碼仍然能夠寫在任意位置的時間軸上，是否是真的很方便啊!!!!!)

canvas.style.width=1100+"px"
canvas.style.height=800+"px"

AS3的朋友注意區別 如下代碼。（若是不明瞭，建議先 w3school ）

canvas.width=1100
canvas.height=800

 AS3若是你使用慣了 greensock，那麼你上手他家的JS版 greensock 幾乎不費吹灰之力。你甚至能夠直接 :

TweenMax.set(canvas,{scale:2,rotation:45})

 

可能作習慣前端的朋友就有點鬱悶了，DIV 的 width:100%，float:left，margin:20%，background-size:"cover" 等等這種用起來很省心的東西在CANVAS裏面都用不了。是的你只能一個一個控制他們的座標。

 

相信看到這裏，有朋友已經發現前面章節FLASH CC CANVAS項目中寫的JS  能夠像HTML的原生JS那樣寫法。探索慾望強烈的朋友能夠本身先試試。我將在後面的具體案例中使用。