如何使用Flex获得平滑的文本爬网?

时间:2010-08-06 15:14:15

标签: flex actionscript

我正在开发一个独立的Flash应用程序(使用Flex 3 / ActionScript 3编写),它具有文本爬行功能,就像您在观看有线新闻频道时可能在电视底部看到的那样;它是一个长而窄的框,文本从右向左移动。

我通过创建Label元素,用文本填充它,然后使用mx:Move对象移动它来实现它,使用Linear.easeNone缓动函数。它有效,但它有很大的改进空间。它看起来有点生涩,往往会有相当多的“撕裂”(文本的上半部分和下半部分有时会失去同步)。

我尝试在问题上投掷数学,以使爬行的移动速率与显示器的刷新率同步,但这是一个半身像。我发现应用程序的帧速率跳得太厉害了。 “优化”爬行在看起来如丝般光滑和癫痫之间有所不同。

还有其他人会推荐我试着让这件事情顺利吗?你尝试过一些替代设计吗?

<小时/> 编辑:某些背景信息:抓取是数字标牌应用程序的一部分(从独立的Flash投影机播放 - 无需网络浏览器),可以在屏幕上的其他位置执行操作,包括视频播放和渲染文本和图像。在视频播放过程中它肯定会变得更加黯淡,但它永远不会像我希望的那样平滑。

5 个答案:

答案 0 :(得分:6)

这个问题有两个可能的解决方案,但两者都有警告,第一个是因为你使用Flex和一个独立的投影仪,第二个是因为它是一个缓解器,而不是一个完整的解决方案。


硬件加速

发布文件时,您可以尝试让Flash利用硬件加速来缓解您遇到的导致撕裂的垂直刷新问题。遗憾的是,Flex Builder 3无法在SWF(投影仪)级别启用此设置( Link to bug )。这还有待解决,并已从4.0推送到4.1到4.x ......如果解析它,它可能是Flash Builder 4的项目设置中的编译器参数。

您可以通过将投影机作为标准SWF输出并将其嵌入到wmode设置为“direct”或“gpu”的HTML文档中来确定此解决方案是否适合您。可悲的是,如果它(它应该),你现在无论如何都不能使用它。如果你有Flash Builder 4,某些项目能够在FB4和Flash Professional CS5之间进行往返,虽然我不确定它的标准是什么(我当前的AIR项目所有项目修改菜单选项都显示为灰色)。如果您确实设法将项目导入Flash,则可以在项目的“发布设置”中启用硬件加速(文件 - >发布设置 - > Flash选项卡 - > CS5中的硬件加速选项。)

此方法几乎是您的问题的某种解决方案,但它有两个问题,一个已在上面突出显示,和(对于发布到网络的人),通过在网页上使用直接或GPU渲染,您无法分层flash上​​的任何DOM元素。

  

直接:此模式尝试使用最快的路径进行屏幕显示,或者直接路径。在大多数情况下,它会忽略浏览器想要做的事情,例如重叠HTML菜单或此类工作。此模式的典型用例是视频播放。在Windows上,此模式在Vista上使用DirectDraw或Direct3D,在OSX和Linux上使用OpenGL。使用此模式时,保真度不应受到影响。

     

gpu :这是使用图形卡的某些功能完全成熟的合成(+一些附加功能)。可以想象它与OSX和Vista为其桌面管理器所做的类似,Windows的内容(用flash语言表示影片剪辑)仍然使用软件进行渲染,但结果是使用硬件进行合成。如果可能,我们还会在卡片中本地缩放视频。我们的软件光栅化器的越来越多部分可能会在接下来的几个Flash Player版本中转移到GPU,这只是一个开始。在Windows上,此模式使用Direct3D,在OSX和Linux上我们使用OpenGL。

** Source *

Direct 是这种情况的理想选择,因为您实际上可以通过“gpu”降低性能,以及从显卡到显卡的视觉差异。

降低帧率

