Flash Tutorials

Flash 5 and XML

2009-01-16T08:07:00.000-08:00

Introduction

When Flash 5 came out, I was impressed by a lot of the new features Macromedia had put into their product, but none so much as the addition of the XML ActionScript object. The XML Object allows you to pull in xml data and display it within your flash movie. Take a look at my example below .

Before we get into the flash movie, let's talk a little about XML.

XML - Simple

I don't want to get too technical on the XML side, so I will keep this simple. XML is a means of describing data in tag format. In plain english, XML lets you make up tags which best describe the information each tag represents. Unlike HTML, which is a simple formatting language for text and media, XML has nothing to do with formatting the data, just describing it. Confused? Well, let's look at a really simple example to clear things up. This is a REALLY simple person XML document containing my first and last name as XML data.



    Smith
    Chris

Not a very complex example, I know, but I think it demonstrates the basics of xml. Rather than putting this kind of data in an html table, which makes it very hard to get at and do anything with (such as reformatting it, sorting it, etc.), the data itself is marked up with tags which describe what the data is.

XML - More Complexity

XML is far more complex than my timid little example. Each XML tag can contain text of it's own, child tags (that is, tags which fall within another open and close tag), and even attributes:

 <-- note the 'id' attribute
...

XML itself is just what it looks like, human readable tags which order and describe the data within them. XML is broken up into a hierarchy of nodes. Each node can contain 0 or more child nodes. In XML, each node can, by itself, be considered a separate XML document, with it's children as the elements of that xml document. Here's a simple example:



    
        GrandChild 1a
        GrandChild 1b
    
    
        GrandChild 2a
        GrandChild 2b

So, the parent_node tag is the parent of both the child_node tags. The child_node tag with the id of 1 is the parent of the two grandchild_node tags within it, and so on. Any tag which contains something is said to be those things' parent node. Any element inside a set of tags is one of that tag's child nodes. Not too hard, huh?

What Good Is It?

Now after all this XML mumbo jumbo, here's the million dollar question: what good is it to you on your site? Making records like this is all well and good for nice neat data storage, but try displaying this doc in most web browsers and you will see nothing but the raw text with all the tags stripped out. How can you use this data for displaying it to users? Well up to now, the best means of formatting XML data has been through XSL stylesheets, a formatting and styling language for XML which can read your data, and based on the information in the stylesheet (also written in a subset of XML), display the data in any format you like. An xsl stylesheet can display your data as html, wml, you name it.

Most of the tools out there for displaying XML data are varied, ranging from the very good to the not so good. The most recent browsers (IE 4 and above, and the new Netscape 6) can take XML and an XSL stylesheet and spit out the formatting you like, but since XML and XSL are still pretty new, the implementations across browsers is pretty scattered. Server-side programs in most every language are out there that can parse and display XML, including Java, PHP, Perl, just to name a few. While the server-side tools are usually a bit more reliable, still there are wide and varied differences between their implementations and gotchas, so the web developer must often beware.

Enter Flash 5

Enter Flash 5.

Flash 5 has a very good implementation of XML in ActionScript, allowing you to pull XML content into your flash movies and parse through it to get at the data. This is accomplished with the new XML Object. You create a new XML Object in ActionScript with the following:

my_variable = new XML();

Flash then let's you load up any xml content you wish from a url and load it into this new object by calling the XML Object's load() command.

my_variable.load("http://someurl.net/somefile.xml");

It is important to note that the url you pass flash does NOT have to be an xml document, per se. That is, the file does not have to be a file at all, certainly not one that ends with the .xml extension. It could be a call to a server-side script or cgi program, with parameters passed along. This is great if you want to load up data from a database or records from an ldap server from a script on your web server, and serve up the data to a flash movie. Just format the output of the script as xml, and flash can read it no problem.

A note: flash's implementation of xml only allows you to pull remote xml files from within the flash standalone player. For flash movies on the web, the xml files you wish to use must come from your domain, or from a local source on your webserver's file system.

Event Handlers

XML Objects, like many objects in ActionScript, have event handlers. For those who don't know, event handlers are bits of code that will run when something else kicks them off. What does that mean? A great example is all the flash mouse event handlers, which cause something to happen when the mouse is clicked or released, or whatever. You assign event handlers whenever you tell some code to run after a click of a button, or when someone drags with their mouse. These are known as mouse event handlers. XML objects have their own event handlers. We will focus on the onLoad handler, which will run some function when the XML document you request is done loading into the XML Object.

So, with all the preliminaries out of the way, let's get down to it.

Dynamic Text Box

First, create a 'dynamic text' box:

Start Scripting

This text box will display the xml content as links for us. I gave it a big name, "content_feed_display". Why? I like big names. Sue me.

Once you've built the text box, that's pretty much it for the actual required objects. The rest is all in the scripting.

Right click on the first and only frame of the movie. Select 'Actions'. We'll start by setting up the XML object

//create a new xml object
urlXML = new XML();
//when the xml data has loaded, we want the XML Object to run the convertXML function
urlXML.onLoad = convertXML;
//Write to your text area that the data is loading.
content_feed_display = "Loading data...";
//now load up the url.
urlXML.load("moreover.xml");

The next step is what to do with the xml once it's loaded up. For this, we need to define the convertXML function to rifle through the XML and get the data we want.

Before we do this, we might want to take a look at the XML in question. This will make the function seem a lot more clear.

The XML


 <-- Document definition.  We can ignore this line for our purposes.
<-- The document's top-level element.  This is known as the root node.
    <-- An article node.  It is a child node of the moreovernews tag above.
    <-- Now on to the children of each article.  This is the meat and potatoes we are after.
    Particularly the url data and the headline_text data-->
        http://c.moreover.com/click/here.pl?x12591193<-- We want this, our link
        PlayStation 2 continues the legend <-- TAnd we want this, our link text.
        STUFF
        text
        Computer games news
        
        http://www.stuff.co.nz/inl/index/0,1008,0a28,FF.html
        Nov 26 2000 7:10PM
        
        
    

    ...more article nodes...
   <-- Close of the moreovernews node.

Here's the Function

So, here's the function. Place this function in your actions box right below the code we just inserted.

"+ headline_text +"

"; } } } }

Okay, nobody run. It's not as bad as it looks. In the next section, we'll go through this and it will all make sense. I promise.

The Code

Let's look at the first couple of lines, which just set up stuff for us which we will need later on.

if(this.loaded) { content_feed_display = "Data loaded."; }

Tell the user the data is loaded. They probably won't see the message, since it is happening so fast, but why not. Good for debugging purposes, anyway.

mainTag = new XML; elementTag = new XML; articleList = new Array; elementList = new Array;

We set up a couple of internal XML documents (remember, a node within an XML document behaves just like a full XML document), and a couple of arrays for looping over data later.

mainTag = this.firstChild.nextSibling;

We get a handle on the xml data we want. The this refers to the original XML Object we created. Notice that we get the first child node by calling the firstChild property, but since this first child is the document definition, we get the next child node with the nextSibling property.

if(mainTag.nodeName.toLowerCase() == "moreovernews") {...}

We want to make sure we have a handle on the moreovernews tag. To do this, we call the nodeName property of the mainTag object. The nodeName property will return the name of the element exactly as it appears between the tags. That is, .

Once we know we have the moreovernews node, we want to get all the article child nodes out of it. Simple enough.

articleList = mainTag.childNodes;

The childNodes property will return an array of XML Objects which are the child nodes of the original XML Object. In this case, the original XML Object is mainTag. Now we need to loop over them.

//set the dynamic text field to blank so we can write new data to it
content_feed_display = "";
    for(i=0;i<=articleList.length;i++){
    //initialize a couple of variables to hold xml data we want displayed
    url = "";
    headline_text = "";
    if(articleList[i].nodeName.toLowerCase() == "article") {
        //we get the child node array beneath the articles, aka the meat and potatoes we are after
        elementList = articleList[i].childNodes;

So, we set the dynamic text field to blank, so there is a nice clean slate to put our links. Next, we loop through all of the child nodes returned to articleList. We repeatedly blank out two variables on each pass: url and headline_text.

Since the flash XML parser considers everything in the XML document (including carriage returns and newlines) as XML nodes, we check each one in turn to see if it has a node name of article. When we have a match, we put it's child nodes into an array called elementList, and loop over that! (A whole lot a' looping going on)

for(j=0;j<<=elementList.length;j++) {
    elementTag = elementList[j];
    elementType = elementTag.nodeName.toLowerCase();
    if(elementType == "headline_text"){
        headline_text = elementTag.firstChild.nodeValue;
    } else {
        if(elementType == "url"){
            url = elementTag.firstChild.nodeValue;
        }
    }
}

We take each XML node in elementList and pass it into the XML Object element Tag. We do this mostly to simplify our code. Now we set the variable elementType to contain the node name of the current elementTag. This way we can check to see if the element we currently are looking at is one of the two we want. If you remember, we are looking for headline_text and url. If we find matches, ie:

if(elementType == "item_we_want"){
...
}

We pass that data into one of our two variables, headline_text and url.

Once we've gotten the data we want, it is a simple matter of passing this data out to the dynamic text field, like this...

content_feed_display += "

"+ headline_text +"

And that's it!! The rest of the code you see is just closing up for loops and if statements.

That's it. It takes a little while to get the hang of some of the XML stuff, but if you do, it's a great addition to your flash coding skills. There is an insane amount of free xml content out on the web, from newsfeeds to articles, even links to pertinent graphics. Also, the XML Object in Flash 5 lets you do more than read elements from the XML document. You can add your own, delete elements, move elements, and more!

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

Wildform Flix Walkthrough

2008-12-14T05:06:00.000-08:00

Introduction

Welcome to Wildform Flix, the only application for encoding video into the SWF media format. Now you can stream your media to any platform without a download!

Flix makes the encoding process incredibly simple. Just choose a file, customize the session settings, and click "encode"!

Here, we have included a detailed description of Flix broken into two main sections:

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

Specs

Flix encodes SWF files from the following formats:

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

Flix’s video encoding capabilities are intended primarily for lower bitrate video (28.8k, 56k and 128k) and clips under 3 minutes in length. However, it is capable of encoding longer clips, as well as video for higher bitrate streams (especially if those clips are short – a minute or less). Depending on your source material and your intended audience, your results may vary. We strongly suggest you do not create SWF video output that exceeds 50 MB of player RAM usage. In addition, as with all PC based video encoding, the faster your processor and the more RAM you have, the better your encoding experience will be. Remember that you will also need plenty of hard drive space for your video files.

Flix's audio encoding is intended for audio files of any bitrate (low to high) up to the maximum allowed number of frames in the SWF format (which is 16000 frames).

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

The File tab is where you set input and output file paths, choose basic export options, and set clip information.

Input/Output

These two fields specify the path of the input video and output SWF. To specify a file either manually enter the path into the text field, or select "Browse", which launches a File dialog box.

In the input file dialog box you will also need to select the type of video that you are encoding, under "Files of type:" in order to see your file listed.

Once a path and filename is selected, you may click the "Play" button next to the input bar to view the media

Export Options

You may choose whether to encode audio, video or both by checking the appropriate boxes. If your input does not have audio, that selection will be grayed out. If you are encoding audio-only, then the video checkbox will be grayed out.

If you wish to deploy your SWF in a web page, you may select "Export HTML", which will produce an HTML file with the code to embed the SWF in a web page. Simply copy that HTML into whatever page you wish.

Presets

Flix comes with a number of preset options. There are 6 video presets: 28k, 56k, 56k banner ad, 28K banner ad, 128k and 256k. And there are 5 audio presets 14k, 28k, 56k, 128k, and 256k. In addition, there are 2 other settings, "Select a preset or customize," which is the field automatically selected when Flix opens, and "Customized."

When you select one of the preset options, it will fill in all the necessary encoding information in the other tabs, including SWF movie options, Output audio options, Output video options and the Output frame options. Once you have selected a preset you may change any of the values associated with the preset, or add any other variables or settings you desire. If you change any value in Flix from the preset value, the selection in the preset field will automatically shift to "Customized".

You may use the presets to automatically encode audio and video that will stream appropriately to users on a connection at least as fast as the preset selected. A majority of internet users connect on a 56k modem, with a smaller number connecting at 28k (and that number is dropping). A majority of the video viewed on the web is by users connecting through a high speed connection, such as cable, DSL, or T1. Often, sites post media at 2 or more bandwidths for people connecting on a dial up 56k modem and people with a broadband (high speed) connection.

Keep in mind that the larger the media files you create, the more bandwidth is required to deliver that media to the end user. Using more bandwidth can cause delays for users if there is network congestion and it can potentially cost more to deliver, depending on your server configuration.

You may also edit the existing encoding presets and create new ones. Select View>Options>Edit in Notepad. The presets file will open in Notepad where you can edit the existing presets and add new ones. To add new presets, just use the exact same format that is used in the EncodingPresets file. Make sure to enter your information exactly as even a small typo can cause the presets not to be read by Flix. Once you are finished making your changes, save the file and quit notepad. Then click "Reload Presets" and "OK" and the presets should be updated. If you made a mistake, just repeat the process.

One of the great things about Flix is that it provides you with a great deal of freedom to create video of different sizes and bandwidths depending on the application. We have included a preset for banner ads should you wish to embed video in banner ads - video which is viewable by over 95% of web browsers, without a download. We encourage you to explore the different applications of Flix encoded audio and video, and to define new presets for the multimedia applications that you may have.

Clip Information

The information specified in the "Title", "Author" and "Desc(ription)" fields are embeded into the SWF media clip. In this way you can identify your media and call the information directly from the Flash player. You may access this information is the same way you access any Flash variable embedded in an SWF.

To make your movie link to another webpage, simply check the "Link" box, and enter a URL in the text field. If you wish to specify a browser target, either enter one or select from the drop-down list of most common.

SWF Tab

The SWF tab is where you set the SWF options for your encoded media file, such as SWF framerate and additional custom variables.

Movie Options

If you select "Protect movie from import", your SWF media file will be protected from import into Flash. People who attempt to import a protected SWF into Flash will receive an error and be unable to do so. Do not do this if you intend to import your video into a larger project within Flash.

Directly beneath that option, you may choose to have your SWF loop. When checked, this will cause your SWF media file to loop automatically and infinitely. Otherwise, your SWF will play once and stop.

Next is the "Unload movie at end" box. If you check this box, your SWF movie will automatically unload once it has finished playing. This will return all the RAM the SWF Player has used back to the system. It will also mean that the unloaded media file must be re-loaded prior to being viewed again. All the video presets have this box selected.

Keep in mind that "Unload at End" and "Loop Movie" are mutually exclusive, because once unload, there is no movie to loop.

The "Framerate (fps)" field is where you set the SWF framerate, which is the number of frames per second encoded into your SWF. This is not your video framerate, which is the number of video images per second encoded into your SWF. If you are loading or importing your video into a larger Flash movie, the SWF framerate of your video must be the same as the framerate of your larger Flash movie. Otherwise, if your media has MP3 audio, your larger site will play back at the speed of the media file; if your media is video-only, your media file will play back at the speed of the website.

Your SWF framerate must be at least equal to, or a multiple of, your video framerate (which you specify under the Video tab).

Custom Variables

If you wish your media file to hold additional variables (to denote additional clip information, or to set variables to interact with larger Flash movies), you may do so by entering a variable name and its value, and selecting "add". This will add the new variable to the list window.

For example, you may wish to add the variable with the name "encode_date", and the value "2001_03_15". Variables in Flash may contain letters, numbers and underscores (_). Please avoid punctuation and other special characters.

Once a variable is in the list, you may update or delete it by selecting the variable in the list window and clicking either update or delete.

Audio Tab

On the Audio tab, you can view the properties of your input audio source, as well as set the audio options for your SWF output.

Input/Output

These fields describe the unalterable properties of your input audio track:

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

Here you may choose whether to save a WAV and/or MP3 of the audio track along with your SWF output, by checking the appropriate box.

By checking either box, the output file name is the same as the output SWF, such as my_movie.WAV. To save the audio to a custom name, select "Filename" and click "Browse" to select the directory and the desired filename.

Please note that choosing either ".WAV" or ".MP3" does not remove the audio track from your SWF. You might want to save a WAV, for example, in order to import the audio into Macromedia Flash (Flash will not import the soundtrack of your Flix-generated SWF because Flash can not import MP3 even in SWFs).

Output Audio Options

There are three main settings which determine the way your source audio is encoded: sampling rate; bitrate; and, stereo/mono.

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

On the video tab, you may view the properties of your source video, as well as set image, frame and movie options.

Input/Output

These fields describe the unalterable properties of your source video:

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

Under the heading "Output frame options", there are two settings: average image quality, and, apply smoothing.

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

In the "Video" tab you also set your "Output video options", by choosing your video dimensions, framerate, and, if you choose, a forced-constant bitrate:

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

You can customize the operation of Flix to your preferences in this options pane.

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

Flix makes encoding video into the SWF format incredibly easy. Here is a simple, step-by-step explanation of how to encode video into SWF. To start, launch Flix and begin a new session. So that we may explain all the session options, this example assumes that your source media file has audio and video, and that you wish to encode both into the SWF.

Select Source Media
Set Output Name
Choose Outputs
Enter Clip Information
Set SWF Options
Set Custom Variables
Set Audio Output Options
Choose Audio Intermediate Files
Set Output Frame Options
Set Output Video Options
Click Encode!

Select Source Media

There are two ways to select your source media. You may either:

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

Either method brings up the Open file dialog. Simply select your file and click the "Open" button. (You may also manually enter your file path into the input field, but be sure to get it exactly right!) For a complete list of acceptable file types, please view Supported Formats.

Set Output Name

Once you have chosen your input media, select a path and name for your SWF output. You may either:

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

Either method brings up the Save As dialog box. You may navigate to any directory and then choose a name. (As with the "Input:" field, you may also manually enter your file path into the output field, but again be sure to get it exactly right!)

Choose Outputs

You may choose whether to export audio and/or video in your SWF, by checking the appropriate boxes. Of course, if your source is audio-only, you will not be able to export video, and if your source has no audio track, only the "Export Video" option will be available.

If you wish to deploy your SWF in a web page, you may select "Export HTML", which will produce an HTML file with the OBJECT EMBED tags necessary to embed the SWF in a web page. Simply copy that code into any HTML document.

Enter Clip Information

You may embed three items of clip information, including the title and author. These are embedded in the SWF to identify your clip, and can be accessed from a larger Flash movie (such as a media player) like any variable.

Here you may also choose to make your video link to a URL, by checking the "Link" box and entering a URL and a browser target (no entry for browser target means that the link will open in the same browser window).

Set SWF Options

If you are loading or importing your video into a larger Flash movie, the SWF framerate of your video must be the same as the framerate of your larger Flash movie. Otherwise, if your media has audio, your larger site will play back at the speed of the media file; if your media is video-only, your media file will play back at the speed of the website.

Your SWF framerate must be at least equal to, or a multiple of, your video framerate (which you specify under the Video tab).

There are three additional options relating to the SWF file itself. First, you may opt to protect your SWF from import into Flash. People who attempt to import a protected SWF into Flash will receive an error and be unable to do so. Do not do this if you intend to import your video into a larger project within Flash. Protected SWFs may be used in larger Flash movies with the Load Movie function.

Second, you may choose to have your SWF loop. When checked, this option will cause your media to loop automatically and infinitely. Otherwise, your SWF file will play once and stop on the final frame.

Third, you may select "Unload movie at end". If you check this box, your SWF movie will automatically unload once it has finished playing. This will return all the RAM the SWF Player has used back to the system. It will also mean that the unloaded media file must be re-loaded prior to being viewed again.

Set Custom Variables

If you wish your media file to hold additional custom variables (to denote additional clip information, or to set variables to interact with larger Flash movies), you may do so by entering a variable name and its value, and selecting "add". This will add the new variable to the list in the window. Once a variable is in the list, you may update or delete it by selecting the variable and clicking the appropriate button.

For example, you may create a variable encode_date and set it to 2001_03_15. Once your clip is encoded, this variable would then have the full name _level0:encode_date. If you loaded your movie into a larger Flash movie, into a movie clip called video on the top level of that movie, level0/video:encode_date would equal the string, 2001_03_15.

Variable names and values in Flash may contain letter, numbers and underscores (_). They may not contain punctuation or other special characters. All spaces in variable names and values are automatically removed by Flix.

Set Audio Output Options

Now that your SWF options are set, click the "Audio" tab. On the upper let of this window you will notice the "Input Audio Properties", which describe the features of your source audio.

Immediately to the right, you will notice the "Output audio options", where you may choose the way your source audio is encoded. There are three audio options, which you can set: sampling rate, bitrate, and stereo/mono.

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

On the bottom half of the Audio tab, you will see the "Output audio export options," where you may choose whether to save a WAV and/or MP3 of the audio track along with your SWF output, by checking the appropriate box.

By checking either box, the output file name is the same as the output SWF, such as my_movie.WAV. To save the audio to a custom name, select "Filename" and click "Browse" to select the directory and the desired filename.

Please note that choosing either ".WAV" or ".MP3" does not remove the audio track from your SWF. You might want to save a WAV, for example, in order to import the audio into Macromedia Flash (Flash will not import the soundtrack of your Flix-generated SWF because Flash can not import MP3 even in SWFs).

Set Output Frame Options

Now that your audio options are selected, click the "Video" tab. On the upper left of this tab you will notice the "Input video properties", which describe the unalterable characteristics of your source video. Immediately below, under the heading "Output frame options", there are two settings:

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

In the "Video" tab you may also set your "Output video options", by choosing your video dimensions, framerate, and, if you choose, a forced-constant bitrate.

You may use the image dimensions used with the presets (in the File tab), or you can enter a whole number between 1-500, or you may elect to use your source video dimensions by checking the "Use source dimensions" box.

Directly underneath, you will notice the "SWF movie dimensions". By default, "Use custom SWF dimensions" is unchecked, which means that the SWF is output at the same image dimensions as you have set for your video. 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.

Next you must specify the video framerate. This reflects the number of different video frames displayed per second in your output (which 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.

The final option in this panel is the "Maximum bitrate" box. 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 in order to guarantee a maximum bitrate. The maximum bitrate can be a whole number between 8 and 512.

Click Encode!

Click the button labeled "Encode" on the File tab, or the toolbar button . Flix will begin encoding your media. A dialog box will pop up with a progress indicator, encoding statistics, and three options:

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

Thanks for taking the time to learn more about the Wildform Flix SWF video encoder. For more information, please visit:

www.wildform.com -- complete Wildform product and company information
www.wildform.com/flix/buy -- buy Flix
www.wildform.com/faqs -- Wildform product FAQs
www.wildform.com/forums -- Wildform support forums
www.wildform.com/demos -- demonstrations of Wildform technology in action

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

Poser Walk Cycle exported to Flash

2008-12-14T05:01:00.000-08:00

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).

The number of colors in the exported file effects the file size. In otherwords, fewer colors result in lower file size. Choosing 1 color will create a silhouette effect.

The Overlap Colors option will make the file size higher although it makes the quality slightly better. So, if file size isn't an issue, activate the Overlap Colors option.

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.

If you're really concerned about the file size being too high, you can go to each keyframe and optimize it (Modify: Optimize). Since Poser exports the figure as layers which are grouped, you must double click to get inside of the groups and then optimize. It's best to optimize at the lowest level or else the shape of the figure becomes too distorted.

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)

