`

深入理解flash重绘

 
阅读更多

Flash Player 会以SWF内容的帧频速度来刷新需要变化的内容,而这个刷新的过程,我们通常称为“重绘(redraw)”,相信即便是初级的菜鸟也知道,只要使用的是 Debug版本的Flash Player, 右键菜单里就会有“Show Redraw Regions (显示重绘区域)” 这个选项,当此选项打开的时候,我们就能清楚地看到此刻场景内被重绘的区域。
那么什么情况下会发生重绘呢??
1、最常见的是情况就是舞台上的可视组件在形状、位置、状态(alpha, scale...)发生改变的时候会触发Flash Player 的重绘。
2、当一个DisplayObject的层级(ChildIndex)发生改变的时候也会导致重绘。
3、当你将一个Sprite / MovieClip 的buttonMode 设置为 true 的时候,即便是单帧动画,重绘会在MouseEvent.MOUSE_DOWN的时候触发。又或者你对DisplayObject设置层级的时候,即便 DisplayObject的层级没有发生改变,也会使得 Flash Player对此显示对象进行重绘。
既然重绘是为了能够将显示内容进行更新,那么一个Flash应用程序就不可避免的要触发重绘。而重绘却是性能消耗的主要根源,一个有经验的 Flash开发人员写出的Flash应用,其性能可能70% - 90%(甚至更高)是消耗在重绘上,那么提高Flash应用程序的运行效率和减少重绘有着莫大的关系。
要减少重绘,首先我们需要对单位每帧重绘大小这个概念进行量化:重绘的大小应该取决于数量和面积。数量取决(但不是完全取决)于可视范围内的需要更新的显 示对象的数量,假设场景上有两个闪烁的小圆点并且宽和高都为20,那么重绘的数量为3,而重绘的总面积就为: 20 * 20 * 3 = 1200 (平方像素)。

简单的看看上面的公式是不是觉得重绘面积的计算很容易呢?那么继续估计下下面这个情况的重绘面积是多少:
如果你计算的结果是: 20 * 20 * 6 = 2400 (平方像素),那么恭喜你,答错了...

根据上面的介绍,重绘的大小理应就是重绘的数量 * 单个区域的面积,可是为什么说这个情况就错呢?让我们看看问题究竟出在什么地方:
让人觉得奇怪的地方出现了,重绘区域的数量依旧是3,而面积却增大了不少,按照图上给出的坐标信息,我们不难算出,总重绘面积的大小为:
20 * (70 - 20 + 20) * 3 = 4200 (平方像素),比起预先估算的 2400 (平方像素)整整大了 75%

或许从这个地方开始,大家就开始觉得困惑了。的确,Flash Player的重绘面积并没有按照我们之前的设想那样来计算,但是依旧能找到一些规律,仔细来看以下几种况:
如果你够细心,应该不难看出每次 Flash Player 重绘的区域不会超过3个,即便舞台上有多于三个的显示对象需要被重绘,Flash Player 会将其中的两个或者多个集合(根据位置来判断)在一起,然后重绘在一个大区域里面,至此,我们暂时可以将上面两个重绘法则命名为三区域法则和就近合并法 则,通过总结出来的这两个法则,我们就能更加容易地理解Flash Player 重绘的机制,以及解释在日常调试中遇到的一些重绘现象了。比如QQ牧场里几个靠得比较近得小动物被放在一个区域里面重绘,而有些动物则不然,被单独重绘。
当我们了解了重绘机制后,那么接下来就应该进一步去了解如何避免多余的重绘,下面列举的方法可能大部分都是被大家所熟悉的。
1、当一个带有动画效果的DisplayObject在不显示的时候,不仅仅是将其 visible 属性设置为 false, 因为重绘依旧会进行,这里你可以选择暂停掉动画,又或者利用removeChild(displayObject) 直接将此对象移除出显示列表。
2、不出现在可视范围内外观变化的显示对象其实是不会发生重绘的,这点相信是Flash本身做了优化,也就是说我的 Stage.stageWidth 和 Stage.stageHeight 都为200的情况下,一个处在舞台上的变化的显示物体,坐标为(200, 200) 宽高都为10,此时Flash Player重绘内容并不会包括此对象,新版本的Flash Player 甚至在浏览器窗口最小化的时候会关闭掉所有的重绘,这个时候你往往会发现CPU占用率骤降,但是应用程序依旧在运行。
3、在设置DisplayObject的层级的时候请先做一个判断:

 if (myContainer.getChildIndex(myChild) != 0){     

 myContainer.setChildIndex(myChild, 0);

}

 

运气好的话,这个判断最高能带来200%以上的效率提升。
4、当你的Sprite / MovieClip 设置 cacheAsBitmap = true 这个属性的时候,当此显示对象内很小的一个区域(甚至是被遮盖着的物体)发生变化,会导致整个Sprite / MovieClip重绘。
5、尽量确保活动的显示内容在非可见区域被暂停活动或者干脆直接移除出显示列表,这里提到的不可视区域不仅仅是舞台外不可见的,还包括舞台内被其他物体遮盖住的显示对象。

正如之前提到的,重绘是Flash Player性能消耗的主要大户,所以去优化减小重绘区域面积,减少不必要的重绘操作次数,往往能够带来比较大的性能优化回报。

分享到:
评论

相关推荐

    flash绘画教程2

    8. **学习资源**:除了这个“Flash绘画教程2”,还有很多其他的学习资源可以帮助你深入理解和提升Flash技能,如官方文档、在线课程、教程视频等。 总之,通过“Flash绘画教程2”,你不仅可以学习到如何用基本工具...

    flash俄罗斯方块源代码

    首先,让我们了解Flash这一强大的矢量图形和动画创作工具。Flash以其交互性强、兼容性好、易于学习的特点,一度成为网页游戏开发的首选平台。在这款Flash俄罗斯方块游戏中,开发者充分利用了ActionScript,这是Flash...

    flash弹出式下拉菜单

    首先,我们要了解Flash中的基本概念。Flash文件(FLA)是Adobe Flash Professional的源文件格式,包含所有图形、动画、脚本和资源。在本例中,"mb80_com_31.fla"很可能就是这个弹出菜单的源代码文件,通过打开它,...

    STM32F407 EMWIN GUI实战:WM重绘背景【支持STM32F40X系列单片机】

    这一实战教程旨在帮助开发者理解和掌握如何在STM32F407微控制器上实现EMWIN图形用户界面(GUI)的高效重绘功能,提升用户体验。 EMWIN是德国Segger公司开发的一款轻量级、高效的嵌入式GUI库,特别适合资源有限的微...

    C++flash透明源码

    在IT领域,C++是一种强大的、面向对象的编程...通过阅读和理解这些源码,你可以深入学习如何在C++中集成和控制Flash,以及如何实现透明效果。这对于想要将Flash内容嵌入到桌面应用中的开发者来说,是一份宝贵的资源。

    FLASH 3D 旋转代码

    如减少不必要的重绘,使用缓存AsBitmap,以及利用位图遮罩等技术。 8. **兼容性和浏览器支持**:尽管Stage3D提供了强大的3D功能,但需要注意的是,它仅适用于支持Flash Player的平台,随着HTML5的发展,Flash的使用...

    vc播放flash(支持透明flash窗口穿透)

    在本文中,我们将深入探讨如何使用VC++ 2010来...通过对提供的源代码进行分析和理解,开发者可以学习到Windows GUI编程中的许多实用技巧和概念,这对于任何希望深入了解Windows应用程序开发的人来说都是宝贵的资源。

    FlashWeb框架

    《深入理解FlashWeb框架》 在当今互联网技术日新月异的时代,Flash作为一种曾经风靡一时的交互式内容创作工具,尽管在HTML5的冲击下逐渐淡出主流,但其在Web开发领域的历史地位不可忽视。FlashWeb框架,便是基于...

    优化Flash性能 Optimizing Flash performance

    使用`cacheAsBitmap`属性可以缓存复杂的矢量图形,减少不必要的重绘。同时,利用位图遮罩(bitmap masking)代替矢量遮罩也能提高性能。 3. **代码优化**:编写高效的动作脚本代码至关重要。避免使用循环内的函数...

    flash图表组件

    开发者可以定义JavaScript函数来调用Flash内部的方法,传递数据并触发图表的重绘。 在压缩包中的"js+flash曲线图"文件可能包含以下内容:JavaScript库、Flash图表组件的SWF文件、以及示例代码。JavaScript库可能...

    Flash烟雾特效动画.rar

    通过深入理解并分析这个项目,我们可以学习到以下几个重要的Flash动画制作和设计知识点: 1. **ActionScript 2.0编程**:Flash8主要使用的脚本语言是ActionScript 2.0,了解并熟练掌握AS2的基础语法和对象模型是...

    Flash数字时钟 数字LED时间显示动画.rar

    《深入理解Flash数字时钟与数字LED时间显示动画》 Flash技术在过去的互联网时代中扮演了重要的角色,尤其是在网页互动元素的设计上。本资源“Flash数字时钟 数字LED时间显示动画.rar”就是一个很好的实例,它展示了...

    圆环旋转动画,flash 脚本源码.rar

    本资源“圆环旋转动画,flash 脚本源码.rar”提供了实现圆环旋转效果的Flash源代码,这对于开发者深入理解Flash的动作脚本(ActionScript)以及动画制作原理具有很高的学习价值。 ActionScript是Flash中的编程语言...

    flash3dtunnel_flash源码_

    6. **性能优化**:由于Flash的3D渲染相对消耗资源,源码可能包含一些优化策略,如减少不必要的重绘、使用位图缓存或者使用DisplayObject的`cacheAsBitmap`属性来提高性能。 学习并理解这个源码,不仅可以帮助我们...

    flash火焰效果源文件

    4. **动画循环**:持续更新粒子状态并重绘舞台,使火焰效果看起来连续且动态。 为了学习这个源文件,你需要有一定的AS3基础,理解面向对象编程和基本的动画原理。通过分析源代码,你可以了解到如何使用AS3创建复杂...

    flash鼠标水波flash鼠标水波

    分析和学习这个示例,可以帮助开发者深入理解如何在实际项目中创建类似的交互式特效。 总的来说,Flash鼠标水波特效是结合了图形设计、物理模拟和编程技巧的一个综合性项目。虽然现在Flash已逐渐被HTML5等技术取代...

    Flash 魔方.zip

    本篇文章将聚焦于“Flash魔方”这一主题,通过分析其核心技术和实现方式,帮助读者深入理解Flash在3D旋转动画和程序控制上的技术魅力。 首先,我们要了解“Flash魔方”是一个基于Flash平台的互动应用,它利用了...

    Flash加XML的饼图,超漂亮

    例如,增加、删除或修改XML节点,Flash程序会自动根据新数据重绘饼图,无需重新编译或刷新整个应用。 6. **交互性**:Flash的AS2.0允许开发交互式的饼图。用户可能能够点击饼图的某个部分查看详细信息,或者通过...

    flash作业 经典动画在现

    【标题】:“Flash作业 经典动画再现” ...这个作业项目不仅仅是技术上的实践,也是对创意和艺术表达的锻炼,通过复刻游戏中的动画,学生可以深入理解动画设计背后的逻辑,提高自己的动画制作水平。

    flappy bird动画Flash版

    本篇文章将深入探讨如何使用Flash制作一个Flappy Bird的动画版本。 一、Flash基础介绍 Flash是一款由Adobe公司开发的多媒体创作工具,主要用于创建矢量图形、动画、交互式项目。其强大的图形编辑功能和ActionScript...

Global site tag (gtag.js) - Google Analytics