论坛首页 → 编程语言技术论坛 →

Flex 3 图片移动

浏览 12516 次
锁定老帖子 主题：Flex 3 图片移动
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • yunmoxue
  • 等级: 初级会员
  • 性别:
  • 文章: 36
  • 积分: 70
  • 来自: 郑州
   发表时间：2009-07-22  

呵呵.先别急.等你知道了这俩个类,就知道了图片移动并不困难了..

 

第一个是 mx.effects.Move 移动

第二个是 mx.effects.Zoom 缩放

 

废话不多说.看例子  move例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	>
	<mx:Script>
		<![CDATA[
			//移动
			import mx.effects.Move;
			
			private function moveTest1():void
			{
				var move:Move = new Move();
				move.target = myImage;
				move.duration = 2000;
				//指定x
				move.xTo = 230;
				//指定y
				move.yTo = 0;
				//移动
				move.play();
			}
		]]>
	</mx:Script>
	<mx:Panel id="myPanel" width="90%" height="90%" title="移动示例:点击图片">
		<mx:Image id="myImage" source="assets/1.jpg" click="moveTest1()"/>
	</mx:Panel>
</mx:Application>

 zoom 例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	>
	<mx:Script>
		<![CDATA[
		//变大变小
			import mx.effects.Zoom;
			private function zoomTest():void
			{
				var zoom:Zoom = new Zoom();
				//指定目标
				zoom.target = myImage;
				//过程耗时
				//zoom.duration = 2000;
				//目标增加高度倍数
				zoom.zoomHeightTo = 1.5;
				//目标增加宽度倍数
				zoom.zoomWidthTo = 1.5;
				//开始
				zoom.play();
				
			}
		]]>
	</mx:Script>
	<mx:Panel id="myPanel" width="90%" height="90%" title="移动示例:点击图片">
		<mx:Image id="myImage" source="assets/1.jpg" click="zoomTest()"/>
	</mx:Panel>
</mx:Application>

 

如果你试了试这俩个例子..心里应该有普了.