只要您将帧速率保持在大约2FPS或以上(尽管我建议最低5FPS),Flash播放器将继续以原始刷新率播放视频,而与项目的其余部分无关。您不希望在此示例中运行该低电平,但您可以降低整个场景的帧速率而不会影响视频性能。您的帧率越接近屏幕刷新率,您实际创建撕裂效果就越容易,除非您能够完全同步显示器的刷新率,如果没有上述内容,您可能无法做到这一点...... 硬件加速度


只要能够水平移动对象,Flash Player中就存在此问题。会发生什么是Flash在屏幕刷新的同时更新正在运行的动画的缓冲快照。如果缓存的快照在屏幕刷新过程中发生变化,那么您将获得一次破解。这就是降低帧率实际上减少了撕裂量的原因,你不经常刷新缓冲区。

答案 1 :(得分:3)

正如@Tegeril所说,使用Flex是其中一个原因。 Flex是一个非常繁重的框架,它在幕后做了很多事情。如果您熟悉组件的生命周期(尤其是使属性无效,使显示列表无效等)。

作为一些可能提高绩效的小事:

  • 尝试保留简单的显示列表。如果你知道应用程序将始终以一种尺寸显示,那么flex不会浪费时间遍历显示列表/树到顶部和背面进行测量。另外,尝试使用Canvas。我知道,它不是很干净,但由于它使用的是绝对值而且没有与'父母'一起检查,它应该比其他容器(如HBox,VBox等)更快。
  • 尝试以完整尺寸显示视频(确保编码的视频尺寸正确,以便在调整视频大小时有任何CPU周期

好的,这是Flex的东西。

阅读sencular's article on Asynchronous ActionScript Execution可能非常方便,它解释了Flash Player如何处理更新和渲染。 async frames http://www.senocular.com/flash/tutorials/asyncoperations/images/general_frame_division.png

  

框架都执行ActionScript并渲染屏幕

async frames streched http://www.senocular.com/flash/tutorials/asyncoperations/images/long_actionscript_frame.png

  

ActionScript需要很长时间才能完成延迟渲染

我认为这种混蛋与此有关。另外,我猜你也许 得到平稳运动的瞬间然后突然停止,时不时地,何时 Flash Player抓住它的呼吸(垃圾收集器清理)

Victor Drâmbă article on “Multithreading” in Actionscript也可能 很有用。

Soo,回顾一下:

  • 使用Profiler或其他东西,看看Flex框架是否会让您失望,或者“瓶颈”是
  • 尽可能多地改进,然后检查Flash Player是如何处理所有actionscript('弹性'帧)

如果瓶颈来自Flex框架,最坏的情况是,你 可以尝试最小化遍历显示列表的组件数量, 并为其他事物使用纯动作脚本(如@PatrickS建议,使用TweenLite等)。

如果有帮助,请尝试在开始时预加载数据(获取rss feed和所有内容),当您获得大多数不需要经常“刷新”/加载的重要位时,请显示应用程序。您将使用更多内存,但将有更多的CPU周期来备用其他任务。 此外,如果它的显示对象是“瓶颈”并且有很多,请检查是否可以使用对象池重用它们。

HTH

答案 2 :(得分:0)

TweenMax甚至TweenLite(http://www.greensock.com)可以很好地处理这种工作。你的应用程序在文本滚动时还做了什么?是否有可能其他一些过程在干扰?

答案 3 :(得分:0)

这可能没什么用,但您是否考虑过将抓取文本放入html DOM并使用CSS转换来抓取文本。显然存在IE问题,但它应该在IE9中得到支持,你可以使用javascript作为后备。

这可能看起来很愚蠢,但CSS过渡正在获得硬件加速和插件的独立过程,这意味着你可以在多核机器上获得并行线程。

答案 4 :(得分:0)

您可能会考虑的一件事是使用Timer而不是缓动函数逐步移动标签。这样您就可以利用updateAfterEvent方法来获得更流畅的渲染。这里是来自Chet Haase(Adobe的Flex图形家伙)的文章/视频的链接,该文章/视频解释了使用情况以及带有代码的示例应用程序:

http://graphics-geek.blogspot.com/2010/04/video-event-performance-in-flex.html

希望有所帮助。