Advanced (but easy to use) 3D Flying Effect in AS3.0

2008-12-03T11:57:00.000-08:00

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.

Code:

//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);
   }
}

It’s pulling the URLs for the images from a very simple XML file.

Link to demo.

Link to FLA file.

Create a AS3 MP3 Player with papervision 3d spectrum display in Flash

2008-12-03T11:48:00.000-08:00

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

How To Create An Interactive 3D environment using the space3D in Flash

2008-12-03T11:42:00.000-08:00

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 is just a few ways to customize the space3D component.

Creating a Battery Run-Out Animation in Swift 3D

2008-12-03T11:40:00.000-08:00

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

Our tutorial will be divided into three part:

Modeling the battery using cylinder shapes.
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:

Activate the Animate Button
Move the Current Frame Indicator to the required frame
Apply the change(s) you wish to animate
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.

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.
Under Fill Options, set the Type to Area Gradient Shading, and activate the options to include Specular Lights and Reflections but not Shadows.
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!

This concludes our tutorial. You can download the end source file from here. I hope that you've learnt something helpful from it.

Materials and Textures in Swift 3D

2008-12-03T11:39:00.000-08:00

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.

Smoothing Groups in Swift 3D

2008-12-03T11:38:00.000-08:00

Introduction

During the Advanced Modeler interface and tools tutorial in Part 1, there were two terms that I glossed over: Surface Groups and Smoothing Groups. In Part 2, we explored Surface Groups in depth and learned how to create them in the Advanced Modeler.

Here in Part 3, we are going to explore Smoothing Groups in depth, and learn how to use them effectively in Swift 3D projects.

Smoothing Groups: Definition

Smoothing groups are similar to Surface Groups in that they define render settings for certain areas of a mesh. The difference is that while a Surface Group defines a material or texture, a Smoothing Group defines an area that will be shaded evenly, with no discernable border between adjacent faces.

Smoothing Groups, used in conjunction with some of the other subdivision smoothing tools in the Advanced Modeler, can produce effects that are similar to - though much less powerful than - the HyperNURBs tools that you’d see in high-end 3D applications.

How to Access Smoothing Groups

If you still have your practice file from Part 2, with the box mesh that we divided into six Surface Groups, then keep it open. Otherwise, head into the Advanced Modeler and create a box mesh in the Perspective Viewport.

Smoothing Groups are a feature that can only be accessed while in Edit Mesh Mode in the Advanced Modeler. Smoothing Groups are groups of faces, similar to Surface Groups. Basically what a Smoothing Group does is remove the hard edges between the faces within the group.

This has two major effects. First, when rendering vector output with Area Gradient Shading or Mesh Gradient Shading or when rendering raster output, any area of the model that is assigned as a Smoothing Group will have a consistent, smooth appearance.

Second, when rendering vector output with Outlines, any area of the model that is assigned as a Smoothing Group will not have any outlines within it, only around its outermost edges. There is one exception to this, though. When a Smoothing Group crosses over multiple Surface Groups, then there will still be outlines at the edges where those Surface Groups meet.

Creating and Deleting Smoothing Groups

To begin working with Smoothing Groups, go to the Smoothing Groups page of the Properties Panel and click the Unsmooth All button. Now this box mesh has no Smoothing Groups at all. Above the number grid in the middle of the panel, click the Assign button. Now we're in Assign mode for Smoothing Groups. Let's create one.

Choose the Face Selection tool, and in the Perspective Viewport, select the two faces closest to the camera by clicking on them one at a time.

Now over on the Smoothing Groups page of the Properties Panel and click the 1 button in the number grid.

What you've just done is assigned these two faces as Smoothing Group 1. Now the edge that separates these two faces is no longer a hard edge. When rendered in vector mode with Area Gradient Shading or Mesh Gradient Shading or in raster mode, they will have a smoothed appearance. Additionally, if you render this box with Outlines turned on, there will not be an outline between these two faces.

As you can see, using Smoothing Groups wisely is a great way to control the appearance of Outlines when rendering cartoon-shaded vector output. Smoothing Groups are also useful when producing raster output, but the name of the game with Swift 3D is vector animation for Flash movies, and that is where the features of the Advanced Modeler are the strongest.

Now let's look at an example where we combine Smoothing Groups and Surface Groups to gain very precise control over the appearance of vector outlines. Head over to the Properties Panel, select the Smoothing Groups page, and press the Unsmooth All button to erase the Smoothing Group we made earlier.

Using the Face Selection tool, select the two faces that are closest to the camera and the two faces next to those. Now you have two sides of the box selected. Just like we did in Part 2 of this guide, Right-Click on the selection and choose Group > Selection from the context menu.

Now these four faces are one Surface Group. Using the Surface Group Selection tool, select this Surface Group. Go to the Smoothing Groups page of the Properties Panel, and assign this Surface Group as Smoothing Group 1.

See the below screenshot to view the effect this combined effect has on rendering.

Conclusion

Seeing this effect demonstrated with a simple box outline isn't all that impressive, but it definitely makes the wheels turn when you think about the possibilities of applying complex “paint jobs” to sophisticated meshes that will be rendered for vector output with outlines. It looks particularly impressive when it's in motion. Swift 3D is primarily a 3D vector animation tool, afterall.

Now that you have a fundamental understanding of the Advanced Modeler interface, Surface Groups, and Smoothing Groups, the next step is to get your hands dirty with some modelling projects. The later parts of this guide will be hands-on exercises in which we will model and render complex meshes in Swift 3D. See you there!

Surface Groups in Swift 3D

2008-12-03T11:37:00.000-08:00

Introduction

In Part 1 of this guide (Interface and Tools), we took a Box primitive with 8 x 8 x 8 segmentation from the Scene Editor to the Advanced Modeler, converted it from a primitive object to an editable mesh, and had a detailed tour of the Swift 3D Advanced Modeler interface. If you are unfamiliar with the Swift 3D Advanced Modeler interface, then please read Part 1 before proceeding with this guide.

During the interface tour in Part 1, there were two terms that I glossed over: Surface Groups and Smoothing Groups. Here in Part 2 of this guide, we will explore Surface Groups in depth, and learn how to work with them effectively in Swift 3D modelling projects.

Surface Groups: Definition

In the Properties Panel on the left side of the Advanced Modeler interface, the third item in the menu list is Surface Groups. A Surface Group is a group of one or more faces that have been assigned together as one unit. While the faces remain separate and can be transformed individually, they can also be selected and edited as a group using the Surface Group selection tool. Using Surface Groups wisely is an integral part of any Swift 3D project. It gives you the ability to apply multiple materials and textures to one object, and is a fast and easy way to select large groups of faces that need to be moved or transformed together.

The Surface Groups page of the Properties Panel displays a list of all of the Surface Groups in your model, and when one is selected in the list, the buttons below it can be used to Select it in the workspace, Hide it in the workspace, or Show it if it's hidden. The fourth button, Group Selection, will group whatever faces you have selected in the workspace into a Surface Group.

The Material subsection below the Group Selection button will display the material that is currently assigned to the selected Surface Group.

Exercise 1: Create a Box Mesh in the Advanced Modeler

Let's use Surface Groups to apply six different colored materials to a box. If you have the 8 x 8 x 8 box mesh from Part 1 of this guide, delete it. In the Toolbar (top), choose the Create Box Mesh tool.

When you click on the Create Box Mesh tool, the Properties Panel on the left adds a new page called Box and jumps to that page.

This is your one and only chance to modify the segmentation of the box before creating it as an editable mesh in the Advanced Modeler workspace. Once you create the box as an editable mesh, all object-level properties are no longer editable. For now, though, let's leave the segmentation at 1 x 1 x 1.

Move your mouse over to the center of the Perspective Viewport, hold down CTRL, Click and Drag up and to the left. When the Box mesh looks like a good size to you, let go of the mouse button and the CTRL key.

You've just created a Box mesh in the Advanced Modeler interface. Sweet. Now let's use Surface Groups to apply six different colored materials to this box. In the Toolbar, choose the Face Selection tool.

In the Perspective Viewport, click out in the empty space somewhere to deselect everything. Now use the Face Selection tool to select the two faces of this box that are closest to the Camera, by clicking on them one at a time.

With those two faces selected, Right-Click (or CTRL-Click on a Mac) to get the Viewport Context Menu, and choose Group > Selection.

Selection item highlighted" width="288" height="365">

Now those two faces are their own Surface Group. The other option in that context menu, And Separate Selection, will group the selected faces into a Surface Group and detach them from the rest of the mesh. That function serves its purpose in some cases, but not right now.

To create the other five Surface Groups, select the other sides of the box one at a time, and repeat the Right-Click (or CTRL-Click on a Mac), Group > Selection process for each side. Hold down ALT to rotate the Camera angle as needed so that you can select each side of the box. When you've completed making all six Surface Groups, take a look at the Surface Groups Page of the Properties Panel (left side of the interface).

As you can see, there are now six Surface Groups in the list. Swift 3D's default naming convention for Surface Groups is that the first group will retain the original name from when the mesh was first created, and all subsequent groups will be named Regroup0x in one-up order. If you want to change the names of your Surface Groups, you can do so with the the text input box just below the list. Just type in the new name and hit Enter.

Applying Materials to Surface Groups in the Advanced Modeler

In the bottom-right area of the Advanced Modeler is the same menu panel that appears in the Scene Editor. The exception is that in the Advanced Modeler, only the Materials and Models options are available. This is a modelling environment, not a scene building environment, so the Animations, Lighting, Environments, and Bevels cannot be used here.

Using the same method as what you'd do in the Scene Editor, drag a new material onto one of the sides of the box.

Notice that the material is only applied to the Surface Group where you dropped it. As you can see, creating Surface Groups in the Advanced Modeler is the way that you apply multiple materials to the same object in Swift 3D. Just for fun, I dragged some loud colors onto all of the sides of the box, and rendered this result:

The important point to take from this part of the Advanced Modeler Guide is this: in any case where you want to put multiple materials onto one object, the way to do that is to take the object into the Advanced Modeler, and use Surface Groups to define the parts of the object where you want each material to be placed.

Surface Groups are also very handy for grouping and naming the different parts of a mesh as if they were parts of a real object. For example, if you were contstructing a model of a car in Swift 3D, you might have a bunch of Surface Groups with names like Front Tires, Back Tires, Body, Windshield, Left Windows, Right Windows, Back Window, etc.

Interface and Tools in Swift 3D

2008-12-03T11:34:00.000-08:00

Introduction

Swift 3D's Scene Editor, the Extrusion Editor, and the Lathe Editor are simple 3D modelling tools that serve their purpose well, but the Advanced Modeler is where you really harness the power of this application. What makes the Advanced Modeler powerful is that is allows you to edit your 3D objects at the mesh level, where you control the properties of individual vertices, edges, and faces.

In the Scene Editor, you can stretch and scale a cube to make it a rectangle. In the Advanced Modeler, you can add faces to the cube and extrude them to create a mult-tiered staircase. In the Extrusion Editor, you can outline an elongated ellipse to create the basic shape of a leaf. In the Advanced Modeler, you can smooth and reshape that extrusion and turn it into a natural, ribbed leaf with a stem and little piece missing from where a caterpillar nibbled on it. Is it as powerful as Maya or 3DS MAX? Of course not, but for the $250 price tag you definitely get more than your money's worth.

Many Swift 3D users are highly proficient at using the Scene, Extrusion, and Lathe editors, but are somewhat bewildered by the Advanced Modeler. This is because the interface and functionality of the Advanced Modeler is very different from its three counterparts. To use it effectively requires an understanding of a new suite of terminology, and a new way of looking at the 3D modelling process. This guide will familiarize you with the terminology, tools, and processes of the Swift 3D Advanced Modeler, and help give you a jump start into modelling complex, organic shapes that are far beyond anything that could be achieved with a primitive, extrusion, or lathe.

Taking an Object from the Scene Editor to the Advanced Modeler

It's time to get familiar with the Swift 3D Advanced Modeler. Open Swift 3D, and while you're still in the Scene Editor go ahead and click on the Box primitive.

That will put a Box primitive in your scene. Now look over on the left panel where the "Box" line is highlighted, and go down to the Segmentation subsection. Turn up the Segmentation of this box to 8 for all three attributes: width, height, and depth.

What Segmentation refers to is the number of faces that will comprise each axis of the object. With the box set to 8 x 8 x 8 segmentation, that gives you 512 faces to work with. That's plenty of mesh complexity to work with to get familiar with the Advanced Modeler interface.

Alright, we've got the model we're going to mess with. Now it's time to head to the Advanced Modeler. In the top panel, click that dreaded fourth tab.

Interface Tour

When you arrive in the Advanced Modeler, you'll see four viewports, unlike the two viewports that are offered in the Scene Editor. By default, the Advanced Modeler's viewports are Left, Front, Top, and Perspective. With the default settings, the Left, Front, and Top viewports will display the mesh as a wireframe, while the Perspective Viewport will display the mesh with shading in various colors depending on the current selection. We'll get to that selection part later. In the Perspective Viewport, you'll see the box we just created at a 3/4 view perspective, shaded in a light blue color. The 8 x 8 x 8 segmentation is clearly visible when you look at it in this form.

At this point, we are still looking at this box at the object level. The only properties that we can manipulate are object-level properties such as position, scale, and rotation. We want to edit this box at the mesh level, and completely change how it is shaped. When editing at the mesh level, you manipulate the properties of individual vertices, edges, faces, and surface groups. Surface groups are simply groups of faces that will move together and share the same material. We'll get into that more later.

To open up the functions of the Advanced Modeler and start editing this box at the mesh level, we have to push the magic button. In the top Toolbar, click the Edit Mesh button.

When you press the Edit Mesh button, you get a warning prompt. All it's telling you is that once you convert this object to an editable mesh, you can no longer edit its typical object-level properties. In the case of a box, that refers pretty much just to segmentation. We don't care about segmentation anymore, though, we're editing the mesh now, real deal Holyfield. Just click OK.

As soon as you click Yes on the warning prompt, our Box model turns orange. This indicates that it's an editable mesh now. The orange highlighted area of an editable mesh is the current selection. Right now, every single face of this box is selected, and they all fall into one big surface group.

If you click anywhere in the blue area of the Perspective Viewport, it will de-select the faces of the box and turn it to a light shade of gray. All that denotes is that there are no faces selected. Don't worry, all of this starts to make sense later on.

The Toolbar: Primitive, Selection, Transform, Textures, and Other Editing Tools

Let's turn our attention to the top panel in the interface, the Toolbar. There are several different sets of tools, each with their own purpose within the modelling process. Let's examine each group in left-to-right order. This in only an overview. We will practice using these tools later in this guide.

The first group of tools are the Primitive tools:

This is the same suite of primitves that appear in the Scene Editor: Sphere, Geosphere, Box, Pyramid, Cone, Cylinder, Torus, Plane, and Polyhedron. In the Advanced Modeler, however, they operate differently. When you hover the mouse over one of these buttons, you'll notice that the ToolTip reads, "Create ______ Mesh," rather than just "Create _____." When you create a primitive in the Advanced Modeler, it is an editable mesh right off the bat. The only time you can manipulate object-level properties like segmentation is before you actually create the object in one of the viewports.

The second group of tools are the Selection tools:

The first tool is Vertex Selection, which can be used to select an individual vertex or a group of vertices. In the context of 3D modelling, a vertex is the point where two or more edges meet. Moving a vertex is useful for changing the shape of a face or the angle of an edge.

The second tool is Soft Selection, which is a proprietary tool in Swift 3D that selects a group of vertices within a specified radius, and is used to move them in groups at varying "speeds," depending on how close they are to the center of the selection. This is a really neat tool that we'll get into in more detail later.

The third tool is Edge Selection, which can be used to select an individual edge or group of edges. Moving or rotating edges is useful for changing the shape of a face, or moving groups of faces to create models that have twists or jagged parts. We'll do plenty of that later on.

The fourth tool is Face Selection, which can be used to select an individual face or group of faces. This selection tool holds many uses, from actually moving, rotating, and extruding faces, to defining Surface Groups and Smoothing Groups for material application and outline rendering. More on that later.

