Flash Tutorials

3D, Actionscripting, Animation, Special & Text Effects, Dynamic, Games, Basics, Interactivity, Math Physics and Web Design tutorials


Flash 5 and XML  

0 comments

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.

function convertXML() { if(this.loaded) { content_feed_display = "Data loaded."; } mainTag = new XML; elementTag = new XML; articleList = new Array; elementList = new Array; mainTag = this.firstChild.nextSibling; if(mainTag.nodeName.toLowerCase() == "moreovernews") { articleList = mainTag.childNodes; content_feed_display = ""; for(i=0;i<=articleList.length;i++){ //initialize a couple of variables to hold xml data we want displayed document_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; //and loop through that looking for the data we need 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; } } } content_feed_display += "

"+ 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


 










0
comments













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:
  1. an interface walk-through, which illustrates and describes the main features of the Flix encoder, and 
  2. an encoding session walk-through, which describes, in detail, all the steps required to encode an SWF using the Flix encoder. 

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

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

Select Source Media
 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


 










0
comments













 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)












Older Posts




Subscribe to:
Posts (Atom)