Floating Animations
Making an image fall or float
The basics of Floating / Falling images
- Floating/Falling images are a bit harder, because as shown in this tutorial, especially if you want them to fall onto something particular or something, you need to make sure that the background is transparent (you can make them with a background, but the steps are pretty much the same).
- The basics of making an image fall are these: Movement, Color Overlay, and Opacity. If you know how to effectively use these things, and when, floating animations are a sinch.
Some Tips to Note
- Floating/ Falling images DON'T LOOP! How can something fall and then appear again on the top and then keep falling? That doesn't really make sense. So this does not have troubles with loops. This is one reason why snow and rain are not floating images, though they have similar properties :)
- Using transparent backgrounds to animate these make them incredibly easy to target where they will fall, as I did on GumGum.Org's GumGum.Org's index page.
- When thinking of falling images, think of what is falling, is it light? heavy? obviously a feather (or hat in this case) will fall differently then, lets say, a bowling ball. It's all Physics :) Keep in mind gravity and movement.
- Remember the frame size? This makes a big difference in floating images. YOU HAVE to make a big enough canvas to work with in the BEGINNING. Changing canvas size can be totally annoying and mess things up!
- Color Overlay doesn't HAVE to be used in falling images, you can manually animate it frame by frame, but this takes MANY frames, which is why color overlay saves bandwidth and not to mention, helps the flow.
Floating: The Straw Hat
- This animation was the first and only floating/falling image I have done. I originally didn't think of color overlay in the beginning, but animating the thing in the beginning without the color overlay looked cut out and bad, so I used color overlay.
- What is color overlay? a Blending option. You can also do it manually, its just coloring over the entire image with one color :). It's pretty simple to understand as the tutorial goes through. So Let's start.
Now, you can see obviously the transparent background. The thing about is this: Stroke. I stroked the hat (blending options-->stroke-->size 1 (black in this case) so that the edges wouldn't be cut off. But see how it's a bit scrapy on the side? That is the problem with transparent backgrounds.
The next part is easy. CTRL-A (select the whole canvas), copy, and open a new canvas and paste it in there. Don't close the old canvas. On the new one, since this is a hat start rotating. A Hat will not fall directly downwards due to it's aerodynamics and the effects of gravity, it will float from side to side. So I rotate this hat a little bit, by going to Image >> Rotate Canvas >> Arbitrary, as shown below:
I rotate 30 degrees CCW (Counter clockwise) and pasted it on the old canvas where I want the hat to move next. It looks like this:
Now what's color overlay? Okay. So the background I want this hat to fall on is a pink color. In exact, I want it to fall on the G in the entry page of GumGum:
The Background color of this image is #f6e7ea, so I copy that and click on the first layer in the hat picture (which was the original hat before the rotation:
Right-Clicking the layer, I chose "blending options" and check color overlay, clicking on it to bring up the screen below, and change the color to the pink from the background. If you have a background with different colors, choose the best color as the color overlay.
Now, having that set, I change the opacity of the color overlay, to about 50%, and then since I had stroked the hat in the beginning I change the stroke color to a lighter one, so that the image now looks like this:
So after this, I have the first animation, and I save this as the second frame "02.gif". Now I take the second hat, on the next layer, and rotate that like I did before (I want the hat to go a little up, and then fall the other way, and then land on a 45 degree slant on the hat, so I rotate it again to make the hat and pasted on the layer, to make it look like this:
REMEMBER: KEEP the canvas size the SAME. Do not make it larger/smaller. Work within the frame you had preset. Okay, so now that I have done this, I copy the layer style for the first hat, and paste it in the second hat. I TAKE OFF the eye beside Layer 1 (with the first hat) so it doesn't appear anymore, and then get this:
I save this as 03.gif, and continue doing the same thing until I end up taking a path that looks like this:
Now, as I did in the previous steps, I kept adding a new hat layer, pasting the new layer style on the layer before it, and then the layer that came before THAT was deleted. So you are adding a new layer, editing the layer that comes before it, and taking visibility off the one that isn't needed anymore. At the end layer, it's a bit difference though. In this case, this layer:
To end off the last animation, all you do is take off the overlayed layers' visibility to get this:
Now, go to animation shop, and to the animation wizard, but this time DON't pick loop, but select the other value, I want it to play one time, and I left it 30 since I can change that later if I want:
Now, since it's not looped, I don't have to worry about repeating layers, so I just put in all the layers I saved in order, and see something like this:
And I preview the image, (btw, when you preview it repeats: don't worry, that doesn't mean it is a looped animation. it will still take place the number of times you specified in the wizard). I save it, and come up with this finished animation (refresh or just click here and refresh if it already played without you seeing it:
And all I have to do now, is just use div layers to make it land on the hat. Since it has a transparent background, it works out perfectly =). See why I don't use much of transparent backgrounds: the scrappyness around the hat. So, that's about it. NOTE: You could probably animate this without the color overlay, but to transition the frames would require more transitions with frames and the more frames, the slower loading and more bandwidth, and even then, it's difficult to do without looking just cut-and-paste. This is how the hat would look without it -- the flow is not as well (click here and refresh if it already played):
It's up for you to decide really, but the steps are generally the same either way :D
