0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

基于AS脚本的flash图片自动切换效果的实现

电子设计 作者:电子设计 2018-11-15 08:43 次阅读

本文详细介绍了用Adobe Flash Professional CS5.5脚本设计图片切换效果的技术和步骤,并附上脚本详细代码,对网站动画设计和多媒体课件制作都具有一定的指导作用。

引言

Flash是一种交互式矢量多媒体技术,目前互联网上已经有成千上万个纯Flash站点,而且其他普通站点,包括很多wap站点,也都用到了flash技术,可以说Flash已渐渐成为交互式矢量的标准,未来网页的一大主流。在用Flash展示产品、风景、新闻等图片时,其切换效果可用遮罩和AS两种途径来实现,其中遮罩方式简单易学,但效果比较单调,修改不方便;AS方式效果丰富,适合对图片批处理,更改图片及效果也极为方便,是制作切换效果的首选。

2.图片处理

2.1 图片存放

首先准备若干张jpg或gif图片,本文设计的是10张600*400的jpg图片(可以用“光影魔术手”软件进行批处理),文件名分别为:

1.jpg,2.jpg,…,8.jpg,存放在与。fla文件相同目录下(如图1),然后通过AS脚本,创建空的影片剪辑和加载外部图片。

基于AS脚本的flash图片自动切换效果的实现

2.2 图片加载

用数组方式批量添加,用MovieClip类的createEmptyMovieClip()和loadMovie()方法创建空影片剪辑实例和将图片加载到实例中,因为图片多,用循环方式依次加载,同时也方便使后加入的深度依次增大而位于上层,具体如:

基于AS脚本的flash图片自动切换效果的实现

这样就在舞台上层叠了8个影片剪辑。

2.3 图片布局

外部图片导入到舞台以后,位置和大小不一定与舞台相匹配,须作调整。本程序中,舞台大小设置为800*600,图片大小在导入之前已统一设置为600*400,完全能被装下,如果图片大于舞台,可通过_xscale和_yscale属性来缩小。代码如下:

基于AS脚本的flash图片自动切换效果的实现

基于AS脚本的flash图片自动切换效果的实现

3.图片切换

因为8张图片大小完全相同,后载入的覆盖了先载入的,这时只能看到最上面的一张,所以还必须在两张图片之间设置时间和过渡效果,才能看到前后图像载入变化。

flash AS提供了10种效果:Blinds(遮罩效果)、Fade(淡化效果)、Fly(飞行效果)、IRis(光圈效果)、Photo(聚变曝光效果)、PixelDissolve(像素溶解效果)、Rotate(旋转效果)、Squeeze(挤压效果)、Wipe(划入/划出效果)、Zoom(缩放效果),每种效果中又有很多种形式,统计起来共有27种之多。这些效果的实现主要是通过TransitionManager类来完成的。要实现过渡效果,为编写代码更为方便,首先需要导入所有mx.transitions类和所有mx.transitions.easing类:

import mx.transitions.*;

import mx.transitions.easing.*;

在导入上面两个类以后,就可以使用TransitionManager类的start()方法将过渡效果应用于影片剪辑上。

格式:

TransitionManager.start(影片剪辑名称,{type:过渡类型,direction:方向,duration:过渡所所需的时间,easing:缓动效果,各种过渡效果所需的参数});start()方法参数的说明:

影片剪辑名称:就是要应用过渡效果的MC的实例名称,即前面用createEmptyMovieClip(“mc”+String(i+1),i+1)创建的mc1、mc2……mc8.

Type:过渡类型,前面已提到共有10种过渡效果,如:Blinds、Fade、Fly、Iris、Photo等。

Direction:方向,即过渡是进入还是退出。可以用两个值:Transition.IN和Transition.

OUTDuration:过渡所所需的时间,一般一个过渡几秒就够了,常用3-5秒。

easing:缓动效果:在过渡效果中可以为过渡效果添加缓动效果。

startPoint:一个指示起始位置的整数,范围是1到9.1:左上;2:上中;3:右上;4:左中;5:中心;6:右中;7:左下;8: 下中;9:右下。

某些效果还有自己特有的参数,如:遮罩条纹数:numStrips和条纹方向:dimension,遮罩形状Shape:.Iris.SQUARE(方形)和CIRCLE(圆形)等4.效果实现

为了将图片各种随机切换效果连续地展示出来,可以使用setInterval()方法,setInterval()方法可以按照指定的周期来调用函数(在本程序中是调用图片自动切换的函数:showImages()),直到窗口关闭,代码如下:

基于AS脚本的flash图片自动切换效果的实现

5.程序设计与调试

在理解上述思路的基础上就可在Flash窗口开始编写程序代码和调试了。

启动Adobe Flash Professional CS5.5,在图层1的第一帧处(如图2所示)按F9键,打开动作窗口,在动作窗口中输入附录中所示代码。另特别注意,在发布之前,务必通过“文件-发布设置”将脚本修改为Action-Script2.0,否则在发布时会报错。

基于AS脚本的flash图片自动切换效果的实现

按上述步骤完成后,即可按Ctrl+Enter测试影片。

7.结语

