从浏览器调整 Flash 对象的大小而不闪烁
我想知道如何实现 TheFWA (thefwa.com) 已经做得很好的原生滚动条效果(我不是 Flex 滚动条的粉丝)。
我找到了这篇文章(http://stackoverflow.com/questions/318675/how-can-i-create-a-flex-application-with-dynamic-height),并实现了该技术,因为我正在调用 JS 函数每次当 Flash 对象改变大小时,都会通过ExternalInterface。这个 JS 函数只是调整保存 flash 对象的 div 的大小,从而创建本机栏。
不幸的是,当我快速调整大小时(例如,从 800 到 1800 高度),Flash 对象只会扭曲几毫秒(就好像它没有改变其大小,而只是被向各个方向拉动)。在这些毫秒之后,一切恢复正常,但整个情况在视觉上确实令人讨厌。
原本我以为这只是一个时序问题,但是经过一堆尝试设置延迟后,效果都是一样的……只是延迟了。
我该如何解决这个问题?我知道这在技术上是可行的。只需看一下 TheFWA,即可了解 Flash 和浏览器如何顺畅地相互通信以使本机滚动条正常工作,而不会出现任何闪烁或错误测量
I was wondering how to achieve the native scrollbar effect which TheFWA (thefwa.com) has managed to do pretty well (I am not a fan of Flex scrollbars).
I found this post (http://stackoverflow.com/questions/318675/how-can-i-create-a-flex-application-with-dynamic-height), and implemented the technique, as I am calling a JS function through ExternalInterface every time, when the flash object changes size. This JS function simply resizes the div which holds the flash object, which creates the native bars.
Unfortunately, when I resize quite rapidly (from 800 to 1800 height, for instance) the flash object simply gets warped for several milliseconds (as if it hasn't changed its size, but simply got pulled in all directions). After these milliseconds, things get back to normal, but the whole situation is really visually annoying.
Originally I thought that it's simply a timing issue, but after a bunch of attempts to set a delay, the effect was the same ... just delayed.
How can I resolve that? I know it's technically possible. Just take a look at TheFWA, and see how smoothly flash and the browser are communicating with each other to make the native scroll bars work, without any flickering, or mismeasurement
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
这是自 Flash Player 10 以来就出现的问题,并且在 FP 11 beta 之前仍然会发生。
当您调整包含 SWF 的 DIV 的大小时,SWF 本身也会调整大小,因此您“要求”播放器重新绘制内容。但问题是,这种重画会产生这种丑陋的闪烁。
解决方法是根本不调整 SWF DIV 的大小,而是调整另一个空 DIV 的大小,这样您就强制浏览器更新滚动条。
此时,当您使用滚动条时,它不会移动 SWF DIV(因为它通常可能是绝对全尺寸 Flash 站点的位置),但您可以创建一个简单的 JS 回调来将滚动值发送到您的应用程序。
这听起来可能需要付出更大的努力,但实际上并不算多,最后您将创建一种更灵活的方式来管理您的应用程序。
您可以在此处检查它的使用 http://www.andrefelipe.com/
源代码位于我的框架 https://github.com/andrefelipe/fabricaframework/blob/master/src/fabrica/external/Browser.as
This is an issue that appeared since Flash Player 10 and is still happening up to FP 11 beta.
When you resize the DIV that contains the SWF, the SWF itself is resized, therefore you "ask" the player to redraw the content. But the thing is that this redraw creates this ugly flicker.
The workaround it to not resize the SWF DIV at all and to resize another empty DIV, so you force the browser to update the scrollbar.
At this point when you use the scrollbar it won't move the SWF DIV (as it is probably often a position absolute full-size flash site) but then you create a simple JS callback to send the scroll values to your application.
It may sound as a much greater effort but it is not much actually, and at the end you will create a more flexible way to manage your application.
You can check that in use here http://www.andrefelipe.com/
And the source code is at my framework https://github.com/andrefelipe/fabricaframework/blob/master/src/fabrica/external/Browser.as
该网站上的 Flash 内容具有固定大小。他们所做的是将 swf 文件放在居中的 div 中。像这样:
div 容器的宽度应该是 Flash 影片的宽度。
如果您想调整 Flash 影片的大小,请查看 swffit
The flash content on that site has fixed size. What they did is to put the swf file in a centered div. Something like this:
The width of the div container should be the width of your flash movie.
If you want to resize the flash movie then take a look at swffit
该网站没有做任何特殊的事情,只是设置应用程序的高度和宽度并将其放在页面上 - 没有发生调整大小。如果您简单地采用相同的技术(指定应用程序的高度),那么您将得到相同的结果。
我错过了什么吗?
That site isn't doing anything special, simply setting the height and width of the application and slapping it on the page - no resize is happening. If you simply employ the same technique (specifying a height for the app) then you will get the same results.
Am I missing something?