创建用于移动设备的 Macromedia Flash 个人信息
[an error occurred while processing this directive]“一幅图胜似千言万语”－拿破仑。
你是否曾经很难解释清楚自己做什么工作？我过去常有这样的经历。直到将个人信息放入了移动设备。
设想一下，如能把自己最好的 Macromedia Flash 作品示例随时带在身边将会怎样。如果你在开发用于移动设备新平台的 Macromedia Flash 应用程序，你很可能难以向客户解释清楚自己的工作到底是什么。为最好的 Macromedia Flash 作品创建移动个人信息是一个很好的办法，这样可以很容易地展示你的工作，并让人们为移动 Macromedia Flash 内容而兴奋。如果你有过创建移动 Macromedia Flash 项目的想法，创建个人信息是进入移动 Macromedia Flash 设计领域的极好途径。
你是否希望给人留下好的第一印象？移动个人信息将帮助给客户留下深刻印象，并获得关于作品的及时反馈。它还能帮助建立业务，并使你定位于移动 Macromedia Flash 项目专家的角色。
系统要求
要完成本教程，需安装以下软件和文件：
Macromedia Flash MX
试用
购买教程和示例文件：
Windows移动个人信息的好处
“你做什么工作？”
人们初次遇见你时会先问什么？交换姓名后，他们会问：“你做什么工作？”你是否有过这样的经历，即当你试图解释什么是“交互媒体”时，对方感到疑惑不解？
这就能说明移动个人信息的重要意义。直接展示交互内容要比口头解释容易得多。人们对可视样例的反应要强于对口头描述的反应。易于访问的个人信息能够以言语无法表达的方式展示你的工作。
下次有人问你做什么工作时，你可以这样回答：“我做得是交互内容开发。我创作的内容可用于因特网和移动设备，就像这个。”然后，打开设备并展示个人信息给他看。
留下最好的第一印象
制作精良的移动个人信息可向客户展示你的职业素养。它表明你愿意尝试新型技术。移动个人信息会出乎人们的意料－如果有一个这样的个人信息，就可表明：
- 你已经超越典型的小册子、名片或网站等普通宣传形式。
- 你以创新的方法积极展示自己的作品。
- 你足够关注并花了足够的时间来编排个人信息。
- 你处在技术潮流的最前沿。
移动个人信息本身也表明，你有能力帮助客户做到上述几点。
获得及时的反馈
展示移动个人信息中的内容时，留心其引起的反应。展示不同类型的项目。看哪些内容能引发最佳反应。修改展示内容，加入对特定客户最具吸引力和最为相关的内容。
例如，我曾做过下列类型的项目：交互数据可视化、游戏、动画、应用程序、CD ROM 和试验工作。展示移动个人信息中的内容时，我总是问对方在哪一类行业中工作；然后我会尽量向他/她展示最为相关的例子。
如果我在向一位很有创意的导演展示动画例子时发现他觉得例子不够“前卫”，那么我也许会向他展示一些试验性的作品。如果我在向一位商人展示试验性作品时发现她觉得过于“奇特”，那么我也许会向她展示一些应用程序作品，再加上一些交互数据可视化的例子。
使用移动个人信息开创业务
主动建立交流渠道
你是否有过下面的这些经历？给了某人名片，几周后又与他谈过话，可他还是没有去看你的网站。或者给了某人名片，却被她搞丢了。当你递名片给别人时，你是被动地自我推荐。预期客户也许永远不会给你打电话，或者查看你的在线个人信息。相反，你应该在会见客户的时候向他们展示个人信息。主动让他们查看你的个人信息。
抓住机会
如果他/她反应不错或者对某种类型的样品感兴趣，就应把客户的兴趣加以利用。约个时间到他/她的办公室详谈。对于可能的面谈或者个人信息展示，你会准备得更好。因为你已经看到了他/她对你个人信息的反应，量身定制演示内容，将客户最感兴趣的部分包含在内。
移动工作定位
如果展示移动个人信息中的内容，则会将你定位于移动内容设计者和/或开发者的角色。当人们启动移动项目时，他们会想到你这位能完成移动项目的人。你不再仅仅是 web 设计者或开发者。人们有一种固定的思维方式：总是把对方归类到某个特定的角色中。不妨就在蓬勃发展的移动产业中求得一份职位。如果客户在开始规划移动项目，你应主动出击。引导他们思考移动方案。
移动相比较于桌面/笔记本：不同的体验
“震惊”效果
移动 Macromedia Flash 项目工作者曾遇到过一个有趣的现象。在移动设备上观看内容的客户会惊讶不已－绝对能产生“震惊”效果。
经常会听到这样的评论，“这小东西能做到所有这些？”如果在笔记本或桌面计算机上展示同样的内容，反应就会平淡许多。我们更希望看到人们对移动设备上所展示移动内容的反应。他们常觉得为小型设备进行设计和开发会更难，因为屏幕大小有限、处理器处理能力小，而且是一个新兴领域。
展示移动项目的潜力
人们对移动设备的使用常停留在“应用模式”。即用设备执行具体的任务。大多数移动用户不习惯用设备上网冲浪或寻找内容。
在移动设备上展示内容时，我常等到展示完毕才会告诉别人我使用的是 Macromedia Flash。即使是技术行业中的人也常把 Macromedia Flash 看作是“制作 web 动画的工具”。我喜欢先用内容给人们留下深刻印象 － 然后告诉他们我使用的是 Macromedia Flash。
个人信息代码：如何创建自己的移动个人信息
简单合适的移动开发起步项目
创建移动个人信息是进入移动开发领域的初步尝试。如果没有移动介质开发的经验，这会是很好的第一个项目。如果有现成的 Macromedia Flash 作品，你只需将同样的内容在设备上加以展示。无须从零开始制作新内容。
移动电话接口
本教程中创建的个人信息应用程序可加载外部 SWF 文件。它将缩放内容以尽可能适合移动设备的大小。它沿水平和竖直方向对齐电影。如果必要，设备侧拿时也可显示内容。查看具体文件前，先选择 Control/Test Movie 查看个人信息的外观和功能：
图 1. 移动个人信息界面
下载示例文件集，获得完整的 FLA、mobile_portfolio.fla，以及一些示例 FLA 和 SWF 电影，以测试个人信息。在 mobile_portfolio.fla 文件中找到一个叫 menu_mc 的电影剪辑。该电影剪辑包含一个简单的菜单布局，还有示例按钮，可加载外部 SWF 进入个人信息应用程序。
图 2. menu_mc 电影剪辑，第 10 帧。
构建个人信息代码
个人信息应用程序代码包含四个主要函数：
- initMobilePortfolio
- getMovie
- clearMovie
- quitPortfolio
可在 mobile_portfolio.fla 文件的第一帧中找到这些函数。要查看代码，打开 mobile_portfolio.fla，在 Actions 层中选中第一帧，然后从菜单中选择 Window > Actions。
menu_mc 电影剪辑包含示例的不可见按钮，这些按钮使用了 getMovie、clearMovie 和 quitPortfolio 函数。下面是主时间线上的 menu_mc 电影剪辑：
图 3. 主时间线中的 menu_mc 电影剪辑
要查看按钮的代码，在主时间线上双击 menu_mc 电影剪辑。（画布左上角的小三角形。）要进入菜单电影剪辑的时间线，从时间线（第 6 - 10帧）“on”部分中的不可见按钮层选中一个按钮，然后选择 Window > Actions。
initMobilePortfolio 函数
根据移动设备的不同，屏幕显示尺寸可以是 landscape （宽大于高）或者 portrait （高大于宽）。构建个人信息时，内容的方向应一致。要做的第一件事是为移动个人信息建立工作框架。initMobilePortfolio 函数定义播放方向、电影的背景色和一些其它设置。下面是对该函数进行编码的分步指南：
-
通过以下两个参数使用该函数：
initMobilePortfolio ("horizontal", "vertical"); -
声明 initMobile 函数并如下定义两个方向参数：
function initMobilePortfolio (menuOrientation, uprightOrientation) { -
存储加载 SWF 的电影剪辑的宽度和高度值：
horizontalPlaceHolderWidth = horizontalPlaceHolderTemplate._width; horizontalPlaceHolderHeight = horizontalPlaceHolderTemplate._height; verticalPlaceHolderWidth = verticalPlaceHolderTemplate._width; verticalPlaceHolderHeight = verticalPlaceHolderTemplate._height;
-
复制菜单到更高一层，以使其显示在要加载的电影之上：
duplicateMovieClip ("menuTemplate", "menu", 100); -
隐藏菜单模板电影剪辑：
menuTemplate._visible = false;
-
存储 uprightOrientation 参数的值：
standardOrientation = uprightOrientation;
-
存储菜单或者加载电影旋转后的 y 轴位置，以使得用户侧拿着移动设备的情况下，电影仍能正常显示：
if (standardOrientation == "vertical") { yPositionAfterRotation = verticalPlaceHolderHeight; } else { yPositionAfterRotation = horizontalPlaceHolderHeight; } -
如个人信息要侧倒显示，旋转菜单：
isRotateMenu = (menuOrientation != standardOrientation); if (isRotateMenu) { menu._rotation = -90; menu._y = yPositionAfterRotation; } -
设置清除电影后应用程序使用的默认背景色：
defaultBackgroundColor = 0x000000;
-
实例化颜色对象作为背景色：
background_color = new color (solidColoredBackground);
-
结束函数：
} //End function initMobilePortfolio
下面是 initMobilePortfolio 函数完整带注释的代码：
//menuOrientation - 你想要菜单如何显示。Landscape （“horizontal”） 还是 Portrait （“vertical”）
//接受“vertical”或者“horizontal”作为参数
//uprightOrientation - 当设备置于正常位置时，是 Landscape （“horizontal”）还是 Portrait （“vertical”）
//接受“vertical”或者“horizontal”作为参数
function initMobilePortfolio (menuOrientation, uprightOrientation) {
//存储加载 swf 的电影的宽度和高度值
horizontalPlaceHolderWidth = horizontalPlaceHolderTemplate._width;
horizontalPlaceHolderHeight = horizontalPlaceHolderTemplate._height;
verticalPlaceHolderWidth = verticalPlaceHolderTemplate._width;
verticalPlaceHolderHeight = verticalPlaceHolderTemplate._height;
//复制菜单模板到更高一层
//以使其显示在加载电影之上
duplicateMovieClip ("menuTemplate", "menu", 100);
//Hide our menu template
menuTemplate._visible = false;
standardOrientation = uprightOrientation;
//存储菜单或加载电影的 y 轴位置
//当设备侧倒时，可正常显示
if (standardOrientation == "vertical") {
yPositionAfterRotation = verticalPlaceHolderHeight;
} else {
yPositionAfterRotation = horizontalPlaceHolderHeight;
}
//如个人信息要侧倒显示，旋转菜单
isRotateMenu = (menuOrientation != standardOrientation);
if (isRotateMenu) {
menu._rotation = -90;
menu._y = yPositionAfterRotation;
}
//设置默认背景色－清除电影后会用到
defaultBackgroundColor = 0x000000;
//实例化颜色对象作为背景色
background_color = new color (solidColoredBackground);
}//End function initMobilePortfolio
触发移动个人信息中某个按钮以加载电影时，调用此函数。它会完成所有工作。getMovie 函数：
- 正常显示电影
- 在不扭曲的情况下将电影缩小为最大可能尺寸
- 水平和垂直对齐电影
- 在必要时旋转加载的电影
- 设置公文包的背景色与加载电影的颜色相配：
- 加载电影
下面是对该函数进行编码的分步指南：
-
声明 getMovie 函数，并如下定义参数：
function getMovie (fileName, orientation, fileWidth, fileHeight, fileBackgroundColor, horizontalAlignment, verticalAlignment) { -
根据使用的方向（水平或垂直），设置 SWF 的宽度和高度复制垂直或水平占位符，并命名实例为 placeHolder。复制占位符到同样的深度，以立即覆盖掉原有占位符，这要比总是跟踪正在使用的不同占位符（垂直或水平）更为容易。插入一条 trace 语句，以在未定义电影方向为水平或垂直时给出警告。
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"'); } -
重置左上角的占位符：
placeHolder._x = 0; placeHolder._y = 0;
-
决定是否要缩小电影。（如果加载电影的宽度或者高度大于 placeHolder 电影剪辑，需进行缩小。）存储加载电影相对于 placeHolder 电影的尺寸比：
var fileToOrientationWidthRatio = fileWidth/orientationWidth; var fileToOrientationHeightRatio = fileHeight/orientationHeight; var isLoadedMovieWiderThanPlaceHolder = fileToOrientationWidthRatio > 1; var isLoadedMovieTallerThanPlaceHolder = fileToOrientationHeightRatio > 1; var isScaleLoadedMovie = isLoadedMovieWiderThanPlaceHolder || isLoadedMovieTallerThanPlaceHolder;
-
如需缩小加载电影，确定按最大可用宽度还是最大可用高度进行缩小。如果电影与 placeHolder 电影剪辑的宽度比大于或等于其高度比，则按最大可用宽度缩小。否则，按最大可用高度进行缩小。缩小 placeHolder 电影剪辑内的容器电影剪辑：
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; } -
确定加载电影的宽度并做水平缩小：
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"); } -
确定加载电影的高度并做垂直缩小：
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"); } -
设置个人信息的背景色与加载电影的颜色相配：
background_color.setRGB (fileBackgroundColor);
-
如果加载电影的方向与设备标准方向不同，则旋转电影：
var isRotateLoadedMovie = (orientation != standardOrientation); if (isRotateLoadedMovie) { placeHolder._rotation = -90; placeHolder._y = yPositionAfterRotation; } -
加载电影：
loadMovie(fileName, "placeHolder.container");
-
结束函数：
}//End function getMovie
下面是 getMovie 函数完整、带注释的代码：
//文件名－要加载的 SWF 文件的文件名
//方向－“vertical”或“horizontal”。SWF 加载进哪个模板中以及电影如何显示。
//fileWidth－加载 SWF 的原始宽度。打开 FLA 并选择 MODIFY/DOCUMENT 可找到。
//fileWidth－加载 SWF 的原始高度。打开 FLA 并选择 MODIFY/DOCUMENT 可找到。
//fileBackgroundColor－rgb 代码，电影的背景色。同样，打开 FLA 并选择 MODIFY/DOCUMENT 可找到。
//horizontalAlignment－“left”、“center”或“right”。你希望文件水平如何对齐。
//verticalAlignment－“top”、“middle”或“bottom”。你希望文件垂直如何对齐。
function getMovie (fileName, orientation, fileWidth, fileHeight, fileBackgroundColor, horizontalAlignment, verticalAlignment) {
//根据使用的方向，设置 SWF 的宽度和高度
//复制垂直或水平占位符，命名实例为“placeHolder”
//复制到同样深度，以立即覆盖以前的占位符。
//这要比总是跟踪正在使用的占位符（垂直或水平）更容易
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"');
}
//将占位符重置到左上角
placeHolder._x = 0;
placeHolder._y = 0;
//看是否要缩小电影，如果需要，如何缩小
var fileToOrientationWidthRatio = fileWidth/orientationWidth;
var fileToOrientationHeightRatio = fileHeight/orientationHeight;
var isLoadedMovieWiderThanPlaceHolder = fileToOrientationWidthRatio > 1;
var isLoadedMovieTallerThanPlaceHolder = fileToOrientationHeightRatio > 1;
var isScaleLoadedMovie = isLoadedMovieWiderThanPlaceHolder || isLoadedMovieTallerThanPlaceHolder;
if (isScaleLoadedMovie) {
//确定应水平缩小还是垂直缩小
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) );
//注意，placeHolder 未被缩小。被缩小的是其内的叫做“container”的电影剪辑实例。
placeHolder.container._xscale = xScaleFactor;
placeHolder.container._yscale = yScaleFactor;
}//End if (isScaleLoadedMovie)
//水平对齐电影
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");
}//End switch (horizontalAlignment)
//垂直对齐电影
var heightOfLoadedMovie = (fileHeight * (yScaleFactor/100)) || fileHeight;
switch (verticalAlignment) {
case "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)
//设置背景色与加载电影的颜色相配
background_color.setRGB (fileBackgroundColor);
//如果需要，旋转电影
var isRotateLoadedMovie = (orientation != standardOrientation);
if (isRotateLoadedMovie) {
placeHolder._rotation = -90;
placeHolder._y = yPositionAfterRotation;
}//End if (isRotateLoadedMovie)
//加载 SWF
loadMovie(fileName, "placeHolder.container");
}//End function getMovie
clearMovie 函数
有时候会想要删除个人信息中播放的电影。clearMovie 函数将加载一个空电影到播放位置，并改变个人信息背景色与缺省个人信息背景色相配。下面是对该函数进行编码的分步指南：
-
声明函数：
function clearMovie () { -
如使用 placeHolder，加载空电影到容器中：
if (placeHolder) { loadMovie("movies/null.swf", "placeHolder.container"); }//End if (placeHolder) -
设置个人信息的背景色：
background_color.setRGB (defaultBackgroundColor);
-
结束函数：
}//End function clearMovie
下面是 clearMovie 函数完整带注释的代码：
function clearMovie () {
if (placeHolder) {
loadMovie("movies/null.swf", "placeHolder.container");
}//End if (placeHolder)
background_color.setRGB (defaultBackgroundColor);
}//End function clearMovie
quitPortfolio 函数
触发 Quit 按钮将调用 quitPortfolio 函数。退出公文包的方式取决于所使用的移动设备。下面是对该函数进行编码的分步指南：
-
声明函数：
function quitPortfolio () { - 插入任何你希望在退出函数时执行的代码。参考设备的 CDK （内容开发工具包）。
-
结束函数：
}//End function quitPortfolio
下面是 quitPortfolio 函数完整带注释的代码：
function quitPortfolio () {
//在此放置任何需要在退出公文包时执行的代码
}//End function quitPortfolio
改编移动个人信息以显示 SWF
集中所有要在移动个人信息上显示的 SWF 电影。拷贝它们到一个叫 movies 的目录中，该目录与 mobile_portfolio.fla 文件在同一目录中。在按钮动作中改变 SWF 的路径，以加载电影。调整所有必须的参数，例如原始宽度、高度、颜色、要采用的方向、对齐，等等。举例说明，下面是 Invisible Buttons 层上 menu_mc 电影剪辑中一个按钮的代码：
on (press) {
_parent.getMovie ("movies/movie9.swf", "vertical", 500, 200, 0x990066, "right", "bottom");
}
部署和运行移动公文包
在桌面或笔记本电脑上测试公文包后，即可将其移植到移动设备。请参考具体设备的 CDK （内容开发工具包），因为随着设备不同，过程会有所不同。你可在 Macromedia DevNet 移动主题中心* 找到关于内容开发工具包的信息。
结论
移动个人信息能帮助你容易得说明自己的工作性质。它能帮助你得到业务，并使你在激动人心的 Macromedia Flash 项目中处于有利位置。
通过移动设备展示作品还能很好地查看当前和潜在客户对移动内容的反应。观看移动设备上的内容通常能够给人留下更深的印象。可以推测客户的欲望，看他们是否有意在不需投入太多时间进行新开发的情况下提供移动内容。而且，这也能很好地证明你买的新移动设备物有所值！
一幅画胜过千言万语，那么可以想象将最好的作品放在移动个人信息随身携带的价值。今天就创建自己的移动公文包。
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