The fifth tool is Surface Group Selection, which is used to select an entire group of faces that have been grouped into a Surface Group. A Surface Group is a group of faces that will be edited together when you use one of the transform tools, and they will also share the same material when you apply one. Surface Groups are an integral part of the modelling and rendering process in Swift 3D, and we'll get into them in very great detail later on.

The last selection tool, which is grayed out in this screenshot, is the Object Selection tool. This button is only enabled when you do not have the Edit Mesh button pressed. If you have multiple objects selected in the Scene Editor and then click the Advanced Modeler tab, you will have to use this tool to select a specific object before you press the Edit Mesh button.

The third group of tools are the Transform tools:

Once you've used a Selection tool to select a group of vertices, edges, or faces, you need to choose one of the Transform tools in order to manipulate that selection. In order from left to right, these are: Move, Rotate, Scale Uniform, and Extrude. The first three are pretty intuitive, except that in the Advanced Modeler you are moving, rotating, or scaling individual pieces of a the mesh and not a whole object. Below is a my handy cheat sheet of when you can use each of these tools:

Vertex Selection: When your selection is composed of one vertex, you can only use the Move and Rotate tools. When it's multiple vertices, you can use Move, Rotate, and Scale Uniform.

Edge Selection: When your selection is composed of one edge, you can use Move and Rotate. You can also use Scale Uniform, but can only scale an edge along the axes that it crosses (for example, a straight vertical edge can only be scaled along the Y axis). When your selection is multiple edges, you can use Move, Rotate, and Scale Uniform.

Face Selection: When your selection is composed of one or more faces, all four Modelling Tools are fair game. The Extrude Tool functions in the same way as the Extrusion Editor, but it's more powerful in the Advanced Modeller. In this interface, you pick individual faces or a group of faces to be extruded, and you define the direction and distance. You can even use the "Normal," option, which has the effect of expanding a shape outward while retaining its angles. Much more on that later.

Surface Group Selection: This tool gives you one-click selection of an entire Surface Group. Once selected, Surface Groups behave in the same way as selections that were made with the Face Selection tool.

The fourth section in this panel holds several tools:

The paint bucket icon is a toggle, which when pressed will activate Edit Texture Mode. Edit Texture Mode gives you highly detailed control over the application of vector materials and bitmap textures to individual surface groups, including the ability to scale and align bitmap textures with great precision. More on that later.

The magnifying glass icon is the Frame All Objects button. What this does is zoom your active viewport so that you can see all of the objects in the workspace. Sometimes when modelling a large, complicated mesh with many parts, it's easy to be zoomed way in on one specific part of it for precision editing. Hitting this button is a fast and easy way to zoom back out to a viewpoint where you can see the entire mesh you're working on. I press it about 150 times per project.

The next two buttons, which are grayed out in this screenshot, are the Undo and Redo buttons. Next to them, of course, is the Edit Mesh button that we pressed back at the beginning of this guide.

That's a nice rough overview of the Toolbar in the Swift 3D Advanced Modeler. All of these tools with be explained in great detail with hands-on demonstrations in later parts of this guide.

The Properties Panel: Settings and Statistics

Now let's turn our attention to the left panel of the interface, the Properties Panel. This is where you look to get information about your mesh as a whole and/or your current selection. You also use this panel to edit the settings of whichever tool you are currently using, whether it's a Primitive, Selection, or Transform tool.

When nothing in the workspace is selected and there is no Transform Tool selected, the default five pages of this panel are: General, Selection, Surface Groups, Smoothing Groups, and Object.

The General Page

The General page gives you three sections: Modeler Options, Settings, and Object.

The two Modeler Options are toggle checkboxes for Auto Smooth and Redraw All Viewports. With the Auto Smooth box checked, Swift 3D will use a built-in algorithm to smooth the surface groups of your model. With it unchecked, the smoothing of your model will be controlled by Smoothing Groups that you define yourself. The Redraw All Viewports checkbox controls whether or not Swift 3D will update all four viewports in real time as you edit your model. By default, this option is turned off, which means that Swift 3D will only conduct real-time updates of the active viewport. The active viewport is the one in which you are working.

Under the Settings section, there is one setting called Nudge Increment. This refers to keyboard nudging, which is done with the arrow keys on the keyboard. The increment by default is 0.10, which is a very small amount that allows for great precision when nudging objects and selections in the Advanced Modeler. Keyboard nudging, of course, is useful for ensuring that you move your selection in a perfectly straight line along the chosen axis.

The Object section displays the name of the object that you are currently editing, and the Statistics sub-section provides a tally of the Vertices, Edges, Faces, and Surface Groups in your model. These numbers refer to the entire model, not the selection.

The Selection Page

The Selection page gives you three sections: Options, Smartweld Tolerance, and Soft Select.

Under the Options section, there are three checkboxes. The first checkbox, Enable Mouseover, controls a mouseover effect that highlights a part of your mesh when you hover the mouse over it. The part of the mesh that will be highlighted on mouseover is determined by which Selection tool you are currently using.

The Smartweld Tolerance is a setting that determines how close together a group of vertices has to be in order for the Smartweld to accurately weld them by pairs. We'll get into vertex welding in great detail later in this guide.

The Soft Select settings apply only to the Soft Select selection tool. The Curve Type and Form Factor settings are important when using the Soft Select tool, and will be covered later in this guide. The Vertex Radius sets the size of the area that the Soft Select tool will affect when selecting vertices.

The remaining three pages of the Properties Panel are: Surface Groups, Smoothing Groups, and Object. These will be covered in Part 2 of this guide.

This has been a brief overview of the Swift 3D Advanced Modeler. Now that you are familiar with its interface, you will have no difficulty following the hands-on exercises in later parts of this guide.

3D title In flash

2008-12-03T11:33:00.000-08:00

Using this tutorial, you have a chance to learn how to make 3D title in flash using some special flash tips and tricks.You can use this tutorial when you have to create some 3D logo, text in flash. You don't have to use action script code to make this tutorial. You will also learn:

1. How to use Free Transform Tool to make a 3D effect
2. How to apply a drop shadow effect to the title and much more!

Example:

Step 1

Open a new flash document.

Step 2

Take the Text Tool (A) and type something. You can alos if you like draw some object,logo, on which you want to apply this 3D effect. For this example, I have drawn this:

Step 3

If you have typed some text, press twice time Ctrl+B key on the keyboard (Break apart) to break apart that text. Now, you have to get this:

Step 4

While the text, object, logo... is still selected, take the Free Transform Tool (Q) and select Distort icon. See the picture below.

Then, Hold down Shift on your keyboard, click and start dragging your mouse to the right. See the picture below and everything will be clear.

Now, you have this:

Step 5

While the text, logo, object... is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.

Step 6

Take the Selection Tool (V) and click once on the text, object, logo... (new made Movie Clip) to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage and click on Filters tab. Then, click on the plus icon and select Drop Shadow filter. After that, make the adjustements as follows:

Blur XY: 6
Strenght: 80
Quality:High
Color: black

Now, you have this:

Step 7

Take again the Selection Tool (V) and select again the text, logo, object, and go again to the Properties Panel.Then, click again click on Filters tab, click on the plus icon and select Glow filter. After that, make the adjustements as follows:

Blur XY: 8
Strenght: 100
Quality:low
Color: #252525

Now, you have this:

We're done!

Bye!

Download example

3D animation by mask in Flash

2008-12-03T11:32:00.000-08:00

In this detailed lesson made for flash, you will learn how to create 3D animation using the mask and some special flash tricks. To create this tutorial, you don't have to use Action Script. You will also learn:

1. How to use Free Transform Tool (Q),
2. How to use Align Panel,
3. How to convert any object into a Symbol and more.

Step 1

Open a new Flash document.

Step 2

Press Ctrl+J or select Modify > Document to open the Document Properties dialog. Set the width of your document to 450 pixels and the height to 400 pixels. Set the background colour as whatever you like. For Frame rate set 14 fps and click ok.

If you like, you can Import some picture and use it as background. I do that. ;).

Step 3

Create a new layer above the layer 1 (background layer) and name it lines. After that, take the Line Tool (N). Select a line color, and choose Solid as type of line, with thickness set to 1.

Then, draw a vertical line like it is shown on the picture below.

While the line is still selected, press Ctrl+G key (Group) to group it. After that, go to the Align Panel (Shortcut key: Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.

Step 4

Take again the Line Tool (N), and draw a horizontal line and place it on the position like it is shown on the picture below.

While the horizontal line is still selected, press again Ctrl+G key (Group) to group it.

Step 5

Create a new layer above the lines layer and name it rectangle 1. After that, take the Rectangle Tool (R), block the Stroke Color, for fill color choose any color and draw a rectangle about 250x90px and place it on this position:

While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this recatngle into a Graphic Symbol. See the picture below.

Step 6

Click on frame 20 of layers background and lines and press F5 key. After that, click on frame 20 of layer rectangle 1 and press F6 key. Then, place the rectangle on the center of lines using the mouse or by arrows key. See the picture below.

Step 7

Take the Free Transform Tool (Q), press and hold down Shift key and decrease the rectangle maximal. See the picture below.

Step 8

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.

Step 9

Create a new layer above the rectangle 1 layer and name it rectangle 2.

Step 10

Click on the first frame of layer rectangle 2, take the Rectangle Tool (R), for fill color choose any color and draw another rectangle above the first recatngle about 350x115px. See the picture below.

Step 11

While the new made rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Graphic symbol.

Step 12

Click on frame 20 of layer rectangle 2 and press F6 key.

Step 13

While you're still on frame 20, take the Selection Tool (V), and place the top of rectangle on the center of lines. See the picture below.

Step 14

Take again the Free Transform Tool (Q), press and hold down Alt key and do like it is shown on the picture below.

Step 15

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.

Step 16

Create a new layer above the rectangle 2 layer and name it mask. See the picture below.

Step 17

Take the Line Tool (N), and draw a triangle like it is shown on the picture below.

Step 18

After that, take the Paint Bucket Tool (B) and paint the recatngle. See the picture below.

Step 19

Select mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask. See the picture below.

We're done!

Test your Movie (Ctrl+Enter).

Bye!

Download source file (.fla)

What is Isometry ?

2008-12-03T11:30:00.000-08:00

The word "isometry" is a greek-derived word meaning "equal measure". But let's not focus on the origins of this word, instead let's find out what it is and what we need it for.

Well, for the sake of briefness, isometry is a way of displaying three-dimentional objects in two dimentions. What does that mean to us? Basically, it means that we don't need to worry about perspective, or rather about what things would looks like in a true perspective. That's because an object in an isometric view is never distorted by either scaling it or shifting it, as it would normally be in a true perspective...

[ examples of perspectives]

So, who can benefit from using isometry? Since Flash itself is not equipped with any 3D engine, game programmers can benefit from using it greatly. Actually many once-awesome games were made with the use of isometry (Diablo, Sim city, Age of Empires, etc.) in the times when 3D graphics were in its infacy.

Of course, programmers are not the only ones. Apart from them it is very handy to us: after all, why bother and draw in a true perspective, when isometry is out there? Just have a look at the room below.

[a fully furnished isometric room ]

Because the drawing was created in isometry, we can use it in a number of ways, like creating an RPG game. Also, it pretty easy to make all kinds of rearrangements :-)

I hope this helped you grasp the basic concept behind isometry.

Modeling a Minaret in Swift3D in Flash

2008-12-03T11:28:00.000-08:00

This tutorial will teach how to model a minaret, which is one of the most distinctive features of Islamic architecture and an important element in the structure of a mosque. Fans of of Prince of Persia shall instantly recognise its shape.

This is a beginner tutorial, you will not be required to have extensive knowledge on how to use Swift3D to be able to follow this tutorial.

Quick UI highlight

Here is a screenshot of the user interface with the main parts of it highlighted for beginner users. If I mention a certain toolbar, you can look it up in this image if you do not know where it is.

Modeling the dome of the Minaret

We are going to use the Lathe Editor to model our minaret, click on the Lathe Editor tab on the Main Toolbar.

The Lathe Editor is a tool in Swift3D that lets you draw symmetrical cylindrical shapes by drawing a simple path that is rotated around an axis to result in a 3D model that appears in the Scene Editor.

We are going to draw a path in the Lathe Editor to create the dome of our minaret. You will need to click on the Add Point Tool to start drawing.

The Lathe Editor will create the 3D dome when we supply a path that illustrates half the dome only. Draw a shape similar to the one below by making left-button clicks in the appropriate places.

I am sure that you noticed that the line we drew is not smooth at all. We are going to fix that now. I recommend that you zoom in at this stage using the Magnifying Glass icon located on the Main Toolbar, select that tool and then click on the scene. We'll now go back to our job, select the Shape Tool and then select the second point from the top of our path.

We will make this point part of a curve to make the path smoother, click on the Curve Point button in the Main Toolbar. This should make two more anchor points appear.

While the Shape Tool is still selected, click on one of the anchor points and drag it, you will notice that the path changes its shape. Try moving the anchor point around to get a smooth line that goes along the shape of the minaret. Do the same thing to the other points in our path.

Once you are satisfied with the smoothness of your path, you can click on the Scene Editor tab to view the 3D dome of your minaret.

Our dome is a little bit too big, we are going to scale it down. To do this, you will have to select the dome, and then click on the Scale Mode button located on the Main Toolbar.

When scaling objects in Swift3D it is good to hold the object from its boundaries. As you move the cursor towards the center of the object the object's size decreases and as you move the cursor further from the center of the object the size increases. Scale the dome down to the half its original size.

We will now move the dome to the upper part of the Front Viewport. To do this, you will have to click on the dome, and then when the axis sign appears, hold Shift on your keyboard to lock-on a single axis and then use the y-axis to move it upwards.

That should give us some space in the viewport to work on the shaft of our minaret. You should have the following in your viewports now.

Modeling the Shaft of the Minaret

We are going to use the Extrusion Editor to model the shaft of our minaret. Click on the Extrusion Editor tab to enter its mode. Once you do that, you shall be able to see a collection of extrusion tools, click on the Create N-Gon button to create a hexagon.

Extrusion Editor: This editor is used to create a 2D flat shape using a bezier pen that is then extended across the Z axis to make a 3D shape.

Click on the Scene Editor tab to go back and look at our viewports.

Our hexagon is too big for our minaret, we are going to scale it to down. Use the same technique explained above to scale it down using the Scale Mode. You might have to move it along the y-axis to make it visible in the front viewport.

You will notice in the front viewport that the base of the hexagon faces the front camera. We will have to rotate it so that the base of our hexagon faces the base of our dome. In order to do this, you will have to select the hexagon and then access the Rotation Trackball at the bottom left of the screen.

We are going to lock the rotation to the vertical direction only, do this by clicking on the Lock Vertical icon, you can deselect later if you would like to rotate it again. Follow that by clicking on the Rotation Increment button and select 45°. You will now have to click and hold the Rotation Trackball and then move it upwards to rotate your hexagon vertically. You should get a result similar to the second image below.

We will now alter the size of the shaft so that it appears as a thinner that holds the dome. We are not going to use the Scale Mode to do this, but instead use the Sizing options from the Properties Toolbar to make more precise alternations.

Select the shaft on the viewport and then selecting Sizing, you shall see sizing options appear below the Properties Toolbar. Set the the value 0.500 for the Width, Height and Depth.

You might not get a result similar to the one that I got above, you will need to move the shaft upwards so that it touches the dome. The size of your dome might be bigger or smaller than what we want to get, you could use the Scale Mode to fix that.

Adding Details to the Minaret

It's time to add some details to the shaft of the minaret. Start off by copying the shaft by selecting it and then using the keyboard shortcuts Ctrl+C and then Ctrl+V to create a duplicate of it. While this new copy is selected, access the Properties Toolbar, select Sizing and then apply the configurations illustrated in the image below. You will also have to align the new hexagon so that it is close the dome.

This step was repeated to create another outer bump on our hexagon using an object of the same shape but greater width and height and a less depth. Two more of these were created to get the result you see below.

Applying Materials to the Minaret

Adding materials in Swift3D is a very simply matter of drag and drop. Look for the Show Materials button on the bottom right section of the screen, click it and then access the Flat tab to reveal a collection of colors.

To add a color to the dome, select the color you desire and then drag it onto the dome as illustrated in the image below.

You can repeat this method to color the shaft of the minaret, you will then have to color each of the hexagonal pieces one by one. This is the result I got after coloring the whole thing.

Exporting the Render of the Image

It is now time to render our Minaret, start off by accesing the Preview and Export Editor by clicking on its designated tab in the upper menu and configuring the options you desire on the left side of the screen.

This concludes our tutorial

Pseudo 3D Orbiting Ball in Flash

2008-12-03T11:25:00.000-08:00

The example above is the Flash Orbiting ball. This tutorial will lead you through the process to create an object that flies around text, a logo or object, anything you choose. There are 4 layers needed to create this effect.

The ball
The motion guide for the ball
The text in front of the ball
The text for the back of the ball

First start a new movie and create or import an object. For this tutorial I chose a ball. Name that layer Ball, this can be done by double clicking the layers title and typing a new name. Make sure the ball or object is selected by clicking on it, then choose insert> convert to symbol.

Now, left click on a key frame somewhere down the timeline (I chose frame 20) and right click in that keyframe and select insert keyframe from the pop up menu. NOTE: the more frames inbetween the first keyframe and the last keyframe indicate the speed of the object Orbiting. For example more frames slower speed - less frames faster speed.

Next, left click the first keyframe and drag your mouse to the last keyframe while holding down the left mouse button. Then right click on on any of those selected frames and choose properties

Follow the picture above for the proper settings for the frame properties.

Note: Save your work frequently, Ideally at the end of each of these four sections.

Second, create a motion guide for that object. You can do this by right clicking on the layer named ball and choose add motion guide from the pop up menu. Select the first keyframe of the motion guide layer, then choose the circle shape from the tools menu and make the fill color empty and the outline anycolor you like. Use the tool to draw a circle and keep in mind that this is the path your object or ball will follow.

In the above picture I drew a circle and sqewed it using this button to make it appear as you see it. Then I chose the pencil button and drew two lines very close to each other so as to break the solid line of the circle I drew, follow the example below.

Select the part of the circle that lies between the two pencil lines you drew and right click it. Then choose cut from the pop up menu, It should look like this picture below.

Now cut the rest of the pencil lines you drew in until only the broken circle remains.

Note: If you are having a hard time seeing it, click the magnifier and left click over the area to magnify.

Now select the first keyframe of the ball layer and move the ball or object over one end of the broken circle. Next, Choose the last keyframe of the ball layer and move the ball or object over the other end of the broken circle.

Test your movie by holding down the Ctrl key and pressing the Enter key. At this point you may need to move the ball in the first and last keyframe of the ball layer to position it correctly over the ends of the broken circle motion guide. When it works the ball or object will follow the broken circle from start to finish. Double click the left mouse button in the last keyframe of the motion guide layer and choose the actions tab from the pop up menu click the + button in the top left hand corner and choose goto from the drop down menu. Make sure your actions look like the below frame properties window.

Third Select the Add a layer button and call it name, select the first keyframe of that layer and insert your text. Use the text tool button to insert your text or even draw another object import a logo. Advanced users may want to insert a movie clip symbol. For this example I use my name.

NOTE: Give the name a shadow effect by first using the text tool to write my name and then choosing edit from the main menu.

Then Duplicate from the drop down menu. So now I have 2 instances of the same text, then all I do is change the color of the text in the back and align it behind the first.

Now insert a keyframe by right clicking in the last keyframe on the name layer and choosing insert keyframe from the pop up menu. The last keyframe here is number 20.

Last lets look at the frames and layers again before we publish our 3D animation.

