flash+xml实现图片切换效果

种效果flash+xml实现图片切换效果,大部分采用遮照,遮照其实不是很难。这里有一个难点主要是加载图片,以及解析XML。其他的都比较简单。
OK,看看过程吧。
1、将FLASH文件大小设为800*230,这里主要是根据你想让FLASH占多大的广告来决定的。比如你FLASH希望大一点,就可以大一些。相反呢,就可以设小一点。把背景设成黑色,然后把帧频改为60。这里就不多说了,主要是考虑动画的流畅性。
2、创建一个新元件“my_mc”,然后设成可以在AS中导入的。即在AS链接处打上勾

1,2

4、代码如下:

//统一编码
System.useCodepage = true;
//定义XML
var my_xml:XML = new XML();
//消除空格
my_xml.ignoreWhite = true;
//定义图片数组
var my_Arr:Array = new Array();
//加载图片类
var myCL:MovieClipLoader = new MovieClipLoader();
//设置开始位置
var begin_x:Number = 0;
var begin_y:Number = 0;
//定义变量,用于显示图片
var next_x:Number = begin_x;
var next_y:Number = begin_y;
//设置图片大小
var pic_width:Number = 670;
var pic_heigth:Number = 230;
//定义每行数量
var my_num:Number = 2;
//加载XML
my_xml.load("http://www.taoshaw.com/taoshaw/study/text_dong/MyPhoto.xml");
my_xml.onLoad = function(ok:Boolean):Void  {
if (ok) {
  loadStart();
} else {
}
};
//当前影片剪辑创建一个mc
this.createEmptyMovieClip("mc", this.getNextHighestDepth());
function loadStart():Void {
//定义XML长度
var my_Len:Number = my_xml.firstChild.childNodes.length;
for (var i:Number = 0; i<my_Len; i++) {
  //将接收的对象写进数组
  my_Arr.push(my_xml.firstChild.childNodes.attributes.src);
  duplicateMovieClip(mc, "mc"+i, 3+i);
  this["mc"+i]._x = next_x;
  //此处是关键,用于显示加载图片后,图片在舞台中的排列
  next_x += pic_width;
  this["mc"+i]._y = next_y;
  //此处也是关键,用于多行显示
  if (((i+1)%my_num) == 0) {
   next_x = begin_x;
   next_y += pic_heigth;
  }
  myCL.loadClip(my_Arr, this["mc"+i]);
}
}

这里主要用到了MovieClipLoader类,以及XML类。根据根据XML来解析。再利用前面一个来加载多幅图片。这里,让加载到场景中的元件会在不同位置处显示的方法主要用到让_x座标用一个变量代替,而这个变量呢,则不变递加来确定。而让加载的图片分多行显示,则是利用了。当XML的长度除以设定的值。如果这个值为0呢,则另外换行。另外换行的方法。就是重新设定_y的值。让_y的值再叠加。
5、再新建一个script元件。然后用于在里面添加代码。用于控制场景中MC的位置移动等。

4、代码如下:

//统一编码
System.useCodepage = true;
//定义XML
var my_xml:XML = new XML();
//消除空格
my_xml.ignoreWhite = true;
//定义图片数组
var my_Arr:Array = new Array();
//加载图片类
var myCL:MovieClipLoader = new MovieClipLoader();
//设置开始位置
var begin_x:Number = 0;
var begin_y:Number = 0;
//定义变量,用于显示图片
var next_x:Number = begin_x;
var next_y:Number = begin_y;
//设置图片大小
var pic_width:Number = 670;
var pic_heigth:Number = 230;
//定义每行数量
var my_num:Number = 2;
//加载XML
my_xml.load("http://www.taoshaw.com/taoshaw/study/text_dong/MyPhoto.xml");
my_xml.onLoad = function(ok:Boolean):Void  {
if (ok) {
  loadStart();
} else {
}
};
//当前影片剪辑创建一个mc
this.createEmptyMovieClip("mc", this.getNextHighestDepth());
function loadStart():Void {
//定义XML长度
var my_Len:Number = my_xml.firstChild.childNodes.length;
for (var i:Number = 0; i<my_Len; i++) {
  //将接收的对象写进数组
  my_Arr.push(my_xml.firstChild.childNodes.attributes.src);
  duplicateMovieClip(mc, "mc"+i, 3+i);
  this["mc"+i]._x = next_x;
  //此处是关键,用于显示加载图片后,图片在舞台中的排列
  next_x += pic_width;
  this["mc"+i]._y = next_y;
  //此处也是关键,用于多行显示
  if (((i+1)%my_num) == 0) {
   next_x = begin_x;
   next_y += pic_heigth;
  }
  myCL.loadClip(my_Arr, this["mc"+i]);
}
}

