Flash Transition Guide: Character Animation

A note from Tumult: As the world shuns Flash with renewed vigor, we thought it would be a great time to talk about how to apply skills learned in Flash to Tumult Hype. The guest post below by Lucky De explores character animation in Hype. Whether you’re a seasoned Flash animator, or just curious about the character animation workflow in Hype, the tutorial below will teach you something new. 

You might also be interested in the ‘Working with Symbols‘ post in this series.


Good day!
My name’s Lucky. I’ve created interactive Flash animations for over a decade. I’ve jumped into a lot of different types of Flash work from games, cartoons, banners, UI, explainer vids and more. And this year I started trying to take the jump from flash to modern tech finally to stay current!

This chapter explores character animation in Hype. If you’re new to Hype, consider starting with the documentation or going through their tutorials before going into this one. I’ll be going through more advanced things and skipping over basics. So lets get started!

Step 1: Character Design

01

For this I’m going to create a basic character.  I’ll call him Sam.
Sam will be a basic 3/4 view character we can animate a run cycle with. The way we’ll do it is with some rig techniques transferred over from Flash. We need the character and the basic keys here to achieve that.

02

Sam’s basic keys for a run cycle look like this: Leg one up, leg one down , leg two up , leg two down. If you want more info on basic animation keys for reference I suggest reading Cartoon Animation by Preston BlairThe above assets can be found here.

Step2Colour and Setup

For this I used Illustrator. I coloured the sketch  and broke it apart into layers:

Screen Shot 2015-08-17 at 6.33.53 PM

For easier import into Hype, make sure nothing is grouped. When it comes to distributing thing into layers I try to think about it like a marionette, the way joints connect. So I tend to always leave extra space in the shapes so that i can put other shapes on top of them, ensuring there’s no empty space.

Screen Shot 2015-08-17 at 6.35.38 PM

Notice how it looks like they connect with circles. That’s similar to how I setup Flash animation rigs for TV work I’ve done
e.g.

Screen Shot 2015-08-24 at 12.58.50 PM
Screen Shot 2015-08-24 at 12.58.06 PM

It works especially well with basic shapes, but also works with outline characters. I wouldn’t recommend dealing with characters with too much detail in Tumult Hype yet though—the more basic the character the better. For now anyway.

Step3: Rig Setup

With this you can go 2 ways. PNGs or SVGs.

PNGs: The Good & Bad:

+Transparent
+Solid quality
+Easy to swap out
+Save filesize in the long run

-Blurry motion
-Can’t rescale up without swapping image
-Hard to control without snapping with Hype tweens
-Flicker if swapped out too fast

Good/Bad for SVGs

+Low file size initially (but depends on complexity)
+Best quality possible
+Can be rescaled
+Motion seems to work much smoother

-Harder to import
-Can eat up a lot of filesize if not used/optimized right
-Big initial load
-Aren’t supported by older browsers.

So I’ll leave it up to you on which way to do it. For this animation I used SVGs.

To use SVGs, Grab this plugin, and use the settings below. You’ll end up with a folder full of SVG files straight from Illustrator!

settings

Now with that said if you’ve never used SVG use PNGs instead. It will make the next step easier , however you’ll run into quality issues. If you want to stick with SVG though I recommend also using Sublime Text to open them up.

Open up hype. There are 16 parts to my character so I’m going to make 16 boxes.

Screen Shot 2015-08-17 at 6.44.23 PM

In the boxes I’m going to insert some HTML. That ‘HTML’ is going to be the entire content of the SVG pasted into the block.

Screen Shot 2015-08-17 at 6.46.27 PM

To do so double click into the square and click on the tiny pencil tool (Command-Option-E).
Once you have all 16 in there remove the fill and outline of the squares. Then resize them and rearrange the layers so your character looks like the one you made in illustrator. Remember to name the layers properly!

If you want to use PNGs, you just run the above script but with export set to png and drag them in Hype. It’s a lot less hassle, so it’s up to you!

*Note you can import SVGs AS images by dragging them into hype, but you wouldn’t have the ability to edit the code like with the box method, so chose which option is best for you depending on your preference.

Screen Shot 2015-08-17 at 6.49.36 PM

As you can see with my file I’ve rearanged, rescaled and placed everything properly.
Now notice something apart from that?

Groups.

Groups are super important, they’ll keep things cleaner. Once you’re done distributing things into layers and naming them properly make a folder for each arm and each leg. This is very important to save hassle in animation.

