Creating a Macromedia Flash Portfolio for Mobile Devices

When you trigger one of the buttons in your mobile portfolio to load a movie, call this function. It will do all the work for you. The getMovie Function will:

• Display your movie properly
• Scale it to the largest size possible without distorting it
• Align your movie horizontally and vertically
• Rotates the loaded movie if necessary
• Colors the background of your portfolio to match the color of the loaded movie
• Load the movie

Here’s a step-by-step guide to coding the function:

1. Declare the get movie function and define the parameters as follows:

   function getMovie (fileName, orientation, fileWidth, fileHeight, fileBackgroundColor,   horizontalAlignment, verticalAlignment) {
   			
   			
   			

2. Set the widths and heights for the SWF depending upon the orientation you are using (horizontal or vertical). Duplicate the vertical or horizontal placeholder and name the instance placeHolder. Duplicate the placeholder to the same depth so it will immediately overwrite any former pre-existing placeholder; this is easier than always tracking which separate placeholder you are using (vertical or horizontal). Insert a trace statement to warn you if you didn't specify the movie orientation as horizontal or vertical.

   if (orientation == "horizontal") {
   	var orientationWidth = horizontalPlaceHolderWidth;
   	var orientationHeight = horizontalPlaceHolderHeight;
   	duplicateMovieClip ("horizontalPlaceHolderTemplate", "placeHolder", 1)
   } else if (orientation == "vertical") {
   	var orientationWidth = verticalPlaceHolderWidth;
   	var orientationHeight = verticalPlaceHolderHeight;
   	duplicateMovieClip ("verticalPlaceHolderTemplate", "placeHolder", 1)
   } else {
   trace ('WARNING!!!: Did not specify the movie orientation as "horizontal" or "vertical"');
   }
   
   

3. Reset the placeholder to the upper left corner:

   placeHolder._x = 0;
   placeHolder._y = 0;

4. Decide if you should scale the movie. (Scale the movie if the movie you are loading has a larger width or height than the placeHolder movie clip.) Store the ratio of the dimensions of the movie you are loading relative to the placeHolder movieclip:

   var fileToOrientationWidthRatio = fileWidth/orientationWidth;
   var fileToOrientationHeightRatio = fileHeight/orientationHeight;
   var isLoadedMovieWiderThanPlaceHolder = fileToOrientationWidthRatio > 1;
   var isLoadedMovieTallerThanPlaceHolder = fileToOrientationHeightRatio > 1;
   var isScaleLoadedMovie = isLoadedMovieWiderThanPlaceHolder || isLoadedMovieTallerThanPlaceHolder;
   
   

5. If you scale the loaded movie, determine whether you should scale the movie to the maximum width or height available. If the ratio for the movie width to the placeHolder movie clip width is greater than or equal to the ratio movie height to the placeHolder movie clip height, then scale the movie by the maximum width available. Otherwise, scale the movie by the maximum height available. Scale the container movie clip that is inside the placeHolder movie clip:

   if (isScaleLoadedMovie) {
   	isScaleByWidthRatio = (fileToOrientationWidthRatio >= fileToOrientationHeightRatio);
   	if (isScaleByWidthRatio) {
   		var amountToScale = fileToOrientationWidthRatio;
   	} else {
   
   		var amountToScale = fileToOrientationHeightRatio;
   	}
   
   	var xScaleFactor = Math.floor( (100/amountToScale) );
   	var yScaleFactor = Math.floor( (100/amountToScale) );
   
   	placeHolder.container._xscale = xScaleFactor;
   	placeHolder.container._yscale = yScaleFactor;
   	}
   	
   	

6. Determine the width of the loaded movie and scale the movie horizontally:

   var widthOfLoadedMovie = (fileWidth * (xScaleFactor/100)) || fileWidth;
   switch (horizontalAlignment) {
   	case "left":
       	break;
   	case "center":
   		var widthDifference = Math.floor ( (orientationWidth-widthOfLoadedMovie)/2 );
   		placeHolder.container._x += widthDifference;
   		break;
   	case "right":
   		var widthDifference = Math.floor (orientationWidth-widthOfLoadedMovie);
   		placeHolder.container._x += widthDifference;
   		break;
   	default:
   		trace ("WARNING!!!: Trying to horizontally align the movie w/o a correct alignment parameter");
   	}
               

7. Determine the height of the loaded movie and scale the movie vertically:

   var heightOfLoadedMovie = (fileHeight * (yScaleFactor/100)) || fileHeight;
   switch (verticalAlignment) {
   	case "top":
   		//No need to do anything. By default, it is aligned vertically to the top
   		break;
   	case "middle":
   		var heightDifference = Math.floor ( (orientationHeight-heightOfLoadedMovie)/2 );
   		placeHolder.container._y += heightDifference;
   		break;
   	case "bottom":
   		var heightDifference = Math.floor ( orientationHeight-heightOfLoadedMovie);
   		placeHolder.container._y += heightDifference;
   		break;
   	default:
   		trace ("WARNING!!!: Trying to horizontally align the movie w/o a correct alignment parameter");
   }
               

8. Color the background of the portfolio to match the color of the loaded movie:

   background_color.setRGB (fileBackgroundColor);
   			
   			

9. Rotate the movie if the orientation for the loaded movie is not the same as the standard orientation for your device:

   var isRotateLoadedMovie = (orientation != standardOrientation);
   if (isRotateLoadedMovie) {
   	placeHolder._rotation = -90;
   	placeHolder._y = yPositionAfterRotation;
   }

10. Load your movie:

    loadMovie(fileName, "placeHolder.container");
    			
    			

11. Finish the function:

    }//End function getMovie