You should now have 3 layers:

The name
The ball
The motion guide

Next, right click on the first keyframe of the name layer and choose copy frames from the pop up menu.

Then add a new layer and right click in that new layers first keyframe and choose paste frames from the pop up menu.

Drag that layer to the top by left clicking and holding down the mouse button while dragging that layer using the mouse cursor, to the top.

Quick Overview: What essentially is happening here is the ball is going around and around. The text is some times in front of the ball and some times in back of the ball, thats why we have a name layer on top and on bottom. The trick is to have the top name layer visable over the ball only when the ball is on the right side of the circle guide. So, the ball appears to be behind the name.

Notice where the ball is in the position shown above, This is when we want the top layer called name to be visable so it will cover the ball.

Now, left click and hold down the mouse button in the top layers first keyframe and drag it to the third frame. This will move the first keyframe to frame number 3. Then place your mouse cursor over frame 20 in the top layer called name and left click, holding down the mouse button and drag the cursor over to frame number 13 that's seven frames highlighted. Finally right click in any of those selected frames and choose delete frames from the pop up menu and it should look like above.

Then choose File>Save as and then File> Publish.

Now that wasn't so bad, was it? Think about it a little bit durring the next couple of days and let your subconcious work on it. You'll develop better ideas for cool pseudo 3D effects. Make sure you submit them to Flashkit so others can see what you've done and learn from your experience.

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

3D Solar System of Rotating Planets and Moons in Flash

2008-12-03T11:18:00.000-08:00

Introduction

Welcome back, sports fans. In this little tutorial we're going to create an animation of an alien solar system, with planets and their circling moons. Cool, huh? Although this might sound complex (and this tutorial might seem a little that way at times), it's actually a fairly simple procedure, it just takes a little thinking.

What I'm trying to do in these tutorials is give you, the budding animator or designer, ways of getting a little further up that vertical learning curve we all sit on. The way to follow this tute is to think more about process than about which button to press. Sure, the first time you run this tute, you will be wondering what the hell to do next. But It's structured in an instruction-followed-by-explanation method.

So the next time you do the tute (and I suggest leaving it for a week then doing it again, just to concrete some of the methods), try to do the exercise just by following the instructions, not the explanations. Once you do, you're well on your way to a better method of learning not only MAX, but any 3D platform. After all, a shape is a shape, a particle system is a particle system. Maya, SoftImage and LightWave have particle systems and shapes and many other things, and you can adapt whatever process you've learned to any of these applications.

Okey dokey. On with it!

Alien Solar System

Task: Create five circles in the top viewport. Dimensions - Circle1: 50, Circle2 : 100, Circle3 : 180, Circle4 : 280, Circle5 : 500

Explanation: The first thing we need to do is create the major orbits, with an imaginary sun (for now) in the centre. This solar system is fairly small, with only five planets, and no asteroid belt (phew!). We're going to be using the Top viewport, so you may as well make it full screen so its easier to see what you're doing. Right mouse click on the top viewport, and press W. This is a keyboard shortcut I use quite a bit, so it's a handy one to remember.

You'll notice the grid in the viewport, use this for reference. In the centre of the viewport, create a circle shape (If you remember, the circle tool is under CREATE, SHAPE tool area). Using the left mouse button and dragging outwards from the centre, make the first orbit 50 units wide. Create another circle from the same centre point in the viewport, and make this one 100 units. Create another, this one 180 units. By this time, you may be thinking we're running out of room to create two more, bigger circles. That's okay, press the ZOOM EXTENTS ALL button on the bottom right of the screen.

This will bring everything back into perspective. Create two more circles (using the ZOOM EXTENTS ALL button again if you have to), one 280 units, and the last should be 500 units (we'll need a bit of room for this one).

Alien Solar System

Your top viewport should now (hopefully) be showing something like this:

If it doesn't, and you got totally bamboozled, feel free to load solarsystem1.max from the included files.

All righty then. From this point forward, we'll need to look at some sections in closer detail, then zoom back out to examine the big picture. This might be a good time to familiarise yourself (if you haven't done so already) with the zoom tools in the lower right hand of the screen. The two principal tools we'll be using are the REGION ZOOM and PAN tools on the bottom.

I've underlined them in RED for your convenience.

Have a bit of a play around with them, and press the ZOOM EXTENTS ALL button when you're ready to move on.

The Sun

Task: Create a sphere in the centrepoint of the circles, Radius 30, 32 segments. Name it SUN.

Explanation: Now we create a nice, stable, G type star that should support our planets without risk of exploding or frying everything. Use the REGION ZOOM tool and zoom in to the first circle. At the centre of the circle, create a sphere, Radius 30. The segments should be set to 32.

The Planets

Task: On the right hand side of each circle, create a sphere. Dimensions - Sphere1 : 5, Sphere2 : 8, Sphere3 : 8, Sphere4 : 10, Sphere5 : 30.

Explanation: Here we create our planets on top of our circular orbits. No moons yet, they come later. In our viewport, we should be able to see our sun, and surrounding that, our first circular orbit. On the right hand side (the east vertex, to be precise) create a sphere of 5 units in size. In reality, we could actually make our sphere anywhere we want, though it helps to keep things in perspective for our example. This is a small, rocky planetoid like Mercury.

Zoom out a little, so we can see the second orbit. Again, create a sphere on that right hand side, 8 units in size. This is more of a Venus. On the third orbit, make another sphere of 8 units in size. (You can actually shortcut that process by CLONING the second sphere. To do that, select the MOVE tool, select sphere2, and once you've done that, hold down the LEFT SHIFT key and move the sphere on the X axis to the right. Move it into position, let go of the mouse button, and make sure COPY is selected. Press OK, and we've cloned our planet.)

Now we have our Earthlike world, it has its own moon, which we will create a little later.

The Planets

On the fourth orbit, create our fourth world, 10 units in size. This is basically Mars, though larger. It has two moons, which we will create later.

Finally, on the wide fifth orbit, our Gas Giant. It's a small one, but a gas giant nonetheless. 30 units in size. It has two moons, one of which has its own moon.

By this stage, we should now have all of our planets. Yes, all you astrophysicists will send nasty emails telling me the scale is all out of whack. I know this, but it's just an example.

If you're having trouble getting it looking right, feel free to load solarsystem2.max from the supplied files.

The Moons

Task: Create circular orbits and accompanying moons around planets 3,4 and 5. Planet 5 has its third moon orbiting around moon 2.

Planet 3 - orbit1 radius 25. Moon1 : radius 3
Planet 4 - orbit1 radius 25, orbit2 radius 45. Moon1 : radius 3, Moon2 : radius 4
Planet 5 - orbit1 radius 55, orbit2 radius 115. Orbit 2a radius 35. Moon1 radius 4, moon2 radius 8, moon2a radius 3.

Explanation: Here's where it starts to get a little more interesting. Now we create our moons orbiting around some of the planets. Planets 1 and 2 are possibly a little close to the sun, and didn't form moons. Planet 3 has a moon, so we'll start there. You may want to zoom in closer to planet3 to see what you're doing. Just the same as when we created the orbit for the first planet around the sun, we create the orbit for the moon around planet3. Create a circle shape, using the planet as centre. Make it 25 units in size. On the right hand side, create a moon - a sphere just 3 units in size.

Still with me? That's all we have to do. Now we just follow the same principal and create two orbits and two moons around our fourth planet (hint - you can use the PAN tool to shift the view sideways). The first orbit is 25, with a moon 3 units in size. The second orbit around the planet is wider - 45 units in size, with a moon slightly larger at 4 units.

Planet 5

Now we move on to our Gas Giant, with its intricate moon orbits. Create the first two orbits as normal. Make the first orbit 55 units with a moon 4 units, and the second orbit 115 units, with a moon 8 units in size.

To create our third moon, it's the same procedure we used when adding a moon orbit to our third planet. Zoom in to the second moon on planet5, and using the second moon as the centre, create an orbit 35 units in size. On the right of that, add a moon 3 units in size.

Sound strange? Have a look at the diagram if you get a little lost.

It's really just a solar system within a solar system, if you think about it. I've provided another file at this stage, if you'd like to use mine instead of continuing with your own, or you got lost along the way, or the computer exploded and you lost all your work. It's called Solarsystem3.max.

The Orbits

Okay, you may be saying to yourself - 'I've spent a bit of time on this, and it's not raising my eyebrows so far. In fact, it's sitting there like a stunned mullet.' That is true. If you press play, nothing moves. How boring, huh? Well, now we bring the whole thing to life. We'll be using controllers and hierarchies within MAX to achieve our goal. We'll be going at breakneck speed, so grab your mouse, take a breath, here we go.

First things first, let's animate the first two planets, and place them on their orbits.

Select planet1(sphere2, if you haven't renamed them), and go to the MOTION panel on the top right.

You will see a tab underneath called ASSIGN CONTROLLER. Open it out by clicking on it. We're given some options to adjust or transform things - we can select POSITION, ROTATION, or SCALE. On the right of each transform, we can see what sort of CONTROLLER they are using. For example, POSITION is using a BEZIER POSITION controller (for the technically minded, this means that positions between keyframes are connected by curved bezier splines. This means, for example, a space ship will move smoothly between keyframes instead of mechanically, for example). We're going to change this to a PATH controller - basically, our orbit will become a path for this planet.

The Orbits

If you look at this image, you can see I've highlighted the POSITION controller, and above it on the left has appeared a green triangle button. That's the ASSIGN CONTROLLER button, and allows us to change what type of controller is assigned. The options it makes available varies, depending on what you select in the first place.

Pressing the button will bring up the following options:

You can see a little symbol next to BEZIER POSITION, this indicates that this controller is assigned right now. At the bottom, it also tells us this is the default controller applied.

The Orbits

We're going to change the current controller to PATH. Resist the temptation to press the 'make default' button, it can get you into all kinds of confusing messes if you don't know what you're doing. Press OK, and on the right, you'll see another menu rollout appear. Scroll your menu upwards if you can't see it all.

Here we can see a PICK PATH option. Select the first circle as the orbit, and press play. WOOHOO! Round she goes. Select the second planet, and do the same routine again, assigning a path controller, and picking the relevant orbit around the sun as the path. Do the same again for planets 3, 4 and 5.

If you've pressed play, you'll notice that the planets are all swinging around and reaching their start points at the same time. Of course, things wouldn't work that way in space. So, we need to fix that. Also, the moons aren't following. That's okay, we'll get to that.

The Orbits

Assigning the path controller basically animates the object (our planet) travelling on the path (our circular orbit) from 1 - 100% over the duration of the animation. This means, that all of our planets are going from 1 - 100% over the 100 frames that makes up this particular animation. We need to change that, and give them different rotation lengths.

First, we need to adjust the length of the entire animation. Press the TIME CONFIGURATION BUTTON and set the ANIMATION END TIME to 200 frames.

What we need to do now is adjust the length of the time each planet takes to go around their respective orbits. We'll start with the biggest orbit first, just for something different.

Select planet 5. If you look at this next image,

(save image to see the complete picture)

You'll see I've placed arrows next to two circular shapes at the bottom of our animation bar. This is the TRACKBAR, and is a new feature in MAX3 designed to help make quick adjustments of keyframes. In this case, what we can see are the start and end keyframes for our selected planet. We can see it starts at frame 0 (the half circle on the left hand edge) and finishes at frame 100 (the other keyframe). Move the frame slider over these keys and you'll see the action stop right where the keyframe does.

What we'll do is click on the end keyframe and drag it across to the right to frame 200. We can keep track of the frame number by looking at the area I've circled in red in the image above. It will change and tell you what is happening, and what frame you are up to.

Once you've dragged it out, press play. You should see the planet now travel slower, reaching its destination at frame 200, the end of the animation.

Now see if you can adapt this knowledge you've learned to change the other planets orbit end times to the following:

Planet 1: frame 40
Planet 2: frame 60
Planet 3: frame 90
Planet 4: frame 130

If you press play, the planets should rotate once at different, staggered speeds.

The Moon Orbits

Okely Dokely. Now we're going to get the moons animating on paths in staggered times just like we've done with the planets.

See if you can go through the moons just like you did with the planets, and assign path controllers to their various orbits. Once you've done that, go through and adjust their end times (shifting the end keyframe).

Here are some end key times for you to use.

Planet 3, moon - end 25
Planet 4, moon1 - end 25
Planet 4, moon2 - end 40
Planet 5, moon1 - end 40
Planet 5, moon2 - end 55
Planet 5, moon2a - end 30

To save you time (this is a lot like a cooking program, eh?) I've baked it up for you. Feel free to load Solar System 4.MAX and continue.

Linking

So now you've set up the moons, you've set up the planets, but it all still seems rather crappy looking. It's still looking nothing like the amazing thing you thought it would be. Well we're nearly there, just two steps away from finishing something you can take home and show your mum.

Next step is to link up the various orbits of the moons so they follow the planets around the sun. First, make sure your frame slider is sitting on frame 0, so all the planets are in their starting positions.

What we're going to do is create a series of hierarchies that will make the orbits of the moons follow the planets around their own orbits. Make sense? Follow me, I promise to go a little more slowly.

Find the SELECT AND LINK tool on the top toolbar - it looks something like this:

This tool creates a relationship between two objects - known as a parent / child relationship. Of course, any of those two objects could, themselves, be linked in a similar relationship with any other object. The best example of this is a helicopter. The blades are attached to the rotor, which is attached to the helicopter. The blades can pivot on their own, which doesn't affect the rotor. But if the rotor turns, the blades turn with it. By the same token, the spinning of the rotor doesn't affect the helicopter, but as the helicopter moves, the rotor and the blades come along for the ride. It's a difficult thing to explain, so perhaps if it's still not making sense, we might as well just jump in the water, so to speak, eh?

First things first. To make the moon of planet 3 follow it around on its yearly journey around the sun, we need to connect it. We don't need to connect the moon, we need to connect the path. That's because we want the moon to go AROUND the planet on the circular path, but we want the orbit to change and go the same direction as the planet is. Hmm.

Use the SELECT AND LINK tool. First, select the ORBIT of the moon (here shown in white),

hold down the left mouse button, and DRAG onto the planet, and let go. The planet will flash white once, briefly. This will indicate it is now the parent in a link. The orbit is now the child. To see the effect of this, press play. The moon goes around the orbit, which follows the planet. Making a little more sense now?

Let's try the next planet. Using the SELECT AND LINK tool again, select the orbit of the first moon for planet4, and drag-link it to the planet. Do the same for the second moon. Press the play button as a test - the orbits (and the moons) should now be following the planet around the sun, doing their own rotations as they do.

The last one is planet five. This will be a three level hierarchy. Use the SELECT AND LINK tool, and attach the orbit of the two main moons to the planet one at a time. Once you've done that (and tested the link worked by pressing play), we then need to add in another part of the hierarchy. Use the Select and Link tool to attach the orbit of moon 2a (the moon around a moon) to Moon2 (the moon it's orbiting around).

So now we've set up our solar system and it's nearly looking sweet. One more thing to do.

Looping Keyframes

You can load up Solar System 5.MAX or keep going with your own file.

Now we need to work in the TRACKVIEWER. It can be a daunting interface (it still scares the bejeebers out of me), but it is, I'm afraid, a necessary evil for many things.

Open up the trackviewer.

You'll see something like this:

What we need to do is quickly sort through the large amount of information in the track viewer to find the bits we're after. A good way to do this is use the filter button. This is located in the very top left hand corner of the track viewer, and will bring up the following menu.

All we need to do is show the ANIMATED TRACKS, because these are the only things we need to look at. Anything that isn't animated is just screen clutter to us right now.

On the top right hand side, select the ANIMATED TRACKS box in the SHOW ONLY area. Once you've done that, press OK.

Open up the WORLD rollout by pressing the plus sign on the left of it. We're then going to open up the OBJECTS rollout in its entirety. To do this, right mouse click on the OBJECTS rollout, and select 'Expand All' from the menu. You'll see all our spheres/planets, and they'll have three sub categories - Transform, Position, and Percent.

Highlight the PERCENT section of SPHERE2 (sphere 1 is our sun). You'll notice a new button at the top appear (here highlighted for you in red)

This is the PARAMETER CURVE OUT-OF-RANGE TYPES button. What does that mean? Basically it's just a tool that tells MAX what to do once it runs out of keyframes during the course of the animation. Press it and it will bring up the following menu:

At the moment, it's set to CONSTANT, which means that it starts at the beginning, and ends at the end. That's it. We really want the planets to loop repeatedly around their orbits, smoothly connecting the start to the end. So we click on LOOP. There are other options there, like PING-PONG which will move forwards, then backwards between start and end keyframes. Or CYCLE, which will go through a series of keyframes, and jump back to the beginning without a smooth transition.

Click on LOOP, and press OK. Minimise the track viewer, and press play on the controls. Now you should see the first planet continue to revolve around the sun all the way through the animation, instead of stopping dead at frame 40.

Maximise your track viewer, and go through each sphere (all planets and moons), and change the percent to a LOOP out-of-range curve type. Once we've done that, We're pretty much finished!

You can use this same technique on out-of-range curve types on helicopter blades, wheels on a moving car, or any sort of animation where repetitive motion is required. Electric fans, you name it.

Conclusion

So there you have it - LET THERE BE LIGHT.
The things this tutorial covers can be used on such a wide variety of applications. You can use similar methods to create banks of machinery, factories or spinning whimsical images. Getting an object to follow a path is only the beginning. Try creating a 3D path that arcs through the solar system, and attach a camera to it. We'll cover cameras and paths in a later tutorial, keep an eye out! I'm sure if I receive encouragement enough, I'll come up with a few more tutes that cover a wide range of process orientated solutions for MAX. If you liked this tute, let me know. If you didn't - I don't care! I did it for fun anyway. See you next time.

Load the Solar System 6.MAX file to see the end result. If I had enough time, I would have made the sun a lens flare, and put a starfield in the background…

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

3D Engine for Dummies in Flash

2008-12-01T10:33:00.000-08:00

Introduction

The purpose of this tutorial is to teach you the fine art of making a Flash 3D-engine. What this means is that we are going to find out how to take a set of 3D coordinates and transform them into 2D coordinates.

Limitations

My engine has a few limitations, some because this is a simpler "tutorial version", some because I was too lazy to implement the functions, some because the functions were to processor-consuming and last but not least those that I couldn't figure out:

no shadows
no solid faces
no curbs
etc.

This tutorial is definetely advanced so most of the time I won't include any images of the program since you probably know it perfectly. I've included one thing: an actionscript summary at the very end of the tutorial, for quick reference. Newbies, please stop reading now...
The last thing I would like to say is that making a functional 3D engine is a kind of test, and you'll feel much prouder having figured it out all by yourselves. So if you want to give it a try, just check out the math link.

View Plane

As I've already said, we want to transform a set of 3D points into a set of 2D points. To do this we must somehow eliminate the third coordinate, the depth (z)to only have the x and the y left. However we cannot simply discard the depth information because we would lose the perspective. To keep the perspective, we must chose a point of view, the eye of the observer, and a view plane on which all the points are drawn. then for each point we trace the line between the eye and the point. We then calculate the coordinates of the intersection of the line and the plane: these are the 2D-coordinates of the point. Is this a bit complicated? Don't worry, I've made a picture:

To make the calculations a bit simpler (and the 3D engine faster) I've chosen to put the eye on the z-axis (eyex=0 and eyey=0). The view plane is parallel to the xy plane, that way every point on the plane has a fixed z and the 2D coordinates of each point are the x and y of the corresponding point on the view plane.
The closer the view plane is to the object, the bigger it will appear. To change the zoom, we vary the position of the view-plane.

If you still haven't understood, I'm probably not such a good teacher and I can't help you anymore. However if you still want your engine you can just follow my step by step guideline and it will work. You should also take a look at the math page I link to here.

