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那样写法。探索欲望强烈的朋友可以自己先试试。我将在后面的具体案例中使用。