我写的很垃圾..- -#  毕竟只看了俩三天..- -#

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute" width="740" height="270"
	creationComplete="getImage.send()"
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off">
		
	<mx:Script>
		<![CDATA[
			import flash.events.MouseEvent;
			import flash.net.URLRequest;
			import flash.net.navigateToURL;
			import mx.collections.ArrayCollection;
			import mx.containers.VBox;
			import mx.controls.Image;
			import mx.controls.Label;
			import mx.core.Container;
			import mx.effects.Move;
			import mx.effects.Zoom;
			import flash.utils.Timer;
			import mx.rpc.events.ResultEvent;
			
			//计时器
			private var timer:Timer;
			
			//存放xml
			private var imageResource:ArrayCollection = new ArrayCollection();
			//存放当前中间图片的下标
			private var index:Number = 0;
			
			//声明6个图画
			private var urls:ArrayCollection = new ArrayCollection();
			public var vboxes:ArrayCollection = new ArrayCollection();
			private var vb:VBox = new VBox();
			
			private function fromImage(event:ResultEvent):void
			{
				imageResource = event.result.images.image;
				init();
				goLayout();
				timer = new Timer(3000);
				timer.addEventListener(TimerEvent.TIMER,doTimer);
				timer.start();
			}
			private function init():void
			{	
				for(var i:uint=0;i<imageResource.length;i++)
				{
					//连接
					var url:String = imageResource.getItemAt(i).url;
					
					//id
					var id:String = imageResource.getItemAt(i).id;
					
					//vbox
					var vbox:VBox = new VBox();
					
					//图画
					var image:Image = new Image();
					image.buttonMode = true;
					image.id = id;
					image.source = imageResource.getItemAt(i).src;
					image.height = 120;
					
					//标题
					var title:Label = new Label();
					title.id = "t"+id;
					title.buttonMode = true;
					title.text = imageResource.getItemAt(i).title;
					
					//描述
					var descript:Label = new Label();
					descript.id = "d"+id;
					descript.buttonMode = true;
					descript.text = imageResource.getItemAt(i).descript;
					
					
					//添加单击事件
					image.addEventListener(MouseEvent.CLICK,doClick);
					image.addEventListener(MouseEvent.MOUSE_OVER,doOver);
					image.addEventListener(MouseEvent.MOUSE_OUT,doOut);
					title.addEventListener(MouseEvent.CLICK,doClick);
					descript.addEventListener(MouseEvent.CLICK,doClick);
					
					//添加
					urls.addItem(url);
					vbox.addChild(image);
					var vbox2:VBox = new VBox();
					vbox2.addChild(title);
					vbox2.addChild(descript);
					vbox.addChild(vbox2);
					
					vboxes.addItem(vbox);
				}	
			}
			
			//鼠标悬浮事件
			private function doOver(event:MouseEvent):void
			{
				
				var image:Image = event.currentTarget as Image;
				//第一个是颜色, 第二个不知道,第三个左右背光的宽度,第四个是上下背光,第五个是背光颜色的深度,最后一个数字好像是溢出
				image.filters=[new GlowFilter(0xffffff,0.8,10,10,2,10,false,false)];
			}
			
			private function doOut(event:MouseEvent):void
			{
				var image:Image = event.currentTarget as Image;
				image.filters=[new GlowFilter(0xcccccc,0.8,4,4,1,3,false,false)];
			}
			
			//图片单击事件
			private function doClick(event:MouseEvent):void
			{
				var id:uint;
				if(event.currentTarget is Image)
					id = uint(event.currentTarget.id);
				else
					id = uint(event.currentTarget.id.substring(1))
				var url:String = urls.getItemAt(id).toString();
				navigateToURL(new URLRequest(url), '_blank');
			}
			
			//布局
			private function goLayout():void
			{
				setVbox(vboxes[vboxes.length-2],0,0,-10,154);
				setVbox(vboxes[vboxes.length-1],1,1,109,71);
				setVbox(vboxes[0],1.5,1.3,317,10);
				setVbox(vboxes[1],1,1,543,71);
				setVbox(vboxes[2],0,0,750,154);
			}
			
			private function setVbox(vbox:VBox,zoomH:Number,zoomW:Number,xT:Number,yT:Number):void
				{
					addChild(vbox);
					var image:Image = vbox.getChildAt(0) as Image;
					//放大
					var zoom:Zoom = new Zoom();
					var other:Zoom = new Zoom();
					
					//行动的时间
					zoom.duration = 1000;
					other.duration = 1000;
					if(zoomW == 0 && zoomH == 0)
					{
						zoom.target = vbox;
						other.target = image;
					}
					else
					{
						zoom.target = image;
						other.target = vbox;						
					}
					//指定放大倍数
					zoom.zoomHeightTo = zoomH;
					zoom.zoomWidthTo = zoomW;
					other.zoomHeightTo = 1;
					other.zoomWidthTo = 1;
					
					//移动
					var move:Move = new Move();
					move.duration = 1000;
					move.target = vbox;
					//指定移动到哪个位置
					move.xTo = xT;
					move.yTo = yT;
					//移动 放大
					move.play();
					zoom.play();
					other.play();
				}
		
			private function doTimer(event:TimerEvent):void
			{
				nextImage();
			}
			
			//下一张
			private function nextImage():void
			{
				timer.stop();
				timer.start();
				index += 1;
				
				setVbox(vboxes[vboxes.length-2],0,0,750,154);
				setVbox(vboxes[vboxes.length-1],0,0,0,154);
				setVbox(vboxes[0],1,1,119,71);
				setVbox(vboxes[1],1.7,1.5,317,10);
				setVbox(vboxes[2],1,1,533,71);
				
				//转换
				vb = vboxes[vboxes.length-2];
				vboxes[vboxes.length-2] = vboxes[vboxes.length-1];
				vboxes[vboxes.length-1] = vboxes[0];
				vboxes[0] = vboxes[1];
				vboxes[1] = vboxes[2];
				vboxes[2] = vb;
				
				if(index > imageResource.length - 1)
				{
					index = 0;
				}
				
				var r:Number = index+2;
				//验证索引
				if(r > imageResource.length - 1)
				{
					r = 0;
					if(index == imageResource.length -1)
						r = 1
				}
				var image:Image = vboxes[2].getChildAt(0) as Image;
				image.source = imageResource.getItemAt(r).src;
			}
			
			private function backImage():void
			{
				timer.stop();
				timer.start();
				index -= 1;

				setVbox(vboxes[vboxes.length-2],1,1,119,71);
				setVbox(vboxes[vboxes.length-1],1.7,1.5,317,10);
				setVbox(vboxes[0],1,1,533,71);
				setVbox(vboxes[1],0,0,750,154);
				vboxes[2].alpha = 0;
				setVbox(vboxes[2],0,0,0,154);
				vboxes[2].alpha = 100;
				
				vb = vboxes[2];
				vboxes[2] = vboxes[1];
				vboxes[1] = vboxes[0];
				vboxes[0] = vboxes[vboxes.length-1];
				vboxes[vboxes.length-1] = vboxes[vboxes.length-2];
				vboxes[vboxes.length-2] = vb;
				
				if(index < 0)
				{
					index = imageResource.length-1;
				}
				
				var l:Number = index - 2;
				if(l < 0)
				{
					l = imageResource.length - 1;
					if(index == 0)
						l=imageResource.length - 2;
				}
				var image:Image = vboxes[vboxes.length-2].getChildAt(0) as Image;
				image.source = imageResource.getItemAt(l).src;
			}
		]]>
	</mx:Script>
	<mx:HTTPService id="getImage"
		url="../../flash/image.xml"
		result="fromImage(event)"/>
		
	<mx:Button x="26" label="←" 
		verticalCenter="0"
		click="backImage()"/>
	<mx:Button x="666" label="→" 
		click="nextImage()" verticalCenter="0"/>