这里主要用到了MovieClipLoader类,以及XML类。根据根据XML来解析。再利用前面一个来加载多幅图片。这里,让加载到场景中的元件会在不同位置处显示的方法主要用到让_x座标用一个变量代替,而这个变量呢,则不变递加来确定。而让加载的图片分多行显示,则是利用了。当XML的长度除以设定的值。如果这个值为0呢,则另外换行。另外换行的方法。就是重新设定_y的值。让_y的值再叠加。
5、再新建一个script元件。然后用于在里面添加代码。用于控制场景中MC的位置移动等。

4、代码如下:

//统一编码
System.useCodepage = true;
//定义XML
var my_xml:XML = new XML();
//消除空格
my_xml.ignoreWhite = true;
//定义图片数组
var my_Arr:Array = new Array();
//加载图片类
var myCL:MovieClipLoader = new MovieClipLoader();
//设置开始位置
var begin_x:Number = 0;
var begin_y:Number = 0;
//定义变量,用于显示图片
var next_x:Number = begin_x;
var next_y:Number = begin_y;
//设置图片大小
var pic_width:Number = 670;
var pic_heigth:Number = 230;
//定义每行数量
var my_num:Number = 2;
//加载XML
my_xml.load("http://www.taoshaw.com/taoshaw/study/text_dong/MyPhoto.xml");
my_xml.onLoad = function(ok:Boolean):Void  {
if (ok) {
  loadStart();
} else {
}
};
//当前影片剪辑创建一个mc
this.createEmptyMovieClip("mc", this.getNextHighestDepth());
function loadStart():Void {
//定义XML长度
var my_Len:Number = my_xml.firstChild.childNodes.length;
for (var i:Number = 0; i<my_Len; i++) {
  //将接收的对象写进数组
  my_Arr.push(my_xml.firstChild.childNodes.attributes.src);
  duplicateMovieClip(mc, "mc"+i, 3+i);
  this["mc"+i]._x = next_x;
  //此处是关键,用于显示加载图片后,图片在舞台中的排列
  next_x += pic_width;
  this["mc"+i]._y = next_y;
  //此处也是关键,用于多行显示
  if (((i+1)%my_num) == 0) {
   next_x = begin_x;
   next_y += pic_heigth;
  }
  myCL.loadClip(my_Arr, this["mc"+i]);
}
}

这里主要用到了MovieClipLoader类,以及XML类。根据根据XML来解析。再利用前面一个来加载多幅图片。这里,让加载到场景中的元件会在不同位置处显示的方法主要用到让_x座标用一个变量代替,而这个变量呢,则不变递加来确定。而让加载的图片分多行显示,则是利用了。当XML的长度除以设定的值。如果这个值为0呢,则另外换行。另外换行的方法。就是重新设定_y的值。让_y的值再叠加。
5、再新建一个script元件。然后用于在里面添加代码。用于控制场景中MC的位置移动等。

10、再新建一遮照层。在其中用椭圆工具绘制一些圆圈效果。这里的效果中以随便绘制。只要不是完全遮住画布即可。因为完全遮住了画布。会让场景中的MC达不到遮照效果的

11、这里,这个意思跟大家说一下。主要是用到了先在场景中显示一部分内容。然后我们可以通过鼠标移动按钮来对另一层中的MC进行控制。达到交替显示MC的目的。
12、在这个图层上击右键,选遮照。这样即是:用步骤九中新建的图层中的元件去遮照strip3。
13、新建六个按钮吧。因为这里只做了六幅图。而在XML里面的图片呢,也只有六张。所以只做了六个按钮。至于建立按钮的过程,我也不再缀述。这个应该很简单的吧。

14、新建一AS层,这个时候有两个部分需要注意一下。首页一点。将刚才步骤五中所建立的元件拖到场景中,并设置实例名为“script”。
15、选择关键帧,添加代码:

