I'm using GreenSock's TweenMax to fade in a TLFTextField with a DropShadowFilter applied. The framerate drops to about 8fps when I try to do this. Without the shadow, the transition is a consistent 24fps. I know Flash is redrawing the shadow each frame - is there any way I can avoid this?
cacheAsBitmap seems to have no noticeable effect. I could draw the textfield to a bitmap, but I'd like that to be a last resort. Is there any override for redrawing the shadow? Or perhaps an alternative method?
Any help would be appreciated.
Thanks in advance.
Embed the TextField to fade in into a parent Sprite, cache that sprite as bitmap, and fade the parent in by tweening its alpha. This should make Flash draw the drop shadow only once per entire processing.
var fadeholder:Sprite=new Sprite();
fadeholder.addChild(tf); // your textfield
tf.alpha=1;
// it should have filter applied already
fadeholder.cacheAsBitmap=true;
addChild(fadeholder);
After you do this, initiate tween on fadeholder.alpha, and once it's over, add the textfield to a proper parent ("this", maybe) and remove the obsolete fadeholder from display list.
Related
Hey everyone so I am Using Flash Develop and I have Multiple Move clips added to the stage. Each of course has their own class. Now I have them set up in their class to move across the stage in a Linear motion using a ENTER_FRAME event and coding like so this.x += 10 However these Movie clips each have a frame by frame animation. So I was wondering by adding this.cacheAsBitmap = true; inside the Movie clip objects Class if it would help with the performance or since they have multiple frames if Adobe AIR would have to redraw those frames and cache them as bitmaps hence causing further performance issues. From what Ive read this.cacheAsBitmap = true; will help with performance that way the stage wont have to redraw the movie clip each FPS but has some draw backs like so "You should use cacheAsBitmap only in situation where your vector graphic will remain the same or will have its x or y properties updated."
Any help will be appreciated thanks guys.
You basically got it. cacheAsBitmap won't help (and it will probably hurt) with a frame-by-frame animation.
Using cacheAsBitmap is really only helpful by itself if you are only changing the x,y properties.
Using cacheAsBitmapMatrix (only available in AIR) will let the Flash Player apply transforms (scale, rotation, alpha) with the cached bitmap.
In either case, a frame-by-frame animation is going to force a redraw, which negates the value of both.
As a final note, if you really want to optimize your animation you can try converting it to a sprite sheet.
I am making a game in AS3 for a school project (using the AIR api). I have about a year's worth of experience in AS3, so i would say i'm proficient but not an expert. Anyway, i have never attempted to do sprite animations in AS3 and i'm not quite sure how to approach it.
If i create a list of bitmaps and call addChild() and removeChild() to display each frame of the animation, it would affect the framerate as these functions are not very efficient (i have tried this before and it tanked my framerate if i had too many animations going at once). I have also tried creating a list of BitmapData objects, adding a bitmap to the display list, and then pointing it to a different BitmapData each frame, but this does not seem to work at all.
So what is the best way to do this? In XNA, for example, i would create a sprite class that draws to the screen using a sprite batch, then i would create a list of sprite objects and cycle through them to create the animation. Is there any way to achieve a similar result in actionscript?
First (simple) method: you can just use multi-frame MovieClip for animation. Put an image in each frame, put a MovieClip on the stage and that's all. You can control this animation using play(), stop(), gotoAndPlay(), gotoAndStop(). It will work without much problems for a generic platform game (I did that myself long ago).
Second (advanced) method: use bitmap blitting. For each animation, create a bitmap image that holds each frame of the animation. Use this image as a source for copying pixels into your current animated object. You just need to copy a particular rectangle area inside a source bitmap that corresponds to the current frame.
The actual blitting happens here
destinationBitmapData.copyPixels(sourceBitmapData, areaRectangle, destinationPoint);
Where destinationBitmapData is your "canvas" that you're blitting to; sourceBitmapData is the source image holding all animation frames; areaRectangle is the Rectangle inside the source image defining which area to copy; destinationPoint is left-top coordinate of the copy area in your canvas.
The destination canvas can be just one small object (like your game character that is moving around) or the entire game screen with all objects. I.e. instead of blitting and adding each object separately, you can just have one big canvas and blit any necessary parts directly to it.
That said, there is already a number of various ready-made engines that use blitting and even advanced techniques like 3D acceleration for 2D sprites.
One of them is Starling.
Is it possible to create an application using Kinetic.js where you create a shape, then scale it as you move the mouse around? I couldn't find anything in the Kinetic APIs, so I am mixing in "raw" JQuery. In particular, I use $("canvas").last().mousemove function, but it turns out this is actually very slow.
Here is the JSFiddle.
Any tips on making it faster?
I don't think the Kinetic.js has support for layer.on("mousemove", fn), because it seems to only apply to shapes.
yes. You would do something like this:
$('#container').on('mousemove', function(evt) {
shape.setScale(someValue);
layer.batchDraw();
});
In other words, attach a mousemove listener to the container div element (the one you pass into the Kinetic stage). set the shape scale with the setScale() method. Use batchDraw() instead of draw() so that the draw operation hooks into the KineticJS animation engine for much better performance. Otherwise, if you use draw(), you'll be redrawing the entire layer each time a mousemove event is detected, which could be hundreds of thousands of times per second depending on the browser
I am a noob in flex. I have to animate a hand(upto wrist) for keyboard playing. It has to be done in runtime of the project. For making it more clear, I have saved all the informations in a file about the animation(time, position of fingers etc). How can I animate the fingers(wrist included)? I also need to know how to use a 2D hand with bones in flex.
Thankyou.
You didn't specify the source of the files you want to animate, nor did you specify how you want to animate them.
If you just need tochange the X and Y position of an image you can just change the X and Y position of the image. A tweening library, such as Greensock could help. I think Flex also has a Move effect that you could use.
If you have the animation created as a SWF, then you can embed the SWF /library element in the Flex app and then use it as a MovieClip. From the MovieClip you can use play to start an animation and stop to stop the animation.
If you have the animation as a bunch of different bitmaps (Sometimes called a Sprite Sheet) then you can use a blitting implementation to create your animation. There are plenty of resources out on the web about Blitting in Flex.
I'm doing an animation class in ActionScript 3 and would like to know the most efficient way to do it.
Currently what I do is get an image (sprite sheet) and keep all the frames in an array of Bitmaps, then add each frame as a child and I put setVisible = false except the frame I have to show.
The other way I can think of is to have only one Bitmap added as a child and every time frame has to be changed, I copy the pixels to the Bitmap using copyPixels function.
There is somewhat more efficient than either of these alternatives?
Thanks
Keep all your frames in a vector of BitmapData. Then use a single Bitmap and change it's bitmapData property when you want to change frames.
Copypixels is quite fast.
There's an excellent comparison of rendering methods here at 8bitrocket.com; I would suggest giving it a read.