30 June 2020 Edit: AAO does have fade support but not foreground fade support.
Before you start making your fading animation, I have to warn you: the quality will go down. It is unavoidable due the nature of the .gif format not handling transparencies well. If you plan to use the .apng method, the quality will stay the same as the sum of the images. However, the file size will increase exponentially.
30 June 2020 Edit: APNG is natively supported by Chromium and its forks (Chrome, Puffin, Brave, etc) since 2015.
Now, there are a few things to consider about fades:
- How do you want it to fade? Do you want fade-to-black? Fade-to-white? Or even fade-to-another-image? For this, you need your start and end images.
- How long do you want your fade? The most optimal fades last for 1-2 seconds.
- How many frames of animation do you want this to last? A fade needs at least 3 frames to work. Ideally, you should go for 4, 5, 10 or 20 frame fades.
Exercise 1:
I want my animation to run for a whole second. I think it should run for 10 frames. What is the frame delay, in milliseconds?
I am tinkering with a frame delay. I'm experimenting with a 25 cs frame delay. I'm not sure how long I want the animation to run, but let's say I want it to run for 8 frames. How long is the animation?
Frame rates and frame delays:
For cross-browser compatibility, the ideal framerate should be at least 3 frames/second or 0.33 seconds per frame. This is to optimize viewing times for all browsers, inlcuding, yes, Internet Explorer. However, it should be no faster than 30 frames per second or 0.03 seconds/frame.
To convert fps to seconds per frame, take the reciprocal of framerate and express it in terms of seconds/frame. In the framerate above it is 3 frames/1 second. Flip the fraction and you get 1 second/3 frames. Meaning, for every second that passes, three frames will have played.
To convert this into a frame delay (meaning how long that frame is displayed before going to the next one), convert the fraction to a decimal. You will have to use decimals and then convert to either centiseconds or milliseconds. 1/3 is approximately 0.333.
Exercise 3:
After many mathematical experiments, I found that the best fades run at a rate of 5 frames/2 seconds. How long should the frame delay be, in milliseconds?
Transparency and opacity in GIMP:
Since fading involves opacity, we will have to do some opacity problems. The good thing about opacity in GIMP is that it starts from 100.0 and ends at 0.0. Yes, they're decimals for a reason: fine tuning the opacity. You will want to know what the opacity should be at each step. For the purposes of the guide, they are expressed as percentages. Although GIMP does not treat opacity as a percentage, treat it as such.
You might be asking... What is opacity good for? Actually, it's good for transparency purposes. The lower the opacity, the higher the transparency of the image. 100% opacity means a solid image. 0% opacity means no image (meaning totally transparent). Fades happen when you transition the image from total opacity to total transparency.
But first, let's start by finding out how much the opacity should change per frame. This guide assumes you will start at 100% opacity. TO find the change of opacity, express the change in this fraction: Starting Opacity/number of frames. The result will be your percent change of opacity.
Exercise 4:
I want my fade to run for 4 frames. What is the percent change of opacity per frame?
Opacity per step:
Let's take things up a notch. After doing some of these problems, you will want to know the what the opacity should be at certain frames. So do the same thing. But for each layer, starting from the second to last going up, increase the opacity of the frame by that change of opacity.
When you do these problems, it helps that you exclude the start frame, for the opacity of that will be 0.0%. However, you will need to add one more frame than the fade is supposed to last. So if the fade is supposed to go for 4 frames, you will need 5 frames of animation. You will be calculating starting from the second-to-bottom layer and going up.
So basically: Total frames of animation = frames of fade + start frame. Or frames of fading = total frames - start frame
Exercise 5:
I want my fade to last 8 frames, not including the start frame. What is the percent change of opacity per frame? And what should the opacity be per frame?
The last exercise takes all the lessons from the previous 5 exercises and puts it into one problem. This is something you'll have to do when you plan your fades.
Exercise 6:
To make sure this fade works with my trial, I need it to last 2 seconds at 12.5 fps. How many frames total do I need? How many frames of fade will I have? What is the frame delay per frame? What will be the percent change of opacity? Per frame?
For this section, I will assume the use of GIMP. It might be the same for Photoshop. If you plan to make this into APNGs, keep reading until the last step and then skip to the APNG method.
There are five steps to doing this
- Preparation. This means gather your images and do your calculations.
- Importing, Replication, Layering
- Adjusting opacity
- Reducing layers
- Finishing
Step 1: Preparation
Gather your start and end images. You should already what kind of fade you want and how long it should last. If not, do some math and make sure it's correct before you do this.
For the purposes of this guide, I'm going to do a fade-to-white that is to last 1 second over 10 frames, not including the starting frame. So I have my base bg and my white bg.
Step 2: Importing, Replication, Layering
Put your images as two layers. Then for each image, duplicate the layers until you end up with the same amount of frame for that image as the animation is suppose to run. So if you want your fade to run for 5 frames, make four duplicates of that image. In this case, I'll make 9 duplicate copies for 10 layers of that image since I want the fade to run for 10 frames.
Then layer it so that the ends (bottom and top layers) have the image name with no "copy". Then, order the images in decreasing order with the end copy on top and the base image underneath it. The layers should look like this
Code: Select all
White bg
White bg Copy 9
Base bg Copy 9
White bg Copy 8
Base bg Copy 8
White bg Copy 7
Base bg Copy 7
White bg Copy 6
Base bg Copy 6
White bg Copy 5
Base bg Copy 5
White bg Copy 4
Base bg Copy 4
White bg Copy 3
Base bg Copy 3
White bg Copy 2
Base bg Copy 2
White bg Copy
Base bg Copy
Base bg
Starting with your end copy 1, adjust the opacity so that it matches your change in opacity. Then when you go up the layers (skip the base bg layers), add your change in opacity to the next one and so on until you reach the top.
In my case, I'll start with the White bg Copy (1 is implied) and start with 10% opacity. Skipping the Base BG copies, go the the subsequent White bg copies and increase the opacity by the change of opacity. So it should look like this.
Code: Select all
White bg
White bg Copy 9 Opacity 90%
Base bg Copy 9
White bg Copy 8 Opacity 80%
Base bg Copy 8
White bg Copy 7 Opacity 70%
Base bg Copy 7
White bg Copy 6 Opacity 60%
Base bg Copy 6
White bg Copy 5 Opacity 50%
Base bg Copy 5
White bg Copy 4 Opacity 40%
Base bg Copy 4
White bg Copy 3 Opacity 30%
Base bg Copy 3
White bg Copy 2 Opacity 20%
Base bg Copy 2
White bg Copy Opacity 10%
Base bg Copy
Base bg
Starting right below the top layer, merge down with the image below. Once merged down, that layer should look like there's a segment of a fade. After merging down, go down one layer and repeat the process. Make sure that you start your merge on the top layer copy, NOT the base bg layer copy. Repeat until you have no more top layer copies. You should have your top layer (end image), your bottom layer (start image) and then your fades in between.
In my case, I'll start with White bg Copy 9 (with opacity 90%), merge down. Once merged down, that layer should look like there's a segment of a fade. After merging down, I down one layer and repeat the process. I make sure to start on the white bg copy NOT the base bg copy. I'll repeat until I'm down to 9 layers (in decreasing order) of Base bg copies with the top being white. So the top layer should be the end layer (in this case, white) the bottom layer should be the original Base bg and in between the copies in decreasing order. Done correctly, I should have 10 animation frames of fading lasting for 11 frames. It should look like this:
Code: Select all
White bg
Base bg Copy 9
Base bg Copy 8
Base bg Copy 7
Base bg Copy 6
Base bg Copy 5
Base bg Copy 4
Base bg Copy 3
Base bg Copy 2
Base bg Copy
Base bg
Then export/save as .gif. Make sure to save it as an animation. Check off "Interlace", "loop forever", "use delay entered for all frames", and "use disposal method for all frames". Then set the delay to what you got when you did your conversions for frame delay. In this case, it's 100 ms. This will set each frame will be 10 cs (100ms in v6) over 10 frames for a total of 1 second. For frame disposal where unspecified, choose "one frame per layer" aka "replace".
If you're savvy enough on GIMP, you can edit the name of the layer and enter the timing (in ms) and the delay. For example: Layer 1 (100 ms) (replace)
Export each frame as a png image. Label it so you know how to layer it.
Import the images to APNG Anime Maker. Layer it in the correct order with the base going first and the end going last. Hold and select all the images. Then set the delay to what ever you set it as, in milliseconds. Check "all" to set delay to all images (unless you want to adjust the start and end times). Set disposal to none. Set blend to source. Set your loop to 0 unless you want to control how many loops it runs. (0 means infinite).
Save your image.
Test your images on a browser to make sure it's working.
This is what a basic fade looks like:
- The higher the framerate, the faster the fade animates. Inversely, the lower the framerate, the slower the fade animates.
- The more frames you have in the fading animation, the crisper the fading animation is. Inversely, the less frames you have in the animation, the easier it is to animate.
- The larger the frame delay, the slower the animation runs. It can sometimes end up looking choppy, especially if you have made mistakes. So it becomes imperative to have a relatively small frame delay.
- To optimize browser compatibility, it's recommended that the frame delay should be no less than 0.03-0.05 s or 30-50 ms. If the frame delay is lower than that, it can cause problems with the browser. You should never put a frame delay of 0. By default, GIMP will make each frame have a frame delay of 100 ms, which is quite slow.
- For advanced users, do not click the checkbox for "use delay entered for all frames". You should manually set the delay for the last frame, preferably at least 2 seconds to account for AAO's playing problems.
I hope this guide is useful for you. A fade is just one way to tell a story. Employing fades will exponentially increase the storytelling and presentation of your trial.