<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
<mx:Resize id="expand" target="{img}" widthTo="200" heightTo="200"
duration="10000" effectEnd="endEffectHandler();"/>
</fx:Declarations>
<mx:Image id="img" width="30" height="60"
source="@Embed(source='source/img1.jpg')"/>
<mx:Button id="button1" label="启动" click="expand.play();" x="103" y="197"/>
<mx:Button label="暂停" click="expand.pause();" x="188" y="197"/>
<mx:Button label="继续播放" click="expand.resume();" x="269" y="198"/>
<mx:Button label="逆序播放" click="expand.reverse();" x="355" y="198"/>
<mx:Button label="结束" click="expand.end();" x="434" y="197"/>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private function endEffectHandler():void {
Alert.show("Effect 结束!");
}
/*
Resize 效果在指定的时间间隔更改组件的宽度或高度,或同时更改这两者。
属性
Resize:效果的持续时间(以毫秒为单位)。
事件
effectEnd:mx.events.EffectEvent.EFFECT_END
方法
play():
开始播放效果。通常在调用 play() 方法之前先调用 end() 方法,以确保在开始播放新效果前已结束先前效果的所有实例。
所有子类都必须实现此方法。
pause():
暂停效果,直到调用 resume() 方法。
resume():
在效果由 pause() 方法暂停后继续播放效果。
reverse():
逆序播放效果;如果当前正在播放效果,则从该效果的当前位置开始逆序播放。
end():
断当前正在播放的效果,立即跳转到该效果的末尾。调用此方法将调用 EffectInstance.end() 方法。
如果调用此方法来结束播放效果,效果实例将分派 effectEnd 事件。
如果将效果实例作为参数传递,则会中断此实例。如果没有传入参数,则该效果当前生成的所有效果实例都将中断。
*/
]]>
</fx:Script>
</s:Application>
分享到:
相关推荐
#### 三、Flex动画效果的使用 在Flex中使用动画效果有两种主要的方式:一是通过调用特定效果对象的`play()`方法;二是利用触发器来自动播放动画效果。下面分别介绍这两种方式: ##### 3.1 使用`play()`方法播放...
### Flex UI组件使用全集详解 #### 概述 本文档是基于阿树对Adobe Flex ...理解这些组件的功能和使用方法对于构建高效、响应式的RIA至关重要。通过熟练掌握这些组件,开发者能够更加灵活地设计和实现自己的应用界面。
这本书由作者Dason编写,内容覆盖了Flex 3中的多种组件及其用法,并通过实际案例帮助读者更好地理解和掌握这些组件的应用场景和技术细节。 #### 二、基础知识 在深入了解各个组件之前,我们需要先了解Flex 3的一些...
总之,通过使用Spark Effects中的Fade和Resize效果类,开发者可以在Flex应用程序中创造出丰富的动画效果,如淡入淡出和组件大小变化,从而提升用户交互体验。理解和熟练运用这些工具对于创建引人入胜的Flex应用至关...
通过以上实例,我们不仅学习了如何使用Flex4实现复杂的动画效果,还掌握了状态管理和动画控制的基本方法。这些技能对于开发高质量的RIA应用程序至关重要。在未来的工作中,可以根据具体需求灵活运用这些技术,创建...
【Flex特效详解与初学者指南】 Flex特效是Adobe Flex...初学者可以从基础的AnimateProperty效果开始学习,逐渐掌握更多复杂效果的使用,通过实践不断熟悉Flex的行为机制和动画系统,从而提升应用的交互性和吸引力。
本文将深入探讨Flex特效的使用方法、播放流程、常见效果类以及触发这些效果的方式,并通过实例演示如何实现特定的特效。 首先,让我们了解一下Flex特效的基本概念。EffectManager类是Flex特效的核心管理器,它负责...
在Flex 3.0中,开发者可以利用这些内置的效果来实现过渡、动画以及其他视觉变换,使得应用程序更加生动且易于使用。下面我们将深入探讨Flex 3.0中的特效及其应用。 1. **Effect 类**:在Flex中,所有的效果都继承自...
Flex提供了一系列预定义的效果,如Fade、Move和Resize等,同时允许自定义效果。开发者可以为组件添加效果,增强用户体验,例如淡入淡出、滑动和缩放等。 **AS3自定义HashMap**是关于在ActionScript中实现自定义数据...
Flex是Adobe开发的一种开源框架,主要用于构建...通过监听和处理鼠标事件,以及可能使用动画库,你可以为用户提供一个交互性更强的弹出窗口体验。记得在实际项目中测试这些功能,以确保它们在不同场景下都能正常工作。
4. **动画效果**:通过`mx.effects.Effect`类,如`Fade`和`Slide`,可以为窗口的展开和收起添加平滑的过渡效果,提升用户体验。 5. **状态管理**:使用`states`机制,可以定义不同窗口停靠状态下的界面布局,方便...
在本项目中,我们探讨的是如何使用jQuery库来实现一种图片列表显示的切换效果,从一行一图到一行两图的动态变换。这种效果常见于网页设计中,用于提升用户体验,尤其是在展示产品或图片集的时候。jQuery是一个轻量级...
通过设置`display: flex`属性,我们可以使容器具有弹性,并使用`flex-grow`, `flex-shrink`, 和 `flex-basis`属性来控制子元素的扩展、收缩和基础大小。 2. **媒体查询(Media Queries)**:为了在不同屏幕尺寸下...
使用Masonry,只需几行代码就能实现复杂的效果,且提供了丰富的选项和方法进行定制。 5. JavaScript 自定义实现:如果不依赖于jQuery或其他库,也可以纯JavaScript实现瀑布流布局。这通常涉及到计算元素的尺寸,...
例如,使用`slideToggle`可以轻松地在元素的可见性和隐藏状态之间切换,并带有一定的动画效果。 3. **状态管理**:为了确保一次只有一个手风琴项是展开的,我们需要管理当前激活的状态。这可以通过添加和移除特定的...
3. **动画效果**:如果想要更平滑的过渡,可以使用CSS3的transition属性来定义淡入淡出的速度和效果。例如,`transition: opacity 0.5s ease-in-out;` 将使图片的透明度在0.5秒内平滑变化。 结合这两种效果,淡入...
- 使用Flexbox布局,可以通过设置`display: flex`和`flex-wrap: wrap`来创建一个容器,使得子元素可以在一行内排列,当行满时自动换行。 - 使用`align-items: stretch`确保元素在垂直方向上拉伸填充整个容器。 - ...
jQuery,作为一款广泛使用的JavaScript库,提供了许多方便的DOM操作和动画功能,使得实现这样的效果变得简单。在这个"jQuery弹出层垂直居中效果.zip"文件中,我们很可能会找到一个示例,展示如何利用jQuery来实现弹...
4. **动画效果**:为了增加用户体验,还可以使用jQuery的动画功能,如`fadeIn()`和`fadeOut()`,平滑地控制文字的显示和隐藏,让过渡更自然。 5. **响应式设计**:为了适应不同设备和屏幕尺寸,可以使用媒体查询(`...
4. **动画效果**:为了提供更好的用户体验,代码可能还包含了一些过渡和动画效果,例如图片的淡入淡出,以平滑地展示布局变化。 5. **自适应图片**:图片可能使用`img-fluid`类,这是Bootstrap提供的一个类,使图片...