Creating a Space Vortex Blast

By Dr Diablo | Flash CS3 | Beginner

This tutorial will teach you how to create a cool animation of a space vortex blast using Photoshop and Flash. We will create the images of the space blast using Photoshop filters and then we will use Flash to animate those images to an animation that gives our explosion object the shaking effect to mimic moving in space at high speed. This is a beginner level tutorial so do not worry if you do not know much about Flash or Photoshop. Here is a sample of the animation we are going to create:

Our tutorial will be divided into two sections, first we will create the blast images in Photoshop, and then we will animate them in Flash. If you do not have Photoshop, you can use the images I created to follow the second half of this tutorial. You are going to also need a 'main object' to which the effect will be applied, I am using the Oman3D logo. You will need your own image to follow this tutorial.

Creating the Blast Frame Images in Photoshop

We are going to use Photoshop to create three images necessary for our space vortex blast animation. Start off with a 480x360 px new document, and input the values shown in the screenshot below.

New Document Properties

Change your foreground color to #FFEA00 and your background color to #FF5A00. You can alternatively select any color you want as long as there is a strong contrast difference between them.

Go to Filter>Render>Clouds to render the clouds with the colors that you set previously.

Clouds

Go to Filter>Pixelate>Mezzotint, and choose Long Lines as your Mezzotint type.

Mezzotint Effect

Go to Filter>Blur>Radial Blur. Set the Amount to 100, Blur Method to Zoom and Quality to Best. Repeat this step twice to get a much smoother result.

Radial Blur

Our first image for the space blast is now complete. Save your image now as a JPEG and name it image1.

You will have to repeat the whole process to create four more images. Your images should be different because of the random nature of some of the filters. Save your second image as image2, the third as image3, the fourth as image4 and the fifth as image5.

Creating the Animation in Flash

Open up Flash and start off with a 480x360 px new document, set the background color to white #FFFFFF and change the Frame Rate value to 32.

New Document Properties

Go to File>Import>Import to Stage, and select the first image of the sequence of images that we created previously in Photoshop. We are going to have to put each image in a separate frame, so import one image at a time and make sure each one is set on its keyframe. You should have five keyframes on the timeline as a result.

Timeline

If you saved you images' file names with a sequence of numbers at the end, Flash will ask you if you wish to import all the images in the sequence. Click Yes and Flash will import all the images in separate frames automatically.

Importing a Sequence

It is now time to add your own main object image, create a new Layer and then Import that image, once you have it on stage you will need to Convert it to a Symbol in order to be able to pass Actions to it. Press F8 or go through Modify>Convert to Symbol. Select Movie Clip and press OK. Now right-click your object and select Actions. You will now need to paste the following code to it:

onClipEvent (enterFrame) {
_x = random(5) + 240;
_y = random(5) + 180;
}

The code is simple, it will make your object shake randomly in the area of 5 pixels within the canvas size. If you test the movie you should get something similar to what you see below:

This concludes our tutorial, I hope that you've learnt something new from it, feel free to email me on diablo@oman3d.com for any comments or questions or alternatively post in the Oman3D Forum to get instant feedback.

- End of Tutorial.