yunmoxue
- 浏览: 289465 次
- 性别:
- 来自: 郑州
-
文章分类
最新评论
-
ms143014：
很详细
JS 中 Tween 的使用 -
yunmoxue：
qdpurple 写道谢谢！ 我是一个应届毕业生，刚参加jav ...
网上简历投递技巧 -
yunmoxue：
atgoingguoat 写道查询 MYSQL 表中文名称，怎 ...
mysql查看数据库和表的信息 -
atgoingguoat：
查询 MYSQL 表中文名称，怎么写？
mysql查看数据库和表的信息 -
blacksoul7：
hoho
php 和 apache 下载,安装,配置,测试
呵呵.先别急.等你知道了这俩个类,就知道了图片移动并不困难了..
第一个是 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>
分享到：
评论
8 楼
chrislee1982
2010-04-09
昨天试过resize和move效果并行使用的使用，就有问题。
产生不到预期的效果，不知道大家会不会有这样的问题。
产生不到预期的效果，不知道大家会不会有这样的问题。
7 楼
zxd7900663
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()方法中也类似，呵呵
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()方法中也类似，呵呵
6 楼
yunmoxue
2009-12-25
wangyazhen 写道
很早很看这个帖子了 后来我用你代码时 改了些方法 特别是你那个图片迭代的方法，我一直觉得很怪，没能力看懂，后来采用 %求余的办法实现图片循环迭代，代码量几乎减少一半！求余的运算比较适合做这种循环操作，我感觉。。。希望指点
怎么用%迭代啊.
汗..我那代码就我自己能看懂,不过改成循环的话也差不多了.
5 楼
wangyazhen
2009-12-23
很早很看这个帖子了 后来我用你代码时 改了些方法 特别是你那个图片迭代的方法，我一直觉得很怪，没能力看懂，后来采用 %求余的办法实现图片循环迭代，代码量几乎减少一半！求余的运算比较适合做这种循环操作，我感觉。。。希望指点
4 楼
yunmoxue
2009-12-04
wangyazhen 写道
我认真看过代码，觉得还不错，我目前在做电子新闻，在加些功能，应该就可以了，想拿这个去用，不会介意吧...
汗. 谢谢啊!!!
终于有人用我的代码了. - -# ...感激...
3 楼
wangyazhen
2009-12-02
我认真看过代码，觉得还不错，我目前在做电子新闻，在加些功能，应该就可以了，想拿这个去用，不会介意吧...
2 楼
yunmoxue
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>
1 楼
十年陈
2009-07-28
var move:Move = new Move();这样new出来为啥没有target属性，后来我用<mx:Move .../>这样生成就可以了，看了一下flex的help文档。。
发表评论
-
AIR TO EXE
2010-01-21 12:47 1155著名的 air to exe 软件,免费试用版. SHU ... -
Action Script 3 中文帮助文档
2010-01-21 09:39 1594大家看资源吧. 找它 挺不容易的 这个是最全的,45 ... -
flex 计时器 timer
2009-08-13 13:05 1157http://lubianfengjing.iteye.com ... -
flex 3 学习笔记
2009-08-04 20:41 1244容器 vbox 垂直排列 hbox 水平排列 can ... -
flex 3 中文 api
2009-07-14 14:38 3607在线的：http://livedocs.adobe.com/f ...
相关推荐
在Flex3中，图片移动是一项基础且重要的功能，它涉及到用户界面交互和动态内容的呈现。Flex3是一个基于ActionScript3.0的开发框架，用于构建富互联网应用程序（RIA）。在Flex中，我们可以利用ActionScript的强大力量...
自己开发的Flex图片移动例子，如有想学习的，可以下来学习一下。
根据给定的标题和描述，我们将重点讨论如何使用Flex来实现图片的自动旋转、移动和放大功能。 首先，我们要理解Flex中的基本组件。`MXML`是Flex的主要标记语言，它与HTML类似，用于定义用户界面的布局和组件。在给定...
以上就是创建Flex图片缩放移动组件的主要步骤和技术要点。通过熟练掌握这些知识，开发者可以构建出具有交互性、可扩展性的图像操作界面，提升用户体验。在实际应用中，可能还需要考虑触摸设备的支持、多线程优化、...
在本文中，我们将深入探讨如何在Flex环境中实现鼠标拖动图片的功能，并在鼠标松开时停止拖动。Flex是一种基于ActionScript 3.0的开放源代码框架，用于构建富互联网应用程序（RIAs）。它提供了丰富的用户界面组件库，...
3. **Flex控件移动** 控件在Flex中的移动可以通过修改其`x`和`y`坐标来实现。可以使用`Timer`或`ENTER_FRAME`事件来控制移动的节奏。例如，创建一个定时器，每隔一定时间更新控件的位置： ```actionscript var ...
"flex剪裁图片demo"是一个利用CSS Flexbox布局技术来实现图片剪裁功能的示例。下面将详细介绍如何使用Flexbox来创建一个可调整大小的图片剪裁框。 **一、Flexbox简介** Flexbox（弹性盒布局）是CSS3中的一种布局...
这展示了Flex4应用程序的跨平台能力，无论是在桌面还是移动设备上，都能提供一致的用户体验。 总结来说，“Flex4图片浏览效果，浏览图片demo”是一个利用Flex4框架创建的图像浏览应用实例，它展示了Flex4在图形渲染...
一、Flex图片预览组件基础 在Flex中，我们可以利用MX或Spark组件库中的Image组件来展示单张图片。然而，为了实现多图预览和滚动效果，我们需要自定义组件或者使用现有的第三方库，如在本例中的"photocoverflowLayout...
### Flex图片上传实例详解 在本篇文章中，我们将深入探讨一个具体的Flex图片上传实例，并对其中涉及的关键技术点进行详细解读。此实例不仅提供了一个实际的上传图片的应用场景，而且还包含了一些实用的代码片段，这...
4. 可能还使用了CSS3的`transform`和`transition`属性来实现平滑的缩放和移动效果。 项目的三种不同布局和功能差异化设计可能包括： 1. 图片网格布局：适合展示多张图片，用户可以通过点击预览大图。 2. 滑动预览...
在IT行业中，图片压缩与上传是一项常见的需求，尤其是在网页应用和移动应用开发中。Flex作为一个开源的、基于ActionScript的富互联网应用程序（RIA）框架，提供了丰富的组件和API来处理图像处理任务。这篇博文“Flex...
在IT行业中，尤其是在Web开发领域，"flex 图片画线，拖动"是一个常见的交互功能需求，用于增强用户体验。这个功能通常涉及到HTML5、CSS3和JavaScript等技术，特别是Flex布局和SVG图形技术。让我们详细探讨一下这个...
在Flex图片查看器中，"zoomin" 和 "zoomout" 是两个关键功能，它们允许用户对图片进行放大和缩小操作。这一特性在很多应用场景中都非常实用，比如在线看图、产品细节展示或者图像分析等。Zoomin功能允许用户点击或...
1. **3D坐标系**：Flex中的3D效果基于三维坐标系统，允许元素在X、Y和Z轴上移动、旋转和缩放。 2. **Transform3D对象**：在ActionScript中，Transform3D对象提供了进行3D变换的方法，如rotateX(), rotateY() 和 ...
- **Flex**：一种用于构建跨平台桌面应用程序和移动应用程序的技术。它基于Adobe Flash Player运行时环境，并使用MXML（标记语言）和ActionScript（基于ECMAScript的标准脚本语言）进行开发。 - **`FileStream` ...
总结来说，创建一个Flex图片浏览应用，需要掌握Flex的组件系统、事件处理机制以及图形渲染的基础知识。通过结合MXML和ActionScript，我们可以构建出一个具有缩放和平移功能的图片浏览器，提供用户友好的体验。在实际...
箭头轨迹移动。 实现功能：可以设置路径集合，速度，循环播放等信息，在已有的路径上循环移动，在拐角处，箭头身体部分同样会依附在原路径基础之上。 思路：箭头通过绘制得出（也可以自己扩展图片），通过设置角度...
在Flex游戏开发中，创建一个游戏人物移动和多人同步的简单实例涉及到多个关键知识点，这里我们将深入探讨这些技术。 首先，让我们关注人物移动的实现。在2D游戏场景中，通常使用精灵（Sprite）类来表示游戏中的角色...
在开发Flex图片编辑器时，主要涉及以下知识点： 1. **Flex SDK**：Flex SDK是开发Flex应用程序的基础，包括ActionScript编译器和MXML编译器，以及用于构建、测试和部署应用的工具。开发者需要下载并安装SDK来开始...