Screencast - Loading Animation
9 comments | Posted: 16 September 06 in Tutorials, by Nathan Smith
View Live: Screencast – Loading Animation (15.4 mb)
Download: screencast_2006-09-16.zip (12.8 mb)
Awhile ago someone had suggested that we do either podcasts or video tutorials here at Godbit. Since I am not much for just sitting in a room talking to myself, I decided to do the latter. Also, I used to have to edit recordings of our chapel services at seminary, and didn’t particularly enjoy it. For those of you who do love the whole A/V aspect of ministry, you have my respect.
I want to thank Mark Stephenson, head of the Web Empowered Church project, for helping to get me started. He suggested that I use this great free tool called Wink for capturing to video what is happening on the computer screen.
So, today I will be showing you how to re-create the loading animation icon that I did for Cody Lindley’s ThickBox, an extremely versatily in-browser pop-up script that is written in jQuery. It took me several hours to make the first animation, but now it only takes a few minutes. The tutorial is for Fireworks version 8, but could work with Fireworks MX 2004 or possibly just MX.
Initially, I had recorded my voice with the video, but that added unnecessary file-size, and subjected the viewer to mundane audible torture. Instead, I will list the steps in the tutorial here, so you can follow along with the video. Note: I do things the long way for the video, but you can press Ctrl-Shift-T for the Numeric Transform menu, as well as Ctrl-G / Ctrl-Shift-G to group or ungroup items. You can also press A or V to switch between selection modes.
Draw a 300×300 pixel circle. Make another that is 40×40.
Make the large one light gray, make the small one black.
Center the smaller circle inside the larger one, at the top.
Duplicate the small circle, align to the bottom of the large one.
Do the same for two more circles, left and right.
Select small circles and group them, then cut and paste twice.
Rotate the new groups, one by 30 degrees, the other by 60.
Ungroup all the small circles, lock the large circle’s layer.
Copy and paste 12 small circles, change color to dark gray.
Clockwise starting with the second circle, decrease by 2 pixels.
Center each dark gray circle inside the nearest black one.
Group dark gray circles, then hide with Ctrl-L (Command-L on Mac).
Delete black circles, show hidden layer, and unlock large circle.
Ungroup small circles, re-group them with large circle.
Create 12 frames of animation, cut and paste group into each.
Starting with 2nd frame, rotate by 30 degree incriments:
30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330.
Go to each frame, ungroup all, and delete the large circle.
That does it, you’re done. You now have a completely vector animation that can be resized to whatever you need. You can export it as an animated GIF or even a Flash file. You could also change each descending circle to have a lower opacity, like I have for the ThickBox loader. Also, a bit of text like “Loading” would be good too, in the font or language of your choice. I guess that about sums it up. I might do more screencasts, depending on the feedback.
Discuss This Topic
Comments closed after 2 weeks.