News & Resources — Articles

Creating a Macromedia Flash Portfolio for Mobile Devices

By Nader Nejat

This article originally appeared in the Macromedia Mobile and Devices Developer Center.

Reprinted with permission.

"A picture is worth a thousand words" - Napoleon Bonaparte.

Do you have difficulty explaining what you do? I know I used to. Until I put my portfolio on a mobile device.

Imagine having samples of your best Macromedia Flash work with you at all times. If you’re developing Macromedia Flash applications for the new platform of mobile devices, you've probably struggled to explain to clients just exactly what it is you do for a living. Creating a mobile portfolio of your best Macromedia Flash work is a great way to easily show what you do and excite people about mobile Macromedia Flash content. If you've wanted to create a mobile Macromedia Flash project, building a portfolio can be a terrific way to jump into mobile Macromedia Flash design.

Do you want to make a good first impression? A mobile portfolio can help you impress clients and get immediate feedback on your work. It can also help you create business and position yourself as an expert developer for mobile Macromedia Flash projects.

Requirements

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

• Macromedia Flash Professional 2004
• Macromedia Flash Lite 1.1 CDK
• Sample files
• Intermediate-level Flash knowledge and experience using sound in Flash

The Benefits of a Mobile Portfolio

"What Do You Do?"

What is the first thing people ask when they first meet you? Once you exchange names, they ask, "What do you do for a living?" Have you ever watched someone's eyes glaze over as you try to explain what "interactive media" means?

This is why a mobile portfolio is so valuable. It's much easier to show interactive content than it is to explain it. People respond better to visual examples than to verbal descriptions. Having an easily accessible portfolio can demonstrate your work in a way words cannot.

The next time someone asks what you do, you can say something like this: "I'm an interactive developer. I create content for the Internet and mobile devices like these." Then, turn on your device and show your portfolio.

Making the Best First Impression

A well-done mobile portfolio showcases your professionalism to your clients. It shows you're willing to try new forms of technology. People don't expect a mobile portfolio--having one shows that:

• You took an extra step beyond the typical brochure, business card, or website.]
• You actively present your work in innovative ways.
• You care enough and spent enough time to organize your work.
• You stay ahead of trends.

Your mobile portfolio suggests that you will help your clients do the same.

Getting Immediate Feedback

When presenting content on your mobile portfolio, pay attention to the reaction you get from your work. Present different types of projects. See what content elicits the best responses. Tailor your presentation with the most appealing and relevant content for a specific client.

For example, I worked on the following types of projects: interactive data visualizations, games, animations, applications, CD ROMs, and experimental work. When showing work on my mobile portfolio, I always ask what type of industry someone works for; then I try to show him or her the most relevant examples.

If I am showing some animation samples to a creative director and he doesn't find them "edgy" enough, then I might show him some of my experimental work. If I am showing some of my experimental work to a business person and she thinks it is too "out there," then I might show her some of my application work, followed by some interactive data visualization samples.

Creating Business with a Mobile Portfolio

Networking Actively

Have you ever given someone your business card and talked to him a few weeks later and he still hasn't looked at your website? Have you ever given someone your business card, and she lost it? When you hand out your business card, you are marketing passively. The prospective client may never call you or look at your online portfolio. Instead, show your portfolio to prospective clients when you meet then. Be active and take the next step in getting them to look at your content.

Seizing Opportunities

If he or she reacts well or is interested in certain types of samples, take advantage of a client's interest. Ask for an appointment at his or her office. You will be much better prepared for that potential interview or portfolio review. Since you have already seen the response to your portfolio, tailor your meeting presentation to contain the work that excited the client the most.

Positioning Yourself for Mobile Work

Showing content on a mobile portfolio positions you as a designer and/or developer of mobile content. When people start undertaking mobile projects, they'll think of you as someone who can deliver mobile projects. You won't be labeled as just a web designer or developer. It's human nature: People will try to pigeonhole you into a particular role. As the mobile industry becomes more viable, be there with it. Don't get left behind as clients begin planning mobile projects. Be the one who gets people thinking about mobile plans.

Mobile Versus Desktop/Laptop: A Different Perception

The "Wow" Factor

People who have been working on mobile Macromedia Flash projects have encountered an interesting phenomenon. Clients who view content on a mobile device are amazed--there's a definite "wow" factor.

You often hear comments like, "This little device can do all that?" If you were to show exactly the same content on a laptop or desktop, the reaction can be mediocre. People respond more favorably to mobile content when you present it on a mobile device. They often feel that designing and developing for a small device is more difficult since it limits screen real estate, the processors are small, and because it's an emerging field.

Demonstrating Potential for Mobile Projects

When people use mobile devices they are often in "application mode." People are using the device to execute a specific task. Most mobile users aren't accustomed to surfing or looking for content.

When presenting content on a mobile device, I often wait before telling anyone that I used using Macromedia Flash until I'm done with presenting. Even people in the technical industry often think of Macromedia Flash as "that tool for those web animations." I prefer to impress people first with the content--then I tell them I'm using Macromedia Flash.

The Portfolio Code: How to Build Your Own Mobile Portfolio

A Great Simple Project to Get Started with Mobile Development

Building a mobile portfolio can be a gentle introduction into mobile development. If you don't have experience in the mobile medium, this is a good first project. If you already have existing Macromedia Flash work, you're take the same content and present it on a device. You don't have to create new content from scratch.

The Mobile Portfolio Interface

The portfolio application you will build in this tutorial lets you load external SWF files. It resizes the content to fit as much of it as possible on your mobile device. It aligns your movies horizontally and vertically. You can also display your content on your device sideways, if necessary. Before going into the file, select Control/Test Movie to examine the look and function of the portfolio: Figure 1. The mobile portfolio interface