Screen Shot 2015-08-17 at 6.54.57 PM

Pivot Points. 

To make a pivot point command click on a piece and drag the pivot circle to where you’d like it to be. Just like flash.

Screen Shot 2015-08-17 at 6.54.47 PM

Do one for every piece of the body you think the centre point is wrong at. So that’s all of the limbs basically.
The goal here is to make the rotation of these better controllable. And with things like arm and leg joints to make them rotate at the proper location instead of in the middle.

Now we have a completed character rig.

Here’s my rig, the SVG, and the settings I used.

Step 3:  Animation

Ok now the interesting part.

Pose it up. 
Put the guide underneath the character, make a 4 second animation set to instant tweening.

Screen Shot 2015-08-17 at 7.02.42 PM

This is important since Hype doesn’t let us just make keyframes without tweens yet and the constant movement will be a problem right now.
The 4 frames will be pose 1 to 4, on a loop.

Screen Shot 2015-08-17 at 7.05.47 PM

You can do that with a start timeline action at the end of it.
Hit Record (⌘+R) and go!
Take as much time as you need to make the main poses for the character.
Remember if you ever undo something, record will stop recording so watch the record button always!

Screen Shot 2015-08-17 at 7.08.13 PM

Once you have the main 4 poses set up and set to instant and they pretty much work fine you can add an easing onto it.

I tend to go EaseOut > Ease In > Ease Out > Ease In. If that works good for you it’s time to change the timing. I set it to 1.2 seconds at the end so that it’s more realistic.

Screen Shot 2015-08-17 at 7.10.50 PM

Once that’s done it’s time for you to go into it and start breaking it apart even more, hide the head arms and neck and only work on the legs.

Screen Shot 2015-08-17 at 7.11.46 PM

Then work your way up. Legs > Chest > Neck > Head > Arms. Arms always last.

So once the motion is good on all of the pieces again break it up. Add in-betweens so that you don’t have as many floating things.

This may take a while since you have a lot of elements to work with and that’s fine. What I’d like to recommend with this is using shortcuts for moving frames around and nudging things with the arrow keys and the record button on. To create shortcuts I suggest reading Jonathan’s post here. I have one for timeline animation so i can control it with < > to nudge frames just like in Flash.

Another issue you’ll probably have is if you want to make tiny adjustments to something in the middle of the animation it will affect a lot of things you didn’t expect it to affect. Say you decide to rotate something in the middle of the animation which was never rotated in the first place. It will cause it to create a rotation(Z) tween starting at frame 0 and going to your frame which if you don’t pick up on it immediately and nudge frame one will eventually get worse and worse if unnoticed. So keep scrubbing through. Adjustments made while you were off of a keyframe will differ from animations when you are on a keyframe. On-frame animations will adjust just that frame, but off-frame animations (to position, for example) will adjust the element’s position regardless of other frames.

One way to ensure your adjustments always taken Hype is make keyframes for every thing that might be animated. I’m sure a better solution will be created eventually.

Next step for me was I decided to add a softener for the shoulder since I disliked the way the shoulder behaved in motion.

Screen Shot 2015-08-19 at 6.57.18 PM

It’s just a circle with the same colour of the shirt, but it works well 🙂

Then I wanted to do a final touch which was a blink for the eyes. So what I did was I created a symbol from the head and I copy pasted the head motion in the main timeline on it.

Screen Shot 2015-08-19 at 6.59.31 PM

This way the head symbol is clear of movement. I made a couple of other head shapes and put them in the symbol on different layers. Then I set them to fade in and out with instant on the motion. Essentially swapping them out.

Screen Shot 2015-08-19 at 7.00.43 PM

And that’s about it.

Here’s my final of the cycle.

Source files including all of my animating stages.

Conclusion:

Hype has a lot of potential. It can definitely compete with flash for animation on a basic level. When it comes to rigs and more complicated things for animation I would say invest time in learning it. While it’s still not as feature full it’s getting there! Within a year I hope it will have the same ability as Flash with it and the benefit is it’s all HTML5 so I highly recommend investing time in trying more complicated animation experimenting!

And post on the forum if you have any feedback, recommendation or experiments you’d like to show yourself!:)

Thanks,
Lucky


You can find Lucky’s work at Luckyde.com.

Check out some of the characters and animations in our gallery to see other amazing things people have created, or join us on the forums.

 

You can see all Flash Transition posts here.

, , ,

Made for you in San Francisco.