用Flash制作简易的图片浏览器

浏览器

  通过脚本控制,Flash可以完成许多事。本例将教大家如何使用Flash制作简易的图片浏览器。

点击这里下载源文件

  1.新建一个Flash文档,单击“属性”面板中的“尺寸”按钮,打开“文档属性”面板设置场景大小为650px x 450px,背景为白色,帧频为30fps

  2.按快捷键Ctrl+R打开“导入”面板导入三张图片。如图1所示,图片image的宽、高为640px、480px。把图片image的宽、高放大为2400px、1600px,并命名为image2。图片imageblu.jpg是由图片image.jpg经过模糊处理得到的。

  图1

  3.按快捷键Ctrl+F8,创建一个名为“blur”影片剪辑元件,按快捷键Ctrl+L打开“库”面板,将图片imageblur拖入到blur元件的场景中。点选场景中的blur元件,按快捷键Ctrl+K打开“对齐”面板,点选“相对与舞台”按钮,再点击“水平对齐”和“垂直对齐”两个按钮,如图2所示,使“影片”元件在居中于场景内。

图2

  4.按快捷键Ctrl+F8,创建一个image_view影片剪辑元件。点选“矩形”工具 ,绘制一个宽、高都为136px的黑色矩形框,矩形框的中心和场景中心重叠,如图3所示。

  图3

  5.按快捷键Ctrl+F8,创建一个名为image_view2影片剪辑元件。同样点选“矩形”工具,绘制一个宽、高都为61px的矩形框。

  6.按快捷键Ctrl+F8,创建一个view影片剪辑元件。打开“库”面板,将图片image拖拽到view元件的场景中。点选image图片,在“属性”面板中将其宽、高设为400px、300px,图片的几何中心和场景的中心重叠。

  7.创建一个名为view2的影片剪辑元件,其层的结构如图4所示。在“blur实例”层里是“blur”元件。“image2”层场景中是image2图片。

 图4

  8.回到“场景 1”。创建五个图层,如图5所示。从“库”面板中把所有的元件拖拽到相对应的层中。“遮罩”层中是一个与view2元件一样大小的矩形块。注意:图5中白色区域为整个场景。

  图5

  分别点选各层中的影片剪辑元件,在“属性”面板中为元件起实例名。元件image_view的实例名是viewFinder,如图6所示。元件view1的实例名是image,宽、高为200px、150px;元件imageview的实例名是window;元件view2的实例名是image2,宽、高为2400px、1800px。

  图6

  9.元件和场景设置的工作做好了,现在点选实例image_view2,按F9打开“动作”面板,输入如下代码。

onClipEvent (load) {
 // 初始化变量
 danX = _root.image._x-(_root.image._width/2);
 danY = _root.image._y-(_root.image._height/2);
 ratio = (_root.image2._width/_root.image._width)*(-1);
 // 定义图片移动速度
 speedRatio = 15;
 // 创建函数
 function myClick (myX, myY) {
  xDis = ((myX-this._x)/speedRatio);
  yDis = ((myY-this._y)/speedRatio);
  // 制造图片的透明效果
  _root.image2.blur._alpha = ((Math.abs(xDis)+Math.abs(yDis))*5);
  // 制造图片的移动效果
  _root.viewFinder._x = _root.viewFinder._x+xDis;
  _root.viewFinder._y = _root.viewFinder._y+yDis;
  _root.image2._x = ((_root.viewFinder._x-_root.image._x)*ratio)+(_root.window._x);
  _root.image2._y = ((_root.viewFinder._y-_root.image._y)*ratio)+(_root.window._y);
 }
}
onClipEvent (mouseUp) {
  if (_root.image.hitTest(_root._xmouse, _root._ymouse, true)) {
  danX = _root._xmouse;
  danY = _root._ymouse;
 }
}
onClipEvent (enterFrame) {
 // 调用函数
 myClick(danX, danY);
}

  好了,整个效果到这里就做好了。大家可以按快捷键Ctrl+Enter测试一下。

时间: 2024-12-31 15:32:02

用Flash制作简易的图片浏览器的相关文章

Android中轴旋转特效实现,制作别样的图片浏览器

Android API Demos中有很多非常Nice的例子,这些例子的代码都写的很出色,如果大家把API Demos中的 每个例子研究透了,那么恭喜你已经成为一个真正的Android高手了.这也算是给一些比较迷茫的Android开 发者一个指出了一个提升自我能力的方向吧.API Demos中的例子众多,今天我们就来模仿其中一个3D变换的 特效,来实现一种别样的图片浏览器. 既然是做中轴旋转的特效,那么肯定就要用到3D变换的功能. 在Android中如果想要实现3D效果一般有两种选择,一是使用O