</mx:Application>

 

其中的 HTTPService  id 就是一名字, url 是指向谁发送一个请求. result是当请求得到响应时调用哪个函数.

<mx:HTTPService id="getImage"
		url="image.xml"
		result="fromImage(event)"/>

 

在开头的application 中, creationComplete的值 是当自己部署完毕时的动作. 换句话说,就是当<application>这个标签执行完的时候,就会执行creationComplete的值. 在这里 它的值getImage.send() 就是发送请求~好好看看 getImage是谁呢.~~就是在上边声明的 HTTPService的id.

horizontalScorollPolicy = "off" 是让横向滚动条禁用

verticalScrollPolicy = "off" 纵向滚动条禁用.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute" width="740" height="270"
	creationComplete="getImage.send()"
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off">

 

 这里的 event.result.images.image.

event.result 可以得到请求的整个xml文档.

images,和image都是xml文档里的标签. xml文档代码在下边

看得出,imageResource 得到是image的数组.~~

 

Timer 的用法.- -#  我能不能另写一个帖子..其实我也是在javaeye上看人家才写出来的..就是一时间器.定时调用.

			private function fromImage(event:ResultEvent):void
			{
				imageResource = event.result.images.image;
				init();
				goLayout();
				timer = new Timer(3000);
				timer.addEventListener(TimerEvent.TIMER,doTimer);
				timer.start();
			}

image.xml文档代码

<?xml version="1.0" encoding="UTF-8"?>
<images>
	<image id="0"
		   src="assets/1.jpg"
		   title="勇敢者"
		   descript="还是波波" 
		   url="http://www.1.com"/>
	<image id="1"
		   src="assets/2.jpg" 
		   title="冰河世纪"
		   descript="波~波~"
		   url="http://www.2.com"/>
	<image id="2"
		   src="assets/3.jpg" 
		   title="异煞"
		   descript="路径波"
		   url="http://www.3.com"/>
	<image id="3"
		   src="assets/4.jpg" 
		   title="天衣无缝"
		   descript="路径波"
		   url="http://www.4.com"/>
	<image id="4"
		   src="assets/5.jpg" 
		   title="反反复复"
		   descript="路径波"
		   url="http://www.5.com"/>
	<image id="5"
		   src="assets/6.jpg" 
		   title="生生世世"
		   descript="路径波"
		   url="http://www.6.com"/>
</images>

 
返回顶楼
         
  • 十年陈
  • 等级: 初级会员
  • 性别:
  • 文章: 23
  • 积分: 10
  • 来自: 杭州
   发表时间：2009-07-28  
var move:Move = new Move();这样new出来为啥没有target属性，后来我用<mx:Move .../>这样生成就可以了，看了一下flex的help文档。。
返回顶楼
          回帖地址
0 请登录后投票
  • yunmoxue
  • 等级: 初级会员
  • 性别:
  • 文章: 36
  • 积分: 70
  • 来自: 郑州
   发表时间：2009-07-28  
十年陈 写道
var move:Move = new Move();这样new出来为啥没有target属性，后来我用<mx:Move .../>这样生成就可以了，看了一下flex的help文档。。

