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

  1. 1 Robert

    Cool stuff. Thanks for sharing this Nathan. I really appreciate it!

     

  2. 2 Jonathan Sampson

    Dude, that is one trippy effect :) Very nicely done.

     

  3. 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. 4 shorty114

    Great screencast! Same here as Yannick, I had no idea how to do animations in Fireworks before this…

     

  5. 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. 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. 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. 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. 9 Ray Morgan

    Hey Nathan, thanks a lot for this. I was wondering how people made those things so perfect.

     

Comments closed after 2 weeks.