The Basic Movie

All right,let's start.
We'll begin by making our basic bricks, the framework for our tutorial. This part will be as short as possible since I suppose that if you are trying this tutorial, you already feel quite at ease with flash.
These are the things we need: Start by creating a new movie approximately 400*500 in size.
Then create 3 layers: actions, buttons, and lines. Create 4 frames on the two last layers and insert ten blank key-frames on the actions layer.
Now name these blank key frames in this order:

"model", for loading the points and lines
"start", for initiating all variables, etc.
"loop", for the basic program loop
"loop2"
"draw", for the drawing routine
"rotx", for the rotation around the x-axis
"roty", guess
"rotz", same again
"zoom", for calculating the zoom
"drawline", the line-drawing routine

Now we have the frame of our movie. Note that I am not making a preloader, you can do that all by yourselves!

Buttons, Line & Stuff

The buttons

Now just create a simple button. It's only for the rotations and the zoom so you don't even need any second states. Now then again if you want to make it fancy, go ahead, no one will stop you.
Place 8 instances of this button on the buttons layer, towards the bottom of the movie. We'll define their actions later.

The line

This part is a bit more important since it determines whether your lines will be drawn correctly or not. Create a new movie clip and name it baseline. In it, draw a simple black line directed from the top left to the bottom right. Then select this line and set its length to 100px and its width to 100px.
Now you should have a line that's oriented 45° downwards. Also, the good thing about it is that it's lenght in pixels is equal to its length in percent, so you can easily set its size with SetProperty.
Now place one instance of this line on the lines layer. Name it baseline.

The extra stuff
Just add some simple stuff such as a title, your name and preferably mine too (or some kind of a small note saying "original idea by KStor, but now my much better version" etc.)
Also add an editable text-field. Name the corresponding variable zoomvalue. This will be used to display the value of the zoom.

The Math

This part of the tute is purely theoretical. It's a very simple explanation of the math I use (actually you'll notice it's not an explanation at all but just a couple of formulas)You don't have to read it if you don't care about how the tute works, but it's kind of interesting to know. On the other hand, if you want to know more, click here.
The math we use is coordinates geometry in space. Let's start out with some definitions.

Vector
A vector is an abstract kind of notion (that's an easy way of saying I don't know what it is) but very practical. It basically consists of a line drawn from the origin (0,0,0) to a point (x,y,z). It can also be thought of as a direction from one point to another: x units along the x-axis, y units along the y-axis and z units along the z-axis. The vector is defined by the three coordinates x, y and z.

Line equation
A line can be described as all the points aligned with two points A (0x,0y,0z) and B. That way, it is defined by its origin A and the vector (dx,dy,dz) going from A to B. The equation looks like this:
point = org + k * dir
or with the coordinates (x,y,z) = (0x,0y,0z) + k * (dx,dy,dz) ,k being any real number.

Plane equation
A plane is a surface that can be described by a normal vector (dx,dy,dz), ie a direction the plane is facinng, and a value k, indicating the position of the plane along this vector. The equation is:
point * normal = k
or with the coordinates (x,y,z) * (dx,dy,dz) = k, k being any real number.

Intersection of a plane and a line
The line equation looks like this: point = org + u * dir. We have to find the value of u corresponding to the intersection. Using the plane equation, we find
u = (k - org * normal) / (dir * normal)
We then plug this into the line equation and find the coordinates of the point.

The rotations
For the rotations we just apply the following formulas:
Rotatation about the x axis:
x' = x
y' = (cos é * y) - (sin é * z)
z' = (sin é * y) + (cos é * z)
Rotation about the y axis:
x' = (cos é * x) + (sin é * z)
y' = y
z' = -(sin é * x) + (cos é * z)
Rotation about the z axis:
x' = (cos é * x) - (sin é * y)
y' = (sin é * x) + (cos é * y)
z' = z
...é being the angle of the rotation.

The Model

The model is the way our 3D object is coded, the way we define it mathematically. As I said in the introduction my 3D-engine is used mainly for lines, ie two connected points. Therefore, my model consists of two main parts: the coordinates of the points and the lines to be drawn. Added to this are the eyez, the maximum zoom value and the original zoom.

The points
The points are coded in one long variable called points. They are coded this way:

"x1,y1,z1Rx2,y2,z2Rx3...Rxn,yn,zn"

xn, yn and zn are the x, y and z coordinates of point number "n". They contain three digits, so 50 will be coded "050", 6 will be coded "006", etc.
Each point is separated by an "R" to make editing easier.
You must also create a variable named totalpoints that contains the total number n of points.

The lines
The lines are defined by the numbers of their extremeties. For example the line from point 7 to point 11 will be coded "0711". They are stored in a large variable named line:

"p1p'1Rp2p'2Rp3...Rpmp'm"

pm is one extremity of the line number m, p'm is the second extremity. Each point is coded by two digits, so point number 2 will be coded "02" and point 11 will become "11". You'll notice that as a result, my engine only accepts 99 points. If you need more, it's easy to change. However too many points will slow it down quite a bit (I haven't tried).
You must also create a variable named totallines that contains the total number m of lines.

