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

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

我们还是先对比下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. [NHibernate]事务

    目录 写在前面 文档与系列文章 事务 增删改查 总结 写在前面 上篇文章介绍了nhibernate的增删改查方法及增加修改操作,这篇文章将介绍nhibernate的事务操作. SQL Server中的 ...

  2. 常用mysql语句

    mysql基本知识:日志文件 =======================================开启/关闭日志修改 /etc/my.cnf #log-bin=mysql-bin #重启my ...

  3. JSON.stringify 在OA差旅中转换为字符串传给后端,(使用from表单的形式)

    $('#bookForm').find('#formData').val(transInfo.fromData).end().submit(); 这里的val()中的transInfo.fromDat ...

  4. 【设计模式之单例模式InJava】

    1. 单例模式 1.1饿汉式(开发常用) class SingleFirst { /* 添加其他成员信息 */ private static SingleFirst s1 = new SingleFi ...

  5. linux kernel 杂谈

    首先介绍一下背景吧,工作三个星期了.复习了一波u-boot,跟了一下事件上报,搞了下平台设备,扣了一个内存检查代码. 想想生活是不是有点无聊.对啊,真的很无聊!!!! 无聊也没有办法啊,所以找点方法去 ...

  6. 关于JS的数据类型的一些见解

    关于js里的数据类型这块,说下个人对它的一些见地 js中的数据类型可以归类两类, 简单数据类型:string,number,boolean,null,undefined 复杂数据类型:object 其 ...

  7. Android 定时器

    Andorid定时器封装类 public class TimerUtil { private static final String TAG = "TimerUtil"; priv ...

  8. Redis介绍及常用命令

    一 Redis介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发 ...

  9. 【转】用CSS代码写出的各种形状图形的方法

    一共收集整理了图形20个,比较实用,同时也为了熟悉CSS的代码.整合了一下,有错误欢迎指出. 1.正方形 #square {width: 100px;height: 100px;background: ...

  10. Poj(3686),最小权匹配,多重匹配,KM

    题目链接 The Windy's | Time Limit: 5000MS | Memory Limit: 65536K | | Total Submissions: 4939 | Accepted: ...