AS3 - What are the different methods of rendering animation on the screen? - actionscript-3

I'm a beginner to AS3 and programming in general, but have learned enough that I want to now start learning how to render animations on the screen. These are the methods that I know of from two days of "researching" on google.
I'm not in a situation where I could afford to take courses from an educational institution, so my only means of learning are through online sources.
Update an objects x or y positions in a loop on every frame. Very basic. Of course any kind of advanced animation (say, showing a character running) is not possible with this method alone.
Using Flash and creating animation on a movie clip's timeline and, combined with moving the position of the object we can achieve some proper animation this way. However I cannot afford Flash, so this is not an option available to me. It also doesn't seem to be a popular option among more experienced programmers either (I think, due to having poor performance when lots of objects animating on the screen?)
Using a sprite sheet and then blitting the relevant image from the sprite sheet onto the screen.
Is there any other way to put an image from a sprite sheet onto the screen other than blitting?
And what other methods of rendering animation are available?
Some online websites claim that blitting is all I'll ever need, but I want to know all the options available so I could choose the most appropriate one for any given situation.
Any help would be appreciated :)

Another option for blitting is Stage3D. Take a look at Starling for 2D animations.

Blitting would be my best opinion. The only other thing I can think of is manually taking the images from the sprite sheet and putting it into each frame of an animation.
To render animation, you can create a frame in a MovieClip and convert it into a MovieClip and name the frame 'running'. Then you need to create an Enter Frame event where the MovieClip's instance name is 'Guy' and in the code on the function write 'Guy.x += 5;' to make your MovieClip go 5 pixels to the right every frame and also in the function write "Guy.gotoAndStop('running');"

Use TweenMax engine for better animation purposes. Easy coding, more Animation!!

Related

8-direction Figure Animation with Arrow Keys

I've been charged with designing a demo for an isometric video game in ActionScript 3. I have the bitmap spritesheets that show the avatar I'm using standing and walking in each direction. The walking animation is made up of three frames.
My problem, though, is that I need to figure out how to make use of them. I'm not familiar with animation in Flash, and I need input on how to gotoAndPlay() the walking frames for the right direction. I don't think isolating the necessary DIRECTION is going to be a challenge, so much as starting it and keeping it going while the arrow keys are down.
My current code is basically comprised of keyboard handlers for KEY_UP and KEY_DOWN, each containing a switch-case statement that changes the Avatar.currentDirection property. The handler continues to fire while the keys are down, but I need to add animation to the game.
I've seen some examples where they simply embed the animations into an SWF, propagate an array of the various walking stages, and alternate between them using an EnterFrame event handler, but this seems really clunky. I guess in the end I'm trying to make use of Adobe Animate, but I don't know how you're supposed to do that.
Ops, fortunately i'm working with sprites (atlas animations) right now!.
if i'm right, you just needs to use them for playing some animation with functionality.
if you have a well sized sprite which is tiled with isometric slots like it:
(9 frames sized 64x128)
your work is very easy, only create new movieclip from library, inside it, create a borderless rectangle (which is our mask) in a layer (named mask) then import image to the project, and its better to disabling smooth ability from image properties,
now, inside your movieclip, you have to create new layer (under the mask layer) and add your sprite image for each frame, and change its position:
at last, enable masking for mask layer, then its time of coding,
name your animation queries (like image 3) and for loopable animations, insert gotoAndPlay('anim_name') inside last frame. i hope you are familiar with controling movieclip animations which is basic consept of any flash project.
now to extend it for 8 directions support, you just need to play and switch between dirctions according single and multi keypreses,

Box2D world.step() delay at first 2 runs

I'm programming a game using ActionScript 3.0 and included Box2D classes for its physics. It's a maze/labyrinth game having a lot of walls and a ball inside.
In my main fla when I call the maze.create(), the maze is created (visually and physically) and it will dispatch an event so I know when it's done working and then I call my frameHandler which calls another function from my maze class every frame and the big delay accrues exactly at world.step() in it. BUT THE THING IS that it lags only the first two times this function runs!!!
The reason I notice this lag, is that I've got another object starting to move according to mouse position in the same frame handler.
The reason I'm sure the world.step() is causing it, is that everything works fine when I dont call it.
I've seen many codes using Box2d, some had more objects than i have and I know that I've created my b2World and all the objects correctly, similar to all the Box2d tutorials and stuff BUT THEY DONT LAG AT ALL. Its just mine lagging and all!!
Do you have any Idea or similar experience?
Do you have any suggestion in general how to deal with heavy functions?
PLEEEEASE +.-
A maze will have a lot of fixtures in close proximity making a very dense dynamic tree (the method Box2D uses to optimize collision checks). There is unlikely to be any way around this. Perhaps you could just call Step a few times after adding the static walls, but before you add the dynamic ball bodies, and consider it part of the loading process. At least the lagging movements will not be visible to the player.