The Model (con't)

The other variables
To this we have to add three extra variables that define the general way the object appears.
First is the eyez, the z coordinate of the point of view. It should be negative. The further it is from the object, the less perspective there will be. In my example I set it to -500, my closest point being at -99. It's a pretty good value.
Second is the maxzoom. This value is the z position of the view plane when the zoom is 100 percent. Be careful so that this value always is bigger than the eyez but smaller than the minimum possible z coordinate for any of your points after a rotation. For example when I rotate my point at z=-99, it will get closer to z=-140, so my maxzoom has to be lower than say 150.
Third is the initial value of the zoom, set between 5 percent and 100. the variable is called zoom.

The cube
These are all the variables you need to set. Now I'm going to give you the variables corresponding to a cube. Open the first key-frame of the actions layer. Then set this:

Set Variable: "totalpoints" = "8"
Set Variable: "points" = "099,099R099,099,099R-99,099,-99R
099,099,-99R-99,-99,099R099,-99,099R-99,-99,-99R099,-99,-99R-99"
Set Variable: "totallines" = "12"
Set Variable: "lines" = "0102R0103R0105R0804R0806R0807R0506R
0507R0307R0304R0206R0204"
Set Variable: "eyez" = "-500"
Set Variable: "maxzoom" = "-200"
Set Variable: "zoom" = "75"

Now your model is set up and we can start building the engine.

The Routine

Now comes the real part: the engine program itself.

The loading setup
First we are going to create the initiation routine, the one that starts it all out. Open the second key-frame of the actions layer. This is what we do:

move the baseline instance so that no one can see it on the picture.
```
Set Property ("/baseline", X Position) = "1000"
```

then let's cut the points variable up into lots of separate coordinate variables:

Set Variable: "n" = "1"
Loop While (n <= totalpoints) Set Variable: "x"&n = Substring (points,( (n-1) * 12 + 1), 3 ) Set Variable: "y"&n = Substring (points, ((n-1 ) * 12 + 5), 3 ) Set Variable: "z"&n = Substring (points, ((n-1) * 12 + 9), 3 ) Set Variable: "n" = n+1 End Loop

This places the x-coordinate of point 1 in variable x1, the y-coordinate in y1, the z in z1 and the same thing for all other points.

now we do the same thing for the lines variable:

Set Variable: "n" = "1"
Loop While (n <=totallines) Set Variable: "pt1"&n = Substring (lines, (n-1)*5+1, 2 ) Set Variable: "pt2"&n = Substring (lines, (n-1)*5+3, 2 ) Set Variable: "n" = n+1 End Loop

The first end of point 1 is put in pt11, the second one in pt21, etc.

set the center of the display. These are the coordinates of point (0,0) in the movie.
```
Set Variable: "centerx" = "190"
Set Variable: "centery" = "215"
```

That's all for the initial frame

The Routine (con't)

The loop
Next we are just going to set up the basic loop. This will be used later for the zoom and the rotations. Open the 4th frame loop2 and enter

Go to and Play ("loop")

The zoom routine (part 1)
We now have to make a basic zoom routine to transform the zoom value in percent into the z-coordinate of the view plane. We'll make the zoom buttons in a while. They way we do our conversion is to take a percent of the distance between the eyez (minimal zoom position) and the maxzoom position, and add the maxzoom. This way the z of the view plane takes values between eyez and maxzoom when the zoom takes values between 0 and 100 percent. Open the next to last keyframe zoom and enter this:

Set Variable: "depth" = - zoom * (eyez -maxzoom) / 100 + eyez
Call ("draw")

The depth variable contains the z-coordinate of the zoom plane. The draw command is the central routine of our engine, we'll build it soon.
Also add this command to set the zoomvalue variable so the zoom shows up.

Set Variable: "zoomvalue" = "zoom= " & zoom & "%"

The drawline routine
This is the last thing we have to do before the drawing routine it self. This routine will be used to draw the line linking two points. The way it works is that the baseline is duplicated and its size and position are adjusted to correspond to the points (it works, that's all that counts).

Set Variable: "pt1" = eval("pt1"&n)
Set Variable: "pt2" = eval("pt2"&n)
Set Property ("line"&n, X Position) = eval("2Dx"&pt1)
Set Property ("line"&n, Y Position) = eval("2Dy"&pt1)
Set Property ("line"&n, X Scale) = eval("2Dx"&pt2) - eval("2Dx"&pt1)
Set Property ("line"&n, Y Scale) = eval("2Dy"&pt2) - eval("2Dy"&pt1)

If the number of the line is stored in variable n, the line number n is drawn.

The drawing routine
This is the very core of the engine: the program that converts the 3D coordinates to 2D coordinates (as explained in The Math). In the fifth frame, draw, enter this:

```
Set Variable: "normalz" = depth * depth
```
Normalz is the value k in the plane equation, depth being the z-coordinate of the normal vector of the view-plane (the plane being parallel to the xy plane, the vectors coordinates are (0,0,depth))

Set Variable: "n" = "1"
Loop While (n<=totalpoints) Set Variable: "u" = (depth - eyez)/(eval("z"&n) - eyez) If (n<=9) Set Variable: "2Dx0"&n =  u * eval("x"&n) + centerx Set Variable: "2Dy0"&n =  u * eval("y"&n) + centery Else Set Variable: "2Dx"&n =  u * eval("x"&n) + centerx Set Variable: "2Dy"&n =  u * eval("y"&n) + centery End If Set Variable: "n" = n + 1 End Loop

This part is a bit more complicated. We actually convert the 3D coordinates to 2D coordinates. For each point, we first calculate the value u as explained in The Math. Then we recalculate the 2D coordinates by multiplying the 3d coordinates by u. I can't explain exactly what I've done here but if you study the math link I gave you should be able to understand it.

Set Variable: "n" = "1"
Loop While (n<=totallines) Duplicate Movie Clip ("/baseline", "line" & n, n) Call ("drawline") Set Variable: "n" = n + 1 End Loop

Finally we just draw the the lines by duplicating the basic movie clip and calling the drawline frame.

Ok, now your 3D engine is basically finished. But we also want a zoom and rotations. That's easy, follow the guide!

The Zoom

Let's work out the zoom. We really don't have very much to do, since most of it has alreday been done. Each time the main loop is looped it adds a certain value to the zoom (or substracts). When you roll over the zoom buttons, they change the value added from 0 to a positive or negative value (zoom in or out). When you roll out they reset it to 0.

First open the start frame(n°2) and add this code just after the setting of the xcenter and the ycenter.

Set Variable: "zm" = "0"

This initiates the zm variable, which indicates by how much the zoom should be changed.

Now open the loop layer and add this:

Call ("zoom")
Call ("draw")

That way the zoom routine is called every time the engine loops. The draw routine is also called to refresh.

Let's continue the zoom routine. Open the next to last frame zoom. Normally we only have two commands: the calculation of the depth and the setting of the zoomvalue. Before this we are going to add a new command:

Set Variable: "zoom" = zoom + zm
If (zoom> 100)
Set Variable: "zoom" = 100
End If
If (zoom <10)> First we add the zm value to the zoom, then we check that it doesn't exceed 100% or go under 10% (under ten percent the object gets too small). Last we set the buttons: double-click on your zoom-in button (any one of your eight buttons). Then set these actions:

On (Roll Over)
Set Variable: "zm" = "5"
End On
On (Release, Roll Out)
Set Variable: "zm" = "0"
End On

I don't think this needs to be explained: while the mouse is over the button, the zoom increases by 5 percent at every loop. Now set the same thing for the zoom-out button but with "zm"="-5"

The Rotations

This is the last thing we have to do to have our functional 3D engine. The rotation works in a similar way to the zoom. We set two basic basesin and basecos variables. These contain the values of sin 10° and cos 10°. Then while one of the rotation buttons is rolled over the coordinates of all points are rotated around the corresponding axis by 10° at each loop. The rotation frames work with a sin variable and a cos variable, so the zoombuttons only load values in sin and cos and set an axis variable to x, y or z depending on the axis that should be rotated around.

First we modify the start frame. After all the rest we first set the basesin and basecos:

Set Variable: "basecos" = 0.9848
Set Variable: "basesin" = 0.1736

Then we call an initial rotation around the y-axis and the x-axis:

Set Variable: "sin" = basesin
Set Variable: "cos" = basecos
Call ("rotx")
Call ("roty")

Now we change the loop frame. Add this:

Call ("rot"&axis)

This way the rotation is called at every loop. Notice that if axis=none then there will be no rotation since there is no rotnone frame.

Now we are going to do the buttons:

open your first button (say the up-rotation around the x-axis). Enter this
```
On (Roll Over)
Set Variable: "sin" = -  basesin
Set Variable: "cos" = basecos
Set Variable: "axis" = "x"
End On
On (Release, Roll Out)
Set Variable: "axis" = "none"
End On
```
The sign of the sine determines which direction the object turns. When you roll over the button, the axis turned around is set to x, and the sin and cos are stored. When you roll out, the axis is set to none. The principle is the same for all the other buttons, but with different values.

x-axis down rotation

      Set Variable: "sin" =  basesin
Set Variable: "cos" = basecos
Set Variable: "axis" = "x"

y-axis right-rotation

      Set Variable: "sin" = - basesin
Set Variable: "cos" = basecos
Set Variable: "axis" = "y"

y-axis left-rotation

      Set Variable: "sin" = - basesin
Set Variable: "cos" = basecos
Set Variable: "axis" = "y"

z-axis rotation(1)

      Set Variable: "sin" = - basesin
Set Variable: "cos" = basecos
Set Variable: "axis" = "z"

z-axis rotation(2)

      Set Variable: "sin" = basesin
Set Variable: "cos" = basecos
Set Variable: "axis" = "z"

The last thing we have to do to make our rotation functional is obviously to program the rot frames. This is a simple use of the math-formulas. Open the rotx frame and enter this

Set Variable: "n" = "1"
Loop While (n<=totalpoints) Set Variable: "tmp" = (sin * eval("y"&n)) + ( cos * eval("z"&n)) Set Variable: "y"&n = cos * eval("y"&n) - sin * eval("z"&n) Set Variable: "z"&n = tmp Set Variable: "n" = n + 1 End Loop

If you check this out it corresponds to the formulas in The Math. Now do the same for the roty frame:

Set Variable: "n" = "1"
Loop While (n<=totalpoints) Set Variable: "tmp" = - (sin * eval("x"&n)) + ( cos * eval("z"&n)) Set Variable: "x"&n = cos * eval("x"&n) + sin * eval("z"&n) Set Variable: "z"&n = tmp Set Variable: "n" = n + 1 End Loop

and for the rotz frame:

Set Variable: "n" = "1"
Loop While (n<=totalpoints) Set Variable: "tmp" = (sin * eval("x"&n)) + ( cos * eval("y"&n)) Set Variable: "x"&n = cos * eval("x"&n) - sin * eval("y"&n) Set Variable: "y"&n = tmp Set Variable: "n" = n + 1 End Loop

That's all, your engine is finished!

Finished

OK, here it is. After hard work the engine is finally finished. You might not have understood everything, the math isn't really easy and I didn't explain very much. However if you study the math link you should be able to understand it pretty easily. To finish off here's some extra stuff I want to tell you:

Actionscript summary

Model standard
This little paragraph is to deal about other 3D engines. I've seen a few, only two which draw lines and of the same level as mine. Their coding of points is equal or very similar to mine. Their lines were coded without the separating R to distinguish lines. This is both inconsistent with the points coding and not very practical. That's why I used my coding, and I suggest that it could be used as a preliminary standard for Flash 3D engines.

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

3D Rotating Ring in Flash

2008-12-01T10:09:00.000-08:00

Introduction

Ever wanted to make 3d objects in Flash, without buying expensive, complicated 3d programs? If your aim is to get some not much complicated, rotating objects, such as the ring above, try this tutorial...

Create Object

Let's start drawing the object you wish to rotate: when done, convert it to a graphic (Choose Insert> New Symbol and select "Graphic" as the behaviour option). Next, place an instance of the graphic you created in frame 20 of the current layer (Insert> Keyframe, or F6).

Press Scale on the toolbar, grab the central box and move it to left, 'til the center of the circle.

Now, the instance in frame 20 is squeezed: go to frame 1, right click and choose Create motion tween. Test the movie you created so far. Do you begin to get it?

Set Key Frames

Since we are going to work on single frames, mark the area between the two keyframes and insert keyframes on every single frame. Next step, Insert> Layer, where we are moving our work.

Click on "Layer 1" name to select all the frames, then choose Edit> Copy frames, click the first keyframe of "Layer 2" and choose Edit> Paste frames.

And this is where we are now:

Step to the Right

Let's make a tricky move now, selecting each keyframe of "Layer 2" and moving it a step to right (holding shift key and pressing arrow key right)

Now, our first keyframe looks like this:

while the 20th is something like this:

Our ring is getting out, ain't it?

Close the Gaps

Now, step back to "Layer 1" and select the first frame. Zooming on the stage (about 300%), use Line tool to draw lines to close the gaps on the ring. Repeat the action for all the 20 frames. Now, frame 20 is something like this:

Summon the Ring

Now, we are going to summon up our ring in a single layer: so, select frame 1 of "Layer 1", copy it (faster, Ctrl+c) and paste it in place (Ctrl+Shift+v) in frame 1 of "Layer 2".

Once again, repeat the process for all the 20 frames. Let's delete "Layer 1" (Right click on the name and Delete layer), since we are getting to work on a single layer, now.

What stands between us and our rotating ring, now? Basically, just a little cleaning up of unnecessary lines.

Cleaning Up

We are going to clean up, in fact, lines that won't be seen in the animation because they'll be "behind" the object. Go to frame 20 and see what I mean:

If you think we are going to produce a 3d object, you'll understand quickly this process. Take a look at the new frame 20 after cleaning up:

As usual, repeat the process for the other frames...

Oops - How to Clean up

Oops! I forgot it! How do you erase the unnecessary lines? First of all, Break apart the frame you are working on (Ctrl+b), then, from the "Toolbar", choose Eraser tool

From the below panel "Options", choose Faucet and begin your cleaning...

Filling with Color

Now, it is just a matter of filling with any colour you like: as an advice, let me tell you I like particularly gradient colors for the shadowed parts.

All OK? All the frames filled and the ring beginning to spin? It's not over, yet...

Side View

...It's not over 'til it's over... We have just 50% of the animation, right now: the ring, in fact, should make a complete spin around its axis. And we need another frame, the one in which we see the ring completely from its side.

So, let's get back to the 20th frame of the ring, now: select the ring, right click on it and choose Panels> Info

My advice for making the frame of the side view is drawing a rectangle with the same height of the 20th frame,a width of about 50%, putting it in the right place of the 20th frame. This way:

The Final Round

OK? Let's go to the final round, now. There is only a thing you have to understand, then it will be very easy: when a ring, or a coin, makes a spin around its axis, we begin seeing the ring by face, then we see a smaller part of it, 'til it reaches half of the way and we see it from the side. Then, it begins the second half of the spin, so initially we see a little part of it, then a greater part, finally again its face (its second face, by the way). Going back to the ring, the 22th frame will be equal to the 20th, only flipped horizontally, the 23th will be equal to the 19th, and so on...

At the end, we'll have the 41th frame equal to the first, flipped horizontally (think of the 2 faces of a coin)

To obtain this result with our movie, we'll act this way: select the first frame of the movie, and Copy it (Ctrl+c). Then, put a keyframe (F6) on frame 41 and paste in place (Ctrl+Shift+v) what you copied. Finally, choose Modify> Transform> Flip Horizontal

What you have now is the mirror image of the first frame:

Repeat the process with frames 2-40, 3-39, 4-38, and so on, and finally..."WE DID IT!" We have our beloved rotating ring!

Have a good day an take it easy! Bye!

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

Explaining Advanced 3D in Flash

2008-12-01T10:00:00.000-08:00

Flash & 3D

Flash and 3D. These two topics have raised many thoughts and comments over the last few years. I remember spending far too many hours with Flash 3 tracing over 3D objects to create a spinning cube. Then there was creating a 3D page turn in Flash 4. However with the advent of Swift 3D (by Electronic Rain) the making of these 3D animation's has become a lot easier for us designers.

Swift 3D provides us with a good environment for developing 3D based animation's, however there are some major drawbacks with this great software. The most obvious issue is that Swift 3D does not come with a CUBE tool. The primary reason for Swift 3D was to animate 3D Text, and company logos (which can be imported from Freehand or Illustrator and extracted). I find that I'm very seldom asked to animate simple objects, but more commonly asked for complex animation's, some of which come from television 3D.

I'm not going to write a tutorial on using Swift 3D - the manual does a very good job of that. What I'm going to talk about is developing slightly more complex animation's, esp importing 3DS files, and creating slightly more complex 3D, and I'll have a little comparison of 3D files.

3D Formats

One thing to remember - Flash is NOT a 3D application. Any 3D item in Flash is simply a flat object with shading to create the 3D illusion. Technically a good artist could recreate this using gradient fills in Freehand or other such applications.

When a file is exported from Swift 3D as an SWF the RAViX Processor (or renderer) breaks the object down into triangle based "vectors" and colours each of these panels with either a gradient fill or a flat fill.

The developers of Swift in their wisdom decided that 3DS was a good format for importing as many people use 3D Studio Max for creation of 3D Animation. This is of great benefit for those who are familiar with 3D Studio Max and those who can afford the package ($7 000 for a single user license). However for many designers 3D Studio Max is very difficult to learn, let alone create complex models in. (Note:- There are other applications that will export as 3DS, e.g. Poser.)

For those who are new to 3D there is help out there. There are many databases of 3D models in the 3DS format. This means you can search for just about anything you want and import that into Swift 3D, and export as SwF (Try http://www.3dcafe.com or http://directory.google.com/Top/Computers/Graphics/Software/3D/Models/)

BUT be warned, there is a drawback to this, some of these models are created of high end resolution dependent TV or Movie animation's, and they can have far too many panels for serious use in Flash. This creates SwF files that can be rather large in file size. One hint: When exporting files you have created in 3D Studio Max, apply OPTIMIZE to the objects to drop out uneeded panels.

Complex Wave - I

Here's an example of some complex 3D.

<click for a bigger view (80K unoptomized)

The fern shape was created in Flash 5, exported as adobe illustrator paths, and imported into 3D Studio Max. A few tweaks were made then it was extruded into a 3D shape. The wave animation was created using some of the mesh warping tools available in 3D Studio. While Swift 3D is a simple enough program to use, creating any decent animation is a little hard. One of the great things about 3DS files is that you can script a rather complex animation in 3D Studio Max. This animation data is saved in the 3DS file, along with camera and lighting positions, and used by Swift 3D. However, space warps, mesh warps and other modifiers in 3D Studio Max are NOT available in Swift and WILL NOT transport.

Complex Wave - II

So how do you create a complex Wave using a modifier in 3D Studio Max? You do it the hard way. Take time to set up the animation so you don't have too many frames to create. You'll notice that the fern above goes into the screen then comes back out. Well the animation is 50 frames long, but there are only 25 frames of fern, the second 25 frames are just the first 25 played backwards. (Don't be scared to skip frames out. The original animation was 100 frames, but I only exported every second frame).

Set up your animation in 3D Studio Max using modifiers etc., export the individual frames as FRAME01.3DS (to export individual frames you have to move the animation slider in 3D Studio to the next required frame), open in Swift 3D and export. Yeah it takes a while, but the results can be brilliant. The same file above as a QuickTime movie was around 2.3megs and it wouldn't scale to fit the screen as was required. When 3D Studio Max exports the 3DS file, it exports the current stage of the animation. So, if you have animation's that are created with modifiers, make sure you can see them animating in the 3D Studio Viewport and then you will be able to export those frames as 3DS....(confusing? sorry....) You have to do this as like I said, Swift 3D does not contain modifiers so it can't do it for you.

Spinning & Turning - I

<click for a bigger view (75K unoptomized) <click for a bigger view (152K unoptomized)

These images were created and animated in 3D Studio Max, the colours, and reflections were adjusted all in before exporting as 3DS. They were both exported as Area Shaded and as you can see from the file size the outlines on the right image add a huge amount of data to the file. (Area shading fills the entire area with a gradient fill to emulate 3D)

Spinning & Turning - II

<click for a bigger view (45K Static Image)

The previous two animations images where created off the same 3DS file. The Static Image, as shown above, is so large (45k) due to the high number of panels. The animation is also huge due to the Mesh shading, in which each little triangle panel is filled with a gradient to create 3D. NOTE this animation was created as a demo and the 3DS was NOT Optimized. This was done to keep the curves as nice and crisp as possible. I would normally optimize this, which tends to turn curves slightly more square looking. (Okay I lied, there is no animation on the left....know why? Because it's 2.5megs!!!

Final Comments

Some things to remember:

3D Scenes, Trees, and Flowers tend to be made up of MANY veracities, which makes them not ideal for turning into 3DS.
Optimize 3D Objects in 3D Studio Max before exporting as 3DS.
Create complex 3D Animation's in 3D Studio Max before exporting as 3DS.
Set up lighting, and camera animation's in 3D Studio Max as these WILL be usable in Swift 3D.
Use of space warps, mesh effects and other specialized 3D Studio Max items will not work in Swift 3D, however exporting individual frames as 3DS can allow you to cheat these effects.

Go to it download some 3DS files off any of the many resource sites around, and try, try, try. Maybe Flash Kit can start to offer a 3D Model section where users can place 3D Animation's exported from Swift for others to use....much like 3DCafe has 3D models?

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

3D with Word in Flash

2008-12-01T09:57:00.000-08:00

Introduction

There are many ways to create 3D in Flash. You can either do it directly in Flash or through use of 3rd party software. Doing it directly in Flash can be very meticulous and frustrating. 3rd party tools are much easier in comparison, but they are also very pricy. Fortunately, there is an answer for those who only need simple 3D, like a logo or rotating cube, etc.

Mircosoft Word is a ubiquitous and powerful 3D generator for simple shapes and text. It doesn't export in SWF, but the graphics it creates can be traced into Flash very quickly.

For the purposes of this tutorial, I used Word 2000. Earlier versions of Word and Microsoft Powerpoint and Excel will work fine.

Word Interface

Open Word and Flash. In Word got to View>Toolbars and select Drawing. The Drawing toolbar should come up. You will see something like this:

Drawing in Word

The Oval and Square tool will work for 3d. So will Autoshapes and WordArt. For this example, I used the basic square tool. Pick whatever you like. Now drag your cursor across the Word work area. Your shape will pop up. Use the arrows to resize it anyway you like. When you're done, make sure your shape is selected and click the 3D button. Select one of the 3D styles from the pop up list. I chose style 2. Double click on your shape to change the face color. To change the depth color click the 3D Color button. If you want to change the depth, click the depth button. I picked 72 points. You can also change direction and lighting. The surface of your shape can be changed from Matte, Plastic, Metal or Wireframe.

Ok, now for the animation. Insert a new symbol in your Flash movie. Make the behavior Movie Clip. Insert 17 blank keyframes. Now back to Word. Click the Tilt Right button in the 3-D Setting toolbar as many times as it will allow. Now copy your shape and paste it into the first keyframe. Trace the image. Now go back into Word. Hit the Tilt Left button twice. Copy your shape and paste it into the second keyframe in your movie clip. Trace it. Repeat these steps until all the keyframes are used up. Don't worry if you can still tilt left two more times. It wil just repeat the image from the first keyframe.

The Result

And you're done. It should look something like this (hold mouse over cube to activate):

There are some drawbacks of course. Some of the animations are not very fluid. And complex animations tend to give large file sizes. Experiment all you want. You might try using Word to embed a picture in your shape:

Have Fun!

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

Lighting on 3D Objects in Flash

2008-12-01T09:54:00.000-08:00

Introduction

I had a hard time coding 3D lighting of a diamond-like object built out of (triangular) facets. Not that the code was giving me headaches, but my math skills are quite rusty ;-) The results of my findings are in this tutorial. I'll show you how to code the lighting of an object by a pinpoint light source moving over a sphere.
No stress, I'll help you recall the trigonometry basics and illustrate the steps along the way. I however will assume some knowledge of flash, like making MCs, functions, the attachMovie scripting (+linkage), etc.

First play around with the my result of the adventure in math to come ;-)

PS. The light source can be set to manual: it'll then follow your mouse instead of following the path of a deltoid. Use the menu.

Next chapter I'll explain how to visualize the point you'd want your light to be most fierce, then we'll go over the math. After that I'll discuss chunks of code and we'll end with the whole script.

Pseudo 3D

As you can see we are working on a top view graphic. To show more clearly what we are trying to accomplish, here's an object at different angles:

My trick to faking 3D is to re-calculate the angles of all facets of the object into 2 angles: z-axis and xy-axis. The farther the light moves away from these coordinates projected on the sphere, the dimmer the lighting gets. That's where the trigonometrics come in handy. There alse is a way of doing this more accurate by using matrixes for every coordinate, but my math knowledge on that is even more rusty!. For this tutorial skipping the matrixes will also do just fine.

In-depth: The Math

We'll have to calculate a number of things:

the angle of the facets on the z-axis
the angle of the facets on the xy-axis
the angle of the light source on the z-axis - the light source has a fixed distance: the radius of the sphere
the angle of the light source on the xy-axis
the whiteness of each facet - depending on both angle (50%) and distance (50%) of the light source
the path the light source will follow in 'automatic' mode

What was the deal with these trigonometric functions again?

sin(a) = B / C	cos(a) = A / C	tan(a) = B / A
sin(b) = 1 (deg)	cos(b) = 0 (deg)	tan(b) = endless
sin(c) = A / C	cos(c) = B / C	tan(c) = A / B

And this pythagoras thingy?

C = sqrt(A*A + B*B)

Important! - Flash works in radians! The formula for calculating degrees from radians is:

radian = math.PI/180 * degree

Calculating the facet angles

To save me some serious paper filling calculations I've built in an angle detector (it's the lower left button). Just drag point1 and point2 parallel with the desired angle ;-)
The front and side view can be accesed with the top right button.
The use of atan is discussed in the next topic. The formula code is on the angle detection line mc:

onClipEvent (enterFrame) {
//place the line between mcs point1 and point2
//notice the width and height of this line are 100
this._x = _root.angledetect.point1._x;
this._y = _root.angledetect.point1._y;
this._xscale = (_root.angledetect.point2._x-_root.angledetect.point1._x);
this._yscale = (_root.angledetect.point2._y-_root.angledetect.point1._y);
// Math.atan for angles
xa= this._width;
ya= this._height;
_parent.angle=(Math.atan(ya/xa))/(Math.PI/180);
// -------------------------------
// make less decimals and calculate angle2
_parent.angle=(int(_parent.angle*100))/100
_parent.point1.angle= _parent.angle
_parent.point2.angle= 90 - _parent.angle
// -------------------------------
}

The light source angle on the xy-axis

We'll use Math.atan to calculate this angle: we know A and B (distance base to light source on x and on y):

xt= xm - xb;
yt= ym - yb;

xb and yb are the base coordinates, xm and ym the coordinates of the light source.

_root.DgrMouseX=int(Math.atan(yt/xt) / _root.convrad);

convrad= math.PI/180

This function gives a flash angle, further on we'll recalculate this angle to an angle between 0 and 360 degrees.

The light source angle on the z axis

The fixed distance of the light source lets us calculate the angle it has. We know that side (C) will be the radius of the sphere, in this case 180. We calculate A (DeltaX) by using pythagoras on xt and yt.

_root.DeltaX=Math.sqrt(xt*xt+yt*yt);

Then we use the Math.acos on A and C to calculate the z-angle:

_root.DgrMouseZ=(Math.acos(_root.DeltaX/180))/_root.convrad);

Flash and angles

Flash treats degrees a little different than we're used to, so we'll re-calculate them to something more handable:

if(xt <0> 0){
_root.DgrMouseX += 270;
} else if(xt <0>= 0 && yt <= 0){ _root.DgrMouseX += 90; } else if(xt>= 0 && yt>= 0){
_root.DgrMouseX += 90;
}

This'll return any angle to one between 0 and 360 degrees counting from 0 at the top clockwise to 360.

On to the whiteness!

Each facet calculates it's own whiteness. The whiteness is done by setting the _alpha of a white facet MC over the background of the object.
Each facet has 2 variables: FacetX (its xy-angle) and FacetZ (its z-angle).
We'll use the Math.cos function so that one side of the object is lit (cos(x)=1) and the other side is not (cos(x)=-1).

function SinMouseX(AngleX) {
return Math.cos(Math.PI/180 * (_root.DgrMouseX - AngleX));
}

AngleX= FacetX

This function sets the most fierce point at FacetX and the less fierce point at (FacetX - 180) degrees.
Then we set the _alpha. The ratio is 50% so z-angle and xy-angle have an equally strong influence:

function AlphaMouseX(Z,X) {
return ((_root.DgrMouseZ/Z) * _root.ratio + X * (100 - _root.ratio));
}

Z= FacetZ

X= FacetX

The light source

The light source is symbolized by xm and ym. These coordintates either represent the coordinates of the mouse, or are put on the path of a function. For this path I chose a deltoid. I found this function on this page written by Paul Bourke in 1990.
I made a button to switch between 'manual' and 'automatic', the if statements handles that. The variable i represents theta needed to make steps in the deltoid function.
The _root.light mc is a white circle representing the light source.

// making the light move -----
i++;
if (i>= 360) { i=i - 360 }
// must be in radians (not degrees)
theta=(_root.convrad) * i;
// -------------------------------
// path of lightsource -----------
if (_root.lightsource == "manual") {
xm = _root._xmouse;
ym = _root._ymouse;
} else if (_root.lightsource == "automatic"){
// you can replace this function for any other you like better
xm = xb + (2 * a * Math.cos(theta) + a * Math.cos(2 * theta));
ym = yb + (2 * a * Math.sin(theta) - a * Math.sin(2 * theta));
}
// -------------------------------

The Code

Most of the code hangs on the light source:

onClipEvent(load) { this._x=414.0; this._y=198.0; // a * 3 is radius of circle ----- a = 59; i = 0; _root.ratio=50; _root.convrad=Math.PI/180 // x base & y base (in stead of 0,0) xb = 198.0; yb = 198.0; function SinMouseX(AngleX) { return Math.cos(Math.PI/180 * (_root.DgrMouseX - AngleX)); } function AlphaMouseX(Z,X) { return ((_root.DgrMouseZ/Z) * _root.ratio + X * (100 - _root.ratio)); } } onClipEvent(enterFrame) { // making the light move ----- i++; if (i>= 360) { i=i - 360 } // must be in radians (not degrees) theta=(_root.convrad) * i; // ------------------------------- // path of lightsource ----------- if (_root.lightsource == "manual") { xm = _root._xmouse; ym = _root._ymouse; } else if (_root.lightsource == "automatic"){ xm = xb + (2 * a * Math.cos(theta) + a * Math.cos(2 * theta)); ym = yb + (2 * a * Math.sin(theta) - a * Math.sin(2 * theta)); } // ------------------------------- // pythagoras for angle mouse & x,ybase xt= xm - xb; yt= ym - yb; _root.DeltaX=Math.sqrt(xt * xt + yt * yt); // ------------------------------- // z is angle upwards: x,ybase -> light = radius = 180 _root.DgrMouseZ=int(Math.acos(_root.DeltaX/180) / _root.convrad); _root.DgrMouseX=int(Math.atan(yt/xt) / _root.convrad); // ------------------------------- // recompute flash-angles to normal-angles if(xt <0> 0){ _root.DgrMouseX += 270; } else if(xt <0>= 0 && yt <= 0){ _root.DgrMouseX += 90; } else if(xt>= 0 && yt>= 0){ _root.DgrMouseX += 90; } // ------------------------------- }

This is the code on the facets:

onClipEvent(load) { // angle of this facet ----------- FacetZ=45; FacetX=63.75; } onClipEvent(enterFrame) { XTemp=_root.light.SinMouseX(FacetX); // set alpha this._alpha = _root.light.AlphaMouseX(FacetZ,XTemp); }

The End

Well that's it really. I started out with one object and ended with the diamond. Meanwhile I thought up some nice things you could do with this code and how I could expand further. But I think I won't develop this further for now, I got what I needed, and if people'd like to make complete 3D engines with rotating objects or lights that have spherical forms instead of a pinpointed one, be my guest ;-)

Anywayz. Have fun!

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

Importing Counter-Strike models in Flash

2008-12-01T09:52:00.000-08:00

For this tutorial you will need the following things:
1) A Counter-Strike model file (.MDL)
2) Milkshape 3D program installed
3) Swift3D version 2 installed

Decompiling you MDL file

The reason we need to decompile the model is because Swift3D v2 requires a file of type 3DS and will not recognise MDL files and I have found this to be the best conversion method. Also, this way you can edit the model in Milkshape 3D before importing it into Swift3D.

Ok first of all copy your MDL file into its own folder. We do this because decompiling it will create several files, so this avoids confusion.
Now launch Milkshape 3D and goto the menus at the top of the screen and select "Tools>Half-Life>Decompile Normal HL MDL File...". Now select your model file in it's folder. A box should pop up with 4 tickboxes. Untick sequences and click OK.
Voila you have sucessfully decompiled your MDL file.

Converting your decompiled model into a 3DS file

With Milkshape 3D still open, goto the menus at the top again and this time select "File>Import>Half-Life SMD..." Browse to your models folder if it isn't already there and select the SMD file that should be residing there. A box will appear with two tick boxes. Untick the skeleton box and click OK. Your model should now appear in the four viewports. Now goto the menus at the top once again and this time select "File>Export>Autodesk 3DS..." Leave the two tick boxes ticked on the window that appears and choose a location to export your 3DS file to. Click OK and you're done. Now close Milkshape 3D.

Importing your converted model into Swift3D v2

Launch Swift3D v2 and select "File>New from 3DS..." Select the 3DS file that you created with Milkshape 3D and click OK. Your model should now appear on the stage and you can do with it as you please! Drop some colour onto it and play with your lighting and create an animation. You can then export the animation as an SWF using the Ravix 2 renderer.

You can do some pretty neat effects with this as you can see below in my example. You aren't restricted to just Counter-Strike models either! anything that Milkshape 3D supports can be exported as a 3DS model so there are many options.

