分享
 
 
 

使用Flash Lite将Flash动画移植到移动电话的最佳实践

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

去年 11 月我参加了在新奥尔良举行的 Macromedia MAX 大会,当我回到家时,我感到精疲力尽。我了解到很多关于 Macromedia 在集成 Flash 技术到移动设备方面的进展,这种集成能够带给移动用户丰富而且具有吸引力的体验,并且与浏览器上的体验同样令人印象深刻和可个性化。我第一次在移动电话上看到了真正令人印象深刻的内容,这些内容给电话本身也添彩不少。在大会上,Macromedia 还公布了第一届 Flash Lite 内容大赛。

在回家的路上,我开始考虑我们 Smashing Ideas 如何能够赢得大赛。回到办公室以后,我们决定找一些手机来,针对两个比赛项目创作内容:游戏和动画。对于动画类,我们决定将我们的得意之作“2001”放到手机上。“2001”是一部片长两分钟的动画,内容是我们的吉祥物机器人从非常高的自动贩卖机买糖的过程。要观看“2001”动画,点击 LCD 屏幕上的 Start 文本下方的电话小键盘。

当时,我们有一定的设备上开发经验:我们曾为 Pocket PC 平台开发过内容,并且熟悉 Flash Lite 支持的 Flash 4 ActionScript 语法。但是,我们并未意识到世界已经变得多小。在本文中,我将分享将“2001”动画移植到手机上(并赢得了最佳动画类内容大奖)所获得的经验。本文中提到的技巧同样适用于为移动设备创建新的游戏和应用程序。

Flash Lite CDK(可选)

针对开发人员的 Flash Lite CDK 下载

预安装有 Flash Lite 1.1 播放器的 Symbian 60 系列电话

教程和示例文件:从 Macromedia Flash Lite Exchange* 下载“2001”动画

必备知识:

本文面向具有 Flash 和 Flash 动画基本知识的开发者。有关 Flash Lite 的介绍,请阅读

开发 Macromedia Flash Lite 1.1 内容的最佳实践”或“Macromedia Flash Lite 1.1 介绍”。

Flash 最初是二维(字符)的动画工具,与今天的标准相比,当时的计算机非常慢 - 14.4K 是标准的连接速率。不奇怪的是,这一独特的内容类别同样适合于移动电话,今天的移动电话在带宽、内存限制等很多方面都类似于 10 年前的桌面计算机。

Flash 中的平滑动作往往要求较高的帧速率才能看起来平滑。您可以看到人们使用每秒 30、60 或甚至 100 帧的速率来显示平滑动作。在手机上试一下,您只能看到断断续续的显示,这决不是让人愉快的体验。

手工调整

我把成功地使用 Flash Lite 创作动画的秘密叫做手工调整,即手工调整每一个关键帧。现实生活中的很多运动并不是等量递增的,也不按照柔和的曲线进行。即使是,我们所感知到的也不是那样。您需要骗过人的眼睛,这样动画就显示在人眼期望它出现的位置,而不是根据某些数学上正确的计算得到的位置。不管您是否相信,我们眼睛看到的常常并不是真实情况。电影制作者,尤其是卡通艺术家,已经利用这一现象超过了一个世纪。当某个对象移动的速度不足以欺骗人的感知系统使其相信看到的是连续动作时,您需要利用所谓的视觉驻留现象,让眼睛看到它期望看到的运动。

在运动图形的范畴,这意味着:象通常一样,从各帧开始,然后逐帧手工调整动画,以得到希望用户体验的效果。工作量很大,但是很值得。

类似的,您必须在为移动设备创作动画渐变时调整自己的思维。例如,显示透明对象在屏幕上加速的渐变在桌面显示器上能够正常工作,但在手机上运动会很缓慢,破坏平滑渐变的效果。在这个例子中,您必须集中注意力在您真正看到的最重要的部分效果。最有可能发生的是,您甚至不会注意到有什么透明的东西在移动。先假设它是透明的,因为最终它会是透明的。然而,当对象移动时,您看到的是一个色块。

使这一渐变效果更加平滑的第一步是使用更为柔和的运动效果 - 例如,淡化对象的色彩或者降低其亮度,渐变完成后,仅设置一帧透明。对于平滑动画而言,对象可能仍然在图形上过于复杂。因此,您可能仅能够使用平整的色块完成实际渐变。您在这里创建的,在卡通术语中称为模糊(参见图 1)。您创建了眼睛对运动的感知,而不是以 50 fps 移动的对象。不要在渐变中更改透明度或使用其它图形特效;这会减缓动画的播放。更多有关技巧的信息,请阅读 Chris Georgenes 的文章“创建真实的模糊特效*”。

图 1:头从身体上断开,所有东西都被压扁,然后一切恢复原状。

