3D Hologram effect in Flash and Swift 3D

Once you have chosen which model to use (for this tutorial I am going to use a human figure model click to download this 3DS file)

If you are using a .MAX file or other 3D format you will need to first open it up in your software e.g 3D Studio Max, then export it to 3DS format before continuing.

You can do this in 3D Studio Max using the File -> Export option.

Once you have your new model saved as 3DS fire up the Swift 3D software (for this tutorial I am using version 3, but iam guessing other versions are simular)

Once it has loaded up, use the File -> New from 3DS option to load your new model into the Swift 3D Scene (shown above).

Along the bottom you should see some icons, (shown above) now click the one at the bottom labeled "Show Animations".

You will be shown a series of icons on the right hand side, each of these represent the many different angles by which a chosen 3D object can be animated.

Once here find the animation icon you wish to use (for this tutorial i am using the "Horizontal Right" preset). When you have made our selection, click and drag the icon on to your model.

Now left click and select your model , you will now notice that a series of keyframes have appeard on the timeline panel above and at the moment these are grayed out.

If you now click and drag over the top of the timeline you will see your model rotate in the chosen direction

In order to adjust these keyframes you will need to click the "Animating" button in the top right.

Once you click this the timeline becomes active and you can start to move the keyframe sliders.

 

While the "Animating" button is highlighted in red left click and drag each of the sliders to extend the animation length.

For my animation ahve chosen to set my half way keyframe to frame number 25 and the last key frame to frame number 50. Try to remember the more frame you use in your animation, the larger your final flash movie will be.

When you are happy with your animation keyframes click the tab along the top title "Preview and Export Editor". This section will allow you to setup your final render for your 3D animation, it offers many formats and options but for this example we just want to select the "General" menu, then from the dropdown box below set the "Target File Type" to Flash Player (SWF).

Next click on the "Fill Options" menu (this allows you to specify how many colours to use in the final render) for this example we will only be needing one colour so choose "Cartoon Single Color Fill" (but remember the more colors you use the larger the final file size)

Once you have selected both of these options click the "Generate All Frames" button.

This will start the rendering process, it should only take about 30 seconds to complete and you can see its progress as it creates each frame of the animation.

Once again the more keyframes or colours used will increase the overall time it takes to render, aswell as the final file size.

Once the rendering is complete you will need to save this animation. Becuase we selected the "Flash Player (SWF) option in stage 7 it will now let us save this animation as a Flash SWF file.

Click the "Export All Frames" button, now give it a name and save it somewhere you can easily remember, as you will shortly be importing this file into another flash movie.

 

If you now find this new saved file and open it up using the Flash player you will see your animation sequence in action.

Now you can just leave it as it is and upload this animation onto your website, but we don't want to do that just yet.

So now its time to learn how to integrate these cool Swift 3D animations into your other Adobe Flash projects.

Create a new flash movie open the Modify ->Document menu and set the frame rate to about 20.

Then use the Insert -> New Symbol menu to create a new Movie Clip and give it the title "hologram".

 

Once you have created this new symbol it will take you into the timeline editor for this symbol.

Now use the File -> Import menu a box will then pop up asking you to choose a file. Now find your previously saved SWF file exported from the Swift 3D software package, then click "Open"

You will now notice that the imported file has filled up 50 frames of this movieclips timeline (these are the frames of the animation from the imported SWF file)

Now return to the main timeline using the "Scene 1" button located in the top left of the timeline panel"

Once here you will need to load the Windows -> Library panel, then click and drag your new movieclip titled "hologram" from the library into the work area.

Your new hologram animation should now appear

This movieclip now houses the spinning 3D animation, but in order to further animate this clip we will need to place it inside of another movie clip.

So right click on your "hologram" movie and choose the "Convert to Symbol" option, make sure it is set to Movie Clip and give it the name "hologram_anim", this has now put the "hologram" movie inside another movie clip. Now double click on this new "hologram_anim" symbol this will take you into its timeline editor

 