//================版权声明开始================//
//★淘沙网:http://www.taoshaw.com
//★淘沙网所有教程欢迎转载。不过请转载时注明出处。谢谢合作。
//================版权声明结束================//
//创建新右键菜单
myMenu = new ContextMenu();
//隐藏右键菜单
myMenu.hideBuiltInItems();
myMenu.customItems.push(new ContextMenuItem("淘沙网:http://www.taoshaw.com", PR));
Stage.scaleMode = ’noScale’;
function PR(obj, item) {
getURL("http://www.taoshaw.com", "_blank");
}
//将新菜单赋予给场景
_root.menu = myMenu;
stop();
my_btn1.onRollOver = function():Void {
script.targetx = 130;
script.targety = 0;
script.baseRate = 2;
script.gotoAndPlay(5);
};
my_btn2.onRollOver = function():Void {
script.targetx = 130;
script.targety = -230;
script.baseRate = 2;
script.gotoAndPlay(5);
};
my_btn3.onRollOver = function():Void {
script.targetx = 130;
script.targety = -460;
script.baseRate = 2;
script.gotoAndPlay(5);
};
my_btn4.onRollOver = function():Void {
script.targetx = -540;
script.targety = 0;
script.baseRate = 2;
script.gotoAndPlay(5);
};
my_btn5.onRollOver = function():Void {
script.targetx = -540;
script.targety = -230;
script.baseRate = 2;
script.gotoAndPlay(5);
};
my_btn6.onRollOver = function():Void {
script.targetx = -540;
script.targety = -460;
script.baseRate = 2;
script.gotoAndPlay(5);
};

至此,此动画制作完毕。由于这里主要讲解,如何解析,以及如何加载图片,所以其他功能暂略。大家可以试一下,在图片上添加链接,并通过XML里添加链接目标等。

时间: 2025-01-21 16:28:27

flash+xml实现图片切换效果的相关文章

asp.net+xml+flash实现的图片展示效果示例_实用技巧

本文实例讲述了asp.net+xml+flash实现的图片展示效果.分享给大家供大家参考,具体如下: 第一步:首先引入命名空间:(vs08环境中) using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; usin

Flash MX 2004实例制作视频教程:图片切换效果

教程|视频教程 第 15 节:图片切换效果(1) 课程目标:制作多种图片过场切换效果. 课程要点:学习如何制作多种图片过场切换效果,本实例分三节讲解,这是第一节. 观看教程:[全屏观看] (必须安装Flash Player 7.0或更高版本的播放器,[官方下载] ) 下载教程:[下载教程] [下载源文件] 第 16 节:图片切换效果(2) 课程目标:制作多种图片过场切换效果. 课程要点:学习如何制作多种图片过场切换效果,本实例分三节讲解,这是第二节. 观看教程:[全屏观看] (必须安装Flash

用FLASH遮罩效果做图片切换效果

本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果: 第一步.打开Flash新建1个图层,用线条工具画一条竖直线,放在相对舞台的左面,第30帧处插入关键帧. 图1 第二步.点击第30帧把竖直线拉到舞台右面. 图2 第三步.点住任意一帧,在属性里面把补间改为形状. 图3 第四步.新建一个图层,和上面一样画一个竖直线,注意的是这次把竖直线从右到左放,然

二款flash图片切换效果

提供一款flash图片切换效果哦,如果你正在找图片切换效果就进来看看哦. <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>二款flash图片切换效果</title> <style type="text/css教程"> * { margin:0; padding:0; } body {  mar

jquery图片切换效果

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery图片切换效果</ti

基于jquery实现左右按钮点击的图片切换效果_jquery

jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个左右按钮点击的图片切换效果. 一.最终效果 二.功能分析1.需求分析点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮都显示.2.html结构分析 <div class="activity" id="activity-slide"> <a href=&q

基于jquery实现鼠标滚轮驱动的图片切换效果_jquery

jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个基于鼠标滚轮驱动的图片切换效果. 本例实现的效果:鼠标滚轮滚动时图片进行切换. 支持键盘方向键实现图片切换效果. 支持点击图片切换,支持点击当前图片链接. 进度条滑块展示图片图片数量进度.XHTML <div class="demo"> <div id="imageflow"> <div id="loading"><

Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)_实用技巧

本文实例讲述了Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; using System.IO; public partial

jQuery实例教程:jQuery网页图片切换效果

文章简介:假设你有一组作品,你想不用转跳到另外一个页面就可以显示多个图片,你可以将JPG图片载入到目标元素中去.下面是jQuery图片切换效果示例. 假设你有一组作品,你想不用转跳到另外一个页面就可以显示多个图片,你可以将JPG图片载入到目标元素中去.下面是jQuery图片切换效果示例: 该示例的核心jQuery代码: $(document).ready(function() { $("h2").append("<em></em>") $(&