Sparkly tiara-Paintshop and Swish, sound and sparkles

What I’ve got here is a flash movie of a tiara that plays a soundtrack and sparkles when you mouse over it. The sparklies and sound stop when you mouse out.

If you want to buy this, it will cost $10, $12 by payment mail. For this price I can make it with the background color or image of your choice (you supply). It can play the sound or soundtrack of your choice, which can loop multiple times or play once - like perhaps your voice. The entire image can click through to the url of your choice (which can be a payment mail button url). You will get the .swf file to upload to your website and the embed code to place on your pages or in your blog.

There was somebody on a Swish forum asking about sound. I started to make a Swishmax 2 sound tutorial, but before I got done I had given the tiara sparklies. It got a little complicated, since I ended up using both Paintshop Pro and Swishmax. I’ll give you some basic instructions, and if you know what you’re doing in Paintshop Pro or some other graphics software you’ll be able to make the images. You then need some basic skills in Swishmax 2 to put it together. I’ll talk you through it, but I don’t have the time or space to do an entire tutorial on something that takes a while to make (Jing is good for 5 minutes).

First, pick out a photo. I took a photo of a tiara I have. I painstakingly removed the background, cleaning it up pixel by pixel. This happened last year, so the fact that I was really sick of it by the time I was done with it meant it was ready and waiting for me today. You can use any photo you want if you don’t care about the background.

Make 4 new raster layers, select the brush tool, a sparkle-shaped brush, and the color white. In sizes 30, 40, and 60 and 3 different sparkle angles drop sparkles on each layer. Save the layers and the image itself (mine has no background so I can switch that) as .png files. You should now have 4 sparkle images and 1 photo image.

Open Swish and create a new movie. Select a background color (Modify => movie properties => background color).

Import all 5 images into the movie (Insert => Import image…), with the photo as the bottom layer in the outline panel (drag it to the bottom if it is not). If the sparkle layers are not aligned over the photo (this can happen when importing transparent images), hide them in the outline panel, select and make them visible one at a time, and then align them to it with the select tool.

Group the 4 sparkles layers as a movie clip (Modify => Grouping => Group as Movie Clip). Name the movie clip ‘Sparkles’.

Select the movie clip in the outline panel. Its timeline will open at the top of the screen. Give the first sparkle image a “fade in” effect (Add effect => Fade => Fade in) on frame 2 and a “fade out” effect (Add effect => Fade => Fade out) on the next frame after the effect. Click the “fade in” effect on the timeline to highlight it, hold down the Shift key, and click the “fade out” effect. Right click the effect, and choose “copy effect” from the dropdown menu. Click frame 6 of the next sparkle image on the timeline, then right click and “paste effect”. Paste the effect on frame 11 of the 3rd image and 16 of the 4th.

Now, let’s select the photo in the outline panel. In the script panel, select Add Script => Self => onSelfEvent(rollOver). Select Add Script => Movie control => Play(). In the ‘target’ dropdown select the movieclip you named ‘Sparkles’.

Go to the Layout view and preview your movie. The sparkles start right away. We need to stop that by making the movieclip stop on frame 1.

So select the Script tab. Select the movie clip again in the outline panel. Click frame 1 in the timeline of the movieclip object. Down in the script panel, choose Add Script => Movie control => Stop.

Now preview the movie again.

We want the movie clip to play smoothly and continuously while the cursor is over the image. To make it repeat smoothly, select frame 31 in the movie clip timeline. Select Add script => Movie control => Go to and play => gotoAndPlay(FRAME). Choose ‘this’ from the target dropdown and change the number in the ‘Goto frame’ field to ‘6′.

Now preview the movie again.

Now we need to make the movie clip go away after the mouse goes off it.

On the next frame on the timeline of the movieclip after the last frame, add a ‘remove’ effect to all the sparkle images. Select the photo in the Outline panel. In the script view, Add Script => Event => Self => onSelfEven(rollOut). Add Script => Movie control => Go to and play => gotoAndPlay(FRAME), select the movieclip, which will appear as _parent.Sparkles in the target dropdown. Change the frame to ‘32′.

Preview that again.

Okay, let’s add sound. Click in the rollOver effect in the script panel. That’s where you need to add the effect. Add Script => Sound => playSound(…) => Import. Now select your sound. If you want it to loop, press the Sound Effects button, and add a number of repeats.

Click in the rollOut effect. Add Script => Sound => stopSound(…), select your sound.

Now preview again.

Let me know if there’s a problem with this tutorial. My contact form is in the sidebar.