Download the sample file archive to get a completed FLA, mobile_portfolio.fla, along with some sample FLA and SWF movies to test with your portfolio. Inside the mobile_portfolio.fla file, find a movie clip called menu_mc. This movie clip contains a simple menu layout with sample buttons that load external SWFs into the portfolio application. Figure 2. The menu_mc movie clip, Frame10.

Building the Portfolio Code

The portfolio application code consists of four main functions:

• initMobilePortfolio
• getMovie
• clearMovie
• quitPortfolio

You can find these functions in the first frame of the mobile_portfolio.fla file. To examine the code, open mobile_portfolio.fla, select the first frame in the Actions layer, and choose Window > Actions from the menu.

The menu_mc movie clip contains sample invisible buttons that use of the getMovie, clearMovie, and quitPortfolio functions. Here's the menu_mc movie clip on the main timeline: Figure 3. menu_mc movie clip in maintimeline

To examine the code on these buttons, double-click the menu_mc movie clip on the main timeline. (It is the small triangle in the upper left corner of the canvas.) To enter the timeline of the menu movie clip, select one of the buttons on the invisible buttons layer in the "on" section of the timeline (Frames 6-10), and choose Window > Actions.

The initMobilePortfolio Function

Depending on your mobile device, the screen dimensions of your display may be landscape (wider than tall) or portrait (taller than wide). When building your portfolio, orient your content similarly. The first thing you need to do is to set up the framework for your mobile portfolio to play in. The initMobilePortfolio function defines the playback orientation, the background color of your movie, and some other settings. Here's a step-by-step guide to coding the function:

1. Use the function with the following two parameters:

	initMobilePortfolio ("horizontal", "vertical"); 
	       
	           

2. Declare the initMobile function and define two orientation parameters as follows:

	function initMobilePortfolio (menuOrientation, uprightOrientation) {
	       
	           

3. Store the values for widths and heights of the movie clips you will load SWFs into:

	horizontalPlaceHolderWidth = horizontalPlaceHolderTemplate._width;
	horizontalPlaceHolderHeight = horizontalPlaceHolderTemplate._height;
	verticalPlaceHolderWidth = verticalPlaceHolderTemplate._width;
	verticalPlaceHolderHeight = verticalPlaceHolderTemplate._height;
	           

4. Duplicate the menu at a higher level so that it will appear above the movies you are going to load:

	duplicateMovieClip ("menuTemplate", "menu", 100);
	       
	           

5. Hide the menu template movie clip:

	menuTemplate._visible = false;
	       
	       

6. Store the value of the uprightOrientation parameter:

	standardOrientation = uprightOrientation;
	       
	       

7. Store the y position after the rotation for the menu or loaded movie so that if the user rotates the mobile device, the movie will display properly while you hold it sideways:

	if (standardOrientation == "vertical") {
	   yPositionAfterRotation = verticalPlaceHolderHeight;
	} else {

	   yPositionAfterRotation = horizontalPlaceHolderHeight;
	}
	       

8. Rotate the menu if your portfolio should display sideways:

	isRotateMenu = (menuOrientation != standardOrientation);
	if (isRotateMenu) {
	   menu._rotation = -90;
	   menu._y = yPositionAfterRotation;
	}
	       

9. Set the default background color that the app uses whenever you clear a movie:

	defaultBackgroundColor = 0x000000;
	       
	       

10. Instantiate a color object for the background color:

	background_color = new color (solidColoredBackground);
	       
	       

11. Finish the function:

	} //End function initMobilePortfolio
	       

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

	//menuOrientation - How you want the menu displayed. Landscape ("horizontal") or Portrait ("vertical")
	//Accepts either "vertical" or "horizontal" as parameters
	//uprightOrientation - When you hold the device in its regular position, is it Landscape ("horizontal") or Portrait ("vertical")
	//Accepts either "vertical" or "horizontal" as parameters
	function initMobilePortfolio (menuOrientation, uprightOrientation) {
	//Store the values of the widths and heights of the movie clips we are going to load our swfs into
  horizontalPlaceHolderWidth = horizontalPlaceHolderTemplate._width;
  horizontalPlaceHolderHeight = horizontalPlaceHolderTemplate._height;
  verticalPlaceHolderWidth = verticalPlaceHolderTemplate._width;
  verticalPlaceHolderHeight = verticalPlaceHolderTemplate._height;
  
  //We duplicate the menu template to a higher depth is so that it will appear above
  //the movies we are going to load
  duplicateMovieClip ("menuTemplate", "menu", 100);
	//Hide our menu template
  menuTemplate._visible = false;
  
  standardOrientation = uprightOrientation;
  
	//Store the y position that for the menu or loaded movie if it needs to be
	//rotated so that it will display on your device while you hold it sideways
	if (standardOrientation == "vertical") {
	   yPositionAfterRotation = verticalPlaceHolderHeight;
	} else {
	   yPositionAfterRotation = horizontalPlaceHolderHeight;
	}
	
	//Rotate the menu if your portfolio is supposed to be displayed sideways
	isRotateMenu = (menuOrientation != standardOrientation);
	if (isRotateMenu) {
	   menu._rotation = -90;
	   menu._y = yPositionAfterRotation;
	}
	   
	//Set the default background color - this gets used whenever you clear a movie
	defaultBackgroundColor = 0x000000;
	
	//Instantiate a color object for the background color
	background_color = new color (solidColoredBackground);
	}//End function initMobilePortfolio 
	       

The getMovie Function

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. (top^)