仿CCTV的一种Flash效果

  看看下面这个
  http://www.cctv.com/culture/index.shtml

  图片自动变换,鼠标指向不同链接 图片也相应变换。

  下面偶会给出这个效果的 教程 可能有点深 因为用到ACTION 其实大家都一样 都是从不会到会 如果你看到 ACTION 就打退堂鼓 说明你永远也 学不好FLASH !

  不信你问问我们的火星书记 他当初学的时候经历了多少困难?! 才由小虾米变成大虾米的! 感谢书记大力提供技术支持 他真素一个好银!

  不罗嗦了 开始了!

  首先 偶要提到 嵌套的概念 很多人都学过 编程语言 里面都有嵌套的存在 就是一层套一层的意思 因为下面会用到 但偶只是照着自己的理解去说 不知道大家能明白不?

  这个例子里有一个 按钮和 四个对应的 图片

  新建一个影片剪辑 取名为“灰” 在图层1 画一个 白框 不带边的 如下图 :( 注意 属性面板里的X Y轴都改为 0 这是为了方便以后管理 要养成习惯哦 )

  图层2是 文字层 写了“图片1”几个字

然后照葫芦画瓢再做3个 影片剪辑 分别取名为 “红” “绿” “青” 如下图:

下面以名字为”灰“的影片剪辑为例 其余的类似!

新建 影片剪辑 取名为“变灰” 把 名字为 “灰”的影片剪辑拖到里面去 还是放到 属性坐标为X :0 Y :0 的地方 然后在第10真 插入关键真 在第1真选择色调 调整为白色 右键第1真选 创建补间动画 做一个 白色到 灰色的渐变 点最后一真 按F9 加入命令 stop();

下面新建一个影片剪辑 取名为”主文件“

图层如下图:

具体讲解:

PP层放着 变灰 变红 变绿 变青 四个 影片剪辑 每个占一真

txt层放着 上面四个剪辑的 对应的解释文字

action层其实只有一种命令 stop(); 分成四真 和上面的一一对应

再做一个按钮 两真 为了逼真 做出了 阴影效果

回到主场景中 先看时间轴截图:

具体讲解:

xian层 是为了阴影效果 做的几条直线 而已

btn层 放了四个按钮 选择第1个按钮 按F9 加入如下代码:

on(rollOver){ //鼠标滑过 ,则播放图片MC第1帧 ,并清除掉延时函数;
pic_show.gotoAndPlay(1);
clearInterval(timer);
}
on(rollOut){ //鼠标滑出时 重新开始延时函数的执行~
timer = setInterval (next_pic,2000);
}
其余三个类似 只是要把1换为2 3 4

mc层就放着 ”主文件“ 这个影片剪辑

as层代码如下:

function next_pic(){ //自定义函数,用于控制图片MC的播放,函数名为next_pic
if(pic_show._currentframe == 4){//如果当前帧为第4帧,则转到第一帧;
pic_show.gotoAndPlay(1);
}else{//如果不是,则播放下一帧;
pic_show.nextFrame();
}
}
timer = setInterval (next_pic,2000); //每间隔2秒执行一次next_pic函数.timer是这个延时函数的ID 便于后面清除它~
CCTV的FLASH还有 网站连接 只是在上面加了一个 透明度为0的 按钮 在按钮上加上连接 偶就不细说了

点击这里下载源文件

时间: 2024-10-05 02:41:50

仿CCTV的一种Flash效果的相关文章

无AS在FLASH中实现三种爆炸效果

目前我们见到的一些flash中的爆炸效果,很多都是应用大量的as或者粒子技术模拟出来的,对于不是很熟悉as的朋友来说,确实很难理解和学习,不过大家别着急,本实例我们就来学习一种不使用任何as(当然最简单的stop()和goto语句是少不了的),来模拟出三种精彩的爆炸效果,其逼真程度一定都不亚于用as 模拟出来的效果,具体效果请看下面的演示: 点击这里下载源文件 首先我们需要准备两张如图1和图2 所示的两张静态图片,图片内容为一团烟雾即可,一张亮些,另一张暗一点,熟悉fireworks 的朋友可以

JS实现仿FLASH效果的竖排导航代码_javascript技巧

本文实例讲述了JS实现仿FLASH效果的竖排导航代码.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的Flash效果的导航菜单,竖向排列,兼容性好,由JavaScript妙味课堂的朋友编写,欢迎测试. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-flash-style-v-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

Android中使用TextView实现高仿京东淘宝各种倒计时效果_Android

今天给大家带来的是仅仅使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.最近公司一直加班也没来得及时间去整理,今天难得休息想把这个分享给大家,只求共同学习,以及自己后续的复习.为什么会想到使用一个TextView来实现呢?因为最近公司在做一些优化的工作,其中就有一个倒计时样式,原来开发的这个控件的同事使用了多个TextView拼接在一起的,实现的代码冗余比较大,故此项目经理就说:小宏这个就交给你来优化了,并且还要保证有一定的扩展性,当时就懵逼了.不知道从何处开始

基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果_jquery

最近基于jQuery和Bootstrap框架实现了一个仿知乎动态列表的前端效果,基本实现了和知乎动态列表相同的效果.如下: 1.基本列表项 2.列表项全文展开.折叠(图中为展开第一项) 3.评论项展开 4.列表数据加载(加载全部) 5.带动画效果的点赞功能 6.回复列表的hover显示功能 HTML代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta h

jQuery实现Flash效果上下翻动的中英文导航菜单代码_jquery

本文实例讲述了jQuery实现Flash效果上下翻动的中英文导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现Flash效果鼠标感应式的翻动导航菜单,支持中英文切换,所使用的jQuery类库版本为1.3.2. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-sx-cha-chen-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//

jQuery实现仿腾讯迷你首页选项卡效果代码_jquery

本文实例讲述了jQuery实现仿腾讯迷你首页选项卡效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的选项卡,清爽无修饰版,仿腾讯的迷你首页.选项卡的前后可以有一个控件箭头,点击这两个箭头可控件选项卡向左.向右滚动,在有限的网页空间内布局更多的内容成为可能,相信你会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-t-tencent-index-style-nav-codes/ 具体代码如下: <!DOCT

Android中使用TextView实现高仿京东淘宝各种倒计时效果

今天给大家带来的是仅仅使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.最近公司一直加班也没来得及时间去整理,今天难得休息想把这个分享给大家,只求共同学习,以及自己后续的复习.为什么会想到使用一个TextView来实现呢?因为最近公司在做一些优化的工作,其中就有一个倒计时样式,原来开发的这个控件的同事使用了多个TextView拼接在一起的,实现的代码冗余比较大,故此项目经理就说:小宏这个就交给你来优化了,并且还要保证有一定的扩展性,当时就懵逼了.不知道从何处开始

摄影后期仿中国古典风的照片效果

  摄影后期仿中国古典风的照片效果,实用粗暴,对中国风照片设计感兴趣的童鞋们,可以借鉴学习 分类: PS图片处理 ps后期处理教程

js实现仿Windows风格选项卡和按钮效果

  本文实例讲述了js实现仿Windows风格选项卡和按钮效果的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67