Flash Tutorials

Introduction

1. an interface walk-through, which illustrates and describes the main features of the Flix encoder, and
2. an encoding session walk-through, which describes, in detail, all the steps required to encode an SWF using the Flix encoder.

Specs

• .asf
• .avi
• .mp3
• .mov/.qt
• .mpeg
• .wav
• .wma
• .wmv

System Requirements

• 64MB RAM
• Pentium II 233MHz
• 10MB free disk space
• Win 98/2000/NT 4.0
• Internet Explorer 4.0 or higher

Interface Walkthrough

File Tab

Input/Output

Export Options

Presets

Clip Information

SWF Tab

Movie Options

Custom Variables

Audio Tab

Input/Output

• Format: This is the format of the source media.
• Sampling Rate: The frequency at which the audio was encoded. The number of samples of sound encoded per second.
• Channels: The number of channels in the source audio (1 is mono, 2 is stereo).
• Sample Size: The bitrate of the source audio.
• Duration: The length of the source audio (minutes:seconds).

Output Audio Export Options

Output Audio Options

• Sampling Rate: this is the frequency, or the number of samples per second, at which the audio is encoded. This is measured in Hertz (Hz).
• Bitrate: this value determines the amount of information used to store the audio in the output SWF. This is measured in kilobits (1000 bits = 125 bytes) per second (Kbps). Higher bitrates lead to higher quality audio AND larger SWF filesize, but do not significantly affect RAM consumption on the viewer's machine. 128 Kbps MP3 audio is generally considered to be equivalent to CD audio.
• Stereo: By checking this box, your audio is encoded in 2 channels. A setting of mono will result in better audio quality at lower bitrates.

Video Tab

Input/Output

• Format: This is the format of the source media.
• Frame Rate: This is the number of video frames per second in the source media.
• Color Depth: This value indicates the number of colors in the source video.
• Dimensions: The dimensions are the width and height of the source video.
• Duration: The length of the source video (minutes:seconds).

Output Frame Options

• Average image quality: This value, set on a scale of whole numbers from one to 100, reflects the image quality for each frame. You may think of this like saving a .jpeg. The higher the number, the better the image quality, and the larger the file size. This setting does not significantly affect client-side RAM consumption. You may have to experiment to find your ideal setting. We recommend keeping your average image quality below 80%.
• Apply smoothing: This setting is either on (checked) or off. This feature can be used to compensate for some of the pixelation characteristic of photographic image compression. This feature can be more useful at lower image quality percentages (when pixelation increases) or if you apply "Custom SWF dimensions" and stretch your image (see next step).

Output Video Options

• Image Dimensions: this specifies the height and width of each frame image in your SWF. You may use the dimensions used with the presets (in the File tab), or you can enter a whole number between 1-500, or you may select to use your source video dimensions by checking the "Use source dimensions" box.
• SWF Movie Dimensions: By default, "Use custom SWF dimensions" is unchecked, which means that the height and width of the output SWF is the same as the specified image dimensions. However, you may choose to enlarge your SWF dimensions without enlarging your actual image dimensions. For example, let's say your source dimensions are 100x100 and you choose to maintain your original dimensions in your output. That means that each frame is a 100x100 pixel image. Now, let's say that you check "Use custom SWF dimensions" and enter 125 for both width and height. This means that your output still only has the information (and filesize) for a 100x100 pixel image, but it is blowing up each frame by 25% to 125x125 pixels. In this way, you can enlarge your output image without increasing filesize at all, or significantly affecting client-side RAM consumption. The custom SWF dimensions can be a whole number between 20 and 2000.
• Video Framerate: This specifies the number of different video frames displayed per second in your output (and is not your SWF framerate). The higher the video framerate, the smoother the video, and the larger the file size. Also, the higher the framerate, the more RAM the Flash player will consume on the client-side. For this reason, if you are encoding video for higher bitrates, we recommend boosting average image quality and custom SWF dimensions, over significant increases in video framerate. The video frame rate can be a whole number between 1 and 30.
• Maximum Bitrate: The frame and video options directly affect the output file size, but they do not determine a fixed filesize -- that depends on the individual media file. By selecting this box, Flix will drop frame image quality so it doesn't exceed the maximum bitrate, which is especially relevant for 28k and 56k streams. The maximum bitrate can be a whole number between 8 and 512.

Flix Options