var move:Move = new Move();
move.target = myImage;

不就行了.


附上一个你可能使用的方法.
//网址
http://livedocs.adobe.com/flex/3_cn/langref/mx/effects/Move.html 
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Move effect. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            private function moveImage():void {
                myMove.end();
                myMove.xTo=mouseX-60; 
                myMove.play();
            }
      ]]>
    </mx:Script>

    <mx:Move id="myMove" target="{img}"/>

    <mx:Panel title="Move Effect Example" width="95%" height="95%" 
        paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">

       <mx:Text width="100%" color="blue" 
           text="Click anywhere on the canvas to move the phone horizontally to that position"/>

        <mx:Canvas id="canvas" width="100%" height="100%" mouseDown="moveImage();">

            <mx:Image id="img" source="@Embed(source='assets/Nokia_6630.png')"/>

        </mx:Canvas>
    
    </mx:Panel>
</mx:Application>
返回顶楼
          回帖地址
0 请登录后投票
  • wangyazhen
  • 等级: 初级会员
  • 性别:
  • 文章: 12
  • 积分: 30
  • 来自: 厦门
   发表时间：2009-12-02   最后修改：2009-12-02
我认真看过代码，觉得还不错，我目前在做电子新闻，在加些功能，应该就可以了，想拿这个去用，不会介意吧...
返回顶楼
          回帖地址
0 请登录后投票
  • yunmoxue
  • 等级: 初级会员
  • 性别:
  • 文章: 36
  • 积分: 70
  • 来自: 郑州
   发表时间：2009-12-04  
wangyazhen 写道
我认真看过代码，觉得还不错，我目前在做电子新闻，在加些功能，应该就可以了，想拿这个去用，不会介意吧...

汗.  谢谢啊!!! 

终于有人用我的代码了. - -#  ...感激...
返回顶楼
          回帖地址
0 请登录后投票
  • wangyazhen
  • 等级: 初级会员
  • 性别:
  • 文章: 12
  • 积分: 30
  • 来自: 厦门
   发表时间：2009-12-23  
很早很看这个帖子了 后来我用你代码时 改了些方法 特别是你那个图片迭代的方法，我一直觉得很怪，没能力看懂，后来采用 %求余的办法实现图片循环迭代，代码量几乎减少一半！求余的运算比较适合做这种循环操作，我感觉。。。希望指点
返回顶楼
          回帖地址
0 请登录后投票
  • yunmoxue
  • 等级: 初级会员
  • 性别:
  • 文章: 36
  • 积分: 70
  • 来自: 郑州
   发表时间：2009-12-25  
wangyazhen 写道
很早很看这个帖子了 后来我用你代码时 改了些方法 特别是你那个图片迭代的方法，我一直觉得很怪，没能力看懂，后来采用 %求余的办法实现图片循环迭代，代码量几乎减少一半！求余的运算比较适合做这种循环操作，我感觉。。。希望指点

怎么用%迭代啊.
汗..我那代码就我自己能看懂,不过改成循环的话也差不多了.
返回顶楼
          回帖地址
0 请登录后投票
  • zxd7900663
  • 等级: 初级会员
  • 性别:
  • 文章: 11
  • 积分: 50
  • 来自: 杭州
   发表时间：2010-01-21  
非常感谢楼主，不过看了下图片切换时下面的信息（title和descript）没有跟图片变，而是乱掉了，在nextImage()和backImage()方法中需要加如下代码（最后一句）：
var image:Image = vboxes[2].getChildAt(0) as Image;  
                var title:Label = vboxes[2].getChildAt(1).getChildAt(0) as Label;  
                var descript:Label = vboxes[2].getChildAt(1).getChildAt(1) as Label;  
                image.source = imageResource.getItemAt(r).src;  
                title.text = imageResource.getItemAt(r).title;  
                descript.text = imageResource.getItemAt(r).descript;
backImage()方法中也类似，呵呵
返回顶楼
          回帖地址
0 请登录后投票
  • chrislee1982
  • 等级: 初级会员
  • 性别:
  • 文章: 168
  • 积分: 30
  • 来自: 广州
   发表时间：2010-04-09  
昨天试过resize和move效果并行使用的使用，就有问题。
产生不到预期的效果，不知道大家会不会有这样的问题。
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics