RSS twitter

Archive for December 2009

How to Convert PowerPoint to Flash Manually

Converting PowerPoint to Flash would absolutely be a good choice to distribute your bulky PowerPoint Presentation.

You can do the whole PowerPoint-to-Flash conversion manually or with related softwares.

First, you’ll need to prepare the PowerPoint document. Make sure you are not using any complicated gradients or animations. These will be interpreted poorly when they are brought into Flash. Also, make sure there are no objects that fall outside the confines of the slide area. This will ensure that all the slides align correctly when they are imported to Flash. Now, save a copy of your presentation without any background images. You may want to also choose a contrasting background color to easily see the content of each slide. You all import the background images into Flash at a later time.

Second, choose File > Save As… from your PowerPoint document and save the presentation as a Windows Metafile (*.wmf). This will save your entire presentation as a sequence of files. WMF files keep all text.

Next, create a new Flash Document and resize the Stage to 720 x 540. Change the background color to black. Choose File > Import > Import to Stage… and import the first WMF file. When asked to import all of the images in the sequence, choose Yes. This will place each slide from your presentation onto a sequence of frames.

Then, create a new layer under the slides layer and import the images to use for your background. You’ll probably need two images, one for title slides and one for the regular slides.

Now it’s time for some manual labor. You’ll need to go through every frame of the movie and delete the solid background shape from your slides layer. Once this is complete, you should see the content of each slide with the correct background image behind it.

Finally, add a frame to the end of your movie. Place some static text on that frame that says something like “End of slideshow, click to exit.”

Alright, now it’s time to move on to some ActionScript. Create a new layer for your actions. There are a few statements you’ll need to include right away. First, you want this movie to play full screen so add an fscommand.

fscommand(“fullscreen”,”true”)-;To make sure the Stage resizes correctly specify the scaleMode.

Stage.scaleMode = “exactFit”; Finally, you don’t want the movie to begin playing through all the slides right away before the user starts clicking, so add a stop function.

stop();

You’ll need to include some functions that will be used frequently to navigate the presentation.

function gotoNextSlide():Void {
if (_currentframe < _totalframes) {
gotoAndStop(_currentframe + 1);
} else {
quit();
}

}

function gotoPreviousSlide():Void {
gotoAndStop(_currentframe – 1);

}

function gotoHome():Void {
gotoAndStop(1);

}

function gotoEnd():Void {
if (_currentframe < _totalframes) {
gotoAndStop(_totalframes – 1);
}

}

function quit():Void {
fscommand(“quit”);

}

Next, we need to handle all the keyboard and mouse events so that the user can navigate through the slides. We’ll do this by creating a new listener object.

var myListener:Object = new Object();

myListener.onKeyDown = myOnKeyDown;
myListener.onKeyUp = myOnKeyUp;
Key.addListener(myListener);

myListener.onMouseUp = myOnMouseUp;
Mouse.addListener(myListener);-Here are the listener functions.

function myOnKeyDown():Void {
if (Key.isDown(Key.DOWN) || Key.isDown(Key.PGDN)) {
gotoNextSlide();
} else if (Key.isDown(Key.UP) || Key.isDown(Key.PGUP)) {
gotoPreviousSlide();
} else if (Key.isDown(Key.END)) {
gotoEnd();
} else if (Key.isDown(Key.HOME)) {
gotoHome();
}

}

function myOnKeyUp():Void {
if (Key.getCode() == 27) {
quit();
}

}

function myOnMouseUp():Void {
gotoNextSlide();

}

If that’s too complicate to you, you can try some PPT to SWF software, like SameShow PPT to SWF Converter,MelodyPPT,Arbicate etc, all of them can help you convert PowerPoint to Flash with cool effects

Convert AVI to Flash

There are a number of options for creating Flash movies for the Web, all with different prices and varying degrees of control over your content. The most expensive option is to use Macromedia’s Flash application, which offers a maximum amount of control over output options for around $ if you qualify for upgrade pricing. Unless you make money from these Flash movies, that’s expensive. A second option is Sorensen Squeeze is well known for video compression efforts for a wide range of video formats. The option I currently recommend for most people is Flash Video Studio, because it’s affordable and offers most of the options people require for displaying video online. Here’s a quick demo of how I use Flash Video Studio to convert other video formats to Flash SWF files.

1. Locate the video you want to convert.

2. Apply any Effects you want to use for your movie. In general, I bypass this step, apply no effects because I already made all edits in my video editing application.

3. Add a watermark image or text to display on screen during video playback.

4. Set the audio and video quality and change the output dimensions. In most cases, I use Best for both audio and video. I generally change the dimensions of the video to 320×240 maintaining the aspect ratio.

5. In publishing the video file, you select a name for the output file. Choose the playback controls for the video.

6. Also optionally upload the video file to your Website automatically by choosing the FTP option.

7. One additional option on the publish page is instead of simply stopping the video choose Stop and open a website to launch a specific page following video playback.

Flash Video Studio outputs both the Flash SWF file and the HTML code required to display it on your site

Convert Flash Video FLV to M4V for Playback on iPod

This tutorial is to tell you the way to convert FLV to M4V for playback on iPod and some knowledge about FLV and M4V

What is FLV and what is M4V
FLV (Flash Video) is a proprietary file format used to deliver video over the Internet using Adobe Flash Player 6, 7, 8, or 9. The ubiquity of Adobe Flash Player has made it possible for the FLV you post on the Internet to reach wider audience.

M4V is MPEG-4 Video File introduced by Apple for video and audio files, M4V can be safely renamed to MP4 or vice versa. M4V is used in Apple iTunes and iPod.

How to download FLV?

There is a free downloader named FLV Downloader. It downloads videos from YouTube, Google Video, MySpace, Metacafe, Dailymotion, iFilm, Music, eVideoShare, StreetFire, etc. off to your computer’s hard drive in FLV format.

How to convert FLV to M4V?

Moyea FLV to Video Converter Pro 2 is an easy-to-use program that can convert FLV to AVI, WMV, MP4, MP3, AAC, etc. So we can first convert FLV to MP4 with Moyea FLV to Video Converter Pro 2, then rename the MP4 files to M4V.

Download Moyea FLV to Video Converter Pro 2 and initiate it on your computer. Click “Add FLV” in the main interface to import the FLV files, and then choose one to play.

In the bottom-left window, crop the video and select the area you want. You can also trim the length of the video with the bar under the right preview pane.

The Effect tab is for adjusting the video effects.

With the Logo and Text tab, you can add watermark and text to the video. To set an image watermark, you must check “Add image watermark”. Then you can select a position by clicking the drop-down list of Origin.

If you’d like to set a transparent color for the logo, just click on the button red-marked in the upper picture. The “Select transparent color” box will pop up.

And then you can enable transparent color, and select a color in the left picture. Drag the bars to set tolerance and alpha, and you will see the output style in the right picture.
Click the folder button behind “Export to…” to set the destination. Choose MP4 MPEG-4 from the “Export format” drop-down list. Switch to “Settings” and you can set the video and audio settings to the output video.

After all of the settings, click “Convert” and “Start“. It begins to convert one after another. When the conversion is completed, change the file extension to M4V, and sync them to your iPod

Convert flash SWF files to iPod MP4 movie

This is an instruction to show you the most convenient way to convert Macromedia Flash SWF files to MPEG-4 video supportable on iPod with movie clips, action scripts and audio in the Flash movies. With Flash to iPod Converter, you can easily turn your Flash videos into memorable projects on your Apple iPod to share with family and friends.

(1) Download Any Flash to iPod Converter Pro. from

URL: http://www.anvsoft.com/download-flash-to-ipod-converter.html  and install it. If you are not a registered user, there will be a watermark in the output video, but you can get it removed after you purchase it. Below is the interface of the program:

(2) Adding flash files

Click File button to choose flash file from your computer.

(3) Setting output options

Click Options button, you will see all technical parameters of selected format. Here, you can see the default output file location C:Documents and SettingsAdministratorMy DocumentsAnvsoft, which is enable to change as you like.

(4) Starting converting

After setting all options for the output file, just click Play and Record tab to start playing and recoding your selected flash. Click Stop Recording button to converting your flash immediately. After finishing conversion, click OK and the output folder will be open automatically.

Set Up Flash Media Server on Windows

Setting Up Flash Media Server

To make this application to work, you need to configure File Access and Stream Access.

File Access

The File Object class allows access to a sandbox within your server file system. To protect against any misuse, Flash Media Server allows access to files within a sandbox specified for the virtual host where the application instance is running.

To define your server-side sandbox, go into your application.xml file in the FileObj folder. Define where you are storing the FLVs and MP3s that you wish the server to find:

<FileObject>
<VirtualDirectory>/approot;
C:Program FilesMacromediaFlash Media Server 2applications
MyCollectionstreams\_definst_
</VirtualDirectory>
</FileObject>

You have just enabled secure file access to this defined sandbox. You can set up multiple file object directories by consecutively adding virtual directories.

Stream Access

You will also need to set up your Vhost.xml, which you can find in your conf/_defaultRoot_/_defaultVhost_/ subfolder in the Flash Media Server 2 folder because you must tell the server when you call “/approot” from the Vhost instance that it should look in the specified directory. You will need to define where you streams are located (should be the same as the setting you defined earlier for FileObject):

<VirtualDirectory>
<Streams>/approot;
C:Program FilesMacromediaFlash Media Server 2applications
MyCollectionstreams\_definst_
</Streams>
</Virtual Directory>

Create Variations on a Theme

You’ve explored simple video clip playlist navigation using XML, but you could extend this basic framework to other applications as well:

  • Video clip navigation: Using cue points and some additional ActionScript, populate your playlist with scenes from a single video clip.
  • Client playlists: Create an on-demand playlist using cue points to insert an ad before each clip plays.
  • Synchronized captions and graphics: Again using the all-powerful cue points and some clever ActionScript, coordinate the display of relevant captions or other graphics with certain points in your FLVs.
  • Guaranteed thumbnails: Add XML data that specifies the starting frame of the video so that you can accommodate video files that begin with a blank frame.

