FLASH CC 2015 CANVAS （四）制做响应式设计（自适应）的项目

时间 2019-12-09

原文原文链接

注意此贴为我的边“开荒”边写，因此不保证就是最佳作法，也不免有错误（若是发现我会更新文章）！正式教程会在后续开始更新html

相信你在看了（第二节）（第三节）以后已经可以知足绝大多数的互动需求了。那么也该谈到制做“自适应”的项目了，（前端换了个说法叫“响应式设计”）前端

咱们仍是先对比下AS3的写法（若是你未曾用过AS3，那不用理会便可）canvas

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了那么剩下事就须要你本身去完成了spa

是否是很简单。设计

可是，若是你是一个资深的前端开发者，你习惯了用JQuery,以及一些很是好用的开源库。而且不喜欢在FLASH CC Canvas 里面写交互代码。code

那么你也能够在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那样写法。探索欲望强烈的朋友能够本身先试试。我将在后面的具体案例中使用。