JavaScript 类似flash效果的立体图片浏览器_图象特效

PS:显示效果图,大家可以根据自己的需求调整图片的样式哦代码 复制代码 代码如下: <style type="text/css"> //图片浏览器容器 #container{position:absolute;} #container img{position:absolute;} //半透明遮罩层样式 .mask2{ background:#99FF00; opacity:0.3; filter:Alpha(Opacity='30'); position:absolute

Flash制作切片式图片效果动画

图片效果 动画效果演示: 点击浏览该文件 昨天一个人问了类似于以上效果的制作方法 开始自己以为是将图片切成几部分去做的 后来发现不是这样的 这个是用遮罩效果做出来. 第一步,设置好场景的大小,我设置的是320*480 第二步,根据场景大小建立一个遮罩元件,大小为320*80,这样我用六个遮罩就可以将整个场景填满. 第三步,将图片设置为元件,拖入场景.将图片向上移动一段,然后做一个向下移动的动画,并设计亮度由100渐变到0.在图片上新建一层,放入遮罩,放在场景的最上方. 第四步,将两个层的帧复制,

Flash制作滚动广告图片效果

广告|滚动广告|图片效果 上次在论坛上有人问到关于这个效果的问题,猪排大哥建议我写个教程,希望大家能够支持.首先我们先来看一下效果吧: 这个效果其实主要是 用到按钮的动作,首先我把有关按钮的动作的as简介列出来: on() 可用性 Flash 2.在 Flash 2 中,不是所有的事件都受支持. 用法 on(mouseEvent) { // 此处是您的语句 }参数statement(s) 发生 mouseEvent 时执行的指令. mouseEvent 是称作"事件"的触发器.当发生此

flash 制作简易涂鸦板

思路:1.设一个pressed变量,为布尔型,初始为false;       2.鼠标移动就画线;       3.当pressed=true 时,鼠标移动时,可以画线;       4.当pressed=false时,鼠标移动时,不能画线;       5.最后再加入一些按钮来调整线条粗细和清空画板. 步骤一:     放入三个按扭,实例名分别为:     "clear_btn": 清除线条;     "str_btn": 加粗线条;     "thin

Flash8制作一个简易的图片电子相册

在这篇教程中我们将利用Flash制作一个简易的电子相册. 效果和源文件: 点击这里下载源文件(解压密码:www.webjx.com) 1.下载本教程中使用的图片,你也可以自己去准备.点击这里下载图片压缩包 2.新建立Flash文档,然后按Ctrl+J修改文档属性: 3.执行"文件">"导入">"导入到库"命令,把所有图片都导入到库里面,之后你可以按Ctrl+L查看库中是否已经有导入的图片了. 4.双击图层1改名为pictures. 5

制作简易图像浏览器,互联网营销

先发点牢骚放松下心情, 最近完全没有做项目的动力,每天感觉脑子昏昏沉沉的没有一点状态. 一来可能快春节了,自己离家比较远也在担心何时回家何时购票, 二来公司程序员就我一个人在单干,软件 项目什么的做好了,却不能接受一次又一次的添加功能和修改数据库,(我真的很想骂某个人的娘) 三来也老早计划好了11年4月份一年合同到期后就离职,现在好像一点都静不下心来 如果有各位同僚给我开解开解我也好恢复下心境. 好了,下面来说这个简易的图像浏览器吧.  其实这也不是无中生有我要去做的一个东西, 我们公司的软件

易语言基础教程之制作简易浏览器_易语言

方法/步骤 首先打开易语言: 点击--工具--支持库配置--全选--确认 之后点击属性--拉宽 之后点击标题输入测试浏览器 拉一个编辑框和按钮最后一个超文本浏览框(自己找) 之后双击按钮输入代码: .版本 2 .支持库 HtmlView .子程序 _按钮1_被单击 超文本浏览框1.地址 = 编辑框1.内容 按F5测试,好的行了 注意事项 编辑框要输入网址,不能输入其他的OK. 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜

Flash制作控制图片大小和暗亮动画效果

控制 原文件:点击下载控制图片.rar(只适合FLASH2004,不适合FLASH6.0) 制作方法:把图片导入后实例名改为tp 然后添加4个按钮分别为大.小.暗.亮 然后就是为按钮添加代码了! 大的按钮的代码:on(release){   tp._xscale+=10;   tp._yscale=tp._xscale+10;  }  小的按钮的代码:on(release){   tp._xscale-=10;   tp._yscale=tp._xscale-10;  } 暗的按钮代码: on(