• Save Encoder Settings on Exit: Checking this box causes Flix to launch with the settings that were last used.
• Confirm Exit: Checking this box causes Flix to prompt "Quit Wildform Flix?" when you quit. Unchecking the box causes Flix to quit without prompt.
• Remember Window Positions: Checking this box causes Flix to launch in the window location where it last was used.
• Confirm Overwriting of Files: Checking this box causes Flix to confirm if you attempt to overwrite an existing file with a save or encode command.
• Warn when SWF player will exceed 50MB: Checking this box causes Flix to warn you if your media clip will cause the Flash player to consume in excess of 50 MB of RAM while playing the SWF media file.
• Reload Presets: Reload the default Flix presets.
• Edit in Notepad: This command opens up the Flix presets file in Microsoft(TM) Notepad. You may manually enter and alter presets in this manner.

Encoding Session Walkthrough

Introduction

1. Select Source Media
2. Set Output Name
3. Choose Outputs
4. Enter Clip Information
5. Set SWF Options
6. Set Custom Variables
7. Set Audio Output Options
8. Choose Audio Intermediate Files
9. Set Output Frame Options
10. Set Output Video Options
11. Click Encode!

Select Source Media

• select "Select Input" under the "Encoding" menu.
• on the "File" tab, click the "Browse…" button to the right of the "Input:" text field.

Set Output Name

• select "Set output" under the "Encoding" menu.
• under the "File" tab, click the "Browse…" button to the right of the "Output:" text field.

Choose Outputs

Enter Clip Information

Set SWF Options

Set Custom Variables

Set Audio Output Options

• Sampling Rate: This is the frequency at which the audio is encoded. This is measured in Hertz (Hz). The higher the frequency, the less "tinny" your audio will sound, and the larger your filesize will be.
• Bitrate: This value reflects the amount of information used to store the audio in the output SWF. This is measured in kilobits (1000 bits = 125 bytes) per second (Kbps). Higher bitrates lead to higher quality audio AND larger SWF filesize, but do not significantly affect RAM consumption on the viewer's machine. 128 Kbps MP3 audio is generally considered to be equivalent to CD audio.
• Stereo: SWF can support stereo audio. If you wish your audio to be encoded in stereo (assuming the source is stereo), select this box. This setting does affect file size. At lower bitrates, a setting of mono will result in better quality audio.

Choose Audio Intermediate Files

Set Output Frame Options

• Average image quality: This value, set on a scale of whole numbers from one to 100, reflects the image quality for each frame. You may think of this like saving a .jpeg. The higher the number, the better the image quality, and the larger the file size. This setting does not significantly affect client-side RAM consumption. You may have to experiment to find your ideal setting. We recommend keeping your average image quality below 80%.
• Image smoothing: This setting is either on (checked) or off. This feature can be used to compensate for some of the pixelation characteristic of photographic image compression. This feature can be more useful at lower image quality percentages (when pixelation increases) or if you apply "Custom SWF dimensions" and stretch your image (see next step).

Set Output Video Options

Click Encode!

• Play when finished: Checking this box causes the newly created SWF media file to play as soon as it finishes encoding
• Beep when finished: Checking this box causes Flix to sound a beep (the specific sound is determined by your Windows System Sound settings) when the encoding process is complete. This is useful if you wish to do something else during the encoding.
• Close window when finished: Checking this box causes this dialog box to close immediately upon the completion of encoding.

Conclusion

Poser Pro Pack 4 has added the ability to export to .swf format. This tutorial will explain the process of creating a simple walk cycle with Poser Pro Pack 4 and bringing it into Flash. You'll also learn how to keep the resulting file size low. Poser, like all 3D applications, has the potential to export massive file sizes. By the end of this tutorial, you'll know how to create the Flash animation shown below. The total file size is only 18k!

Creating the Walk Cycle

Creating a walk cycle in Poser is incredibly easy. We'll use the default figure which appears when launching Poser. If you'd prefer to use one of the naked figures, feel free, but don't get too distracted! The walk cycles in Poser are preprogrammed, so essentially, all it takes is a click or two and your figure will walk.

1.) Open the Libraries by clicking on the handle on the far right edge of the screen (or Window : Libraries ) .

2.) Click on Poses. Inside the Poses Library, click on the black triangle which pops down a submenu and choose Walk Designer. Scroll down and choose Walk.

3.)On the main canvas, change your camera angle from Main Camera to Left Camera.

4) To play the animation, use the controls at the bottom left of the screen.

That's all there is to it! Now you're ready to save the walk cycle as a .swf.

Saving poser animation as .swf

You're now ready to export the animation as a .swf. Go to Animation: Make Movie. A dialog box will appear.

