Create animated GIFs with GiftedMotion
If you spend any time on the internet there's a good chance you've seen animated GIFs - which are short animations that play when you're on a website.
It's also very easy to create your own animated GIFs, and GiftedMotion is a great tool for creating simple animations for use in a website or blog.
It outputs the animation in the form of a common GIF file, so you don't need any extra software to play it back either. As a result it can be displayed in almost any browser.
You can also use a variety of image formats to build up your animated masterpiece – PNG, JPEG/JPG, BMP and GIF files.
During this tutorial, we'll be showing you how simple it is to put one of these animations together using GiftedMotion – as an added bonus, the application is completely free to download, too.
GiftedMotion works as a JAR file, which is a type of Java format that can run on multiple platforms – as a result, it's extremely easy to use. With a little taste of GiftedMotion, you'll be animating images in no time.
1. Run the app
Once you've downloaded the JAR file from the website, save it somewhere you can easily find. We've decided to save it to our desktop in this example, just for simplicity.
Now double-click it and you'll see this blank window, into which you're going to load some still images so you can create an animation. From here on, the process is nice and swift.
2. Load the fies
Now go to the File menu and click on 'Load'. You don't want your images to be too large as it will affect the final animation – you may need to resize your images first using an application like Paint.net.
The other options here deal with the saving of the finished animation, which we'll come onto after you've developed your own.
3. Choose your files
Clicking on 'Load' takes you to the Open dialog box so you can get the files you need for your new animation. Make sure you select the right images for the job, though – you can also use [Shift]+[Ctrl] to select multiple files in one go.
As you can see above, we've selected a total of five files. Finally, click 'Open' to load the images into GiftedMotion.
4. Change the sequence
You'll now see the images are all loaded into the Sequence Editor screen, with a preview of the image in the main window.
You can select any image in the order and use the up and down arrows to change the sequence the images will play in (the preview on the right will then change accordingly). You can also copy and remove any images in the list as well.
5. Adjust position
With the order changed, we're now going to change the position of a particular image (see the difference between this step and the next step for further context).
You can alter the 'X' and 'Y' offset figures in the left-hand column, but it's very difficult to get what you want with this, so dragging the image itself is a far better option (as you can see above).
6. Set the duration
Next, we'll look at changing the duration that a frame is displayed in the box under the Sequence Editor – the default value of 100ms isn't very long at all, so we recommend you alter it.
You can have different durations for each frame, or you can check the 'Apply changes to all frames' checkbox to add the same change to all the frames in your animation.
7. Save your animation
You don't have to process the animation to produce it; all you need to do is to save the file and it will be created instantly.
Here we're opening the File menu and selecting the 'Save as GIF animation' option to output it. Next, choose where you'd like the animation to be saved in using the 'Save as' box that's displayed (it will look like the one in the next step).
8. Now just play
GiftedMotion is a great example of an application that makes a complex task very simple. When you want to play your animation, just double-click on the GIF file – the default program for GIF files will then open it.
More than likely this will be Internet Explorer, but if it doesn't work, simply drag it into an Internet Explorer (or other web browser) window and it should play for you.
