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

2021-10-14 00:14:06

注意此贴为个人边“开荒”边写，所以不保证就是最佳做法，也难免有错误（如果发现我会更新文章）！正式教程会在后续开始更新

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

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

码农公寓

相关文章