1.) Select Macromedia Flash from the drop down menu labeled "Sequence Type". In order to keep the file size low, I've chosen to reduce the size of the original file by 1/4 by going to the drop down menu titled Resolution and choosing "Quarter". Choose "Full" if you'd prefer to retain its original size.

2.) Click the Flash Settings button. Here, set your color number to 4. Deselect all checkboxes (Overlap Colors, Inner and Outer lines).

3.) Select OK on both dialog windows and your file should start to export.
After naming your .swf file, it would be a good idea to also save your Poser file for future alterations.

Importing the animation into Flash

In your Flash file, we're going to place the animation into a movie clip. This will then allow us to tween the walk cycle, giving the figure the appearance of walking from one point to another.

1.) In Flash, create a new movie clip by going to Insert: New Symbol.

2.) Within this symbol, import the .swf file you've just created by going to File: Import. This will create 30 keyframes on your movie clip's timeline.

3.)Return to the main timeline and drag the movieclip you've just created out onto the canvas.

4.)Motion Tween the movie clip so that it moves from the left side of the screen to the right.

5.) After testing your movie, adjust the tween until it looks like the figure is taking natural sized steps.

See how easy that was? Now that you've got the basics, you can go back to Poser and play around with different figures and walk designs.

Download the files used in this tutorial. Download (75 kb)

This is a sweet way to simulate flying through a 3d stack of images. You have to wait a few seconds for all 3 images to load. It uses very little processing power, and it’s fairly easy to understand. It uses this magic formula: scale = focalLength / (focalLength + z). My code here is very well commented, so I’ll let it do the talking. If you have any questions, just throw them in a comment.

Btw, the images are pulled from Flickr, from a very talented photographer.

//Declaring the URL, the Loader, and the XML variables
var xmlURL:URLRequest = new URLRequest("images.xml");
var xmlLoader:URLLoader = new URLLoader();
var xml:XML;

//Declares the image array
var imageArray:Array = new Array();

//Declares the variables needed for the 3D effect
//Try playing around with the value of these variables to make it look different
var focalLength:int = 50;
var distance:int = 0;
var distanceBetweenImages:int = 100;

//Telling the loader to load the URL
xmlLoader.load(xmlURL);

//Enter Frame event listener
addEventListener(Event.ENTER_FRAME, onEnterFrame);

//Detects when the loader has finished loading the data
xmlLoader.addEventListener(Event.COMPLETE, parseXML);

//converts the loaded data into XML
function parseXML(e:Event):void
{
   xml = new XML(e.target.data);
   displayImages();
}

function displayImages():void
{
   for (var k in xml.image)
   {
       //declares the movieclip that the image will be in
       var imageMC:MovieClip = new MovieClip();

       //gets the URL for the image
       var imageURL:URLRequest = new URLRequest(xml.image[k]);

       //declares the loader and loads the image
       var imageLoader:Loader = new Loader();
       imageLoader.load(imageURL);

       //adds the image to the movieclip
       imageMC.addChild(imageLoader);

       //adds the image movieclip to the stage, and puts the image at the bottom of the image stack,
       //but above the background rectangle with the gradient, you will have to change this number
       //based on what you want to have behind your stack of images
       addChildAt(imageMC, 1);

       //puts the image movieclip at a position
       imageMC.x = 18;
       imageMC.y = 20;

       //adds the image movieclip to the array of images
       imageArray.push(imageMC);
   }
}

function onEnterFrame(e:Event):void
{
   //creates the distance from the screen to the first image in the stack of images
   //you can make this react to a scroll bar, or a slider, or anything you want
   //making it react to the mouse is just for this tutorials demonstrational purposes
   distance = (stage.stageWidth - stage.mouseX) - 200;

   //loops through the image array
   for (var k in imageArray)
   {
       //puts the spacing between the images
       var z:int = distanceBetweenImages * k;

       //figures out the scale
       var scale:Number = focalLength / (focalLength + (z + distance));

       //puts limits on the scale, based on how the scale is computed
       //it is possible for it to be negative, we don't want that
       //makes the image invisible after it gets realls close
       if (scale > 1.2)
       {
           imageArray[k].visible = false;

       } else if (scale < 0)
       {
           scale = 0;
       } else
       {
           imageArray[k].visible = true;
       }

       //applies the scale to the image
       imageArray[k].scaleX = scale;
       imageArray[k].scaleY = scale;

       //makes the image alpha the same as the scale, to add to the effect
       imageArray[k].alpha = scale;

       //places the image at the center of the screen
       imageArray[k].x = (stage.stageWidth / 2) - (imageArray[k].width / 2);
       imageArray[k].y = (stage.stageHeight / 2) - (imageArray[k].height / 2);
   }
}

