Flash/Actionscript Tween 不平滑
我使用 Flash - Actionscript 3.0 - 从 XML 文件加载图像路径(以及最终的图像),然后使用 Tweener 类对补间动画进行动画处理,使其在标题上滚动。
问题:滚动不平滑,相当不稳定,我不明白为什么。
我在网上看到启用位图平滑有帮助,但我不知道如何处理从 XML 加载的图像。
如果您需要代码,我可以发布它,但它相当长,所以我想如果有人能想到这个不稳定的补间的一些常见原因,我最初不会。您可以在我们的其中一个页面查看卷轴,例如...
http://community.greencupboards.com/2011/07/15/lions-fighting-extinction/
谢谢!
编辑:请求代码
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import caurina.transitions.*
var imageLoader:Loader;
var currentLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
var xmlLoader2:URLLoader = new URLLoader();
var k:int;
var iterator:int = 0;
var imageCount:int;
//********** Begin editable region *************///
//---------------------------------------------
//dont change startX unless you are sure ->
//start coordinates are affected by more than this variable
var startX:Number = 690;
//change endX to extend the scroll length
var endX:Number = 20;
//change scrollSpeed to change speed of images
var scrollSpeed:Number = 32;
//---------------------------------------------
//********** End editable region **************///
var ratio:Number = scrollSpeed/(startX-endX);
var rate:Number = (startX-endX)/scrollSpeed;
//align tabs under heading
setChildIndex(headertab,1);
// ----- Program Main ----- //
initializeMouseEvents();
Main_Begin();
//@ initializes mouse events for url navigation
function initializeMouseEvents():void
{
Mouse.cursor = flash.ui.MouseCursor.BUTTON
headertab.addEventListener(MouseEvent.ROLL_OVER, expandTab);
headertab.addEventListener(MouseEvent.ROLL_OUT, shrinkTab);
function expandTab(e:MouseEvent):void
{
Tweener.addTween(headertab, {y:5, time:.1, delay:0, transition:"linear"});
}
function shrinkTab(e:MouseEvent):void
{
Tweener.addTween(headertab, {y:0, time:.1, delay:0, transition:"linear"});
}
stage.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
navigateToURL(new URLRequest("http://www.greencupboards.com"), "_blank");
}
}
function Main_Begin():void
{
xmlLoader.load(new URLRequest("http://www.greencupboards.com/media/community/scroll/images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, loadInitialXml);
function loadInitialXml(event:Event):void
{
xml = XML(event.target.data);
xmlList = xml.children();
imageCount = xmlList.length();
for(var j:int = 1; j < 10; j++)
{
k = imageCount - j;
imageLoader = new Loader();
imageLoader.name = "loader"+j;
imageLoader.load(new URLRequest(xmlList[k].source));
imageLoader.x = endX + 60*(j+1) + 10;
imageLoader.y = 37;
//imageLoader.addEventListener(MouseEvent.ROLL_OVER, pauseAll);
//imageLoader.addEventListener(MouseEvent.ROLL_OUT, resumeAll);
addChild(imageLoader);
setChildIndex(imageLoader,1);
//Tweener.addTween(imageLoader, {alpha:1, time:1.4, delay:0, transition:"linear"});
Tweener.addTween(imageLoader, {x:endX, time:rate*(j+1)/7.2, delay:0, transition:"linear"});
Tweener.addTween(imageLoader, {alpha:0, time:2, delay:(rate*(j+1)/7.5)-4, transition:"linear"});
imageLoader.unload();
}
//first scrolling images to fade in
loadXML();
//loop of scrolling images infinetely
function loop():void
{
loadXML();
}
setInterval(loop,( ((imageCount*60))/rate)*1000 );
//imageLoader.name = xmlList[i].attribute("source");
}
}
function loadXML()
{
xmlLoader2.load(new URLRequest("http://www.greencupboards.com/media/community/scroll/images.xml"));
xmlLoader2.addEventListener(Event.COMPLETE, xmlLoaded);
function xmlLoaded(event:Event):void
{
xml = XML(event.target.data);
xmlList = xml.children();
imageCount = xmlList.length();
for(var i:int = 0; i < xmlList.length(); i++)
{
imageLoader = new Loader();
imageLoader.name = "loader"+i;
imageLoader.load(new URLRequest(xmlList[i].source));
imageLoader.x = startX + 60*i;
imageLoader.y = 37;
imageLoader.alpha = -1;
//imageLoader.addEventListener(MouseEvent.ROLL_OVER, pauseAll);
//imageLoader.addEventListener(MouseEvent.ROLL_OUT, resumeAll);
addChild(imageLoader);
setChildIndex(imageLoader,1);
makeTween(imageLoader);
iterator++;
}
iterator = 0;
//imageLoader.name = xmlList[i].attribute("source");
}
}
function resumeAll(event:Event):void
{
Tweener.resumeAllTweens();
}
function pauseAll(event:Event):void
{
Tweener.pauseAllTweens();
}
function makeTween(obj:Loader):void
{
Tweener.addTween(obj, {alpha:1, time:2, delay:60*ratio*iterator+3.3, transition:"linear"});
Tweener.addTween(obj, {x:endX, time:(scrollSpeed + 60*ratio*iterator), delay:0, transition:"linear", onComplete:unloadObject(obj)});
}
function unloadObject(obj:Object):void
{
//iterator - 2 simply creates a big enough delay. I think the scroll gets ahead of fadeout so it needs this buffer to run many times
Tweener.addTween(obj, {alpha:0, time:2, delay:(scrollSpeed + 60*ratio*(iterator-2)), transition:"linear"});
obj.unload();
}
I am using Flash - Actionscript 3.0 - to load image paths (and ultimately the images) from an XML file and then I am using the Tweener class to animate the tweens to scroll across the header.
The problem: The scroll is not smooth, its quite choppy and I can't figure out why.
I've read around the web that enabling bitmap smoothing helps but I don't know how to do that with images loaded from XML.
If you need the code I can post it, but its rather long so I thought I wouldn't initially if anyone could think of some common reasons for this choppy tween. You can check out the scroll at one of our pages such as...
http://community.greencupboards.com/2011/07/15/lions-fighting-extinction/
Thanks!
EDIT: Code Requested
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import caurina.transitions.*
var imageLoader:Loader;
var currentLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
var xmlLoader2:URLLoader = new URLLoader();
var k:int;
var iterator:int = 0;
var imageCount:int;
//********** Begin editable region *************///
//---------------------------------------------
//dont change startX unless you are sure ->
//start coordinates are affected by more than this variable
var startX:Number = 690;
//change endX to extend the scroll length
var endX:Number = 20;
//change scrollSpeed to change speed of images
var scrollSpeed:Number = 32;
//---------------------------------------------
//********** End editable region **************///
var ratio:Number = scrollSpeed/(startX-endX);
var rate:Number = (startX-endX)/scrollSpeed;
//align tabs under heading
setChildIndex(headertab,1);
// ----- Program Main ----- //
initializeMouseEvents();
Main_Begin();
//@ initializes mouse events for url navigation
function initializeMouseEvents():void
{
Mouse.cursor = flash.ui.MouseCursor.BUTTON
headertab.addEventListener(MouseEvent.ROLL_OVER, expandTab);
headertab.addEventListener(MouseEvent.ROLL_OUT, shrinkTab);
function expandTab(e:MouseEvent):void
{
Tweener.addTween(headertab, {y:5, time:.1, delay:0, transition:"linear"});
}
function shrinkTab(e:MouseEvent):void
{
Tweener.addTween(headertab, {y:0, time:.1, delay:0, transition:"linear"});
}
stage.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
navigateToURL(new URLRequest("http://www.greencupboards.com"), "_blank");
}
}
function Main_Begin():void
{
xmlLoader.load(new URLRequest("http://www.greencupboards.com/media/community/scroll/images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, loadInitialXml);
function loadInitialXml(event:Event):void
{
xml = XML(event.target.data);
xmlList = xml.children();
imageCount = xmlList.length();
for(var j:int = 1; j < 10; j++)
{
k = imageCount - j;
imageLoader = new Loader();
imageLoader.name = "loader"+j;
imageLoader.load(new URLRequest(xmlList[k].source));
imageLoader.x = endX + 60*(j+1) + 10;
imageLoader.y = 37;
//imageLoader.addEventListener(MouseEvent.ROLL_OVER, pauseAll);
//imageLoader.addEventListener(MouseEvent.ROLL_OUT, resumeAll);
addChild(imageLoader);
setChildIndex(imageLoader,1);
//Tweener.addTween(imageLoader, {alpha:1, time:1.4, delay:0, transition:"linear"});
Tweener.addTween(imageLoader, {x:endX, time:rate*(j+1)/7.2, delay:0, transition:"linear"});
Tweener.addTween(imageLoader, {alpha:0, time:2, delay:(rate*(j+1)/7.5)-4, transition:"linear"});
imageLoader.unload();
}
//first scrolling images to fade in
loadXML();
//loop of scrolling images infinetely
function loop():void
{
loadXML();
}
setInterval(loop,( ((imageCount*60))/rate)*1000 );
//imageLoader.name = xmlList[i].attribute("source");
}
}
function loadXML()
{
xmlLoader2.load(new URLRequest("http://www.greencupboards.com/media/community/scroll/images.xml"));
xmlLoader2.addEventListener(Event.COMPLETE, xmlLoaded);
function xmlLoaded(event:Event):void
{
xml = XML(event.target.data);
xmlList = xml.children();
imageCount = xmlList.length();
for(var i:int = 0; i < xmlList.length(); i++)
{
imageLoader = new Loader();
imageLoader.name = "loader"+i;
imageLoader.load(new URLRequest(xmlList[i].source));
imageLoader.x = startX + 60*i;
imageLoader.y = 37;
imageLoader.alpha = -1;
//imageLoader.addEventListener(MouseEvent.ROLL_OVER, pauseAll);
//imageLoader.addEventListener(MouseEvent.ROLL_OUT, resumeAll);
addChild(imageLoader);
setChildIndex(imageLoader,1);
makeTween(imageLoader);
iterator++;
}
iterator = 0;
//imageLoader.name = xmlList[i].attribute("source");
}
}
function resumeAll(event:Event):void
{
Tweener.resumeAllTweens();
}
function pauseAll(event:Event):void
{
Tweener.pauseAllTweens();
}
function makeTween(obj:Loader):void
{
Tweener.addTween(obj, {alpha:1, time:2, delay:60*ratio*iterator+3.3, transition:"linear"});
Tweener.addTween(obj, {x:endX, time:(scrollSpeed + 60*ratio*iterator), delay:0, transition:"linear", onComplete:unloadObject(obj)});
}
function unloadObject(obj:Object):void
{
//iterator - 2 simply creates a big enough delay. I think the scroll gets ahead of fadeout so it needs this buffer to run many times
Tweener.addTween(obj, {alpha:0, time:2, delay:(scrollSpeed + 60*ratio*(iterator-2)), transition:"linear"});
obj.unload();
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
有时,制作动画的更好方法是使用 ENTER_FRAME 事件手动制作动画。
我的建议:摆脱 Tweener 并编写自己的动画循环。
和一个运行示例: http://wonderfl.net/c/nhhM
干杯
sometimes the better way to do animations is animating by hand using the ENTER_FRAME event.
my advice: get rid of the Tweener and write your own animation-loop.
and a running example: http://wonderfl.net/c/nhhM
cheers
更新
不要将加载程序直接添加到阶段。 (从我的角度来看,这是不好的做法)
而是这样做:
ORIGINAL
这是平滑位图的方法:
动画断断续续的原因是它太慢了。
提高 Flash 影片的 FPS。并提高动画速度。
UPDATE
Do not add loader directrly to stage. ( bad practice from my point of view )
instead do it like this:
ORIGINAL
This is how you can smooth the bitmap:
The reason you animation is choppy, is that it is to slow.
Increase the FPS of your flash movie. And increase speed of animation.
如果您想完成编程动画,我建议使用 TweenLite 库 (http://www.greensock.com/tweenlite/)。我将在下面编写一个小示例,向您展示动画是多么简单。
If you want programmatic animation done, I would recommend to use the TweenLite-library (http://www.greensock.com/tweenlite/). I will code a small example below to show you how easy the animation can be.