PDA

View Full Version : Animated Radio Tutorial



FUS1ON
04-24-2006, 11:06 PM
http://img123.imageshack.us/img123/8488/radmmsm0ia.gif

I used the same technique from that same Animated Userbar tutorial to do this Radio Signature, but instead of the animation scrolling up or down, it goes from one side to the other side.

I went online and found a car radio that had a big blank section I could use for the window to let the text scroll by in (see #1).

Then I went to Dafonts.com and DL'd this font http://www.dafont.com/ds-digital.font

As you can see in the picture there are only three layers (see #2), starting at the bottom, (1) the solid Black background, (2)the Text layer and (3) the Faceplate image layer.

The background and text layers are invisible in the picture so you can see the section I cut for the scrolling text section (See #1).
You can see in this picture the text layer (see #3) up above the Faceplate. It is slightly taller than the opening in the faceplate and long enough to accommodate the text that I wanted to use, if it is longer than your text, that is fine, it does not matter. I had that Text layer image there purely to show you what the Text layer would look like if you could see it and of course before opening the image in ImageReady to do the animation, you would need to close all images except the one you want to animate. Just use the steps in the Animated user bar tut to do the animation in ImageReady.

Your layers should look like this:
Faceplate <---- Top layer
Text
Background <----Bottom Layer

Be sure to place the Text inside the faceplace secton that you cut out for the Text before moving it to ImageReady.

At this point hit Edit in Image Ready, Make sure your animation Window is open and go to the layer palette and click on the layer for the Text Image and you will see a Blue Box highlite it on the bar.

Use your Move tool to drag the Text Image to the far right until the Text lettering has just disappeared out of the box that you cut out of the radio faceplate.

Go to the animation window and click the Duplicate frame button.

Now go back to the Text Image and use the Move tool to drag the Text Image all the way to the far left this time. Make sure that you keep the Text Image level when moving it because if you don't, your text will drop or rise when animated. If you look real close at the radio up above, you can barely see a small blue dot that I added just above the 4.0v symbol to use as a guide, it is the same height as a blue dot on the right side.

Go back to the animation window and click the Tween button and use 45 Frames for the smoothest effect.

Once you tween it, hit either the Play animation button or the Test in IE button to see if you like it, if not just undo and redo.

Once you like it, go to File and use SAVE OPTIMIZED AS ... to safe it.

Click to view:
http://img507.imageshack.us/img507/792/radiotut5is.th.jpg (http://img507.imageshack.us/my.php?image=radiotut5is.jpg)

Caged Anger
04-25-2006, 06:43 PM
its really good, you can barely even make out an outline of the text box