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

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

我们还是先对比下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. centos 6.4下的postgresql 9.2使用

    http://www.cnblogs.com/mchina/archive/2012/06/06/2539003.html

  2. How Tomcat Works(十)

    本文接下来分析tomcat的日志记录器,日志记录器是用来记录消息的组件,在tomcat中,日志记录器需要与某个servlet容器相关连:在org.apache.catalina.logger包下,to ...

  3. Android Studio 错误 Duplicate files copied in APK META-INF/LICENSE.txt

    1 .Duplicate files copied in APK META-INF/LICENSE.txt   android { packagingOptions { exclude 'META-I ...

  4. 3. 使用绘图API自定义视图 --- 旋转的方块

    import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; impor ...

  5. java.util.LinkedList源码分析

    public class LinkedList<E> extends AbstractSequentialList<E> implements List<E>, D ...

  6. Pair Project: Elevator Scheduler [电梯调度算法的实现和测试]:刘耀先-11061183,罗凡-11061174

    本次为我们两个人的第一次结对编程.从总体而言,我们对结对编程比单人编程略显不适应.但是经过一段时间的磨合,我们逐渐的习惯了这种编程方式. 1.  结对编程的优缺点 结对编程的优点: (1)       ...

  7. NuGet 无法连接到远程服务器-解决方法

    一. Entity Framework以下简称EF 安装EF4.3的步骤是首先安装VS扩展 NuGet,然后再使用NuGet安装EF程序包 安装完NuGet就可以安装EF了,有两种方式可以安装EF: ...

  8. ruby新建web项目步骤,使用mysql数据库

    1.创建一个项目 指定数据库 rails new demo02 -d mysql 2.修改 config/database.yml 修改数据库密码 default: &default adap ...

  9. Arcmap内容列表刷新

    Arcmap内容列表刷新ILayer pLayer = pFDOGLayer as ILayer;                            if (!pLayer.Visible)    ...

  10. web网页练习

    一. HTML部分 1. XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同: XHTML 元素必须被正确地嵌套. XHTML 元 ...