In this flash tutorial we will animate a loud speaker so it looks like its playing some real loud music and the speakers will shake and make it look really cool.
This is what we will accomplish when we are done with the flash animation.
First we need to prepare some stuff in photoshop, find an image of a speaker that will work for you, I found mine through afterimage.com, a site with some royalty free images, only problem is that they usually are not taken for the purpose that we need it, so I had to clip out the background and refine some edges but thats with photoshop.
Or you can just take a picture of your own speakers if you have any.
The original image
when I was done with it.
Now we need to save that image with a transparent background, gif or png works fine, and now we need to do some other stuff in photoshop, we need to cut out the round speakers and save them in a separate file also with transparent background.
You can download the transparent files here.
We are ready to open flash and do some animation, so import both transparent files, into two separate layers, the top layer should hold the round inner speakers (the file called speaker_.png).
Place them on top of the speaker box so it fits into it like in the image below.
Now right click on the small speakers image and convert it into a movie clip.
Go to the timeline and make a keyframe at frame 3, then make one at frame 2, select frame 2 and we are ready to do some changes.
Select the speakers and in the properties panel choose filters and give it a blur filter with settings as below.
Go back in the timeline and create a new key frame for the second layer at frame 3 so we also can see the speaker box at all frames.
Now you should be ready to test the animation.
The last thing I did to make the speaker look more slick and realistic, was to add a drop shadow, so it doesnt look like its just floating in the air.
To do that create a new layer at the bottom in the layers panel, with the rectangle shape tool draw a rectangle on the stage as shown below.
Then drag the corners in behind the speaker box and the two other corners out like I did so it looks like a cast shadow, then change the color to black.
Now the final thing to do is to add a blur filter and maybe bring down its opacity and we are done.