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

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

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

FLASH CC 2015 CANVAS (四)制作响应式设计(自适应)的项目的更多相关文章

  1. FLASH CC 2015 CANVAS (七)总结

    FLASH CC 2015 CANVAS (一至七)确切来说是自己在摸索学习过程中而写.所以定为“开荒教程”. 去年年底转战H5,半年中一直非常忙也不敢用CC来做项目,担心有BUG或者无法实现需求,所 ...

  2. FLASH CC 2015 CANVAS (五)loading的制作

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 AS3的loading一般我们都写在时间轴第一帧,但是FLASH CC CANVAS的导出项目的lo ...

  3. 《FLASH CC 2015 CANVAS 中文教程》——1、导出canvas动画,文件结构浅析

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  4. 《FLASH CC 2015 CANVAS 中文教程》——3、this关键字 入门

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  5. 《FLASH CC 2015 CANVAS 中文教程》——2、基本的交互(点击、触摸)事件

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  6. FLASH CC 2015 CANVAS (六)如何像FLASH那样实现场景(多canvas)

    注意 此系列贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新. swf 项目中,我们可以很容易在一个fla文档里创建多场景.也可以通过多个fla文件发布多个s ...

  7. FLASH CC 2015 CANVAS (二)html中写JS调用flash中的元件、函数、变量

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 当你导出第一个canvas后,你会在保存fla的文件夹里 (每个项目默认位置)看到 如下文件,(请先 ...

  8. FLASH CC 2015 CANVAS (三) flash中写JS调用html中JS的函数,变量

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 首先我们在HTML里的JS里面添加几行代码 我们在FLASH中新建一个元件,并拖入到舞台,在属性面板 ...

  9. FLASH CC 2015 CANVAS 导出音频问题

    1,导入音频无法成功发布(软件假死) 解决办法:先用个格式工厂重新压缩 在导入软件 发布 2, 音频 长度小于1秒(左右)的时候,导出后音频会变成  “哧”的一声,  估计和FLASH软件内部的音频编 ...

随机推荐

  1. 【原】Github系列之三:开源iOS下 渐变颜色的进度条WGradientProgress

    概述 今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有“B格”.它拥有渐变的颜色,而且这种颜色是动态移 ...

  2. [内核]Linux workqueue

    转自:http://blog.chinaunix.net/uid-24148050-id-296982.html 一.workqueue简介workqueue与tasklet类似,都是允许内核代码请求 ...

  3. Android中使用POI加载与显示word文档

    最近打算实现一个功能:在Android中加载显示Word文档,当然这里不是使用外部程序打开.查看一些资料后,打算采用poi实现,确定了以下实现思路: 将ftp中的word文档下载到本地. 调用poi将 ...

  4. 【android】实现一个自己的标题栏

    完整项目下载 背景:项目中使用标题栏,只是简单的include一个标题栏的视图,赋值.控制元素显示.点击事件都要自己搞,不优雅! 要求: 1:对现有代码入侵最小 2:使用足够简单 OK,围绕着这个需求 ...

  5. volatile 用法

    volatile 影响编译器编译的结果,指出,volatile 变量是随时可能发生变化的,与volatile变量有关的运算,不要进行编译优化,以免出错,(VC++ 在产生release版可执行码时会进 ...

  6. poj 1064 (二分+控制精度) && hdu 1551

    链接:http://poj.org/problem?id=1064 Cable master Time Limit: 1000MS   Memory Limit: 10000K Total Submi ...

  7. Learn clojure in Y minutes

    Learn X in Y minutes Where X=clojure Get the code: learnclojure.clj Clojure is a Lisp family languag ...

  8. 【原】RDD专题

    RDD是什么东西?在Spark中有什么作用?如何使用?  1.RDD是什么 (1)为什么会产生RDD? 传统的MapReduce虽然具有自动容错.平衡负载和可拓展性的优点,但是其最大缺点是采用非循环式 ...

  9. QT5-控件-QLabel和QLCDNumber-标签显示图片或者视频,LCD用于上位机不错

    #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QLabel> #incl ...

  10. Javascript:DOM动态创建元素实例应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...