Generate Dynamic Thumbnails

The playlist so far is pretty snappy, but let’s not stop there. Jazz it up even more with thumbnails generated on the fly.

The purpose of this external ActionScript file (videothumb.as) is to create thumbnails dynamically of each video in your list.

Because this article focuses mostly on using XML to deliver video dynamically, I won’t go into too much detail about creating and extending the List component class. In this section, I include all the code you need to extend the normal List component to display the thumbnails and provide a brief description of how it works. If you’d like to find out more about creating and extending classes, read Exploring Version 2 of the Flash MX 2004 Component Architecture by Waleed Anbar.

This application uses the List component for displaying the playlist. In this bit of ActionScript, a class is created that extends mx.core.Uicomponent to include a thumbnail. Here is the code in its entirety:

class VideoThumb extends mx.core.UIComponent
{
   static var symbolName = "VideoThumb";
   var label : Object;      // the new text label we'll use
   var listOwner : Object; // reference to the tree - supplied by the tree
   var thumb;
   var nc;               // NetConnection
   var ns;               // NetStream
   var streamurl;

   function VideoThumb()         //define constructor
   {
      // nothing needed - we're extending v2;
   }

   function init()            //initialize
   {
      // nothing needed - we don't have any instance variables to initialize
   }

   function createChildren(Void) : Void
   {
      var v = this.attachMovie( "VideoHolder", "thumb", 0 );
      v._width = 80;
      v._height = 60;
      v.styleName = listOwner;

      var c = createLabel("label", 1);

      c.styleName = listOwner;
      c.selectable = false;
   }
   // pass all sizing from the tree to the cell
   function size(Void) : Void
   {
      label.setSize(label.getPreferredWidth(),label.getPreferredHeight());
      label._x = thumb._width + 10;
      label._y = thumb._height/2 - label._height/2;
   }
   function setValue(str : String, item, sel)
   {
      _visible = item != undefined;
      if ( !_visible )
         return;

      label.setValue( item.attributes.name );
      // Thumbnail is picked up as the first frame of the playlist
      var url = item.attributes.url;
      var stream = item.attributes.thumb;
      var start = item.attributes.thumbpos;

      // If explicit thumb is not specified in XML
      // use the first frame of the video
      if ( stream == undefined ) {
         stream = item.childNodes[0].attributes.name;
         start = item.childNodes[0].attributes.start;
      }

      // Give up if we still don't have valid thumb info
      if ( stream == undefined )
         return;

      // Render the thumbnail only if necessary
      if ( streamurl == url + "/" + stream )
         return;

      streamurl = url + "/" + stream;

//get first frame of video
      nc = new NetConnection();
      nc.connect( url );

      ns = new NetStream(nc);
      ns.onStatus = function(info) {
         // if video has stopped playing, reset nc and ns
         if ( info.code == "NetStream.Play.Stop" ) {
            nc = null;
            ns = null;
         }
      }
      thumb.video.attachVideo(ns);
      ns.connect();
      //grab the first frame
//begin at the specified start point, and play one frame
      ns.play( stream, start, 0 );
   }
   .
   function getPreferredHeight()
   {
      return 60;
   }

   function getPreferredWidth()
   {
      return label.getPreferredWidth();
   }
}

The basic purpose of VideoThumb.as is to specify the appearance and contents of the ListBox and create a thumbnail preview of the video file. The script performs these specific operations:

  • It attaches a movie to the VideoHolder object and sets it to a default size of 80 x 60 pixels. This serves as the thumbnail object for the list item.
  • It sets the size of the component elements, based upon the size of the component instance.
  • The setValue function begins the rendering of the list item. The script looks for a thumbnail specified in the XML. If there is none, as is true in our example, it creates one by grabbing the first frame of the associated movie.
  • The last operation ensures that the cell is centered vertically in the listbox cell.

Save a copy of VideoThumb.as in the same folder as VideoSource.as and VideoSource2.fla. With all your ActionScript now in place, you can go back to VideoSource2.fla and publish the SWF file. Place a copy of your SWF file into your web-accessible directory.

The last step places your files on the server so you can watch VideoSource in action.

Testing the Application

In the beginning of this tutorial, you copied your FLV files to your Flash Media Server installation. You will now need to place your ActionScript and interface files in your web-accessible folder for testing.

These three files should be in your web-accessible folder on your server or localhost:

  • VideoSource2.swf
  • SteelExternalAll.swf (or the skin SWF of your choice)
  • playlist-demo-1.xml

Because you already copied your Flash video files to FMS earlier in the article, you are ready to test your application. Using your favorite browser, navigate to VideoSource2.swf to test your playlist, now magically complete with thumbnails. Figure 4 shows the live application in action, loading Flash video files and generating thumbnails.

Write the Client-Side ActionScript

This section explains how to parse the XML document and create the dynamic playlist.

As I mentioned, all the ActionScript you are using for this project is contained in external files. Begin by creating an ActionScript file called VideoSource.as in Dreamweaver or in your favorite text editor.

