A case study of the Infinite Media, Inc. Shocked Logo.

Welcome to the second installment of Simply Shocking. I would like to start this week by saying thanks to those of you who sent me mail about last week's example.

I based this column on some of the feedback I received last week. This example covers motion animation, rollover commands, URL links, and a few other topics. Because it covers so many topics we will break the example down over the next few weeks. The example has been moved to the top of the page this week for convenience.

The example is a Shockwave of the Infinite Media, Inc. logo. This Shockwave contains some animation, a rollover (when the mouse rolls over the logo), and a link that takes the end-user back to the Infinite Media, Inc. homepage. This Shockwave also uses some techniques that dramatically reduce the size without creating a reduction in quality, something Infinite Media excels at. The final file size for the .dcr file for this page came out to around 23 K. In contrast, the original files it took to create this Shockwave totaled over 100K, a reduction of over 75%. Over the next three weeks we will examine all the items and techniques that are used within the example.

This week, Part I includes how the motion blur effect is accomplished in the Infinite Media logo. Next week, in Part II, we examine the creation of the animated motion using Director. Finally, in Part III, we add the Lingo along with some final touches. So without further delay let's begin with Part I.

Part I

The first thing we notice when this file opens is the logo coming toward us and then slapping against the screen, vibrating back and forth until it settles. This effect was created by using the motion blur filter in Adobe Photoshop. Let's recreate the steps that were taken in creating this effect.

Step 1: The first thing you will need to do is open the file you wish to apply the effect to in Photoshop. Once the file is open, select the entire canvas area as shown in Figure 1.1.

Figure 1.1

Step 2: Now select the motion blur filter as shown in Figure 1.2.

Figure 1.2

Step 3: Once the filter is open you will see the motion blur filter's window as shown in Figure 1.3. Now you can enter the amount of blur and the direction of motion you would like for the filter to apply to your file. Figure 1.3 shows the exact settings that were used in the creation of the Shockwave file at the top of the page. Use these if you plan on duplicating this effect with a file of your own.

Figure 1.3

Step 4: Now save the file under a different file name. This must be done because you will need both the blurred file and the original one to create the effect demonstrated in this example. Your file should look something like Figure 1.4 after the effect is applied.

Figure 1.4

We are now ready to import the files into Director. Next week we will demonstrate how this is done, until then, please feel free to ask me any questions about today's column by sending me e-mail. I will respond to as much of the mail as possible.