Create Macromedia Flash personal information for mobile devices
[An Error Occurred While Processing this Directive]
"A picture is like a thousand words" - Napoleon.
Have you ever explained what you do? I have experienced such an experience in the past. The mobile device is put into the mobile device until personal information is placed.
Imagine how the example can be taken at any time if you can use the best Macromedia Flash works. If you are developing Macromedia Flash applications for mobile device new platforms, you are likely to be difficult to explain to our customers know what your work is. Creating mobile personal information for the best Macromedia Flash work is a good way, which can easily show your work and make people excited for mobile Macromedia Flash. If you have the idea of creating a mobile Macromedia Flash project, create a personal information is a great way to enter the mobile Macromedia Flash design.
Do you want to leave a good first impression? Mobile personal information will help customers impressed and obtain timely feedback on the work. It also helps establish a business and enables you to move the role of Macromedia Flash project experts.
System Requirements
To complete this tutorial, you need to install the following software and files:
Macromedia Flash MX
Try purchase
Tutorial and sample file:
Windows (68 KB) Macintosh (68 KB) Download Sample Code (8 KB)
The benefits of moving personal information
"What's your job?"
What would people ask what people will ask when I meet you? After exchanged your name, they will ask: "What do you do?" Have you had such an experience, that is, when you try to explain what is "interactive media", the other party feels confused?
This will illustrate the importance of mobile personal information. Direct display of interaction is much easier than verbal explanation. People's reaction to visual samples is stronger than the response to oral description. Personal information that is easy to access can show your work in a way that cannot be expressed.
Next, when someone asked what you did, you can answer this: "I have to do interactive content development. The content I created can be used for Internet and mobile devices, just like this." Then, open the device and display personal information to him. Look.
Leave the best first impression
Sophisticated mobile personal information can demonstrate your professionalism. It shows that you are willing to try new technologies. Mobile personal information will be unexpected - if there is such personal information, it can show:
You have surpassed a typical brochure, business card or website, etc. Ordinary publicity forms. You actively show your work in innovation. You pay more attention to and spend enough time to prolate personal information. You are at the forefront of the technology trend.
The mobile personal information itself also shows that you have the ability to help our customers do the above.
Get timely feedback
Trying to respond to the reaction when you move the content in your personal information. Display different types of items. See what content can trigger the best response. Modify the display, join the most attractive and most relevant content for specific customers.
For example, I have done the following types of items: interactive data visualization, games, animations, applications, CD ROMs, and test work. When you show the content in your personal information, I always ask where the other party works in the industry; then I will try to show him / her to the most relevant example.
If I showed an example of a very creative director, I found that he felt that the example was not "avant-garde", then I might show him some experimental works. If I showcased the experimental work to a businessman, I found that she felt too "strange", then I might show her some application works, plus some examples of interactive data visualization.
Create business using mobile personal information
Actively establish an exchange channel
Have you had these experiences below? Give some a business card, I talked to him several weeks later, but he still didn't see your website. Or give someone's business card, but I was lost by her. When you have a famous film to others, you are passively self-recommend. It is expected that customers may never call you, or view your online personal information. Instead, you should show them personal information when you meet customers. Active let them view your personal information. Seize the opportunity
If he / her reaction is good or interested in some type of sample, the customer's interest should be utilized. About a time to talk about him / her office. You will be better for possible interviews or personal information display. Because you have seen him / her response to your personal information, tailor-made demo content, the part of the most interesting part is included.
Mobile work positioning
If you display the content in your personal information, you will be positioned to the role of the mobile content designer and / or developer. When people start the mobile project, they will think of your person who can complete the mobile project. You no longer just web designers or developers. There is a fixed way of thinking: always classify the other party into a particular role. You may wish to ask a position in the booming mobile industry. If the customer starts planning a mobile project, you should take the initiative. Guide them to think about the mobile solution.
Mobile comparison with desktop / notebook: Different experience
"Shocked" effect
Mobile Macromedia Flash project workers have encountered an interesting phenomenon. The customer who watches the content on the mobile device will be surprised - absolutely produces a "shock" effect.
It will often hear such a comment. "Do you have all this?" If the same content is displayed on a notebook or desktop computer, the reaction will be placed. We prefer to see people's response to mobile content on mobile devices. They often think that design and development for small devices will be more difficult because the screen size is limited, and the processor processing has little handle, and it is an emerging field.
Show the potential of mobile projects
People often stay in "Application Mode" for mobile devices. That is, the device is used to perform a specific task. Most mobile users are not used to surfing or looking for content with equipment.
When presenting content on mobile devices, I often wait until I will tell others that I use Macromedia Flash. Even people in the technical industry often regard Macromedia Flash as "making web animation tools". I like to use content to leave a deep impression - then telling them that I use Macromedia Flash.
Personal Information Code: How to create your own mobile personal information
Simple and appropriate mobile development starting project
Creating mobile personal information is an initial attempt to enter the field of mobile development. If there is no experience in moving media development, this will be a good first project. If you have ready-made Macromedia Flash, you only need to display the same content on the device. There is no need to make new content from zero.
Mobile phone interface
Personal information applications created in this tutorial can load external SWF files. It will scale the content to suit the size of the mobile device as much as possible. It aligns movies in horizontal and vertical directions. If necessary, the device can also display the content when needed. View the specific file, first select Control / Test Movie to view the appearance and function of personal information:
Figure 1. Mobile personal information interface
Download the sample file set, get the full FLA, Mobile_PortFolio.fla, and some samples FLA and SWF movies to test personal information. Find a movie clip called Menu_MC in the Mobile_PortFolio.fla file. The movie clip contains a simple menu layout, as well as the sample button, which can load the external SWF to enter the personal information application.
Figure 2. MENU_MC movie clip, 10th frame.
Build a personal information code
Personal information application code contains four main functions:
Initmobileportfolio GetMovie Clearmovie Quitportfolio
These functions can be found in the first frame of the Mobile_PortFolio.fla file. To view the code, open Mobile_PortFolio.fla, select the first frame in the ActionS layer, then select Window> Actions from the menu. Menu_mc movie clips contains an invisible buttons for examples, which use the GetMovie, Clearmovie, and QuitportFolio functions. Here is the Menu_MC movie clip on the main timeline:
Figure 3. Menu_mc movie clips in the main timeline
To view the code of the button, double-click the Menu_MC movie clip on the main timeline. (The small triangle of the upper left corner.) To enter the timeline of the menu movie clip, select a button from the invisible button in the Timeline (Issue 6-10 frame) "on" section, then select Window> Actions.
InitMobilePortfolio function
Depending on the mobile device, the screen display size can be landscape (wide greater than height) or portrait (higher than wide). When constructing personal information, the direction of the content should be consistent. The first thing to do is to establish a working framework for mobile personal information. The initmobileportfolio function defines the play direction, the background color of the movie and some other settings. Here is a step-by-step guide to this function:
Use this function by the following two parameters:
Initmobileportfolio ("Horizontal", "Vertical");
Declare the INITMOBILE function and define two direction parameters as follows:
Function InitmobileportFolio (Menuorientation, Upright) {
Store the width and height value of the movie clip loaded with SWF:
HorizontalplaceHolderWidth = horizontalplaceholdertemplate._width;
HorizontalplaceholderHeight = horizontalplaceholdertemplate._height;
VerticalPlaceHolderWidth = VerticalPlaceHoldertemplate._width;
VerticalPlaceHolderHeight = VerticalPlaceholderTemplate._height;
Copy the menu to a higher layer to make it displayed on the movie to load:
DuplicateMovieClip ("MenuTemplate", "Menu", 100);
Hide menu template movie clip:
MenuTemplate._visible = false;
Store the value of the UprightorIntation parameter:
Standardorientation = UprightorIntation;
Store the menu or load the Y-axis position after the movie rotation so that the movie can still be displayed normally when the user side holds the mobile device.
IF (Standardorientation == "Vertical") {
YPositionAfter '' '' '' '' '' '' '
} else {
YpositionAfter '' '' '' '' '' '' '' '' '' '' '' '' '
}
If the personal information is to be displayed, the menu is rotated:
IsorotateMenu = (menuorientation! = standardorient); if (isrotateMenu) {
Menu._Rotation = -90;
Menu._y = ypositionafterrotation;
}
Set the default background color used by the application after clearing the movie:
DEFAULTBACKGROUNDCOLOR = 0x000000;
Instantian color object as a background color:
Background_color = New color (SolidColoredBackground);
End function:
} // end function initmobileportfolio
Below is the code for the complete note of the INITMOBILEPORTFOLIO function:
// Menuorientation - You want the menu to display. Landscape ("horizontal") or Portrait ("Vertical")
// Accept "Vertical" or "Horizontal" as a parameter
// UPRIGHTORIENTATION - When the device is placed in a normal position, it is Landscape ("Horizontal") or Portrait ("Vertical")
// Accept "Vertical" or "Horizontal" as a parameter
Function InitmobileportFolio (Menuorientation, Upright) {
// Store the width and height value of the movie loaded with SWF
HorizontalplaceHolderWidth = horizontalplaceholdertemplate._width;
HorizontalplaceholderHeight = horizontalplaceholdertemplate._height;
VerticalPlaceHolderWidth = VerticalPlaceHoldertemplate._width;
VerticalPlaceHolderHeight = VerticalPlaceholderTemplate._height;
// Copy the menu template to a higher layer
// to make it displayed on loading movies
DuplicateMovieClip ("MenuTemplate", "Menu", 100);
// Hide Our Menu Template
MenuTemplate._visible = false;
Standardorientation = UprightorIntation;
// Store the Y-axis position of the menu or loading the movie
// When the device side is inverted, it can be displayed normally.
IF (Standardorientation == "Vertical") {
YPositionAfter '' '' '' '' '' '' '
} else {
YpositionAfter '' '' '' '' '' '' '' '' '' '' '' '' '
}
// If the personal information is to be displayed, the menu is rotated.
IsoRotateMenu = (Menuorientation! = Standardorientation);
IF (isrotateMenu) {
Menu._Rotation = -90;
Menu._y = ypositionafterrotation;
}
/ / Set the default background color - use it after clearing the movie
DefaultbackgroundColor = 0x000000; // Instantize color object as a background color
Background_color = New color (SolidColoredBackground);
} // end function initmobileportfolio
GetMovie function
This function is called when a button is triggered in the personal information to load the movie. It will do all work. GetMovie function:
Normal display movies reduce the movie to maximum possible size and vertical alignment movies in the case of non-distorted movies, and the background color of the briefcase is matched with the color of the film: loading the movie
Here is a step-by-step guide to this function:
Declare the getMovie function and define the parameters as follows:
Function GetMovie (Filename, Orientation, FileWidth, FileHeight, FilebackGroundColor, Horizontalalignment, VerticalALIGNMENT) {
Depending on the direction (horizontal or vertical), set the width and height of the SWF and the horizontal placeholder, and the name is Placeholder. Copy the placeholder to the same depth to immediately override the original placeholder, which is easier than the different placeholders (vertical or horizontal) that are always useful. Insert a TRACE statement to give a warning at an undefined movie direction 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");
}
Reset the placeholders in the upper left corner:
PlaceHolder._x = 0;
PlaceHolder._y = 0;
Decide whether to narrow the movie. (If the width or height of the movie is larger than the PlaceHolder movie clip, it needs to be reduced.) Store the size ratio of the loading movie relative to the PlaceHolder movie:
Var FileTooorientationWidthratio = FileWidth / OrientationWidth;
Var FileTooorientationHeightratio = FileHeight / OrientationHeight;
Var isloadedMoviewIderthanPlaceHolder = FileTooorientationWidthratio> 1;
Var isloadedMovietallerthanPlaceHolder = FileTooorientationHeightratio> 1;
Var isscaleLoadedMovie = IsloadedMoviewIDerthanPlaceHolder || IsloadedMovietArthanPlaceHolder;
If you need to reduce the loading movie, it is determined that the maximum available width or maximum can be reduced. If the width of the movie and the PlaceHolder movie clip is greater than or equal to its height ratio, the maximum available width is reduced. Otherwise, it is reduced by maximum height. Reduce container movie editing in the PlaceHolds movie:
IF (IsscaleLoadedMovie) {
IsscaleByWidthratio = (FileTooorientationWidthratio> = FiletooorientationHeightratio);
IF (IsscaleByWidthratio) {
Var amounttoscale = filetooorientationWidthratio;
} else {
Var amounttoscale = filetooorientationHeightratio;
}
Var xscalefactor = Math.Floor ((100 / Amounttoscale));
VAR YscaleFactor = Math.Floor ((100 / Amounttoscale));
PlaceHolder.Container._xscale = xscalefactor;
PlaceHolder.Container._yscale = yscalefactor;
}
Determine the width of the loaded movie and zoom out:
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 THEING W / O a CORRECT Alignment Parameter");
}
Determine the height of the loading movie and make vertical reduction:
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 THEING W / O a CORRECT Alignment Parameter");
}
Set the background color of the personal information matches the color of the loading movie:
Background_color.setrgb (FilebackGroundColor);
Rotate the movie if the direction of the loading movie is different from the equipment standard direction.
Var isrotateLoadedMovie = (Orientation! = StandardorIntation);
IF (isrotateLoadedMovie) {
PlaceHolder._Rotation = -90;
PlaceHolder._y = YPositionAfterRotation;
}
Load movie:
LoadMovie (FileName, "PlaceHolder.Container);
End function:
} // end function getMovie
Below is the complete and annotated code with the getMovie function:
// File Name - The file name of the SWF file to be loaded
// Direction - "Vertical" or "Horizontal". Which template is loaded in SWF and how movie is displayed.
// FileWidth - The original width of the SWF is loaded. Open FLA and select Modify / Document to find it.
// FileWidth - Load the original height of SWF. Open FLA and select Modify / Document to find it.
// FileBackgroundColor-RGB code, movie background color. Similarly, open FLA and select Modify / Document to find.
// HorizontalaLAlignment- "Left", "center" or "right". You want the file level how to align.
// VerticalAlignment- "TOP", "middle" or "bottom". You want the file to be aligned vertically.
Function GetMovie (Filename, Orientation, FileWidth, FileHeight, FilebackGroundColor, Horizontalalignment, VerticalALIGNMENT) {
/ / Set the width and height of SWF according to the direction of use
// Copy the vertical or horizontal placeholder, named example is "PlaceHolder"
// Copy to the same depth to override the previous placeholder.
// This is easier to compare the placeholder (vertical or horizontal) that is always using.
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;
// See if you want to narrow the movie, if needed, how to reduce
Var FileTooorientationWidthratio = FileWidth / OrientationWidth;
Var FileTooorientationHeightratio = FileHeight / OrientationHeight;
Var isloadedMoviewIderthanPlaceHolder = FileTooorientationWidthratio> 1;
Var isloadedMovietallerthanPlaceHolder = FileTooorientationHeightratio> 1;
Var isscaleLoadedMovie = IsloadedMoviewIDerthanPlaceHolder || IsloadedMovietArthanPlaceHolder;
IF (IsscaleLoadedMovie) {
/ / Determine the shrinkage of the should be reduced vertically
IsscaleByWidthratio = (FileTooorientationWidthratio> = FiletooorientationHeightratio);
IF (IsscaleByWidthratio) {
Var amounttoscale = filetooorientationWidthratio;
} else {
Var amounttoscale = filetooorientationHeightratio;
} // endiff (IsscaleBywidthratio)
Var xscalefactor = Math.Floor ((100 / Amounttoscale));
VAR YscaleFactor = Math.Floor ((100 / Amounttoscale));
// Note that the PlaceHolder has not been reduced. The reduced movie clip instance called "Container" is called.
PlaceHolder.Container._xscale = xscalefactor;
PlaceHolder.Container._yscale = yscalefactor;
} // end if (IsscaleLoadedMovie)
/ / Horizontally aligned movies
Var widthofloadedMovie = (FileWidth * (XscaleFactor / 100)) || FileWidth;
Switch (horizontalalignment) {
Case "Left":
// No matter what you do. Default, horizon, level
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 THEING W / O a CORRECT Alignment Parameter");
} // End switch (horizontalalignment)
// Vertical alignment movie
Var HeightofloadedMovie = (FileHeight * (YscaleFactor / 100) || FileHeight;
Switch (VerticalAlignment) {
Case "TOP":
// No matter what you do. Default situation, vertical
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 THEING W / O a CORRECT Alignment Parameter");
} // End Switch (VerticalAlignment)
// Set the background color matching the color of the loading movie
Background_color.setrgb (FilebackGroundColor);
// If you need, rotate the movie
Var isrotateLoadedMovie = (Orientation! = StandardorIntation);
IF (isrotateLoadedMovie) {
PlaceHolder._Rotation = -90;
PlaceHolder._y = YPositionAfterRotation;
} // end if (isrotateloadedMovie)
// Load SWF
LoadMovie (FileName, "PlaceHolder.Container);
} // end function getMovie
ClearMovie function
Sometimes you want to delete movies played in your personal information. The Clearmovie function will load an empty movie to play position and change the personal information background color matching the default personal information background color. Here is a step-by-step guide to this function: declaration function:
Function clearmovie () {
If you use PlaceHold, loading empty movies into the container:
IF (PlaceHolder) {
LoadMovie ("Movies / Null.swf", "PlaceHolder.Container);
} // end if (PlaceHolder)
Set the background color of your personal information:
Background_color.sergb (DefaultBackgroundColor);
End function:
} // End Function Clearmovie
Below is the code of the Clearmovie function full note:
Function clearmovie () {
IF (PlaceHolder) {
LoadMovie ("Movies / Null.swf", "PlaceHolder.Container);
} // end if (PlaceHolder)
Background_color.sergb (DefaultBackgroundColor);
} // End Function Clearmovie
QuitportFolio function
Trigger the Quit button will call the QuitportFolio function. The way to exit the briefcase depends on the mobile device used. Here is a step-by-step guide to this function:
Declaration function:
Function QuitportFolio () {
Insert any code that you want to execute when you exit the function. Reference equipment CDK (Content Development Kit). End function:
} // end function quitportfolio
Below is the code of the QuitportFolio function full band:
Function QuitportFolio () {
/ / Place any code that needs to be performed when you exit the briefcase
} // end function quitportfolio
Adapt to mobile personal information to display SWF
Concentrate all SWF movies to be displayed on mobile personal information. Copy them into a directory called Movies, which is in the same directory with the mobile_portfolio.fla file. Change the path of SWF in the button action to load the movie. Adjust all the necessary parameters, such as the original width, height, color, the direction, alignment, and so on. For example, the following is the code of a button in the INVISIBLE button on the INVISIBLE button:
ON (PRESS) {
_Parent.getmovie ("Movies / Movie9.swf", "Vertical", 500, 200, 0x990066, "Right", "Bottom");
}
Deploy and run the mobile briefcase
After testing the briefcase on your desktop or laptop, you can transplant it to your mobile device. Please refer to the CDK of the specific device (Content Development Kit), because the process will vary from the device. You can find information about the Content Development Kit at the Macromedia Devnet mobile theme center.
in conclusion
Mobile personal information can help you easily explain your own work. It can help you get your business and make you in an exciting Macromedia Flash project.
The works of mobile devices can also look at the current and potential customers to move the content of the mobile content well. Watching content on mobile devices is usually able to leave a deeper impression. It can speculate on the customer's desire to see if they are interested in providing mobile content without having to put too much time for new development. Moreover, this can also prove that your new mobile equipment you bought is worthwhile! A drawing of thousands of words, then you can imagine the value of the best work in moving personal information with you. Create your own mobile briefcase today.
About author
Nader Nejat is the founder of Omegamedia *, which helps people express videos and technologies through interactive media. He designs and develops super media applications, show, games, and custom software solutions for companies such as Nike, Sony, MTV, Visa and NBC. Nader specializes in driving multimedia applications that can bring people who can bring people to win the interaction. He also professor in the Multimedia Teaching Plan in San Francisco State University. He first developed and taught the program of mobile device Macromedia Flash: Macromedia Flash design for mobile devices.