Step 1: Format the Playlist Box

Assign values to the rowHeight and Selectable list properties, and then call the function VideoThumb to create the actual thumbnails:

list.rowHeight = 70;
list.cellRenderer = "VideoThumb";
list.selectable = true;

I address this function later in detail in the next section, “Generating Dynamic Thumbnails.

Step 2: Handle the Playlist Selections

To detect when clips are selected from the playlist, you need a listener object. Create a new empty listener object called listListener:

//create new empty listener object
listListener = {};

Now create a function to control what happens when an item in the playlist is selected:

listListener.change = function( evtobj ) {
var nav = list.dataProvider[list.selectedIndex];
   var reset = true;
   for ( var i = 0; i < nav.childNodes.length; i++ ) {
      var stream = nav.childNodes[i];
      if ( stream.nodeName == "stream" ) {
         attachMovie("FLVPlayback", "my_FLVPlybk", 10, {width:320,
height:240, x:90, y:100});

         //center the FLVPlayback component when FLV is ready to play
         var listenerObject:Object = new Object();
         listenerObject.resize = function(eventObject:Object):Void {
            //center video in playback area
            newx = (460 - my_FLVPlybk.preferredWidth)/2;
            newy = (470 - my_FLVPlybk.preferredHeight)/2;
            my_FLVPlybk._x = newx;
            my_FLVPlybk._y = newy;
         };
         my_FLVPlybk.addEventListener("resize", listenerObject);
         listenerObject.ready = function(eventObject:Object):Void {
              my_FLVPlybk.setSize(250, 350);
         };

         my_FLVPlybk.skin = "SteelExternalAll.swf";
         my_FLVPlybk.clear();
         my_FLVPlybk.contentPath = nav.attributes.url + "/_definst_/" + stream.attributes.name+".flv";
         my_FLVPlybk.autoSize = true;
         //trace(my_FLVPlybk.contentPath);
         reset = false;
      }
   }
}

This function accomplishes the following:

  1. Creates the nav variable, which holds the XML data for the selected list item, providing access to all attributes of the selected item.
  2. Dynamically creates an instance of the FLVPlayback component, called FLVPlybk.
  3. Walks through the XML for the chosen item and assigns its URL to the contentPath property of the FLVPlayback component and begins playback.
  4. Creates a listener that detects when the FLV is ready to play, and then recenters the FLVPlayback component on the Stage.
  5. Creates the reset variable and initially sets its value to true. This variable will be used in the ns.play method three lines below. This causes the existing NetStream instance to be flushed, stopping any video currently being played and immediately playing the newly selected video. The reset variable is then set to false for the rest of the files in the playlist.

If nodeName is stream, the clip is played. To implement the listListener function, you must associate it with the playlist. Then when it triggers, the listListener function is called, repopulating the list:

//Add an event listener on the list, when it triggers,
//run the listListener function to repopulate the list
list.addEventListener("change", listListener);

Step 3: Parse the XML File and Populate the Playlist

Now it’s time to dive into the lengthiest function. This one accomplishes a lot:

  1. Loads the XML file.
  2. Parses the XML file.
  3. Builds the playlist.

I’ll break it up and explain what happens in each operation.

Create a new XML object, called xmllist. Add the standard ignoreWhite=true command to strip out extra white space from the XML file. Finally, load the XML file into the XML object:

var xmllist = new XML();        //setup a variable to hold the XML
   xmllist.ignoreWhite = true;
   xmllist.load( "playlist-demo-1.xml" );    //load the XML file

Congratulations, you now have your XML data in Flash. But that’s just the beginning.

You need to parse that data into a format that Flash can use to populate the playlist. The following function is called when the XML has been successfully loaded:

xmllist.onLoad = function( status )  {
   if ( !status )
      trace( status );
   var entries = this.childNodes[0];
   var playlists = {};
   var nav = [];

The code passes status to this function and traces it for debugging purposes. Create three variables to hold the XML data for each video clip:

  • entries
  • playlists
  • nav

Next, create a for loop that steps through the XML and builds the data arrays:

for ( var i = 0; i < entries.childNodes.length; i++ ) {
      var entry = entries.childNodes[i];
      if ( entry.nodeName == "listitem" )
         //builds array of video clip names
         playlists[entry.attributes.name] = entry;
      else if ( entry.nodeName == "menu" ) {
         //builds array of available videos
         for ( var j = 0; j < entry.childNodes.length; j++ )
         nav[j] = playlists[entry.childNodes[j].attributes.name];
      }//end else if
   }//end for

As the loop steps through the XML, it builds an array of video clip names (playlists) and an array of available videos (nav). The array of videos is then sent to your List component for display purposes:

//sends the array of videos to the listbox UI
   list.dataProvider = nav;
}//end xml onload

Save this file as VideoSource.as in the same folder as VideoSource2.fla. Also place a copy in your application’s web-accessible directory.

You’ve now successfully imported your XML data, built the playlist, and implemented the clip selection function. The next operation tackles creating dynamic thumbnails.

Understanding the XML Data Source

