这篇文章主要介绍了当你使用FlashProfessional创建项目时,关于交互按钮需要注意的一些常见错误。记得通过在浏览器中实时预览来检查项目中创建的按钮是否正常工作。当交互应用得当,会给用户带来非凡的体验。但是如果网页或者应用程序的响应和用户期望的不一样,那么程序就好像坏了一样。花一定的时间去策划,设计还有部署UI元件来确保他们正确响应和容易使用。


  按钮元件忘记添加用来定义交互区域的点击状态


  按钮元件默认情况下有四个状态,分别定义了四个关键帧,当你双击一个按钮元件来编辑它的时候会呈现出来。这些状态分别是,弹起,滑过,按下,点击。前三种状态当用户与其交互时是可见的。弹起是指当用户没有与这个按钮交互时按钮所呈现的状态。滑过是指用户的鼠标停留在按钮上方时按钮所呈现的状态,按下指的是用户点击按钮的时候按钮所呈现的状态。

  点击状态对用户来说是不可见的,但它是非常关键的状态。在点击关键帧中按钮的形状代表了交互的区域,有时对于按钮来说也叫做影响区域。如果你在点击关键帧中画了一个非常小的圆形处于按钮的中间,那么你会发现你必须把你的光标移动到按钮中间的这个很小的区域中,按钮才会呈现出滑过和按下状态。只有这个定义的区域才会响应用户的鼠标事件。

  如果你不添点击这一状态,当你测试的时候你会发现按钮似乎坏了,因为鼠标不会使按钮产生滑过和按下状态。另一方面,如果你创建了一个比按钮大得多的点击状态,当你测试时,你会发现滑动状态会呈现出来,即使鼠标离按钮图形很远。

  对于包含文本元素的按钮来说,添加一个大的点击区域很重要,因为如果文本本身用作点击状态,用户选择文本时就需要格外的精确。最好的办法是绘制一个矩形热区来覆盖整个文本来确保按钮可以正确响应用户。

  你会发现通过选择 窗口>公用库>按钮 拖出一些已经构建好的按钮到舞台上。双击来编辑他们,观察时间轴,体会他们是怎么构成的。

  获取更多信息关于按钮的点击状态,你可以阅读Flash 词汇表中的按钮元件部分。


  添加ActionScript2.0代码在按钮状态上而不是添加在单独的帧上


  在使用As3.0开发项目时,如果你试图在按钮元件的状态关键帧上添加脚本,Flash Professional会给出信息告诉你As3.0只允许在主时间轴上添加脚本。然而,在As2.0中Flash是允许往按钮元件的状态关键帧上添加代码的。随着Flash的成熟,许多开发者在他们的项目中添加代码时需要遵守的一定的约定。

  在开发老的As2.0项目时也遵守时下流行的约定,可以更好的管理你的项目。否则,项目团队的其他成员会发现需要双击每一个元件来找到代码。举个例子,近一段时间来,除了将代码添加到主时间轴上,还可以使用外部类链接到一个项目中。另一个重要的约定是在主时间轴上所有图层的顶部创建一个动作图层用于添加代码,而不是把代码添加在主时间轴的各个图层上。

  发布项目时没有测试按钮的滑过状态和滑出状态

  一句普通的开发箴言是:经常且尽早测试。这句话对于创建与用户交互的按钮元件的滑过效果尤其有用。你不能在Flash的编辑状态下进行测试,不过你可以在独立版Flash中通过选择控制>测试影片>测试来检查你的项目。

  这种策略有助于在你发布最终版之前,检查按钮元件和其他元件(例如动态文本)的行为是否正常。如果你在添加每一个元件之后都测试你的项目,你可以在开发周期中尽早发现问题,在你添加其他特性之前修正它们。越早发现问题的所在,你就会越早的解决它们。


  不小心改变按钮图形的位置导致在鼠标滑过或单击时按钮发生抖动


  当你编辑按钮的弹起,滑过,按下状态时,尤其要注意不要轻微移动了状态关键帧中元素的位置。很容易不小心轻微移动它们,当你测试影片时,你会发现与按钮互动时,滑过和按下状态会出乎意料的发生平移或抖动。

  如果你创建一个典型的按钮,弹起和滑过还有按下状态基本上是一致的时候,你可以采用先绘制出弹起状态,然后点击滑过状态,再按F6添加一个新的关键帧(这样就会将弹起状态复制到滑过状态中)。通过点击按下状态再按F6重复这个步骤。当拷贝了这些状态以后,你可以小心的选择他们更改它们的颜色或者添加其他属性。

  另一种策略是先在弹起状态创建图形,然后再拷贝它。点击滑过状态关键帧,选择 编辑>粘贴 。这个操作保证了滑过状态的图形与弹起状态的图形是完全对齐的。重复这一过程把图形粘贴到按下和点击状态,这样他们就完全对齐了(见图1)。


Flash,按钮和交互元件


  图1.复制弹起状态的按钮,创建新的空白关键帧在滑过状态,然后在这里复制按钮图形。

  最后,你可以一个接一个状态的来编辑按钮图形。当你选择弹起状态时,在属性面板中检查x,y属性。记录下它们的值,然后点击滑过状态关键帧。如果图形有轻微的移动,你可以在属性面板中调节它们的x,y属性,在按下和点击状态关键帧中重复这一过程。


,Flash技巧,Flash教程