除非您以前试过,否则您可能不会相信我。您可能认为用户将注意到屏幕上移动的对象并不是那个真正的对象。放心,用户不会注意到的(如果您做得正确)!

您需要意识到,您在这里创建的是运动,而不是一系列的静态图像。

夸张

可以从卡通动画中借来的另一个有用的技巧是夸张。使用这一技巧,您可以创作出感觉更“自然”的动画。夸张可以是模糊的一部分,或者简化从模糊到真实对象的渐变。例如,尝试以下练习:请某人迅速用手指向房间另一侧的某个对象。注意您认为他手指向的位置。重复几次,您就会注意到两件事:当手臂移动时,您没有看到它以某个速度运动 - 而是很模糊。当手臂伸开时,在某个特定的时刻手离对象的距离看起来要比实际距离更近,然后恢复到真实的位置。

在上面的在 Flash 动画中移动对象的例子中,您可能希望将对象移动地比应移动距离更远一些。然后,在下一帧将其放置到正确的位置 - 将它的运动想象为橡皮筋弹回原位。或者,当您创建放大特效时,在渐变结束时让对象稍大一些,然后将后面的一帧中将其设回需要的大小(见图 2)。

图 2:大脚变大,然后恢复正常大小。

您可以通过添加 Flash 特效更进一步:在对象完全变白的位置插入一帧。或者在一帧中,在对象上添加一个白色的长方形。这种“闪烁”能够吸引人眼的注意,然而您只能看到现在那里有什么,而看不到它是怎么到那里去的。换句话说,它帮助完成了渐变。

如果第一次尝试不成功,不要灰心 - 这需要多试几次。别忘了在目标设备上测试您的效果。

最后,全部完成后,您将在移动电话上得到 10 到 15 fps 的平滑动画。您甚至能够将这些技巧应用在桌面项目中。

开始之前,您必须了解目标屏幕有多小,不仅仅是分辨率,还包括物理尺寸。您设计的目标屏幕大概是半张名片那么大。

技术上,Symbian 60 系列电话的显示屏大小为 176 x 208 像素,这仅比其它具有 Flash Lite 功能的电话屏幕稍大一点。当然,如果您的应用程序未以全屏模式运行,您可以使用的空间更小。

应注意到,手机也使用垂直的高宽比。桌面内容通常使用类似于电视的 4:3 或者电影的 16:9 高宽比。在小的设备屏幕上,您不希望浪费一个像素,因此您必须仔细考虑动画的设计,以最大限度地利用有限的空间。

不要被设备的分辨率所蒙骗;这个值实际上不低。但是,由于每英寸点数 (DPI) 较高,每个像素都要比桌面显示器上的小。您可以通过比较手机和桌面显示器上播放的相同大小的 Flash 电影轻易地看出这一点。根据显示器的不同,手机显示只有屏幕显示的 70% 大小。

变化的光线状况使您所面对的问题更加复杂。手机无处不在 - 户内、户外、夜晚、白天。无论是对于移动 Flash 内容整体还是专门对于动画而言,这意味着您必须大胆 - 不要把注意力放在微小的细节上。用户甚至不会注意到细小的色彩渐变,除非他们无法断定他们看到的是什么。尽可能地使用对比。即使这会让您色彩敏感的眼睛不舒服,您的用户一定会感谢您。

对于动画,多使用特写镜头,同时避免使用全景视角(见图 3)。小屏幕中会丢失很多细节,即使您的动画在桌面计算机上看起来很棒,如果在手机上看不到的话,用户也无法欣赏到它。

图 3:特写镜头能够让您沉浸在内容中。

同样的定律对作品本身也成立 - 越简单越好。卡通形象总是比真实形象要可爱;形象的转化过程中抛弃了细节。您想向小屏幕中塞进得更多,就会失去更多。相反,专注于真正重要的事情,不要去管那些空间填充物。

在继续之前简单说一下测试。在实际设备上进行频繁测试至关重要。如果可能,也在其它设备上测试动画,因为设备在性能、色深和音效上都有不同。您不会在桌面计算机上遇到内存问题,甚至不会使用 Flash 中的模拟器来看看实际的设备性能。需要注意的是测试可以是相当痛苦的,因为您无法看到有多少内存被实际使用。不幸的是,这意味着很多反复试验。除非已经在目标设备上进行了测试,否则就不能说内容能够在设备上正常工作。为设备开发有时候意味着非常繁琐的工作。但是,想到您能够在今天的这些微小的设备上创作的东西,您会认识到努力是有回报的。

总之,要重视在目标设备上测试动画(或应用程序)。不要等到最后让人猝不及防。

您可以从零开始创作,本文提供的技巧能够帮助您得到一个好的开始。然而,Flash 的长处之一就是您可以跨平台重用内容 - 只是不要过于随心所欲了。

