让层动得更精彩——极品插件Layer Ani-Magic |
|
Layer AniMagic插件通过高效的、功能强大的javascript脚本， 向用户提供了建立复杂层运动的一个很简单的方法。 充分发挥你的想象力，你将可以对AniMagic有上百种应用。从非常cool的拉出式菜单，到你获奖作品的滚动像册……都可以很容易的实现。 你可以从www.projectseven.com或者www.macromedia.com获得该的插件。 ● 插件功能简介：  让你的层动起来： ·从页面上选择一个触发对象。触发对象或者是文字链接，或者是图片，或是form按钮。 ·打开行为（Behavior）面板，点击加号“+”，并从目录项Studio VII中选择Layer AniMagic by PVII。 Layer AniMagic窗口将被打开 。 ·从层名称下拉列表中选择适当的层。 ·以像素为单位，从页面的上边界和左边界开始计算，设置运动结束后层的位置。 ·输入帧频。这表示每毫秒层移动多少个像素。下面的数字产生减慢的动画。 ·输入延时数。这是帧帧与之间间隔的毫秒数。30是一个很好的值，它能在不同浏览器、不同操作系统上都得到相同的结果。 ·选择 一种预设的运动，如果其中一种正好适用的话。预设值使用的是Relative运动方式。 所谓relative就是说，在该种方式下，如果把它设为向右200px，那么每次触发，层都向右移动 200px。点击3次就意味着这一层从它最初所在位置开始计算，总共向右移动了600px，。 ·选择一个targetting值: Absolute（绝对）, Relative（相对）, 或者Stop Moving（停止运动）... Target值: ·Absolute.把层移动到一个确定的位置。如果触发对象被触发，层将根据你所设定的，滑到 确定的位置。再次点击，层将不再移动。 ·Relative. 从层现在的位置起移动若干个像素。 如果触发对象被触发，层将根据你所设定的，滑到 确定的位置。再次点击，层还会继续滑动。 ·Stop Moving. 停止层的运动。这在用AniMagic建立一个DHTML滚动条中应用onMouseOut时非常有用。 建立滚动条时，应组合使用absolute运动方式、onMouseOver事件和Stop Moving运动方式、 onMouseOut事件。 Event Timer（事件定时器） 使用Event Timer可以实现复杂的运动。只需要在框内打钩，并且输入以毫秒为单位的延时。1000毫秒等于1秒。 所以，上图中的设置将导致1秒钟的延时，从事件被触发到它实际发生。 让我们来看看用该插件特征效果演示： 看完前面的效果演示，相信您和我一样都很想了解它们是怎样被制作出来的吧，让我们一起来看看。本文假设读者对DreamWeaver有一定程度的了解，对其基本操作只说做什么，不说怎么做。 ● 演示效果的制作 总的说来，这个插件牵涉到两类对象。一类是触发对象，定义在触发对象上的事件被触发时，移动的对象发生移动；一类是移动的对象，移动的对象在触发事件被触发后，按定义好的移动方式完成移动过程。其中，所谓移动方式包括是相对移动或绝对移动、目标位置、移动速度、响应时间等等，插件还提供了多种预定义的运动方式，多使用相对运动方式： 涉及的参数说明 current layer position 当前位置 lazy slide 慢移 right 200px 向右移动X px（200px是可以修改的参数，下同） left 200px 向左移动 Xpx up 200px 向上移动Xpx down 200px 向下移动 Xpx diagonal flooze 沿对角线移动 zippy 快移 值得一提的是绝对和相对运动。绝对运动Absolute把层移动到一个确定的位置。再次点击，层将不再移动。 相对运动Relative从层现在的位置起移动若干个像素。再次点击，层还会继续滑动。 除开具体细节，整个过程是这样的，设置层（层的起始位置、可见性、内容、z-index等）——设置触发对象（对象选择、触发事件等）——设置运动。 一、上下滑动的层 这个效果只需要用一个层。 1、插入用于滑动的层 首先，按你的需要插入一个层，并在层内添加你想添加的内容。下图是本例中的层及其属性。在此，层被设为了hidden，在需要时，也可通过设置层的位置，让层位于屏幕外。   2、触发对象和触发事件 触发对象或者是文字链接，或者是图片，或是form按钮。从页面上选择一个触发对象，这里选择的是文字链接“看看效果！”。打开行为（Behavior）面板，点击加号“+”，并从目录项Studio VII中选择Layer AniMagic by PVII。 Layer AniMagic窗口将被打开，如下图所示。本插件很简洁，只有一个对话框。 ·页面中有多个层时，从Layer Name中选适当的层； ·在绝对运动时，Slide to Targe Position表示，运动结束后层的左上定点所停留的像素坐标位置，像素坐标原点（0，0）在浏览器的左上角；在相对运动时，Slide to Targe Position（x,y）表示，层的左上定点（a,b）运动到（x+a,y+b）； ·FrameRate帧频。这表示每毫秒层移动多少个像素。下面的数字产生减慢的动画。 Delay延时数。这是帧帧与之间间隔的毫秒数。30是一个很好的值，它能在不同浏览器、不同操作系统上都得到相同的结果。 ·使用Event Timer可以实现复杂的运动。以毫秒为单位。1000毫秒等于1秒。  要实现层的上下移动，完成上图设置后，点击“OK”，并把触发事件设为onClick：  由于层被设置为隐藏，所以同时要添加onClick事件下的Show-Hide Layer行为，以使层可见。不难看出，上下滑动的层是这样实现的，在点击“看看效果！”事件发生时，在不改变L=20px的前提下，将T=400px改变为T=-300px，速度6像素/毫秒，每帧间隔30毫秒。 以上较为详细地介绍了，上下滑动的层的制作，了解其中对基本概念和基本思路的解释后，其他复杂的效果，无非是不同的参数设置以及多个运动的组合而已。 二、左右来回滑动的层 演示效果中左右来回滑动是由5个横向移动的行为实现的，需要注意的是必须使用Event Timer这5个行为才可能都发生，否则只有窗口中的第一个Layer AniMagic by PVII行为会发生，其他的都不会发生作用。延时是从触发事件发生开始计算的，通过不同长度的延时，实现A事件结束后B事件正好发生，B事件结束后C事件发生，显然A事件延时否无需讨论，但B、C事件都有延时，C事件延时较B事件延时更长。  具体看前3个移动事件的设置就更容易理解了：  图a  图b  图c以上3图对应于“行为”框中，从上至下的前3个移动事件，请注意左下角的延时设置。清楚地看到它们对应于所谓A、B、C事件，因为有不同的延时，所以循序的发生了，表现出来的也就是层的左右移动。更多事件也是相同的道理，具体的操作一看便知，具体参数值由需要而定，在次无需，也不可能多说。不过提醒记住，以像素px和毫秒Ms为单位，1000毫秒等于1秒。 三、沿对角线滑动、复杂次序 结合前两种运动不就得到要做的效果了吗，对角线滑动就是同时在水平和垂直两个方向上运动。至于复杂的次序，把垂直、水平以及对角线运动通过设置延时结合起来就可以得到，要实现它，在明白基本原理后，更多的需要细心的实践和丰富的想象力，相信聪明、细心的读者一定做得比我好，我总是笨手笨脚的：-） 四、滚动的层 这个效果够cool吧！一起来看看怎么做。 一共要用到4层，如下图：  各层的包含关系和z-index的大小关系是很重要的，层的名称和z-index的具体数字是次要的，这一点应该重视。有人会问，“我怎么不能得到这样的层结构？我得到的层都是并列的，虽然z-index不同……”，注意要得到有包含关系的层结构，需要通过insert菜单在层中插入层，插入的层就会包含在层中。 下图是层最终的布局情况，从上到下分别是dabox、scrollcont、sroller和layer5。 ·Dabox层 包含了其他三层，它的作用是控制可见性和定位，最初它被设为hidden，当“看看效果！”被点击时，该层变为可见，由于它包含着其他3层，所以其他层也随之出现。这一层还有个作用，效果中文字是在一个灰色的框中滚动的，灰色正是这一层的颜色#CCCCCC； ·Scrollcont层和scroller层 效果中灰色框内的白色区域就是scrollcont层，它的背景颜色是白色#FFFFFF，同时尺寸较小，整个位于dabox层中，白色挡住了灰色，这样就做出了“框”。Scrollcont不仅挡住了灰色，还让scroller层的一部分被显示出来。Scroller层的面积是大于scrollcont层的。我们注意到scroller的z-index为1小于其他层的z-index，同时它位于scrollcont内，所以它只有和scrollcont相交的地方才会被显示出来，其他部分都被挡住了；注意！这个层——scroller层就是对象层，移动的对象。当它在触发事件被触发时，位置发生变化，而同时scrollcont层的位置是不变的，这样这两层相交的部分也就发生了变化，表现出来也就是我们要得到的滚动效果。因此，所有文字内容都将被放在scroller层中。  ·Layer5层 读者一定已经比较熟悉了，问题的关键是两个对象，移动的对象搞定了，接着就是触发的对象了。Layer5层中包含了两个触发对象，一个“向上”控制层向下移动，看起来就是文字的向上移动，一个“向下”控制层向上移动，看起来就是文字向下移动。最好是使用绝对运动方式，这样不至于出现滚不回来的现象哦：）另外根据内容的情况正确设定移动距离也是很重要的，毕竟我们的目的还是要看内容，效果只是装饰。这样做的效果只是框架，发挥你想象力和创造力加入适当的装饰，以及同其他效果结合起来，就可以做出更漂亮的效果。比如用very cool的swap图取代文字链接“向上”、“向下”…… 我想怎么移走滚动层，不用多说了吧，如果你选则把它从水平或垂直方向移走，只要移得足够远就行了。速度适当快些会比较好，当然这由你决定。 五、 如果你已经顺利做出了前面的效果，特别是左右来回滑动的话，定义某运动在一定时间后发生就太容易了，因为它本身是其中的一部分，不是吗？ 六、 所谓推动的效果，其实最简单，它是预定义效果！上面已经列出了，其中向4个方向移动任意像素得到的就是“推动”。虽然简单，但我感觉这东西是否能用来做个WEB-GAME呢？我们一起探索吧：-） |