In this section, I explain the structure of the sample XML data file, playlist-demo-1.xml, which is included in the sample file ZIP for this tutorial.

To add new videos to your playlist dynamically, simply edit this file:

<xml>
   <listitem name="Wind Sculptures" url="rtmp://localhost/videosource/">
      <stream name="wind" start="0" len="-1"/>
   </listitem>

   <listitem name="The Trike" url="rtmp://localhost/videosource/">
      <stream name="trike_final" start="0" len="-1"/>
   </listitem>
      <listitem name="Fluffy Hammer" url="rtmp://localhost/videosource/">
      <stream name="fluff_hammer" start="0" len="-1"/>
   </listitem>

   <listitem name="Fluffy Crash" url="rtmp://localhost/videosource/">
      <stream name="fluffy_crash" start="0" len="-1"/>
   </listitem>
   <listitem name="SuperSkate" url="rtmp://localhost/videosource/">
      <stream name="discodance" start="0" len="-1"/>
   </listitem>
   <listitem name="The Fish" url="rtmp://localhost/videosource/">
      <stream name="fish" start="0" len="-1"/>
   </listitem>
      <menu>
      <listitem name="Wind Sculptures"/>
      <listitem name="The Trike"/>
      <listitem name="Fluffy Hammer"/>
      <listitem name="Fluffy Crash"/>
      <listitem name="SuperSkate"/>
      <listitem name="The Fish"/>
   </menu>
</xml>

Notice that the file has a very basic XML structure, holding two main things:

  • listitem (items with name and length attributes)
  • menu (items to make available for selection)

The url attribute must point to your server running Flash Media Server. (For the purpose of this article, I assume you are doing so locally.) To point to your own FLV files, change the stream name to your FLV filename (omitting the .flv extension). These filenames should correspond to those you placed in the “streams” folder on the FMS server in the previous section. Just remember to leave off the .flv extension in the XML file, as shown in the example.

OK, ready for the fun part? The next section gets into the meat of the application—the client-side ActionScript.

Setting Up Flash Media Server

This article assumes that you are running Flash Media Server locally, but the application setup would be the same if you were using a remote server:

  1. Create a folder under the applications folder in Flash Media Server called VideoSource.
  2. Create a streams folder inside VideoSource.
  3. Create a _definst_ folder inside the streams folder.
  4. Place the Flash video files that you wish to appear in your playlist in this _definst_ folder.

That’s all the setup required on the server side.

In a bit, you’ll construct the VideoSource.as ActionScript code. However, let’s first take a look at the XML file you will use to dynamically build your video playlist.

Create dynamic playlist for streaming Flash video

We are often bogged down with mundane tasks such as site maintenance and updates. If we want to pass these tasks on to clients or colleagues who are not tech-savvy, we have to develop sophisticated interfaces to simplify the process for them and to give them easy access to the data. XML gives the power to control content back to the client, freeing us developers to do what we do best.

High-profile sites, most notably Google Video and Amazon.com, are taking advantage of the integration of Flash video with XML. By editing one flat file, you too can update your video content dynamically.

At a MAX conference, Chris Hock and Srinivas Manapragada from Macromedia (now Adobe) presented an XML-based solution for creating content-driven media players called VideoSource. Using their code as a foundation, you will develop your own dynamic video playlist in this article. This XML-based approach is perfect if you ever need to display multiple video clips but you don’t want to edit your Flash source code every time you add new video content. As an extra bonus, the application actually generates thumbnail previews on the fly.

Note: This tutorial shows you how to create a dynamic playlist for streaming Flash video. To find out how to build a similar playlist using progressive download Flash video, see my article, Creating a Dynamic Playlist for Progressive Flash Video.

The basic framework of the VideoSource application consists of the following (see Figure 1):

  • Flash Media Server (FMS) to stream video
  • XML file as the data source (playlist-demo-1.xml)
  • Custom-made player for playback (VideoSource2.swf)
  • External ActionScript files (VideoSource.as, VideoThumb1.as)

Figure 1. Server/file diagram of the VideoSource application

You can download all source files for this project.

Requirements

To complete this tutorial you will need to install the following software and files:

Flash Professional 8

Flash Media Server 2

Sample files:

Prerequisite Knowledge

You should be familiar with Flash Professional 8 and understand the basics of delivering video through Flash and Flash Media Server (FMS). You should also have a basic understanding of XML.

Exploring the Video Player Interface

This section explains the structure of the finished player and walks you through creating the interface. You also create a very simple custom component that displays your dynamic thumbnails within the playlist.

The video player is a relatively simple interface, consisting of an embedded video object for playback and a List component for the video (see Figure 2).

The List component is populated automatically from the contents of your XML file. You can extend the List object class to include an automatically generated thumbnail of the video for each list item. Each item links to the appropriate Flash video (FLV) file, which plays in the FLVPlayback component when clicked.