Customize or create Starling animations, movements and Transitions

Since I don't know english very well, I'm not able to find clear examples and/or tutorials for what I'm trying to do.
So the (maybe stupid) question is:
How can I strongly customize tweens using Starling framework and make my Sprites(or MovieClips) following a line, curve or create every other non-linear movement that doesn't exist in Transition Class?
I have no problem with Basic Starling animation. So it should be a good start point.
Thanks in advance for examples, resources or suggestions.
PS. I already visit the "Starling Wiki" page about custom Transitions but, as a Beginner(almost Intermediate) coder I wasn't able to completely understand it.
I know there are many online resources about AS3/Starling/Flash/Nape/Box2D but it's not easy for a non-english Beginner programmer to understand them.
You can simple move Starling's movieClip by set .x .y .rotation
Since now, I haven't heard of scripted transition to make predefined non linear movement. As you said, you can move object from one position to another, but it won't happen in a curved line.
What I've done in the past is to predefine the path of the movement, as I needed exactly the same weird path. I did a path tween in Flash, then used one simple function to loop through all frames (using gotoAndStop()) and getting x and y property of the object, storing them in an array. This was done when initializing. Later on I could start animation on all my weird paths whenever I wanted, using onUpdate method of tween, and passing positions from the array I've populated in the beginning.
This of course is good if you have very weird paths. If you want very little curves, you could try to do a mathematical equation. Tween classes have an update function, which will be called on each frame. So on each frame you could do some calculations and modify the parameters. For example if you tween x and y properties, you could use the update function to add a random number to those values. Of course this will make very uncontrolled movement, I'm just giving an example.
The best solution I could think of, speaking of complexity/result ratio - to use Greensock's TweenMax (look at the second example) - it has a built in bezier tweening. This means it could move from point A to point B within a bezier curve. I think this will be a good solution for your problem :)

coloring multiple frames in Flash Professional CC

I'm brand new to Flash Professional and wanted to make a short 10 second clip. Instead of looking into using tweens and symbols (I wish I did) I used Flash Professional as a flip book, illustrating sketches for each keyframe.
I'm now in the colouring process and want to know if there is a way to colour an object (I've drawn with the brush tool) throughout multiple frames. is this even possible?
I understand there are some short cuts to repetitive tasks using ActionScript. But, once again I am brand new to Flash Professional and haven't tried anything in the ActionScript. I do however have a very basic knowledge of HTML coding and some javaScript if it helps at all…
If there is an alternate solution like exporting the file to another Adobe program that has a "colouring multiple frames" feature, that would be great too.
Sorry to say, to do that, you WILL have to work with symbols. However, this is an easy fix.
Select the object you want to color, click Modify--> Convert to Symbol. Give it a good name, and set it to MovieClip. Click OK.
Now, in the Library panel, double-click the icon next to your symbol name. Color as you wish.
There are multiple ways to put this on your timeline. You could replace each instance of that drawing with the symbol. Or, better, you could create a new layer with only one keyframe (and regular frames after that to the end of your animation. Place your object on that layer, and then remove all the old versions of that drawing.
NOTE: You will need to be mindful of where in the stack you put layers, as that sets the z-index of everything on that layer.

Working with Graphics in Actionscript

i haven't worked with graphics until now.. so I have not much ideas about using graphics objects in flash cs6.
I want to move this character depending if the person has pressed a button and stop his movement once the button is released. I looked up on how to go about this process.. so far one thing that kept coming up was to turn my spritesheet into graphics.. but after that i couldn't really find anything on how to integrate this into actionscript. Plus when I convert an object into graphics it doesn't give me options to assign it a class name. so can somebody give me a good breakdown on what is the purpose of these graphics objects? and how should I go about making a sprite move?
Disregard information concerning sprite sheets. These are used as a completely different method of graphics rendering that I'm not going to cover here; for more advanced, high performance applications and games.
When you say Graphics, I am assuming that you mean you've created some drawings that you've converted to a Graphic like this:
These types of objects are used purely for timeline animation. What you want to use here is the type MovieClip. When you use this type, you'll be able to give the object a class name like you mentioned:
After doing this, you'll be able to refer to that library symbol in ActionScript like this:
var gr:MyGraphic = new MyGraphic();
addChild(gr);