本文介绍了用Adobe Flash Professional CS5.5脚本设计图片切换效果的技术,用Flash制作的炫目的图片自动切换效果,在Flash中图片切换一般有两种途径:遮罩和AS脚本,相比较而言,用AS脚本不论在图片批量处理上还是后期维护更新上都有显着优势,对网站动画设计和多媒体课件制作都具有一定的指导作用。

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • FlaSh
    +关注

    关注

    10

    文章

    1536

    浏览量

    146591
  • 软件
    +关注

    关注

    67

    文章

    4322

    浏览量

    85414
  • 矢量
    +关注

    关注

    0

    文章

    94

    浏览量

    23633
收藏 人收藏

    评论

    相关推荐

    一键动态切换IP脚本

    T*o*r*Proxy一键搭建动态代*理,通过利用T*o*r搭建Socks5代*理,最终实现动态切换IP的效果
    的头像 发表于 12-08 10:25 358次阅读
    一键动态<b class='flag-5'>切换</b>IP<b class='flag-5'>脚本</b>

    通过Python脚本实现WIFI密码的自动猜解

    本文将记录学习下如何通过 Python 脚本实现 WIFI 密码的自动猜解。
    的头像 发表于 01-25 10:46 526次阅读
    通过Python<b class='flag-5'>脚本</b><b class='flag-5'>实现</b>WIFI密码的<b class='flag-5'>自动</b>猜解

    基于labview 的视频自动切换

    我现在要用LABVIEW实现多点火灾自动监测,当有报警时可以实现视频的自动切换。我现在遇到的难题是:我不知道怎样去
    发表于 05-13 16:18

    请问Labview图片控件如何实现图片自动缩放?

    Labview图片控件如何实现图片自动缩放?就如同VB的图片控件一样,有三个属性,平铺,缩放,剪裁?
    发表于 08-08 07:28

    实现参考时钟的自动切换要如何操作?

    实现这样功能:clkin1接内部晶振, clkin0接外部时钟输入,当clkin0有外部输入时钟时,芯片参考自动切换到clkin0上,外部时钟消失后再自动
    发表于 09-12 09:44

    HarmonyOS实现几种常见图片点击效果

    一. 样例介绍 HarmonyOS提供了常用的图片图片帧动画播放器组件,开发者可以根据实际场景和开发需求,实现不同的界面交互效果,包括:点击阴影
    发表于 09-07 15:50

    JAVA教程之图片火焰效果

    JAVA教程之图片火焰效果,很好的JAVA的资料,快来学习吧
    发表于 04-11 17:14 5次下载

    Android 仿团购应用图片菜单效果源码

    Android 仿团购应用图片菜单效果源码
    发表于 03-19 11:23 0次下载

    js实现无缝跑马灯效果图片轮播滚动跑马灯效果

    介绍了js实现无缝跑马灯效果以及使用JS实现图片轮播滚动跑马灯效果,小编分享了程序示例供大家参考,有需要的小伙伴可以看看。
    发表于 12-18 14:12 4.6w次阅读

    双电源自动切换电路的原理如何使用继电器和接触器实现自动切换

    双电源切换应用也非常广,我们简单看一下怎么用继电器,接触器实现自动切换
    的头像 发表于 07-14 10:44 1.7w次阅读
    双电源<b class='flag-5'>自动</b><b class='flag-5'>切换</b>电路的原理如何使用继电器和接触器<b class='flag-5'>实现</b><b class='flag-5'>自动</b><b class='flag-5'>切换</b>

    如何将图片转2进制存进外部flash

    一、将图片转成16位BMP格式个人使用的是PIC2RAW软件,软件会自动转换成bin格式和c文件及h文件。唯一需要注意的是,生成的文件中前8个字节是文件的包头,不需要的就去掉,或者自己写代码时跳过
    发表于 11-16 20:51 10次下载
    如何将<b class='flag-5'>图片</b>转2进制存进外部<b class='flag-5'>flash</b>

    鸿蒙 TabList 配合 Fraction 实现顶部切换效果演示

    今天我想着配合鸿蒙里面提供的顶部切换控件 tablist,来实现顶部 tab 切换,然后下面多个 fraction 的效果。废话不多说,我们正式开始。
    的头像 发表于 01-04 14:41 2085次阅读

    使用Python脚本实现自动化运维任务

    许多运维工程师会使用 Python 脚本来自动化运维任务。Python 是一种流行的编程语言,具有丰富的第三方库和强大的自动化能力,适用于许多不同的领域。
    的头像 发表于 04-08 10:36 1235次阅读

    keil自动化编译脚本

    这是一个 keil 的自动化编译脚本,可被其他脚本或程序调用,接收参数并按参数编译 keil 工程,而不必打开 keil 软件,实现程序上的自动
    的头像 发表于 10-16 17:04 521次阅读
    keil<b class='flag-5'>自动</b>化编译<b class='flag-5'>脚本</b>

    HDMI自动切换器支持自动定时切换吗?怎么取消HDMI自动切换呢?

    更方便地管理多个HDMI设备,例如电视、投影仪、DVD播放器等。一些HDMI切换器还支持自动定时切换功能,可以根据设定的时间间隔自动进行输入源切换
    的头像 发表于 12-04 14:40 661次阅读