Follow these steps to create your interface:

  1. Open the Flash Professional 8 authoring environment and create a new Flash file.
  2. Save the file as VideoSource2.fla.
  3. Add an instance of the List component to the Stage and give it the instance name of list.
  4. Open the ActionScript panel and add code to call the external ActionScript file you’ll be creating:
    #include "VideoSource.as"
    
  5. Create a new movie clip symbol called VideoHolder.
  6. Within this symbol, add a new instance of the Video component to the Stage.
  7. Click the menu on the Library tab and choose New Video. Name the instance video.
  8. Draw a box with an empty fill and an outside rule of 1 pixel that’s the same size as your video component (160 x 120 pixels). Place it directly on top of your video component to give you a nice frame around your thumbnail videos.
  9. Create the VideoThumb component as follows:
    1. Go back up to the main Timeline and create a new symbol called VideoThumb.
    2. Within the symbol, add a stop(); action to the first frame.
    3. Create a new layer and add a blank keyframe at Frame 2. In this frame, add an instance of the VideoHolder movie clip. Call this instance VideoHolder. Change its size to 5 x 5 pixels, at x,y coordinates 0,0.
    4. Go back up to the main Timeline and select VideoThumb in the Library panel. Choose Component Definition from the Library menu. In the Component Definition dialog box, set the AS 2.0 Class to VideoThumb and add the following parameters (see Figure 3):
      • enabled, enabled, true, Boolean
      • visible, visible, true, Boolean
      • minHeight, minHeight, 0, Number
      • minWidth, minWidth, 0, Number

      Make sure that both the “Parameters Are Locked in Instances” and the “Display in Components Panel” options are checked.

  1. Save the file as VideoSource2.fla.

You’ll need to wait until after you write the VideoSource.as file (see Step 3 in the section “Writing the Client-Side ActionScript”) to publish the SWF file, so keep the interface file handy.

That’s all there is to the interface. Provided that you don’t decide to change your layout, you won’t need to edit the file again. You just make all future updates in your XML file. It’s truly a thing of beauty.

The next section shows you how to set up the application on your server.

Change the NetStream Code

You have to makeonly one simple change to the VideoSourcePro.as ActionScript to convert it from streaming to progressive download:

14    nc.connect( null );     //null connection for progressive download

That’s it! Now you can publish your VideoSourcePro.fla file and experience the power of progressive download video streaming (see Figure 1). Vive le FLV! Figure 1. The final VideoSourcePro.swf flv

Add JPEG Thumbnails to a Playlist

A few small changes to VideoThumb.as are needed to pull the thumbnails specified in the XML file:

60    //grab jpg thumbnail instead of initiating stream.
61    var newClip = this.createEmptyMovieClip("thumbie",this.getNextHighestDepth());
62    newClip.loadMovie("thumbs/"+stream);

This code attaches the JPEG file to a newly generated movie clip inside thumb.video, which is displayed in the ListBox component. Note that the thumbnail cannot be attached directly to the thumb.video object, as was done in the streaming example, because the JPEG file will not just attach, but will unload any content currently loaded. In this case, it unloads the caption data. So you will create a new movie clip inside, called newClip, and load the JPEG file there.

There’s only one more change needed to finish up the application, in the VideoSourcePro.as file.

Specify JPEG Thumbnails in the XML File

To dynamically add new videos to your playlist, you simply edit the playlist-demo-1.xml file, which is included in the ZIP file for this tutorial. Thumbnail filenames need to be specified in this file as well. The last attribute of each item is thumb; its value is the thumbnail filename, as shown in the following code:

<xml>
    <listitem name="Battle 1" url="streams" thumb="battle1.jpg">
        <stream name="battle1.flv" />
    </listitem>

    <listitem name="Fight!!!" url="streams" thumb="fight.jpg">
        <stream name="fight.flv" />
    </listitem>

    <listitem name="Marco Diaper" url="streams" thumb="marcodiaper.jpg">
        <stream name="marcodiaper.flv" />
    </listitem>

    <listitem name="Cheetah Cougar" url="streams" thumb="cheetahcougar.jpg">
        <stream name="cheetahcougar.flv" />
    </listitem>

    <listitem name="Cloning" url="streams" thumb="cloning.jpg">
        <stream name="cloning.flv" />
    </listitem>

    <listitem name="Run" url="streams" thumb="run.jpg">
        <stream name="run.flv" />
    </listitem>

    <listitem name="Midgets 1" url="streams" thumb="midgets1.jpg">
        <stream name="midgets1.flv" />
    </listitem>

    <listitem name="Midgets 2" url="streams" thumb="midgets2.jpg">
        <stream name="midgets2.flv" />
    </listitem>

    <menu>
        <listitem name="Battle 1"/>
        <listitem name="Fight!!!"/>
        <listitem name="Marco Diaper"/>
        <listitem name="Cheetah Cougar"/>
        <listitem name="Cloning"/>
        <listitem name="Run"/>
        <listitem name="Midgets 1"/>
        <listitem name="Midgets 2"/>
    </menu>
</xml>

To display the thumbnails in the playlist, you’ll now edit the VideoThumb.as file to grab them.

Create JPEG Thumbnails

A more bandwidth-conscious way of displaying thumbnails is to create scaled-down JPEG files for each video file. You have several options for creating them; you can:

  • Export a single scaled-down frame in a video editing program.
  • Take a screenshot and scale it down in an image editing program.
  • Use a third-party utility such as Camtasia to capture and export a single frame.

