Using Spring Properties with IK Bones
Constraining Bone Rotation
How can the articulation of a bone or a series of bones be constrained in an IK armature using Adobe Flash CS5?
First you need to create an armature using the Bone tool in Flash CS4 or CS5. Next simply select a single bone and then enable the Constrain option in the JOINT: ROTATION section of the Properties panel. Use the hot text sliders to adjust the amount of minimum and maximum constrain the bone should have.
Create an armature and select one of the bones.
Make sure the Properties panel is visible and then select one of the bones by clicking on it. The Properties panel will update with several options that can be applied to the selected bone.
In the JOINT: ROTATION category, select the Constrain box to activate the Min and Max hot text sliders. Adjust the amount of constraint using the hot text sliders by clicking and dragging horizontally over them. Alternatively you can click to select the text and type in the exact amount. I personally find it easier to drag over the value and visually watch the handle rotate around the joint until it reaches the desired angle (below).
To test the articulation and the bones new constraint, hold down the Shift key and click/drag the bone (holding down Shift will rotate the bone independently).
You can see in the image above how the fore arm, with applied constraints, will not rotate beyond what would be anatomically impossible. I apply constraints to almost every bone when using IK for character animation. In this example where I am animating the hula girl’s arm, I have 3 symbols that make up the arm (upper arm, fore arm, hand). But that means i would only need 2 bones to link them all. Without that 3rd bone for the hand, I can not set any constraints for the hand symbol itself. This is why you will notice a red dot at the end of each limb. This red dot is a circle converted to a symbol. I place it just beyond the hand so that I can drag a 3rd bone to it. With this extra bone, I am now able to turn on rotational constraints and limit the articulation of the hand. Works just as great for the feet and head of a character.
So what happens to that extra symbol containing the red circle? Double click it and convert the layer to a guide layer. When you publish the movie, the circle will not be included in the animation.
That’s pretty much all there is too it. The next blog update I will talk about playing with the “Speed” of bones in Flash.
New article about SPRING in Adobe Flash CS5!
yet another cool Deco brush that makes it easy to create particle effects! This is an example I created for How to Cheat in Adobe Flash CS5 (coming soon).
New Deco brushes!
The tree, smoke and fire animations were made entirely with the new Adobe Flash CS5 Deco brushes! The Flash team added a bunch of them and they are really cool! Some are design brushes while others are animation brushes. You will be able to create realistic smoke, fire, flames, particle effects, lightning and more! I’m pretty pumped up about them – may just be my favorite new Flash feature.
*The entire image was made in Flash as well – including the realistic clouds (hint: blur filter and linear gradients mixed with alpha).
Flash CS5 Spring feature!
This is an example of the new Spring tool in Adobe Flash CS5. The Spring feature is applied to an IK armature using the Bone tool in Flash. I wrote a complete article about how to use this feature for Adobe that should be going live very very soon. I will update this entry when it becomes available. This will also be featured as a video tutorial (by yours truly) on Adobe TV soon after.
Building iPhone apps with Flash CS5
Tweening with…ME! (RMI)
Ok, well the title is officially called “Tweening With Chris Georgenes” and is brought to you by the Rich Media Institute, an authorized Adobe training center.
RMI was co-founded by industry leader and good friend R Blank.
“Flash CS4 introduced a brand new motion tween, and maintained the existing tweening model as the renamed ‘Classic’ tween. These two types of motion tweens operate very differently — each with different behaviors, advantages and drawbacks. In under an hour, industry-leading animator, and best-selling author, Chris Georgenes, highlights the detailed behavior of motion tweens in Flash CS4 (and addresses the same tools in CS5) and shows how he uses both the motion tween and classic tween in his own work.”
This course was recorded from my presentation at FITC Amsterdam 2010.
If you didn’t make it to Amsterdam to attend FITC to see my session, for the price of a cup of coffee you can now watch the entire session in all of its glory for the dirt cheap price of US$1.99.
IK and nested assets
As most of us know, Adobe introduced Bones (inverse kinematics) to Flash CS4. What most of us may not know is that the IK span (created when using the Bones tool) supports the control of graphic symbols containing nested animations. Why would you not know that? Because there seems to be a legit bug in Flash CS4 that doesn’t update the symbols on the stage when changing the frame that you want to be displayed. So, if you have tried experimenting with this, you may have assumed it doesn’t work. In reality it does work, it’s just a stage core issue because if you publish or test your movie you will see the appropriate frames updated in the player. If you save. close and re-open the FLA you will see the changes updated on the stage.
Fortunately this has now been fixed for CS5 (not released yet as of this writing). What this means is, we can use inverse kinematics for character animation and control the frames of nested graphic symbols and see these changes updated on the Flash stage.
The above image shows a basic armature applied to an arm comprised of 3 different symbols (upper arm, fore arm and hand). Notice the 4th symbol at the end of the armature. It’s a simple circle converted to a symbol that when added to the armature, provides a 4th bone that allows for constraints specific to the hand. Without this extra bone (I call it a “node”), constraining the amount of articulation for the hand is not an option. FYI this extra bone is not mandatory, it’s just a home-grown technique that provides additional articulation (and who doesn’t want additional articulation?). When the animation is finished, the artwork in the “node” symbol is made invisible by converting the layer to a guide layer or turning off its visibility (assuming you have your preferences set to not include invisible layers in the published SWF).
These are all the different hands I have drawn and converted to symbols. They are all nested into a master hand symbol and each individual hand pose resides in its own frame. This is so I can control what hand is visible throughout the animation by controlling what frame of the symbol is displayed on the parent timeline.
Here’s a new pose, created by manipulating the armature by dragging the extra “node” at the end of the chain.
A third pose with a “new” hand. This is the same master hand symbol, the only difference is that the frame being displayed is different. This is controlled by selecting the symbol and typing in a new frame number in the Looping Â section of the Properties panel.
That’s all there is too it. Many veteran Flash animators may already be familiar with the process of controlling nested animations using Graphic symbols but many may not be aware you can do this within an IK span. While on the subject, below is a SWF containing the same armature but set for articulation at runtime – so feel free to grab the hand and manipulate the arm yourself
Character animation with the Bone tool in Flash
Flash Tutorial: Faux Head-Turn
Flash walk cycle tutorial
As the Flash Animation course teacher at Sessions Online School of Design, I am constantly providing feedback to students about the work they submit for each lesson. Since Flash animation is such a visual medium, I have found screen capturing and YouTube to be the perfect teaching tools. This is an actual student’s submission.
My advance copy just arrived (thanks Katy!) and just as i was told by my publisher (Focal Press), it looks awesome – great job on the printing! The colors are really vivid and rich. I’m really excited! I just checked amazon and noticed that the book is already ranked 22,000 out of 6 million books! That’s got to be a lot of pre-orders! I just hope that it lives up to everyone’s expectations!
FITC – Toronto
As some of you may know I will be attending and speaking at Flash in the Can April 25-28th. Upon heading home I also plan to stop by the Toon Boom offices in Montreal for a meet and greet with the awesome folks from Toon Boom. As you may also know, I am actively learning Toon Boom’s latest animation software; Animate and will likely blog about it’s features and my overall experience. Now don’t think I am turning my back from Flash for Animate – they are both great tools for anyone interested in animation software. I’m bi-partisan here folks and if I could, I’d have a Ford and a Chevy in my driveway. What is interesting is what makes these 2 animation programs different, yet the same. Where’s the overlap and does one offer more than the other. More to come on this topic…
Flash sound sync problem
Have you ever created an animation using Adobe Flash with a soundtrack or possible several different sound files on the timeline (set to Stream or Event) and experienced the sounds falling dramatically out of sync with the animation in the Flash player? This is not a just a CS4 issue, I have experienced this in previous versions as well. I have several students in my sessions.edu class that ask me how to solve this issue and I also see it discussed in several public forums.
Well, I can not tell you why this happens technically, but I can tell you how to fix it.
The problem of sounds falling out of sync is directly related to the amount of MP3 compression that is applied to the sound(s) when publishing to the SWF format. The default bit rate in Flash is 16kbps. When sounds are compressed at this rate, there is a noticeable delay relative to the animation in the Flash player. We’re not talking about a frame or 2, rather a moment and in some cases, several seconds! For an animator who relies on exact synchronization between motion and sound, this can be crippling.
So how do you fix it? Simple.
Go to File > Publish Settings and click on the Flash tab. If your audio is set to “Stream”, click the “Set…” button next to Audio Stream. If you have audio set to Event, click the “Set…” button next to Audio Event.
In the Sound Settings dialog box, use the Bit rate drop down menu to change the default rate of 16kbps to something higher (less compression). I recommend anything higher than 24kpbs. Go higher if bandwith is not a concern. Keep in mind, the less compression (higher numerical bit rate) the larger the file size will be. It is best to test your movie to hear the quality of the sound(s) and compare that to the file size.
As a result of using a higher bit rate, your sound(s) will now play when they should and as will sound better too!
Flash CS4 “sluggish”?
[ UPDATE: The great peeps at Adobe have my source file and have reproduced the issue. They are actively working on fixing what has been deemed a "bug" (thanks Jen!). ]
So last night I was working on this year’s animated holiday card and noticed Flash was unbearably sluggish. While inside a graphic symbol, anything I selected caused Flash to hang for 3-5 seconds before becoming active again. Selecting symbol on stage, selecting keyframes in the timeline, anything I touched caused this weird unforeseen hesitation in the program. Each time this happened I thought Flash was crashing and I was about to lose my work. I quickly saved my doc as a copy and deleted unneeded Library items and did a Save & Compact. This brought the file size down but the lagging didn’t go away. I realized at this rate of production, my holiday animation would be just in time for Christmas 2010.
I saved the file down to CS3, launched Flash CS3 and after opening the file in question, I noticed the lag was completely gone. I have successfully narrowed down the issue as a CS4-related problem.
My next step was to return to CS4, copy all the frames of my animation and paste them into a new CS4 file. Same lag issue continued. Next test I created a new CS4 document but this time chose AS2 (instead of an AS3 doc). Problem solved! The lag went away and Flash CS4 was responsive again!
As a beta tester I never noticed this in any of the builds. AS3 files use the Flash player as the stage to provide real time feedback as to how the contents of your document will look when published. I believe there’s a serious refresh bug (memory leak?) going on here that needs to be patched. For now, if I don’t need to use any of the AS3 related features, I will be working with AS2 docs or CS3. Hope this helps anyone else experiencing the same issue.
Walk cycle study
Flash CS4 Bones tool sample
Just playing around with CS4′s Bones tool. This is a basic example I am currently adding to the book using a character design by SUNCHIRP from the keyframer forums