对于“2001”动画,我们开始时问自己:“我们能否让我们原有的动画在手机上工作呢?”最初,我们认为动画的长度是一个挑战。然而,原始动画本身符合下面几个关键条件,这些条件对于桌面上创建的动画能够在移动设备上工作十分重要:

角色动画仅使屏幕上的一个小的区域发生变化

多数时候是中距离镜头和特写,仅有少量全景。

有限的全屏运动

全屏移动可以去掉,不会影响内容

简单的背景

符号重用,从而使动画得以优化

我们的项目证明了,两分钟长的动画也可以被移植到手机上。其文件大小仍然不到 300K。这样,它能够适合于在 2G 或 2.5G 网络中分发,但那并非我们的目标。

当决定是否进行内容重用时,您需要考虑内容是否会在电话上播放,以及它是否能够适应尺寸上的限制,还有其它要满足的规格。

如果能够重用内容,将是一个很好的开端。但即使如此,您仍需完成一些工作,它才能在手机上运行。

虽然我们的“2001”动画被认为是非常适合于在手机上播放,但远远不是完美无缺。它为桌面计算机创作的流动画。在创作时,文件的大小十分重要,最重要的衡量标准是保持文件足够小,以使那些使用拨号连接的人们也能够没有任何问题地访问它。相比于具有 Flash Lite 功能的手机上的内存限制,它需要很少的优化。

事实上,我们并没有碰到多少性能问题;我们只需做一些调整,例如去掉自动贩卖机的全屏移动,用静态图片取而代之。从这个角度来说,原始动画确实非常适合于重用。

我们所遇到的两个最大的问题是音效和内存。

设备比桌面计算机的处理速度慢,这大家都知道。对于 Flash 内容而言,这意味着优化、优化、再优化。例如:

项目开始用 10 到 15 fps 的帧速率。

除了让 Flash Lite 播放器能处理过来外,较低的帧速率还能够得到较小的文件大小。记住,每一个符号关键帧都会使 SWF 电影增加 12 字节。这听起来不多,但很容易积累起来,尤其是对于动画而言。

将美术放在符号中,而不要放在主时间线上或放在组中。

选择 Modify > Shape > Optimize 优化符号,或者使用 subselection 工具手工优化。去除不必须的点和任何隐藏的形状和符号。这虽然很繁琐,但是会让您的内容更好地运行,并能够缩小 SWF 文件的大小。

简化动画。

不要让太多事情同时进行。避免 alpha transparency 和 gradient 这样的性能杀手。虽然它们能使动画更美观,但也会影响性能。而且,在电话的小屏幕上,很多特效都会丢失;甚至可能会看起来更糟糕。在小屏幕上,简单的图形经常会看起来更好,而且会具有更好的性能。

避免平移和 alpha 淡入淡出。

在静态背景上的短时间(5 帧)淡入淡出没有问题。如果可能,仅使用图形,移除线条,包括图形周围的轮廓。对 Flash 来说,线条的渲染更为复杂,因此也更慢。如果需要,使用图形创建轮廓。

以上几点同样适用于桌面动画;如果在为移动设备创作动画时忽略这些最佳实践,很快就会出现问题。

对于象“2001”这样的动画来说,音效是非常重要的元素。从文件中去掉音效会节省我们不少时间,但得到的体验将大不相同。

我们遇到的第一个重大挑战是让动画在电话上工作 - 并伴有音效。未采用音效时,工作相对简单,但当我们加入音效时,只要一开始播放动画,就会得到一个内存不足错误。

长度的重要性

为解决这一问题,我们首先将动画分成几块,将音效片断放在相应的电影剪辑中,然后将其放在主时间线上。然后,我们一次仅在一个对应的电影剪辑中加入音效片断,然后在手机上进行测试 - 这样就能够工作!

但是,这并不能解决全部问题。有时候,音效片断是跨好几个剪辑的(例如片头音乐),在时间上与每条时间线完全匹配并不容易。因此,我们将整个更长的部分放到第一个剪辑中,并用空白帧来延长时间线。不幸的是,发布到设备上之后,动画刚运行了一半手机就内存不足了。

我们得到的结论是,在两个剪辑中同步使用音效会导致问题。我们从一个剪辑中去除了音效,以免与第一个较长的音效重叠 - 现在没有问题了。当然,现在我们缺了一首曲子,于是我们把它塞到第一个剪辑中 - 令人吃惊的是,它能够播放!我们还不知道具体的原因;唯一的结论是,同时在两个剪辑中播放音效不是一个好想法。

我们也一直没搞明白为什么我们无法将整个声道放在主时间线上。我们的猜测是,Flash Lite 播放器会一次将整个时间线上的音效缓存起来,一次处理所有音效是过多了。但是,Flash 好像分别针对每个电影剪辑来处理内存,正因为此,上

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有