Here is the complete, commented code for the getMovie function:

//filename - the name of the SWF file that you would like to load
//orientation - either "vertical" or "horizontal". Which template the SWF will load into and how the movie will be displayed.
//fileWidth  - the original width of the SWF you are loading. You can find this by opening the FLA and selecting MODIFY/DOCUMENT.
//fileHeight  - the original height of the SWF you are loading. You can find this by opening the FLA and selecting MODIFY/DOCUMENT.
//fileBackgroundColor  - the background color of your movie as an rgb code. Again, you can find this by opening the FLA and selecting MODIFY/DOCUMENT.
//horizontalAlignment  - "left", "center", or "right". How you want the file aligned horizontally.
//verticalAlignment  - "top", "middle", or "bottom". How you want the file aligned vertically.
function getMovie (fileName, orientation, fileWidth, fileHeight, fileBackgroundColor, horizontalAlignment, verticalAlignment) {
	//Set the widths and heights for the SWF depending upon which orientation you are using
	//And we duplicate our vertical or horizontal placeholder and name the instance "placeHolder"
	//We duplicate it to the same depth so it will immediate overwrite any former placeholder that
	//was there. This is easier than always tracking which separate placeholder we are using (vertical or horizontal)
  if (orientation == "horizontal") {
  	var orientationWidth = horizontalPlaceHolderWidth;
  	var orientationHeight = horizontalPlaceHolderHeight;
  	duplicateMovieClip ("horizontalPlaceHolderTemplate", "placeHolder", 1)
  } else if (orientation == "vertical") {
  	var orientationWidth = verticalPlaceHolderWidth;
  	var orientationHeight = verticalPlaceHolderHeight;
  	duplicateMovieClip ("verticalPlaceHolderTemplate", "placeHolder", 1)
  } else {
  	trace ('WARNING!!!: Did not specify the movie orientation as "horizontal" or "vertical"');
  }
  
  //Reset the placeholder to the upper left corner
  placeHolder._x = 0;
  placeHolder._y = 0;  
  
	//Figure out if we should scale the movie and if so, how
	var fileToOrientationWidthRatio = fileWidth/orientationWidth;
	var fileToOrientationHeightRatio = fileHeight/orientationHeight;
	var isLoadedMovieWiderThanPlaceHolder = fileToOrientationWidthRatio > 1;
	var isLoadedMovieTallerThanPlaceHolder = fileToOrientationHeightRatio > 1;
	var isScaleLoadedMovie = isLoadedMovieWiderThanPlaceHolder || isLoadedMovieTallerThanPlaceHolder;

	if (isScaleLoadedMovie) {
		//Determine whether we should scale horizontally or vertically
		isScaleByWidthRatio = (fileToOrientationWidthRatio >= fileToOrientationHeightRatio);
		if (isScaleByWidthRatio) {
			var amountToScale = fileToOrientationWidthRatio;
		} else {
			var amountToScale = fileToOrientationHeightRatio;
		}//End if (isScaleByWidthRatio)
		var xScaleFactor = Math.floor( (100/amountToScale) );
		var yScaleFactor = Math.floor( (100/amountToScale) );
		//Notice that the placeHolder isn't scaled. The movie clip instance inside it called "container" is scaled.
		
		placeHolder.container._xscale = xScaleFactor;
		placeHolder.container._yscale = yScaleFactor;
	}//End if (isScaleLoadedMovie) 
  
  //Align the movie horizontally
	var widthOfLoadedMovie = (fileWidth * (xScaleFactor/100)) || fileWidth;
  switch (horizontalAlignment) {
	  case "left":
	  	//No need to do anything. By default, it is aligned horizontally to the left
	  	break;
	  case "center":
	  	var widthDifference = Math.floor ( (orientationWidth-widthOfLoadedMovie)/2 );
			placeHolder.container._x += widthDifference;
	  	break;
	  case "right":
	  	var widthDifference = Math.floor (orientationWidth-widthOfLoadedMovie);
			placeHolder.container._x += widthDifference;
	  	break;
	  default:
	  	trace ("WARNING!!!: Trying to horizontally align the movie w/o a correct alignment parameter");
  }//End switch (horizontalAlignment)

  //Align the movie vertically
	var heightOfLoadedMovie = (fileHeight * (yScaleFactor/100)) || fileHeight;
  switch (verticalAlignment) {
	  case "top":
	  	//No need to do anything. By default, it is aligned vertically to the top
	  	break;
	  case "middle":
	  	var heightDifference = Math.floor ( (orientationHeight-heightOfLoadedMovie)/2 );
			placeHolder.container._y += heightDifference;
	  	break;
	  case "bottom":
	  	var heightDifference = Math.floor ( orientationHeight-heightOfLoadedMovie);
			placeHolder.container._y += heightDifference;
	  	break;
	  default:
	  	trace ("WARNING!!!: Trying to horizontally align the movie w/o a correct alignment parameter");
  }//End switch (verticalAlignment)

  //Color the background to match the color of the loaded movie
  background_color.setRGB (fileBackgroundColor);

	//Rotate the movie if we need to
  var isRotateLoadedMovie = (orientation != standardOrientation);
  if (isRotateLoadedMovie) {
		placeHolder._rotation = -90;
		placeHolder._y = yPositionAfterRotation;
  }//End if (isRotateLoadedMovie)

	//Load the SWF
  loadMovie(fileName, "placeHolder.container");
}//End function getMovie
            