Please let me know if you come up with anything good. I'd love to see somebody use this tutorial and I hope it was usefull to you.

Happy flashing :)

This is the desert eagle model from CS with my own colours and light effects added

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

3D Flower in Flash

2008-12-01T09:43:00.000-08:00

Hello there flash users! In this tutorial, we will try to create a 3 Dimensional flower like this:

Now, let's list out the things we want to do:(This will be a good idea for any movie clip)

We want a 3D Flower rotating in a black background.
It should change it's color as it rotates.
It must rotate along with the mouse, i.e., it should respond to the mouse.
It must look real enough so that the user believes it is really a 3d flower.

Now, lets work out the logic, formulae, etc.

The Logic

Before you can even know the logic, you must understand a few points:

Flash 5 has practically no capability to do anything in 3d space.
Flash cannot also draw any lines or objects at runtime.
Complex 3d objects can cause it to become a nightmare in slow machines(like mine, a PII 350).

Now that you have understood these facts, you can go and design a logic:

You need to first specify the number of vertices an object is made up of, what points are connected and where they are located in 3 dimensional space.
You need to then rotate the object virtually, i.e., you must rotate an object that does not even exist. You can do this using trignometrical formulae(No, they are the easiest part of the apple).
Since Flash does not draw 3d, you must convert the 3D Points (with 3 co-ordinates x,y,z) to 2D Points(with 2 co-ordinates x & y). You can do this too by using simple formulae.(Now don't think that life's easy)
Then you must draw lines or circles connecting the 2D vertices got from the previous step. You can do this by using a small movieclip with a 45 degree line and then duplicating it and positioning it.
Then you must rotate this object every time the mouse moves.

We will do all the above one by one in the following steps.

Prepare the Stage