The optimal size for thumbnails in this example is 60 pixels high by 80 pixels wide, 72 dpi resolution. Place the scaled-down JPEG files in the same directory as your SWF file, in a directory called thumbs. When you have your thumbnail files, you’ll need to tell your application where to find them, which brings me to the XML file that is part of the ZIP file that accompanies this tutorial.

Create a dynamic playlist for progressive Flash video

Here you create a new NetConnection object, and attach a new NetStream object to it. Note the NetConnection object is null for progressive video. The NetStream object is then attached to the thumb.video object and the stream is set to play, then pause on frame 2, displaying a single frame for your thumbnail. Just remember, although this video pauses, it continues to load in the background, potentially slowing down your application’s performance.

A more robust solution is to load JPEG files instead. Next, I’ll outline some different ways to create them, and walk you through the code that adds them to your playlist.

There’s been a strong outcry for an article demonstrating an XML-driven playlist that does not require Macromedia Flash Communication Server. You wanted the flexibility to update your progressive Flash video (FLV) playlists without editing your Macromedia Flash source files. Ladies and gentlemen, let me present VideoSource Pro.

This version of the dynamic playlist code is adapted from the Flash Communication Server XML-driven playlist written by Chris Hock and Srinivas Manapragada, covered in detail in my other article, Creating a Dynamic Playlist for Streaming Flash Video. By changing a few lines of that code, I will show you how to create an XML-driven playlist of progressive FLV files, allowing you the flexibility to update your playlist without editing your Flash source file, and without requiring Flash Communication Server streaming.

I will outline the basic structure of this application in this article and explain the code that changes from the streaming example.

The basic framework of the VideoSource Pro application consists of the following components:

  • An XML file as data source (playlist-demo-1.xml)
  • A custom-made player for playback (VideoSourcePro.swf)
  • External ActionScript files (VideoSourcePro.as, VideoThumb.as)

Requirements

To complete this tutorial you will need to install the following software and files:

Macromedia Flash MX Professional 2004

Sample files:

Download and unzip the contents of the videosourcepro.zip file to a new directory on your hard drive. Refer to the readme.txt file included in the ZIP file for more detailed instructions.

Prerequisite Knowledge

You should be familiar with Flash MX Professional 2004 and understand the basics of delivering video through Flash. You should also have a basic understanding of XML.

Why Progressive Video?

Comparing the pros and cons of embedded, streaming, and progressive video is beyond the scope of this article. However, there are a few differences that warrant mention:

  • Cache me if you can. Unlike streaming video, progressive video is cached. This can be a good thing (if the viewer wants to replay the clip it will play from the local cache) or a bad thing (a copy of the video resides on the viewer’s computer, which could be an issue for material with strict copyrights).
  • No Internet connection? No problem! For standalone usage such as a CD-ROM, where an Internet connection may not be available, progressive video is the only option for dynamic playlists. For video delivered offline, streaming video in Flash is not possible, since it requires a connection to a Flash Communication Server.
  • 15 will get you… 15. Unlike videos embedded directly into your SWF file, the frame rates of your FLV files delivered through progressive download or streaming do not have to match the frame rate of the SWF file. This is an especially useful feature for a dynamic playlist application, since the FLV files in your playlist may come from different sources, and may not all have the same frame rate.

Understanding Your Thumbnail Options

The greatest hurdle in adapting this application for progressive streaming is creating the thumbnails. Flash Communication Server gives you a very simple way to create thumbnails, and it grabs only the data it needs to build a small thumbnail image. Progressive video is a bit trickier.

There are basically three approaches to implementing dynamic thumbnails of progressive FLV files:

  • Attach the FLV file to a video object, scale it down, and pause on the first frame. This approach is not a feasible solution for videos of any significant length, because the file continues to load needlessly in the background, eating up bandwidth and slowing down your application.
  • Manually create thumbnails as JPEG files, and reference them in the XML file. Although this approach does require a bit more work upfront on your part, it is the most bandwidth-efficient approach.
  • Use a third-party server-side application such as ffmpeg to generate thumbnail images. This approach can be technically challenging, but worthwhile if you have more video clips than manpower.

In this article, I will briefly explain how to accomplish the first approach above, attaching a scaled-down FLV file to a video object for the thumbnail source. However, I will focus mainly on the second approach, pulling dynamic JPEG files for the thumbnails. The example files that accompany this article illustrate this solution.

Using Mini FLV Files

The down-and-dirty approach to grabbing thumbnails without any extra files is to attach the FLV file to a scaled-down video object, and pause the video on the first frame. This is an efficient approach for streaming video using Flash Communication Server, because only the video data needed for that frame is transferred. However, when using progressive download, the entire full-size video is loaded. If you have only very short videos, you may want to use this method. Below is the code you need to change in the VideoThumb.as file that is part of the ZIP file that accompanies this tutorial to use this method:

...
78 nc = new NetConnection(); 79 nc.connect( null ); 80 ns = new NetStream(nc); 81 ns.onStatus = function(info) { 80 if ( info.code == "NetStream.Play.Stop" ) { 81 nc = null; 82 ns = null; 83 } 84 } 85 thumb.video.attachVideo(ns); 86 ns.play( streamurl ); 87 ns.seek(2); 88 ns.pause(); ...
Here you create a new NetConnection object, and attach a new NetStream object to it. Note the NetConnection object is null for progressive video. The NetStream object is then attached to the thumb.video object and the stream is set to play, then pause on frame 2, displaying a single frame for your thumbnail. Just remember, although this video pauses, it continues to load in the background, potentially slowing down your application's performance.  A more robust solution is to load JPEG files instead. Next, I'll outline some different ways to create them, and walk you through the code that adds them to your playlist.

Create transparent fills in Flash 5

Follow these steps to create an alpha-transparent color and use it in a Flash 5 fill:

1 Select Window>Panels>Mixer. Choose the fill color desired and adjust the Alpha transparency.
2 Select Window>Panels>Fill. Choose the desired fill type from the popup menu. The transparency color selected in Step 1 will automatically be included in the fill type. For example, in a Radial Gradient the transparent color will be the final color in the gradient ramp.
3 Adjust the color until the desired result is obtained. When finished, select the ‘save’ icon to include this new fill in the file’s Color Swatches.

Manage flash panels

Managing panels

Flash 5 gives you several ways to efficiently manage panels as you work. In the following sections, you’ll learn how to do the following:

  • Open and close panels
  • Resize and collapse panels
  • Group panels
  • Restore the default panel layout
  • Use custom panel layouts


Opening and closing panels
You can open and close panels by using the Window menu, the Launcher bar, and the panel’s Close box and context menu.

To open a panel:

Choose Window > Panels and select the desired panel from the list.

To close a panel, do one of the following:

Click the Close box in the upper right corner (Windows) or upper left corner (Macintosh).
Choose Window > Panels and select the desired panel from the list.
Right-click (Windows) or Control-click (Macintosh) the panel’s tab and choose Close Panel from the context menu.

To open or close panels using the Launcher bar:

In the Launcher bar, click the button for the Info, Mixer, Character, Instance, or Actions panel.

Note: You can also open or close the Library window or the Movie Explorer using the Launcher bar.

To close all panels:

Choose Window > Close All Panels.

Note: You can also hide all panels, along with the toolbox, by pressing the Tab key. Press the Tab key again to restore them.


Resizing and collapsing panels
Resizing and collapsing panels is especially useful when you’re working with a small desktop.

To resize a panel:

Drag the panel’s lower right corner (Windows) or drag the size box at the panel’s lower right corner (Macintosh).

To collapse a panel or a panel group to its title bar and tab only:

Double-click the title bar. Double-click the title bar again to return the panel or group to its previous size.

To collapse a panel or panel group to its title bar (Macintosh only):

Click the collapse box at the right end of the title bar. Click the box again to return the panel or group to its previous size.


Grouping panels
You can group and ungroup panels to suit your workflow.

To group panels:

Drag a panel by its tab onto the tab of another panel.

To bring a panel within a group to the front:

Click the panel’s tab.

To ungroup a panel into a separate window:

Drag the panel by its tab to the outside of its window.

To move a panel or a panel group:

Drag the panel or group by its title bar.


Restoring the default panel layout
If you’ve moved your panels around and are having difficulty finding them, simply restore the default panel layout. The default panel layout displays 13 panels in four panel groups. They appear on the right side of your screen.

To restore the default panel layout:

Choose Window > Panel Sets > Default Layout.


Using custom panel layouts
Flash 5 lets you create any number of custom panel layouts. A custom panel layout stores the following information:

Which panels are open
How the panels are grouped
The size of each panel and panel group
Where the panels are placed on the desktop

To save a custom panel layout:

Choose Window > Save Panel Layout. Enter a name for the layout and click OK.

To delete a custom layout:

Open the Flash 5 application folder on your hard drive and delete the Panel Sets file.

To select a panel layout:

1 Choose Window > Panel Sets.
2 From the submenu, choose Default Layout to reset panels to the default layout, or choose a custom layout that you have saved previously.

Group Flash Panels

Related software / service: Flash

Problem

How to group Flash Panels When you want to regroup flash panel,Please drag the panel to the group panel which you want.

Solution

  1. Please click “Window” menu to open panel,
  2. Drag the panel name to blank space of another panel group.

Tips

Drag the Name of Panel

Zoom in the stage in Flash

I am making a movie in Flash,but the stage so small. I want to zoom the stage in or out. What can I do?

Solution

  1. Use flash zoom tools. It can change scene size.
    Select “View” on the menu bar and choose “Zoom in” or “Zoom out” to zoom the stage.

    zoom tools
  2. For example this is a original stage.
  3. Zoom in.     (Select “View” on the menu bar and choose “Zoom in” or press Ctrl+=)
  4. Zoom out. (Select “View” on the menu bar and choose “Zoom out” or press Ctrl+ -)

    “zoom out” in the stage in Flash