Getting Started

For this demo application, we’ve used the latest version of papervision3d with the code name GreatWhite.
First of all, we need to include the papervision3d stuff.

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;

These are all the classes we need for our application. The Camera3D class enables you to focus on a 3d object and zoom to it. Scene3D is a container that holds all 3d objects. The Viewport will be added to the main stage and is like a video screen that shows the result. Another important class is the BasicRenderEngine which renders all the objects from the scene with the current camera settings and outputs the result to the viewport. Papervision comes with different types of objects, but for our example we’ll only need the cube. And finally there are the materials which can be set to the objects. This is how papervision basically works.

Then we to set some constants for the sound channel

const CHANNELS_PER_DIRECTION:int= 256;
const CUBES_PER_CHANNEL:int  = 8;
const CHANNEL_STEPS:int   = Math.floor(CHANNELS_PER_DIRECTION / CUBES_PER_CHANNEL);

Next thing to do is to set the papervision variables

var viewport:Viewport3D;
var scene:Scene3D;
var camera:Camera3D;
var cube:Cube;
var renderer:BasicRenderEngine;

To keep a reference of each cube, we need to create 2 arrays. For each sound channel (left, right)

var cubesLeftChannel:Array  = new Array();
var cubesRightChannel:Array  = new Array();

At the end, we want to swing our camera from left to right and vice versa. To know in which direction we’re currently moving, we need to set a flag:

var bolAnimationForward:Boolean  = true;

The next part is the same as in the previous tutorial. We create a new sound object and a url request for requesting the mp3 file. SndBytes will hold the current spectrum data.

var sndObject:Sound   = new Sound();
var reqObject:URLRequest   = new URLRequest("so-deep.ram2000.mp3");
var sndBytes:ByteArray   = new ByteArray();

So, the next step will be the initializing of our 3d stuff, then loading the soundfile and finally creating the render loop.
First of all, we create a new viewport and add it to the stage. The third parameter tells the viewport to use the whole width and height of the swf file for displaying the 3d objects.

viewport = new Viewport3D(0, 0, true);
addChild(viewport);

Then we create a new basic render engine and a scene which holds the 3d objects

renderer = new BasicRenderEngine();
scene = new Scene3D();

Our cubes will need a material. We create a blue one for cubes that are displaying the left channel and a green material for the other ones. You can easily change the colors for each side using hex values.

var blueMaterial:MaterialsList = new MaterialsList(
{
front:  new ColorMaterial(0x0066FF),
back:   new ColorMaterial(0x0066FF),
right:  new ColorMaterial(0x0046B0),
left:   new ColorMaterial(0x0046B0),
top:    new ColorMaterial(0x1171FF),
bottom: new ColorMaterial(0x1171FF)
}
);

var greenMaterial:MaterialsList = new MaterialsList(
{
front:  new ColorMaterial(0x00CC00),
back:   new ColorMaterial(0x00CC00),
right:  new ColorMaterial(0x009F00),
left:   new ColorMaterial(0x009F00),
top:    new ColorMaterial(0x00CC00),
bottom: new ColorMaterial(0x00CC00)
}
);

Now we need to create the cubes for the left channel, position them correctly on the x-axis, keep a reference in the array and add them to the scene