Open Flash 5. Press Ctrl+N to create a new movie. Press Ctrl+M to open Movie Properties. Give Frame Rate to 21. Set movie width and height to 700 and 525 pixels respectively. Any size is acceptable, as long as you change some of the variables you will come across as required. Also, change the background of the movie clip to black or some other dark color. We want the flower to stand out from the background.
Press F5 twice to make the movie three frames long. Click on the new layer icon thrice to create three new layers. Now name the layers as Miscellaneous, Scripts, Lines and vertices. Now, the time line should look like this:
Now, we need to create a few movieclips. But don't worry: the majority of the work will be done in the ActionScript Window later. Press Ctrl+F8 to create a new symbol. Name it as 'Vertex' and give behavior as MovieClip.
Now, Enter some text or anything. If it was text or some other movie clip, then press Ctrl+B to break it apart, or the alpha effects won't work. This is optional. You can even leave the movie clip empty. You just need the movieclip to hold some variables.
Now go back to the main scene. Click on the vertices layer. Drag the vertex movie clip from the library window(If you don't see the Library, press Ctrl+L to see it) on to the stage. If you don't see the Instance Pane, press Ctrl+I to open the Instance Pane. In that, give the name of the Vertex movieclip instance as point.
Press Ctrl+F8 to create a new movieclip named Line.
Press O to select the Oval tool.
Press the Click on the pencil button under the colors toolbar.
Then click on the no-Color icon under the colors toolbar.
Holding down the shift key, draw a circle.
Press V to enable the Arrow tool. Click on the circle to select it.
Click on Window - Panels - Transform to open the transform panel. Now, Click on the Skew Radio button and enter the two field's values as -40 and 35. The panel should look like this:
Click outside the circle to deselect the skewed circle. Now select it again by clicking on it.
If you donot see the info Panel, press Ctrl+Alt+I to invoke the info toolbar.
Enter W and H values as 100. If you see an icon similar to in the panel, click on the white box in the top left of that icon to get this icon:
Now enter X and Y values as 0 and 0.
Your workspace should look something like below
When done with the circle, click on the ' Scene 1' button on the top left above the timeline to go back to the Main Stage.
Click on the Lines layer. Now drag the Line movieclip from the Library window onto the stage. Now, press Ctrl+I to invoke the Instances Panel. Now give the Line MovieClip instance the name 'wire'.
Press F8 to create a new button. Give it any name you like.
Hit F5 thrice and then draw a small box or circle around the plus sign.
Go back to the main stage by clicking on the Scene 1 button on the top left.
Click on the Miscellaneous layer and then drag the button movieclip onto the stage.

Note:
Make sure that all the three symbols are placed in the main stage outisde the viewable area. To do this,press Ctrl+2and drag the symbols to the grey area.

The Panel

Now that the stage is all set, we can go on to the ActionScripting part. But first, click on the first frame of the Scripts layer and press F6 to create a keyframe. If you don't see the Actions window, Press Ctrl+Alt+A to invoke the actions panel.
Most probably, you would end up with a panel like this:
Now, press the Small arrow in between the two vertical panes to hide the left pane. If it is already hidden, leave this step.
Now, press on the blank white space in the panel. Press Ctrl+E to shift to expert mode. This step is required only if you are in Normal mode, i.e., you cannot enter the script directly.
Now, resize the Actions panel as large as you can. But make sure that you can see it fully. In a fully maximized Flash window at 800 X 600 Resolution, you can get this big:

The Variables

Now, let's start with the scripting. We need to initialize certain variables and arrays. To the Java or C programmers, the first frame is like a constructor. It only runs once and has all the initializations and methods.
First, we need to initialize two variables, points and lines. Points defines the number of points the our 3d Object is made up of. Lines defines the number of lines our object consist of. For our objects, the following lines would be neccessary:
```
Points = 11;
Lines = 10;
```
Now, a variable named viewport defines the zooming component of the screen. An initial value of 500 would be likely.
```
Viewport = 500;
```
We will now declare a variable having a formula to convert degrees to radians. We will need this later.
```
rad = (3.14*2)/360;
```
We need two arrays to contain the properties of our object. One is the line array, containing the properties of the lines. Another is the vertex array, containing the properties of each vertex. So, enter the following lines:
```
line = new Array(Lines);
vertex = new Array(Points);
```
Because this movie is just to show off the 3d capabilities of flash, viewing it fullscreen would be more beautiful. So, enter the following line:
```
fscommand ("fullScreen", true);
```
Next, we need to duplicate the line and the point movieclips. Enter the following lines to do it:
```
for (i=0; i != Lines; i++) {
wire.DuplicateMovieClip("l" add i, i);
line[i] = eval("l" add i);
}
for (i=0; i != Points; i++) {
point.DuplicateMovieClip("v" add i, (Lines*2)+i);
vertex[i] = eval("v" add i);
}
```
Explanation: The 1st for loop loops and duplicates the line movieclip until the number movieclips is equal to the value specified in the Lines variable. The 2nd loop creates n duplicates of the wire movieclip where n denotes the value of the variable of points. You could see that in both the loops, there is an eval function which assigns each duplicated movieclip a slot in the array we created in Step 4. This makes it easier to refer to their properties and the variables contained in them later.

Plot the Points

Here is a property in flash actionscript not everyone knows; As a matter of fact, even I learnt it just before making this movie. It goes like this: Because we have assigned a array slot to each movieclip, each array becomes like an object. Similar to java, we can have variables for each object, apart from their properties. That is, we can have 3 variables x,y and z for each array element to store the co-ordinates of each vertex. So let's put it to use. What we are going to do now is give each vertex its position in the 3 dimensional world. Because flash is not equipped to do this in any decent manner, we have a boring part of typing an awful lot of lines. We have to give the x,y,z co-ordinates for each vertex. In this tutorial, however, it is going to be easy as all you have to do is copy the following code and paste it in the action script window.

Now, we need to give the location of all the vertices. So, just copy the following code into the actionscript window of Flash:

vertex[0].x = 0;
vertex[1].x = -100;
vertex[2].x = -150;
vertex[3].x = -150;
vertex[4].x = 0;
vertex[5].x = 100;
vertex[6].x = 150;
vertex[7].x = 100;
vertex[8].x = 150;
vertex[9].x = 0;
vertex[10].y = 0;
vertex[0].y = 0;
vertex[1].y = -100;
vertex[2].y = 0;
vertex[3].y = 100;
vertex[4].y = 150;
vertex[5].y = 100;
vertex[6].y = 0;
vertex[7].y = -100;
vertex[8].y = -150;
vertex[9].y = 0;
vertex[10].y = 0;
vertex[0].z = 0;
vertex[1].z = -100;
vertex[2].z = 0;
vertex[3].z = 100;
vertex[4].z = 0;
vertex[5].z = 100;
vertex[6].z = 0;
vertex[7].z = -100;
vertex[8].z = 0;
vertex[9].z = -150;
vertex[10].z = 150;

As you can see, the values and the number of lines itself will differ for each object and you have to experiment with this to get a rough idea of where a -100,-100,-100 point will lie after rendering. I can explain that to you, however, that will be beyond the scope of this tutorial. And the .x, .y, .z are mere variables which can be assigned to an object array.

Remember when you were a kid and played those 'Join the Dots' games in the books? Well, you are going to do that again. This time, it will be in 3 dimensions. Here too, you will use the object array logic to store the variables. All you have to do is specify the two points to which each line is connected. So, we will need two variables a and b for each line. We will use the line array. Just copy the following code and paste it into the flash actionscript window:
```
line[0].a = 0;
line[0].b = 1;
line[1].a = 0;
line[1].b = 2;
line[2].a = 0;
line[2].b = 3;
line[3].a = 0;
line[3].b = 4;
line[4].a = 0;
line[4].b = 5;
line[5].a = 0;
line[5].b = 6;
line[6].a = 0;
line[6].b = 7;
line[7].a = 0;
line[7].b = 8;
line[8].a = 0;
line[8].b = 9;
line[9].a = 0;
line[9].b = 10;
```
The values assigned to them might be confusing, but if you see, they will say the number of the vertex in the vertex array to which they are connected. For example, the line 'line[0].a=0' says that it is connected to the vertex contained in the vertex array at the location of 0. Now, if your imagination powers are excellent and you are good in math, you will see that all this means to describe a err... flower like object.

Be sure that all the scripts mentioned in this page and all other previous pages are all placed in order in the first frame's actions. Also, place the upcoming scripts in the first frame itself, until or otherwise, specified.

A little this way

Note:
If you find that any of the following has something common with the 'Advanced Math' Professor from the College you studied in, it is purely incidental.

But actually, it has something that you might remember studying in High School. It's actually the trignometrical formulae you will use to rotate the vertices "virtually" and then project it on to the screen.

The Logic:
Now we have to workout the logic; You might say that "but we did that a long time ago!", but then, you read the note above: It's just as confusing as Advanced Math. You just can't understand it by reading it. So, let's go.

First, let's note that, we can rotate only one axis at a time. So, we need 3 sets of 3 variables for each vertex to rotate it along all the axes. We will then apply the formula, to rotate it on the x axis. We will store the rotated values in a new set of 3 variables. We will then apply the formula to rotate it on the y axis on the newly created set of 3 variables. We will then store the result in the next set of 3 variables. We will repeat it for the z axis rotation.

Now read the above paragraph again and again until you get it right.

Now, an important point: Although you can use the formula to rotate the object using just degree measure, Flash can calculate sine and cos values only with radian measure. So, you need to convert the degree to radian before you can use the sine and cos functions.

After rotating the object, we need to apply some formula to convert the x,y,z co-ordinates to just x,y co-ordinates, that is, convert the 3d address to a 2d address. That too will be done induvidually for each axes using formulae and the result is stored in two new variables.

After converting the object to 2d, we will have to draw the lines and vertices. We will use a for loop for doing this. We will adjust the _x,_y,_xscale,_yscale and _alpha properties of each movieclip to do this.

We will use three methods, each one for rotating, projecting and rendering the object.

We will do this next.

The Rotation

Now just copy and paste the following code into the first frame's actionscript window:

function Rotate (x, y, z) {
radx = rad*x;
rady = rad*y;
radz = rad*z;
for (i=0; i != Points; i++) {
vertex[i].x1 = vertex[i].x;
vertex[i].y1 = (Math.cos(radx)*vertex[i].y)-(Math.sin(radx)*vertex[i].z);
vertex[i].z1 = (Math.sin(radx)*vertex[i].y)+(Math.cos(radx)*vertex[i].z);
vertex[i].x2 = (Math.cos(rady)*vertex[i].x1)-(Math.sin(rady)*vertex[i].z1);
vertex[i].y2 = vertex[i].y1;
vertex[i].z2 = (Math.sin(rady)*vertex[i].x1)+(Math.cos(rady)*vertex[i].z1);
vertex[i].x3 = (Math.cos(radz)*vertex[i].x2)-(Math.sin(radz)*vertex[i].y2);
vertex[i].y3 = (Math.sin(radz)*vertex[i].x2)+(Math.cos(radz)*vertex[i].y2);
vertex[i].z3 = vertex[i].z2;
}
}

Now don't think that it is too difficult, we will break it down.

First, the parameters of the Rotate function recieve the number of degrees to be rotated in each axis.
The next 3 lines assign the radx,rady and radz variables the 'converted to radian' values of x, y and z variables. If you have poor memory, let me remind you that the rad variable you multiply with the x,y and z variables is actually a formula used to convert degrees to radians. We declared this variable in the first itself.
Next a for loop loops n number of times where n denotes the value of the points variable.
Inside the for loop, the formula for rotating the vertex in each axis is executed. Explaining each line would end up only in pages of explanation. So, try to figure it out all by yourself.

3d to 2d

Now that the object rotation script is over, we need to convert it to 2d. This is relatively simple. Just a few lines. Copy the following lines of code to the action script window:

function toScreen () {
for (i=0; i != Points; i++) {
vertex[i].dx = (vertex[i].x3*viewport)/(vertex[i].z3+600)+350;
vertex[i].dy = (vertex[i].y3*viewport)/(vertex[i].z3+600)+262.5;
}
}

Not much to explain here: A for loop similar to the previous one. Two formulae are applied to the vertices and then stored in two new variables.

One thing to be noted, however, is that the constants at the end of the two formulae- 350 and 262.5 are actually half the values of the height and width values of the movieclip. If you are changing the size of the movieclip, you will have to change this values accordingly.

Rendering it

The last thing left to do is render the object. This will get a little complex, though. But just one function will do.

Copy and paste the following code into the actionscript window:

function render () {
for (i=0; i != lines; i++) {
with (line[i]) {
_visible = true;
_x = vertex[line[i].a].dx;
_y = vertex[line[i].a].dy;
_xscale = vertex[line[i].b].dx-vertex[line[i].a].dx;
_yscale = vertex[line[i].b].dy-vertex[line[i].a].dy;
}
}
for (i=0; i != points; i++) {
with (vertex[i]) {
_x = dx;
_y = dy;
_xscale = 75+(((((500-z3[i])/10)*30)/100)*(-1));
_yscale = 75+(((((500-z3[i])/10)*30)/100)*(-1));
_alpha = ((((z3[i]*(-1))+500)/10));
}
}

Explanation:

Two For loops, one for drawing the lines and other for drawing the vertices are given. In the first loop, we change the x, y, xscale and yscale values of each line movieclip. Next, in the second loop, we change the x and y co-ordinates of the vertex movieclips. The xscale, yscale and alpha properties are adjusted so that they add more 'depth' realism to the scene. They are just some formulae created by me.

The TouchUps

Now that the methods are all done, there is very little coding to be done.

First, we need some variables that will change every time the frame is loaded. You will know what each of them does in the upcoming steps. Copy the following line and add it to the first frame's actionscript:
```
var ax, ay, az, oldx, oldy, bx, by, bz, nu;
```
Now, if you can't see the timeline, press the Tab key once to hide all panels.
Select the 2nd frame of the Scripts layer by clicking on it.
Press Tab key again to see the actions panel.
Copy the following code and paste it into the 2nd frame's actionscripts:
```
rotx = (oldy-_ymouse)/2;
roty = (oldx-_xmouse)/2;
oldx = _xmouse;
oldy = _ymouse;
ax += rotx;
ay += roty;
ay += by;
ax += bx;
az += bz;
bx = 0;
by = 0;
bz = 0;
rotate(ax, ay, az);
ax++;
ay++;
az++;
if (ax>360) {
ax -= 360;
}
if (ay>360) {
ay -= 360;
}
if (az>360) {
az -= 360;
}
toScreen();
render();
```
The first four lines tell that the mouse has moved this much and so, add some values accordingly to the ax and ay variables. The next six lines will be explained later. Next, we call the rotate function to rotate the objects as per the ax, ay and az variables. Next, we increment the three variables by one. This is done to insure that the object keeps rotating even if the mouse is not moving.

Because the mouse moves only in 2 dimensions, we cannot get the z rotation values from the mouse movement itself. So, we just increment the z rotation value automatically.

Now the next 3 if functions make sure that the ax, ay and az variables don't cross 360 degrees.

Then, the toScreen() and render() methods to do the rest.
Then press Tab key to hide the panels. Click on the third frame in the Scripts layer. Press Tab key again to see the panels. Now just add one line of code to the script:
```
goToAndPlay(2);
```
This makes sure that the movie loops again and again within the two frames and does not enter the first frame once again.

The majority of the work is done. If you want, press Ctrl+Enter to check if all this has paid off. But wait! There is still some to go!

The Final touch

Now just two more steps to go.

If you cannot see the stage, press Tab key to hide all the panels. Now, select the button you once dragged on to the stage. Scroll through the stage to find it. After it has been selected, press Ctrl+Alt+A to open the ActionScript window. Copy and paste the following code into it:
```
on (keyPress "") {
by = 2;
}
on (keyPress "") {
by = -2;
}
on (keyPress "") {
bx = 2;
}
on (keyPress "") {
bx = -2;
}
on (keyPress "a") {
bz = 2;
}
on (keyPress "z") {
bz = -2;
}
on (keyPress "'") {
Viewport += 5;
}
on (keyPress "/") {
Viewport -= 5;
}
```
These just add more interactivity to the movie. Now, the user can rotate the object in any axis and also zoom in or out of it. By press in up or down keys, the user is giving a positive or negative value to the bx variable. Remember that this variable also affects rotation.

Similarly, pressing the left and right keys rotates the object in y axis.

Since there is no way of controlling the z axis, pressing the a and z keys rotates it on the z axis.

The Next 2 events increment or decrement the Viewport variable. This variable is used to convert the 3d objects to 2d objects. This variable determines how close to the screen the point of origin is. So, by pressing the apostrohe(') and the slash(/) keys, you literally zoom in and out of the object.

There is one more small thing left to do. If you don't see the Library window, press Ctrl+L to invoke it. Now open the Line movieclip and select the "fat-line" like thing. If you don't see the Mixer panel, go to Window - Panels - Mixer to see the mixer panel. Now, change the alpha value of the circle to 83%.

If you want, you can give a color tween to the line movieclip so that it changes color as it moves.

Now that's it. Project Complete. Publish or save the file and view it in the standalone player.

Comments and suggestions welcome.

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

Ultra Simple 3D Text in Flash

2008-12-01T07:53:00.000-08:00

Ultra Simple 3D Text

This Tutorial will show a simple way to achieve a 3D effect on text. It should be pretty self explanitory from the picture but for those real newbies, heres how its done.

Six Easy Steps

1. Create some Text, use a nice plain bold font
2. Duplicate it with ctrl-D
3. Colour this text differently from the other text and slighty offset one from the other.
4. Break apart ctrl-B both letters
5. Use the line tool to join corners to give the block effect (use the magnetic tool).
6. Fill in the spaces between.

joining the edges of curved text can be a little more difficult to align.

Different effects can be achieved if you play around with different ideas.

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

Object VR in Flash

2008-12-01T07:31:00.000-08:00

Introduction

QuickTime. What a cool idea for internet media delivery. Movies and Object VR are two of the best features of this great package from Apple. Great, that is, until you need to download QuickTime to view media. For the PC this means 5.8 to 11Mb for QuickTime version 6.4. And the codecs (the actual movie compression and decompression programs) can vary from PC to Mac. What about AVI format for Windows Media Player? No – same problem, and no Object VR. What is a developer to do?

Thankfully, Flash MX can cover us for movie and Object VR playback. All it takes is a little coding. And if your site visitor doesn't have Flash, version 7.0.14.0 is only 466kb to download it. That's only a minute with a 56K modem!

This tutorial will cover how to create a QuickTime VR player in Flash MX, allowing your visitors to easily rotate objects. Specifically, we will:

Import a movie of a rotating object so that it can be played forwards and backwards without video keyframe issues.
Build a set of Flash MX movie clips that will handle the rotation.
Code the Object VR player to handle imported movies of any length of objects that rotate clockwise or anticlockwise.
Provide a visual method to control the rotation characteristics.
Have a look at the uber-useful trace ActionScript command.

We will be developing this Flash MX file: spin-me.fla (382kb). Sorry about the file size, but we have embedded some video in it so you can see what's going on. It also makes use of loader.fla (35kb).

What we will not discuss is how to create an Object VR movie with QuickTime (or any other video or 3D tool). And if you are still wondering what Object VR is, a quick search on Google for "QuickTime Object VR" should get you to Apple's site so you can see what the fuss is all about!

Before we go any further, I would like to point out that some of the screen shots are from the Western Australian Museum's "Western Australia: Land and People" exhibition. Included in that project were twelve 3D studies using the Object VR player that we are going to develop here. Their great content and our stylish Flash MX work produced an inspiring virtual exhibition.

I am assuming that you have had a glance through the Using Flash help file, and that you have completed the online Flash tutorials "Introduction to Flash MX Tutorial" and "Introduction to ActionScript Tutorial" that come with your copy of Flash MX. You should also be familiar with creating QuickTime VR movies and you may find our other tutorial "Yet Another Flash MX Loader" useful because we will be using it to provide a bit of download polish to what will be a largish file (due to the video we will embed).

What should the QTVR player do?

Here's my list of features for our player:

Work without interaction.
We wanted the QTVR movie to rotate whenever the mouse moved over the movie. No clicking and dragging. This would provide the simplest method of interaction for all users.
Use a visual method to control the spin of the object.
Why do stuff in code when you have the best visual development tool available? We want to visually indicate how much mouse movement should cause the object to rotate once.
Be quick to add to a file.
Because I'm busy.
Be simple to add to a file.
Because I forget stuff.

You may want your player to do more. Maybe it could have a default rotation, or some momentum when using a click-and-drag interaction method. Feel free to add anything you need.

How should the player be structured?

The structure for the player is very simple:

Our main movie will have a scene containing (amongst other things) a layer (named "qtvr") with our Flash qtvr movie clip object. This is where all of our code will go.

The other movie elements that are on the stage are just plain old text, graphic, and button objects.

If you have a look at the Symbol Definitions, you can see that the qtvr Movie Clip contains the actual QTVR mov file that we import (DivingHelmet.mov in our example), and a controller Movie Clip (named "driver") that has our code to rotate the QTVR movie.

Useful reading

Our Object VR player will be a self-contained SWF file with your video file of a rotating object embedded in it. The movie will need to be imported a little later on in this tutorial, so now would probably be a good time to have a quick look at how to import video into Flash MX. You will find it in "Using Flash> Using Imported Artwork and Video> Importing video" in the contents of your online help. Be sure to read the whole section – you never know what might be useful!

We will also be mucking around with the frame rate of the Object VR player. See "Using Flash> Working in Flash> Using the Property inspector to change document attributes" in your help file for more info.

Testing the movie that we are developing will also be a strong part of this tutorial. In this case we will be focussing on the Output window. You'll find it here "Using Flash> Testing a movie> Using the Output window" in the contents of your online help, but you can read the whole "Testing a movie" section if you want.

The last thing you should check out is the trace() ActionScript command. You'll find it here "ActionScript Dictionary> T> trace" in the contents of your online help. Learn to love the trace, and use it fearlessly.

Designing the player

First, we are going build a container Movie Clip for our Object VR player.

Start Flash MX and create a new file. Save it and call it something that relates to your site. We picked "spin-me.fla".

Rename Layer 1 to qtvr.

Now, create a Movie Clip symbol, name it appropriately. We called it "qtvr". This is where we will import our QuickTime Object VR movie and place our controlling ActionScript.

The next step is to create our layers as follows:

The actions layer is for the mighty stop() command. The driver layer will hold our dummy movie (a movie that doesn't really do anything) so that we can put an enterFrame event handler on it. And the mov layer is for the QuickTime Object VR movie that we will import soon.

Go back to the "Scene 1" root. Open the Library window (F11) and drag the qtvr Movie Clip that we just created on to the stage.

Save it at this point.

Loading your QuickTime Object VR movie

The Object VR movie that you load doesn't necessarily need to be in a QuickTime format: it could be an avi, mpg, wmv or any other format that Flash MX likes. Just as long as it is a movie of an object rotating before the camera. These were the images that made up the DivingHelmet.mov file, created by the very talented Darren Mok of the Western Australian Museum:

Now to do the import of your video file. But first, we need to do a quick test import so that we can get the frame rate of the video. If you know what the frame rate of your mov (or avi, or whatever) is then you can skip this bit. If you are at all in doubt about the frame rate, this quick test import will save you a whole world of pain later.

Select frame 1 of your mov layer and hit Ctrl+R to load a resource in to your library and put it in your timeline. When the Import file selector dialog appears, go find your mov video file and open it. You will be presented with an Import Video dialog like this:

Make sure that you have selected the "Embed video in Macromedia Flash document" option. We don't want to do all this hard work and still need QuickTime!

Select OK and you will get the Import Video Settings dialog:

The important bit is where it says "Length: 36.00 secs, 1.0 frames/sec". Okay, remember that 1fps. Now cancel the dialog. We're going to change the frame rate of the Flash MX movie to match it. And make sure the "Synchronize video to Macromedia Flash document frame rate" is checked. You'll see why later.

The easiest way to change the frame rate is to double-click on the 12.0 fps box in your timeline. This will open up the Document Properties dialog where you can set the frame rate to match the frame rate of your QTVR movie (in this case, 1 fps).

Now go back and select frame 1 of the mov layer and do the import again as we did for the test import, but this time don't cancel it: OK the import. If you want to, you can fiddle with the import compression settings.

Since we will be scrubbing back and forth along the timeline, it is critical that you generate a Keyframe interval of 1. If you let Sorenson generate its own keyframes or set it to anything higher than one, when you scrub backwards through the animation it will only skip to frames that have keys. This is because when a video file is compressed, a complete image is stored only when there is a keyframe in the video. Every frame after that up to the next key only stores changes to the image – Flash (or, more accurately, the Sorenson codec in Flash) only draws what has changed, and it can only start from a keyframe.

Change your frame rate back to whatever you were using. Remember that a higher frame rate gives you smoother looking object rotation, but at a cost of a higher CPU load for the computers that your Flash MX movie plays on. Your choice.

A final note on Flash MX frame rates: you can always play around with your frame rates when importing. Experiment with the values and try importing different video files. To see how our Object VR player will perform with your imported video, click and drag the playhead back and forth along the timeline. If you don't like what you see, you can always re-import the video with different settings until you find something that works well with the media that you have.

Save it.

What have we got so far?

All we have done here is create a Flash MX movie that contains a movie clip named qtvr that has 3 layers (actions, driver, and mov), and on the mov layer we have imported a QTVR movie (or any movie file that contains a rotating object).

We changed the frame rate of the Flash MX movie so that we would make each frame in the timeline contain one frame of the QTVR movie. The plan is to scrub back and forth along the timeline as your site visitor moves their mouse over the movie. This is why we needed the "Synchronize video to Macromedia Flash document frame rate" checked.

If you preview your movie now (Ctrl+Enter), you will see a rotating object. In our case it is a spinning helmet. Not really what we want, but it's a start.

Stopping the spin

Alright, now that we have the video imported, we need to control how it will spin under the user's control.

The first step is to pad out the driver layer frames in your qtvr Movie Clip so that they run the length of the QuickTime movie that you just imported, otherwise our driver object will only be in frame 1. In our case, we had a QTVR movie of 36 frames. So, in frame 36 of the driver layer insert some frames.

Now to add a stop() ActionScript command to stop the spin. Select frame 1 in the actions layer, go to the Actions window and add the code. You should be in Expert Mode (Ctrl+Shift+E in your Actions window), and your code will look like this:

stop();

While we're here, create a new Movie Clip and name it "driver". You know: "Insert> New Symbol..." (Ctrl+F8), set Name field to "driver", and choose a Movie Clip Behavior.

Go back to your qtvr Movie Clip and select frame 1 of the driver layer. Drag the driver Movie Clip on to the stage.

Open the driver Movie Clip object and draw in a box shape starting at the 0, 0 point. Give it a width of 100 and a height of anything you like because we won't be using the height. The width of this object will define how far the mouse has to move across the screen to cause the object to complete one full rotation. The 100 width will mean 100%.

The shape doesn't need a Stroke color, but make the Fill color red for now so that we can see it when we do some testing. Later on we will set the Alpha to 0% so that we can't see it. Ultimately, we don't want to see the shape or it will obscure the movie. I know we could drag it off the stage, but I want to put it over the QTVR movie so that it is easier to compare the width of the object to the size of the QTVR movie.

You may as well name the layer "invisible box".

Previewing this should show your movie stopped at the first frame and you should have a big red box somewhere as well.

The next few sections will make extensive use of the trace() ActionScript command. Learn to love the trace and it will reward you abundantly. Check it out in your Flash MX help file at "ActionScript Dictionary> T> trace".

Save now while you have a read.

What is the mouse doing over the image?

Let's find out! Open up your qtvr Movie Clip and select the driver Movie Clip. We're going to find out what our driver Movie Clip can do with the mouse. Let's do some testing.

Enter this code on the driver Movie Clip:

onClipEvent (enterFrame) {
   trace(_xmouse);
}

The trace command will write out its arguments (the bits in the parenthesis) to the Output window when you preview Flash MX movies. So: preview that (Ctrl+Enter) now. Notice that the _xmouse variable returns the x position of the mouse (left-right value) in relation to the Movie Clip that the code sits on (in this case it's the driver clip).

The reason we're doing this is that we want to somehow convert the position of the mouse to one of our QTVR movie frames (1 through to 36 for us). Our approach was to scale the driver movie. No matter how wide or narrow you make the driver clip, _xmouse will always return 0 to 100 when you move the mouse across it (because we made it with a shape that had a width of 100). Try stretching the driver clip and previewing the movie.

If we think of _xmouse as a percentage of rotation that we want the QTVR movie to go through, then the area of screen that we stretch it over will give us a visual indication of how much mouse movement we are expecting users to make to get a full rotation of the object.

Now we need to convert the 0 to 100 percentage to a fraction by dividing _xmouse by 100. If we multiply this by 36 (the number of frames we have – yours will be different) we will have the frame that we want to show. Try this new code and preview it:

onClipEvent (enterFrame) {
   trace(_xmouse / 100 * 36);
}

The Output window will show the frame that we should be displaying according to where the mouse is. Unfortunately, we are not getting exact frame numbers, so let's convert the number to an integer. Here's the code:

onClipEvent (enterFrame) {
   trace(int(_xmouse / 100 * 36));
}

That's better, but there's still some weirdness. The 1 to 36 is good: we have those frames. Anything out of that range is no use to us at all.

Time to roll out the modulo operator (%). When you use modulo, you get a remainder as a result. 4 % 2 gives remainder 0. 3 % 2 gives remainder 1. If we take our _xmouse calculation and do a modulo 36 we should get a remainder between 0 and 35. Add 1 and we have a good range of 1 to 36. Try it:

onClipEvent (enterFrame) {
   trace(int(_xmouse / 100 * 36) % 36 + 1);
}

Here are the formulas that we have been playing with so far (the box header in the table indicates the "invisible box" shape we made, and the shaded areas show where our 36 frames are repeating):

You can try them out in a trace ActionScript statement to see how they perform as you move your mouse over the QTVR movie to the right.

If you're interested, you can read more about the modulo operator here "ActionScript Dictionary> Symbols> % (modulo)", and the int function here "ActionScript Dictionary> G-L> int" in the contents of your online help. (I know int has been deprecated since Flash 5 in favour of the Math.round method, but round doesn't do what int does so I'm going to use it anyway!)

If you want to see how this will spin the movie, try this code:

onClipEvent (enterFrame) {
   _parent.gotoAndStop(1 + (int(_xmouse / 100 * 36) % 36));
}

We make use of the _parent object to do this. It refers to the parent of the Movie Clip in which the code is running. In other words, the parent Movie Clip of our driver clip is our qtvr clip. Have a look in the Movie Explorer (Alt+F3) to see how things relate to each other.

We are using _parent with the gotoAndStop method because without it, gotoAndStop would try to move the playhead of the driver Movie Clip, and that would be pointless 'cos the QTVR movie is in the qtvr Movie Clip (and that's just where we want it).

The info for gotoAndStop is here "ActionScript Dictionary> M> MovieClip.gotoAndStop" in the contents of your online help.

Moving to the left of the image

Now it's not really working when it goes below 0, so we need to adjust our formula when the mouse pointer moves to the left of our box. Our first problem is that as we are moving to the left our range is starting at -1, and we would like it to start at 0. (It actually does start at 0, but unfortunately it overlaps with the code we have already written: that's where the funkiness is creeping in.)

To correct this, we need to add 1 to our _xmouse calculation before we perform the modulo. That gets us closer to what we want, but we still have negative numbers. Since we don't have any negative frames, we finally need to correct this by adding 36.

This may be seen in the following table (the red area shows the bit that we already have working, the grey areas show where the 36 frames to the left of the box are repeating):

Once again, you can try them out in a trace ActionScript statement to see how they perform as you move your mouse left of the QTVR movie. And this is the code to spin the movie:

onClipEvent (enterFrame) {
   _parent.gotoAndStop(36 + ((int(_xmouse / 100 * 36)+ 1) % 36));
}

Combining the formulas

We now have two formulas: one for zero and above, and the other for below zero. To combine these, we will make use of an if-else statement block. Also, a quick look at the formulas that we have been experimenting with shows that the int(_xmouse / 100 * 36) part gets used quite a bit (and we'll need to use it again in the if statement's condition test). Let's put that into a variable so that we don't have to calculate it over and over again. Here's the code for our driver Movie Clip:

onClipEvent (enterFrame) {
framePos = int(_xmouse / 100 * 36);
if (framePos <>This is all very well if your QTVR movie is of an object rotating anticlockwise (as seen from above), but if your object rotates clockwise then you have a problem. What you end up with is an object that seems to rotate from right to left as you move your mouse from left to right. (If you have a look at the series of images that we had for the diving helmet, you can see that our QTVR movie rotated clockwise.)

The effect we are after is similar to the experience of running your hand across a prayer wheel: you expect the surface that you touch to move in the same direction.

The simple solution is to subtract our 1 to 36 value from 37. This will give us a range that runs in the other direction (36 to 1). This is what we needed for the "Western Australia: Land and People" exhibition, but your Object VR may well run in the other direction. Use what you need. Here's our code so far:

onClipEvent (enterFrame) {
framePos = int(_xmouse / 100 * 36);
if (framePos <>Making the driver handle any movie length

Throughout all of our examples here, I have focussed on only one QTVR movie: the one supplied by the Western Australian Museum. It has 36 frames in it and runs at 1 fps. Your Object VR will inevitably have a different length and changing the magic numbers of 36 and 37 that we have used here to other magic numbers that relate to the number of frames in other movies will only lead to pain. So let's fix that.

The _parent object has a _totalframes property which lets us know how many frames are in the parent Movie Clip. In our case, when we use the code _parent._totalframes in our driver clip's enterFrame event handler, Flash MX looks at the qtvr clip and checks to see how many frames it has (36 for ours, yours will probably be different).

Replacing 36 with _parent._totalframes, and 37 with (_parent._totalframes + 1) gives us our new code:

onClipEvent (enterFrame) {
framePos = int(_xmouse / 100 * _parent._totalframes);
if (framePos <>

This lets our driver clip handle any length QTVR movie as long as we have the same number of frames in the driver and mov layers. If the driver layer has more frames than the mov layer, the Object VR will disappear for some frames. If the mov layer has more frames than the driver layer, the Object VR will get stuck when it hits a frame where the driver doesn't exist.

Making the code simple

Those of you who can remember back to high school algebra will be able to see that these formulas can be simplified further by multiplying out and cancelling terms with opposite signs, resulting in our final clockwise code:

onClipEvent (enterFrame) { //clockwise
framePos = int(_xmouse / 100 * _parent._totalframes);
if (framePos <>

And applying the same process to our anticlockwise code gives:

onClipEvent (enterFrame) { //anticlockwise
framePos = int(_xmouse / 100 * _parent._totalframes);
if (framePos <>

This makes it really easy to build an Object VR player for any QTVR movie of any length by simply grabbing the code that is appropriate for the rotation of your video file and pasting it on to your driver clip.

Time to wrap things up. Let's have a quick look at how to use our player.

Using the Object VR player

Let's spin something from scratch!

Create a new file and save it (we picked "spin-me.fla").

Make two new symbols, one for the QTVR movie (named "qtvr"), and the other for the driver (named "driver").

Create and name as many layers as you require, making sure you have a qtvr layer for your Object VR, and put a stop command on the last frame of your actions layer.

Put the qtvr clip on the qtvr layer of Scene 1 and open it. Make sure you have 3 layers in the timeline of the qtvr clip (from the top: "actions", "driver", and "mov").

In frame 1 of the mov layer, import your movie resource using the process we have described. Pay particular attention to frame rates and keyframe intervals.

Stretch out the driver layer to have the same number of frames as the mov layer.

Add a stop command to frame 1 of your actions layer.

Put the driver clip on to frame 1 of your driver layer and open it.

Draw a 100 by 100 box graphic in the driver clip. Get rid of the Stroke color, and set the Fill color alpha to 0%.

Go back up to your qtvr clip and select the driver Movie Clip object. Copy the appropriate enterFrame event handler (clockwise or anticlockwise) on to the driver clip.

Scale the width of the driver clip to set how far the mouse has to move to complete one full rotation of the object.

That's it! Save and publish. Nothing more to do.

What about a loader for this?

Good question. Glad you asked.

Elsewhere on this site, you will find a tutorial called "Yet Another Flash MX Loader". That tutorial discusses the development of a loader for content such as this.

All you would have to do is open the loader.fla file in Flash and drag the loading Movie Clip on to a layer for your loader. Copy and paste some event handlers and you're done!

Go check out "Yet Another Flash MX Loader". You'll be glad you did!

Conclusion

The Western Australian Museum has some great artefacts that they wanted to make available in a way that was not possible in the physical exhibition space. By allowing the virtual exhibition site visitors to examine them interactively, we delivered an experience that was engaging and rewarding. When we came to implement the Object VR players for the 12 QTVR movies they made, we needed a method that would be quick and simple for us to use. This is it.

In our final implementation of this Object VR player in the "Western Australia: Land and People" site, we did the usual trick of loading all window, caption, and text elements as early as we could, then when we hit the Object VR player, we used our loader to indicate progress. Because we can put the loader anywhere we like, we can make the best use of the streaming capabilities of Flash MX and just when things start to stall (when it hits the Object VR Movie Clip) we whack in a loader so that the site visitor still sees something happening.

For more information about our loader, check out the "Yet Another Flash MX Loader" tutorial elsewhere on this site.

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