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.
Step 1:
Draw a 300×300 pixel circle. Make another that is 40×40.
Make the large one light gray, make the small one black.
Step 2:
Center the smaller circle inside the larger one, at the top.
Step 3:
Duplicate the small circle, align to the bottom of the large one.
Step 4:
Do the same for two more circles, left and right.
Step 5:
Select small circles and group them, then cut and paste twice.
Step 6:
Rotate the new groups, one by 30 degrees, the other by 60.
Step 7:
Ungroup all the small circles, lock the large circle’s layer.
Step 8:
Copy and paste 12 small circles, change color to dark gray.
Step 9:
Clockwise starting with the second circle, decrease by 2 pixels.
Step 10:
Center each dark gray circle inside the nearest black one.
Step 11:
Group dark gray circles, then hide with Ctrl-L (Command-L on Mac).
Step 12:
Delete black circles, show hidden layer, and unlock large circle.
Step 13:
Ungroup small circles, re-group them with large circle.
Step 14:
Create 12 frames of animation, cut and paste group into each.
Step 15:
Starting with 2nd frame, rotate by 30 degree incriments:
30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330.
Step 16:
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.
1 Robert
Cool stuff. Thanks for sharing this Nathan. I really appreciate it!
2 Jonathan Sampson
Dude, that is one trippy effect :) Very nicely done.
3 Yannick
Very nice Tutorial Nathan and the screencast was a good addition. I also didn’t even know how to do animations in Fireworks before seeing this tutorial.
4 shorty114
Great screencast! Same here as Yannick, I had no idea how to do animations in Fireworks before this…
5 Nathan Smith
Hey, I’m glad you guys liked it and found it helpful. I was talking to another guy, and he said he learned about the existence of the Align panel from the screencast. It’s definitely a handy one. As far as animation, if it's going to end up as a GIF anyway, I much prefer working in Fireworks to Flash.
6 Matthew Oliphant
Yeah, I hadn’t seen the align panel before either. I just made myself memorize the key commands, which I never really memorized. :)
7 Josh
Nathan, great screencast. :)
Yeah, the Align Panel rocks. But don’t forget about the Modify and Super Nudge Panels. Both are a must have for Fireworks in my opinion.
8 Tyler
Well done! I’ve been trying to find something like this for months. Now i can make my own. I personally like using 10 40×40 circles rotated at 36 degrees a piece and reducing the opacity by 10 for each one starting at the second…
9 Ray Morgan
Hey Nathan, thanks a lot for this. I was wondering how people made those things so perfect.