for(var i = 0; i < cube =" new" x =" i"> 
The same procedure for the cubes standing for the right channel but with the green material and we place them between the green ones.
 
for(i = 0; i < cube =" new" x =" (i"> 
Finally we create a new camera, set the target to the cube in the middle, adjust the zoom and move the start position a bit to the upper left
 
camera = new Camera3D();
camera.zoom = 11;
camera.target = cubesRightChannel[CUBES_PER_CHANNEL / 2 - 1] as Cube;
camera.x -= 400;
camera.y += 300;
 
Now we’re finished with creating all the necessary 3d stuff. Next thing to do is loading a sample mp3 file which is quite easy. We just load the url request we’ve created bevore and play the file.
 
sndObject.load(reqObject);
sndObject.play();
 
The only thing left to do is the render loop. This loop will be executed on enter frame, in our case 60 times per second. First, we compute the spectrum and put the result in the defined byte array.
 
SoundMixer.computeSpectrum(sndBytes);
 
Then we set the right position for the byte array pointer, read the float value and assign it to the current cube scaleY value. Like this, the cubes will be resized according to the spectrum. After the end of the first loop, we repeat the procedure for the right channel cubes
 
for(var i = 0; i < cube =" cubesLeftChannel[i]" position =" CHANNEL_STEPS" scaley ="  sndBytes.readFloat();" i =" 0;" mycube =" cubesRightChannel[i]" position =" 1024" scaley =" sndBytes.readFloat();"> 
To swing our camera a bit, we increase and decrease it’s x value
 
if(bolAnimationForward) {
camera.x += 4;
if(camera.x > 800)
bolAnimationForward = false;
} else {
camera.x -= 4;
if(camera.x < -400)   bolAnimationForward = true; } 
 
And now we need to tell the render engine to render the current scene, camera and viewport
 
renderer.renderScene(scene, camera, viewport);
 
That was already the whole trick. You can also try rendering other materials and different objects. These were just the basics about papervision3d. We hope you enjoyed reading this tutorial. Any feedbacks and questions are welcome.
 
In the final you will get this:
 
 
Full code with comments
 
// Import Papervision3D
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;

// constants
const CHANNELS_PER_DIRECTION:int= 256;
const CUBES_PER_CHANNEL:int  = 8;
const CHANNEL_STEPS:int   = Math.floor(CHANNELS_PER_DIRECTION / CUBES_PER_CHANNEL);

// papervision vars
var viewport:Viewport3D;
var scene:Scene3D;
var camera:Camera3D;
var cube:Cube;
var renderer:BasicRenderEngine;

// arrays holding references to cubes for each channel
var cubesLeftChannel:Array  = new Array();
var cubesRightChannel:Array  = new Array();
// animation flag
var bolAnimationForward:Boolean = true;

// sound vars
var sndObject:Sound    = new Sound();
var reqObject:URLRequest   = new URLRequest("so-deep.ram2000.mp3");
var sndBytes:ByteArray   = new ByteArray();

// INIT
function init():void {
init3D();
initSound();
// add event listener for render loop
addEventListener(Event.ENTER_FRAME, renderLoop);
}

// init3d
function init3D():void {
// Create viewport
viewport = new Viewport3D(0, 0, true);
// add viewport to stage
addChild(viewport);

// create basic render engine
renderer = new BasicRenderEngine();

// Create scene
scene = new Scene3D();

// blue cube material
var blueMaterial:MaterialsList = new MaterialsList(
{
 front:  new ColorMaterial(0x0066FF),
 back:   new ColorMaterial(0x0066FF),
 right:  new ColorMaterial(0x0046B0),
 left:   new ColorMaterial(0x0046B0),
 top:    new ColorMaterial(0x1171FF),
 bottom: new ColorMaterial(0x1171FF)
}
);

// green cube material
var greenMaterial:MaterialsList = new MaterialsList(
{
 front:  new ColorMaterial(0x00CC00),
 back:   new ColorMaterial(0x00CC00),
 right:  new ColorMaterial(0x009F00),
 left:   new ColorMaterial(0x009F00),
 top:    new ColorMaterial(0x00CC00),
 bottom: new ColorMaterial(0x00CC00)
}
);

// create cubes for left channel
for(var i = 0; i < cube =" new" x =" i" i =" 0;" cube =" new" x =" (i" camera =" new" zoom =" 11;" target =" cubesRightChannel[CUBES_PER_CHANNEL" i =" 0;" cube =" cubesLeftChannel[i]" position =" CHANNEL_STEPS" scaley ="  sndBytes.readFloat();" i =" 0;" mycube =" cubesRightChannel[i]" position =" 1024" scaley =" sndBytes.readFloat();"> 800)
 bolAnimationForward = false;
} else {
camera.x -= 4;
if(camera.x < -400)    bolAnimationForward = true;  }   // render current scene  renderer.renderScene(scene, camera, viewport); }  init();  

Source Files Download

In this tutorial we will create an Interactive 3D environment. Images first appear in a 3D wall and then on click randomly expand out. The camera then zooms through space to the clicked image. An image can be flipped over to reveal image information.

Introduction

This tutorial uses the Flash Framer space3D component. The space3D component is an ActionScript 3.0 plug-in for Adobe Flash that makes it easy to create a random photo gallery in a few easy steps. Our developers have done the hard work so you don’t have too.

Step 1

Once you have downloaded and installed the space3D component, Launch Flash and open a new ActionScript 3.0 document. Save the document with any name you like.

Step 2

Open the components panel. Window > Components
You will now see a component set called FlashFramer.
Open up that set and you will find the space3D component.

Drag and drop the component onto the stage and align it.
I’m using the stage size of 700x510 pixels. I will also size the component to 700x510 to fit the stage.

Set the frames per second (fps) to 20 fps for smoother animation.

Step 3

Now lets load some images. I’m using twenty five images of space scenes.
Put your photos in the same directory as your Flash file in a folder named images.

Step 4

Jump back over to Flash.
Click on the space3D component to select it and open the Components Inspector panel.
Window > Component Inspector
Double click on the Image List value field.

A Dialog box will popup.
Click on the plus button to add an image with a title and description.
Repeat this until you have all your images entered.

You can also use XML file to control every parameter of the space3D component.
See the documentation that came packaged with the component or download it here.

Preview you file. File > Publish Preview > Flash

You now have a fully working dynamic photo gallery.

Step 5

You can either use the space3D component out of the box or modify and skin it to your liking.

space3D comes built with tons of parameters to customize your gallery. Such as: xml, spacing, margin, border size and color, reflection, transition, show arrows, back flip, and camera movement.
These setting are found in the Component Inspector in Flash.

Play around with these setting until you get the look you want.

Step 6

You can also skin the component elements to your liking.
Skinning the space3D component is so easy. Just double click on the component in Flash. It will open all the skinnable elements. Double click on the element you want to modify and begin customizing. Once you done just click on scene 1 to return to the main timeline and preview your work.
File > Publish Preview > Flash

Final Customized Gallery

Conclusion

This animation will be created using cylinder shapes and simple tween animation all in Swift3D.

Our tutorial will be divided into three part:

1. Modeling the battery using cylinder shapes.
2. Animating the battery run-out effect using the Animate Button.

Modeling the Battery

Start off by creating a new Swift 3D file, access the Properties Toolbar and change the Layout width to 240 and the height to 320 - these are the dimensions of our output SWF.

Our battery is divided into two four parts: the body, the lower cap, the upper cap, and the terminal. We are going to do each of these on its own in the numbered order shown in the diagram below.

As we said previously, our entire battery will be made up of cylinder shapes, so to create the body of our battery, simply click on the Create Cylinder icon on the Main Toolbar to create one instantly. We are going to give this one a reflective green material, so simply drag one from the Reflective Tab in the Gallery Toolbar in the lower section of the screen and drop it onto our cylinder to apply this material.

Our body is done, now to create the lower cap click once again on the Create Cylinder icon to add another cylinder on stage. It should cover up our existing cylinder. Access the Properties Toolbar on the left of the screen, and under the Cylinder section change the length of the cylinder to 0.100 units. That will make our cylinder shorter. We need to position this cap right below our battery body, we can use the mouse to move it around, but to get a more precise position we can simply click on the Position section of the Properties Toolbar and set the Y coordinate of our Object Position to -0.55 to get at the right spot.

The position is now right, we just need to apply the right material for this part and that is a reflective black material. Again, simply access the Gallery Toolbar and drag and drop one onto your object.

Our lower cap is now done as well, we will create the upper cap next which is identical to the one we just finished. So to save time, we can just select the lower cap by clicking on it on the front viewport and then going through Edit>Copy (Ctrl+C) and then Edit>Paste (Ctrl+P). You will not see the second copy because it is right above the old one. We are going to move this one by accessing the Properties Toolbar, then going through the Position options and setting the Y coordinate of the Object Position to 0.55.

This completes both caps, the final remaining part is the terminal. Once again, because it identical to the cylinder we just completed but smaller, we can select the upper cap and then copy and paste it to create a duplicate. Now access the Properties Toolbar and reduce the size of the terminal by going through the Cylinder section and setting the radius to 0.200 units. We can then reposition it by going through the Position section and setting the Y coordinate of the Object Position to 0.65. That should do it, the cap might not be clearly visible from the default front view port, but you can see it on the left viewport.

We are now finished modeling our battery and will move on to the animation part in the next section.

Animating the Battery

We are going to animate our battery using the Animate Button in Swift 3D. Using this button we can create animation tweens similar to those in Flash in that the user simply provides the first and last frames and the animator generates all the frames in between. We are going to provide the first frame when the battery is fully and the last frame when the battery is almost empty. The starting state has already been made. We just need to provide the last stage.

Creating tween animation in Swift 3D are made using the following procedure:

1. Activate the Animate Button
2. Move the Current Frame Indicator to the required frame
3. Apply the change(s) you wish to animate
4. Deactivate the Animate Button

The procedure is pretty simple as you can see. We are going to start off by activating the Animate Button, simply do that by clicking on it once.

Our animation is going to be 20 frames long, so simply click on the number 20 on the timeline to move the Current Frame Indicator to that point.

We are now going to apply the changes we need to our battery. Start off by changing the colour of the body to red. You can do that by dragging a Reflective Red material from the Gallery Toolbar.

The second change we need to apply to our battery is change of size in the length of the body cylinder. We can do that by clicking once on the body cylinder and then accessing the Scale section of the Properties Inspector and changing the Y Factor to 0.1. That should shrink our body cylinder.

We do not want our empty red body to float in the center, we want it to settle at the bottom of the battery, so we need to reposition it. Access the Position section of the Properties Toolbar and set the Y coordinate to -0.45.

We are done. Simply click once on the Animate Button to deactivate it. You can test the animation now by clicking on the tiny Play button right below the timeline. You'll see that the green body runs out and changes into the colour red. Stop the animation when you are done. We need to do one last thing to make our animation nicer and that is to rotate it a bit to show the entire shape of the battery. We need to move all the objects together, so we are going to Group them first. Simply press Ctrl+A to select all the assets on the viewport and then go through Arrange>Group.

We are now going to rotate our grouped object by simply accessing the Rotation Trackball on the lower left corner of the screen and rotating it to get the desired orientation.

You can notice that the battery goes beyond the yellow borders of our viewport, meaning that it will not be fully visible in our output SWF. To fix this we can zoom out a little bit by clicking on an empty spot on the viewport and then accessing the Camera section of the Properties Toolbar and decreasing the Lens Length to 40. This should work as a zoom out.

We are done! You can play the animation again to see it from this new perspective.

Rendering the Animation

We are using the RaviX renderer of Swift 3D to create vector animations. To get the same result I got will need to first access the Gallery Toolbar and drag a Black environment colour to the viewport. This will affect the overall colour of the render.

Second, you need to access the Preview and Export Editor tab in the Main Toolbar and then apply the following settings to the RaviX Renderer. Most of these are self explanatory.

1. Under General, if you are planning on using this in Flash, set the Target File Type to SWFT, if you are planning on using this on the web then set it to SWF.
2. Under Fill Options, set the Type to Area Gradient Shading, and activate the options to include Specular Lights and Reflections but not Shadows.
3. Under Edge Options, set the Edge Type to Outlines and activate the options for Outlines at Intersections and to Include Detail Edges.

When you are done you can click on Generate All Frames and then Export All Frames to get your animation!

Introduction

If you’re already familiar with Swift 3D, then you know that you can apply materials to objects in the Scene Editor. When applying materials to objects in the Scene Editor, however, there are two limitations:

1. The material application is drag, drop, and done. You cannot scale or re-align bitmap textures in the Scene Editor.

2. When you create an object in the Scene Editor, it is a single Surface Group, and as such you can only apply one uniform material to the object.

In the Advanced Modeler, you have much greater control over the application of materials and textures. The Advanced Modeler allows you to divide objects into multiple Surface Groups (see: Advanced Modeler Guide Part 2), which then gives you the ability to apply more than one material to the object.

Also in the Advanced Modeler, you have the capability to scale and re-align bitmap textures, which is absolutely essential in creating photorealistic images when rendering in raster mode.

The Project

In this tutorial, we are going to model and apply bitmap textures to a box shape, and our final rendered product will be a textured 3D software box as shown below:

To begin, please download the three bitmap textures that we will be using in this project, and extract them into the folder where you plan on saving your .T3D file.

» box_textures.zip

Exercise 1: Setting Up the Materials

If you don't already have Swift 3D open, please launch it now.

Before we create a box shape or anything else, the first step is to import these three bitmaps into the Material Gallery.

At the bottom of the Swift 3D interface just to the right of the center, you'll see the Gallery selector buttons. Click on the button that depicts metallic-chrome primitives on a checkerboard background, this is the selector button for the Material Gallery.

If you've never tinkered with the Material Gallery before, then you'll see the default line-up of categories: Bitmap, Flat, Glossy, Metal, Pattern, Reflective, Stone, Texture, Transparent, and Wood.

In this tutorial we're going to be using Bitmap materials, but I would recommend that you not lump then into the "Bitmap" category that already exists in the Material Gallery. Instead, I recommend that you create a new category and name it after the project for which you are using the bitmaps.

This should be a normal part of your Swift 3D workflow whenever you create new materials as part of a 3D rendering / animation project.

To create a new Materials category, simply right-click anywhere in the empty space on the Materials Gallery, and choose Setup Materials... from the context menu that pops up.

When you do this, you are greeted by the Gallery Setup menu. Click on New Category... and give this new category a name that suits the project, such as, "Software Box."

After you click OK, you'll see that the new "Software Box" category has been added to the tab structure down in the Material Gallery. Click on the "Software Box" tab to open that category. At first you'll see a small notice in the center of the display window which reads, "No materials are available."

Let's remedy that, shall we? Simply right-click anywhere in the empty space to bring up the context menu. This time, we want to add a material to the category, so select the New Material... option.

When you do this, you will be presented with the Edit Material menu. This menu has three sections: Finish, Color, and Texture. The section that we are concerned with is the Color section. In the Color drop-down menu, look all the way to the bottom and select the Bitmap Image option.

This is a standard file browsing dialog box, so just navigate to the folder where you extracted the three bitmap images. Select the first one, box_front.bmp, and either double-click or press Import.

At that point, you'll return to the Edit Material menu, with a small preview of this new material shown in the window.

Next to the preview in the Color section of this menu, you'll see two checkboxes labeled X Tiling and Y Tiling, with a small header above them that reads, Allow. The terms X Tiling and Y Tiling refer to the repetition of the bitmap material along the Surface Group to which it is applied. We don't want these textures to tile, so uncheck both of these checkboxes.

Also, in the Finish section of the Edit Material menu, reduce the Highlight Strength and Highlight Size of the material to about 15%, as shown in the below screenshot. These two attributes control the glossiness of the material. For a shiny object, you would turn these two attributes up. For a flat or dull object, you would turn them down as we've just done.

Repeat this process for the other two bitmap materials. You'll now have three ready-to-use bitmap materials in your newly-created "Software Box," material category.

With the materials setup complete, it's time to create the box model and divide it into the appropriate Surface Groups.

Exercise 2: Creating The Box Model and Dividing it Into Surface Groups

Remember, in Swift 3D, in order to apply multiple materials to a single object, you must first modify that object in two ways:

1. Take the object into the Advanced Modeler and convert it into an Editable Mesh.

2. Divide the object into multiple Surface Groups, concurrent with how you would like the different materials to be applied.

For the purposes of this tutorial, we'll just create the box model the easy way. In the Scene Editor, click on the Create Box Tool to create a box primitive in the scene.

At this point, I'd like to provide a helpful tip for 3D rendering projects. When you're working with bitmap materials and your intention is for them to be non-tiling (as in this project), it is extremely important that the 3D surface to which you plan to apply the material has the same aspect ratio as the bitmap image itself. Otherwise, the texture will become distorted.

In this particular case, the box_front.bmp image is 400 x 550 pixels, which is an aspect ratio of 8:11 (width:height). The other two bitmaps, box_leftside.bmp and box_rightside.bmp, are 200 x 550 pixels, which is a 4:11 aspect ratio.

With that in mind, the front of this box model needs to have an aspect ratio of 8:11, and the sides need to have aspect ratios of 4:11. Swift 3D provides an extremely easy method for achieving this.

Still in the Scene Editor, select the newly-created box in the scene by clicking on it, and then look at the information panel on the left. With the Box option selected in the upper portion of the panel, change the Sizing of this box to 8 units wide, 11 units tall, and 4 units deep, as shown below.

When you do this, the box will expand greatly and occupy the entire viewport. Switch the left viewport to Perspective, and then zoom out a bit so that you can see the entire box. Also rotate the camera perspective somewhat so that all three dimensions of the box can be seen.

At this point, we need to divide this box model into the appropriate Surface Groups. Make sure that the box is selected (by clicking on it), and then head over to the Advanced Modeler and activate Edit Mesh mode.

For a reference on how to divide an object into multiple Surface Groups, please see the Advanced Modeler Guide Part 2: Surface Groups.

The screenshots below illustrate which faces need to be grouped together to create the four necessary Surface Groups on this box mesh, numbered 1-4:

Now that the model is divided into the appropriate Surface Groups, simply apply the appropriate bitmap materials via the same drag-n-drop - only this time, you're aiming at specific Surface Groups rather than at a whole object.

For Surface Group 1, apply box_front.bmp. For Group 2, apply box_leftside.bmp. For group 3, apply box_rightside.bmp. And for Surface Group 4, just apply the Flat Black material from the "Flat," category in the Material Gallery.

At this point, the project is done. All you need to do now is return to the Scene Editor and use the Perspective Viewport to get a nice viewing angle on the box. Also play with the Lighting and the Environment until you're pleased with the resulting brightness and contrast.

When you're happy with how the Scene is set up, head over to the Preview and Export Editor, and render your box in raster mode.

This tutorial has demonstrated a very simple example of what the Swift 3D Advanced Modeler is capable of in terms of working with materials and textures. In future 3D projects, this same process can be repeated and compounded many times over to apply large numbers of materials to complex meshes.