The clearMovie Function

Sometimes you may want to remove a movie that's playing in your portfolio. The clearMovie function will load an empty movie in the place one that may be playing and change the background color of the portfolio to match the default background color for the portfolio. Here’s a step-by-step guide for coding the function:

1. Declare the function:

   function clearMovie () {
   			
   			

2. Load an empty movie into the container if you used the placeHolder:

   if (placeHolder) {
   	loadMovie("movies/null.swf", "placeHolder.container");
   }//End if (placeHolder)
   
   

3. Color the background of the portfolio:

   background_color.setRGB (defaultBackgroundColor);
   			
   			

4. Finish the function:

   }//End function clearMovie
   			
   			

Here is the complete, commented code for the clearMovie function:

function clearMovie () {
if (placeHolder) {
  loadMovie("movies/null.swf", "placeHolder.container");
}//End if (placeHolder)
background_color.setRGB (defaultBackgroundColor);
}//End function clearMovie
            

The quitPortfolio Function

Call the quitPortfolio function when you trigger the Quit button. The way you quit your portfolio will depend on what mobile device you are using. Here’s a step-by-step guide for coding the function:

1. Declare the function:

   function quitPortfolio () {
   			
   			

2. Insert any code that you would like to execute when you quit to this function. Refer to the particular CDK (Content Development Kit) for your device.

3. Finish the function:

   }//End function quitPortfolio
   			
   			

Here is the complete, commented code for the quitPortfolio function:

function quitPortfolio () {
//Place whatever code you need to execute when you quit the portfolio
}//End function quitPortfolio

Adapting the Mobile Portfolio to Show Your SWFs

Gather all of your SWF movies that you would like to be able to show on your mobile portfolio. Copy them all into a directory called movies that is in the same directory where you placed the mobile_portfolio.fla file. Change the paths to the SWFs in the button actions so your movies load. Adjust all the necessary parameters, such as original width, height, color, desired orientation, alignments, etc. For example, here is the code on one of the buttons located inside the menu_mc movie clip on the Invisible Buttons layer:

on (press) {
	_parent.getMovie ("movies/movie9.swf", "vertical", 500, 200, 0x990066, "right", "bottom");
}

Deploying and Running the Mobile Portfolio

Once you've tested the portfolio on your desktop or laptop computer, you're ready to transfer it to your mobile device. Please refer to the CDK (content development kit) for your device as the procedure will differ depending on which mobile device you own. You can find information on content development kits at the Macromedia DevNet Mobile Topic Center.

Conclusion

A mobile portfolio can help you easily explain what you do for a living. It can help you get business and position yourself for exciting mobile Macromedia Flash projects.

Showing your work on a mobile device can also be a great way to see how your current and potential clients react to mobile content. People are usually more impressed when viewing content on a mobile device. You can gauge the client’s desire to deliver mobile content without investing too much time in new development. Plus, it can be a great way to justify buying that new mobile device you've been eyeing!

If a picture is worth a thousand words, imagine the value of having a mobile portfolio of your best work in your pocket. Create your own mobile portfolio today.

Page 3 of 3

Previous Page