As you can see the "hologram" movie clip is now on the first frame. Now in order to give this animation a bit more spice you will need to create a series of keyframes (to do this right click on a frame and select the "Insert Keyframe" option.

The next set of images shows how I have used the "Free Transform tool" to randomly resize the "hologram" movie clip on each of the keyframes.

(Important: start this sequence on frame 2 leaving the first frame untouched and in its original state)

Simply click on each keyframe and set the "hologram" movie clips size simular to the sequence above.

For the light blue versions I have simply adjusted the alpha levels in the Windows -> Properties panel.

 

I have now repeated the above process a few more times within the "hologram_anim" timeline. If you look carefully at the image above you will see at what point I have added the keyframes with some random size and alpha settings for each.

(Important: make sure that the last frames in each sequence are the original frame 1, that we saved in stage 15)

.

This last effect is optional but i guess it add a bit more of a hologram type effect to the final animation.

You will need to once again return to the main timeline and right click on your recently created movie clip, and once again select the "Convert to Symbol" option, this time give it the title "hologram_double".

As before this will now put the "hologram_anim" inside a new movieclip, in order words we now have three depths of movie clips.

Now double click on this new "hologram_double" movie clip and enter its timeline. Once here create a new layer above the first, then right click on the first frame containig the "hologram_anim" movie and select "Copy" then paste this onto the first frame of the layer above.

Now use the resize tool to slightly resize the second copy of the "hologram_anim" clip (this will create a slightly larger version of the animation ontop of the other.

 

Due to the nature of this human shape resizing using the method above made my new copy a little taller than expected, so i simply adjusted the height using then options in the Windows -> Properties Panel below.

Now to finish off this effect set the alpha level for this new copy to about 40%.

This extra faded copy above the original creates a faded outline, that I feel enhances the overall effect, but like i say its optional.

.

The next stages of this tutorial feature the iris animation effect from another flash tutorial.

If you wish to include this effect you should first view this tutorial.

Please Note: If you didnt read the last page, this part of the tutorial uses the iris animation movie clip, you can see the tutorial for this here

First load up your aniamted iris flash file and select all of the frames over all of the layers in the timeline, next right click and select the "Copy Frames" option form the menu

.

Now return to your hologram flash file and create a new symbol using the Insert -> New Symbol menu.

In the panel that appears set it as a Movie Clip and give it the name "light_beam"

Once you have created the new symbol titled "light_beam" you should be taken into the timeline editor for this new movie clip.

You will then need to draw a shape, any shape it dosen't really matter as this is only going to be used as a stepping stone.

Now right click on this shapeand select "Convert to Symbol" option, now also set this as a movie clip and give it the name "iris"

 

As you can see we have simply used this square shape to create another movie clip within a movie clip. You should now be in the timeline editor for this new iris movie (see my timeline levels above)

Once right click on the first frame in the timeline and choose the "Paste" option. This will now copy in your copied frames from stage 25 and will remove the now unwanted square shape from the timeline..

.

So now you should have a "light_beam" movieclip, and within this another movieclip titled "iris" containing your cool iris animationl.

You will now need to return to the "light_beam" timeline by clicking the level icon just above the timeline, (you can see this in the image for stage 28)

Now select the "Free Transform" tool from the left hand tools menu and decrease the height of your "iris" movie clip by about 75% (see above)

Next create a new layer above the one containing the "iris" movie clip.

Now as we are now going to be creating some glowing beam of light effects a white background is going to be a nightmare,so use the Modify -> Document menu and change the background colour to black.

Next make sure that you have frame 1 selected on this new layer and create a circle shape (see above).

 

One created select your shape by left clicking on it, then open up the Windows -> Color Mixer panel.

Set the type to "Radial" the first slider to the colour "White" and the second slider to your chosen tint (for mine this was a light blue)

To finish the gradient effect click on the blue slider then adjust the Alpha level to 0% (see above) this now gives the circle a faded glow with a tint of blue, wicked stuff!

.

Now that you have your ball of light, you will need to obviously resize it to fit over your iris animation.

Use the "Free Transform" tool and adjust the height to about 50% of its original size, then position it in the right place over your iris.

Now as you may have noticed this dosent look quite right, so you will need to use a little trick to give the glow a bit more depth and seem as though its emmiting form the hole in the iris.

Important: Before doing this make sure that you lock the first layer with the iris animation (simply click the padlock icon on the bottom layer)

So simply drag over the bottom half of the circle shape, then once again select the "Free Transform" tool.

Now decrease its height by about 40% (you may have to try this a few times to get it to fit right so use the CTRL + Z to undo if you need to retry)

Next create a new layer above the others, you will also need to lock these other layers to avoidunwanted editing (simply make sure that thier padlock icons are set to on)

To create the beam of light effect you will need to start by drawing the shape above using the flash line tool, you can find this on the left side tool menu.

I've used a bright green colour to make this easier to see.

.

Then use the "Free Transform" tool to reate this new shape 90 degrees clockwise.

Now fill the shae with any colour and load the Windows ->Color Mixer panel as seen in stage 31.

From the above this may look like I have just given this shape a white and black gradient setting, but instead of setting the irght hand slider to black set it to white and give it an Alpha level of 0% (this will make it transparent therefore you will be able to see objects sitting behind the beam of light.

After you've added your gradient effect simply rotate the shape back to its original position, double click on the outline and press delete.

Create a new circle shape, then left click on the center and delete the fill colour, this will leave you with an outline. Now position this outline over your ball of light (heres a perfect example of why its a good idea to lock other layers).

Now resize and position this new circle shape so that it matches the curvature of the light ball shape.

One you have set the right amount of curve left click on the circle outline shape and press CTRL + G , this will group the object.

Now position the circle shape over the beam of light shape just so that the edges of the straight edge tough the rim of the circle (shown above)

When your are happy with the position hit CTRL + B to break appart the circle group. Now select the blotter tool from the left side menu and click on the gradient fill colour of the light beam shape, now select the fill tool and click the new blotted selection into the gap.

.

Now position your light beam shape over the ball of light (you will probably have to resize and play a little to get it just right)

Next go up to the timeline editor and right click on the first frame of the third layer and select "Create Motion Tween" If you now go down and left click on your light beam shape you should now be able to goto the Windows -> Properties panel and give it an Alpha level of about 50%

Do the same thing for the iris on the layer below (remeber to uplock it first) I set my iris with an Alpha level of 90%

For this animation you will need to remember how long your iris animation was, following the iris tutorial mine was 65 frames.

Layer 1: Right click on frame 66 on the first layer and choose "Insert Frame"

Layer 2: Next grab the first frame from layer 2 and drag this to frame number 15, now right click on frame 60 and "Insert Keyframe"

Layer 3: Finally grab the first frame from layer 3 and drag this along to frame 40, now right click at frame 65 and "Insert Keyframe"

(You should end up with a frame setup simular to the above)

 

You will now need to setup some alpha levels for each of the stages of the animation simple click on the chosen frame, then left click on the object in that frame.

Now use the Windows -> Properties panel to set the Alpha levels for each of the objects so they match the above.

.

Create one more new layer above all the rest, right click at frame 65 of this new layer and "Insert Keyframe"

Now load up the Windows -> Library panel, then click and drag in the movie clip titled"hologram_double" that we completed in stage 24 into place over your new beam of light.

 

Finally right click on this last frame containing tp "hologram_double" movie clip and select "Actions"

Then add the following actionscript code to finish the animation:

Now return to your main timeline and use the Windows -> Library once again to position the finished "light_beam" movie clip onto the main timeline.

Optional extras include giving your "double_hologram" movie clip a colour tint from the Windows -> Properties panel.

.

Tinted model animation on a standard background colour.

 

What a different a gradient makes. I have added this effect on the layer below the rest and have used the same technique as seen in stage(s) 31 and 35 great stuff!