<?xml version="1.0" encoding="utf-8"?>
<!--created:Oct 6, 2010 file:FLEX4EffectExample1.mxml author:Michael -->
<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"
backgroundColor="0"
xmlns:comp="comp.*" viewSourceURL="srcview/index.html">
<s:layout>
<s:VerticalLayout verticalAlign="middle"
horizontalAlign="center"/>
</s:layout>
<fx:Declarations>
<s:Animate id="myAnimate"
duration="800"
easer="{this.linearEasing}">
<s:SimpleMotionPath property="height"
valueFrom="0"
valueTo="50"/>
</s:Animate>
<s:Animate id="myAnimate1"
duration="600"
easer="{this.linearEasing}">
<s:SimpleMotionPath property="height"
valueFrom="50"
valueTo="0"/>
</s:Animate>
<s:Linear id="linearEasing"
easeInFraction="0"
easeOutFraction="1"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private var cover:spark.components.Label;
private var cover1:spark.components.Label;
protected function bordercontainer1_creationCompleteHandler(event:FlexEvent):void
{
cover=new spark.components.Label();
cover1=new spark.components.Label();
cover.top=0;
cover.left=0;
cover.right=0;
cover.setStyle("backgroundColor", 0);
cover.setStyle("backgroundAlpha", .4);
cover.setStyle("textAlign", "center");
cover.setStyle("paddingTop", 15);
cover.setStyle("fontSize", 30);
cover.setStyle("fontStyle", "italic");
cover.setStyle("color", "white");
cover.text="Cosmos lighting";
cover.setStyle("addedEffect", myAnimate);
cover.setStyle("removedEffect", myAnimate1);
cover1.bottom=0;
cover1.left=0;
cover1.right=0;
cover1.setStyle("backgroundColor", 0);
cover1.setStyle("backgroundAlpha", .4);
cover1.setStyle("textAlign", "center");
cover1.setStyle("paddingTop", 15);
cover1.setStyle("fontSize", 16);
cover1.setStyle("fontFamily", "Arial");
cover1.setStyle("color", "white");
cover1.text="http://www.sxc.hu/";
cover1.buttonMode=true;
cover1.addEventListener(MouseEvent.CLICK, onClick);
cover1.setStyle("addedEffect", myAnimate);
cover1.setStyle("removedEffect", myAnimate1);
this.bc.addEventListener(MouseEvent.ROLL_OVER, onOver);
this.bc.addEventListener(MouseEvent.ROLL_OUT, onOut);
}
private function onOver(e:MouseEvent):void
{
this.myAnimate1.end();
this.bc.addElement(cover);
this.bc.addElement(cover1);
}
private function onOut(e:MouseEvent):void
{
this.myAnimate.end();
this.bc.removeElement(cover);
this.bc.removeElement(cover1);
}
private function onClick(e:MouseEvent):void
{
navigateToURL(new URLRequest(e.target.text), "_blank");
}
]]>
</fx:Script>
<s:BorderContainer backgroundImage="@Embed('images/images.png')"
backgroundImageFillMode="clip"
id="bc"
width="400"
height="296"
cornerRadius="4"
creationComplete="bordercontainer1_creationCompleteHandler(event)">
</s:BorderContainer>
</s:Application>
分享到:
相关推荐
此外,我们还可以使用JavaScript实现其他各种交互效果,如 rollover 效果、 hover 效果等。这些效果可以使网页更加有趣和交互性强。 在本文中,我们还介绍了如何使用Flash制作正多边形的方法。Flash是一种强大的...
### Flash滚动广告图片效果制作教程 #### 一、前言 在互联网早期,Flash因其出色的交互性和动画功能而被广泛应用于网页设计中。本篇教程将详细介绍如何利用Flash软件制作一款具有滚动效果的广告图片。该教程适用于...
而当鼠标指针移动到图片上时,图片会自动变换为设定的悬停状态图片,从而产生鼠标经过效果。 制作这种效果的关键在于理解HTML的`<img>`标签以及其相关的CSS属性。在Dreamweaver中,它会自动生成一段代码,包括两个`...
提供鼠标悬停时的视频预览效果 如果没有鼠标悬停,则允许使用默认图像 查看 要求 版本> = 1.0 安装 npm i sprity-css-rollover 用法 <!-- Change cursor manually, if needed --> < style type =" text/...
总之,Flash中的动画播放和停止是通过ActionScript和时间轴控制实现的,熟练掌握这些技巧,能够创建出丰富的交互式动画效果,提升用户体验。无论是教学还是实际项目开发,理解和运用这些概念都是至关重要的。
标题中的“Flash TAB动画 含fla源文件.rar”指的是一个包含Flash源文件(.fla格式)的压缩包,这个文件主要用于展示一种TAB式的动画效果。在网页设计中,TAB导航是一种常见的交互元素,它允许用户通过点击不同的标签...
1. Rollover状态与动画:在Photoshop中,Rollover状态指的是鼠标悬停在对象上时的交互效果。在动画面板上制作的动画只适用于当前的Rollover状态,而不是所有状态,这意味着每个Rollover状态可能需要单独设置动画。 ...
SwiSHmax用来创建直线、正方形、椭圆形、贝塞尔曲线、动作路径、精灵、rollover按钮和导入表单的所有工具,全都囊括在一个非常容易使用的界面里。 SwiSHmax和SWiSH2最大的不同点在于全功能的描述语言:SwiSHscript。...
在Flex中实现图片放大效果的核心思想是通过响应`rollOver`和`rollOut`事件来调整图片的`scaleX`和`scaleY`属性。当鼠标悬停在图片上时,触发`rollOver`事件,使图片放大;当鼠标离开图片时,触发`rollOut`事件,恢复...
ImageReady是一款专为网页制作设计的图像编辑软件,与Photoshop捆绑销售,尽管Photoshop功能强大,但ImageReady在处理网页动态效果,尤其是页面图片交换方面具有独特优势。本文主要讲解如何使用ImageReady创建适用于...
6. Rollover状态与动画:在Photoshop中,如果设定了Rollover状态的效果,那么在动画面板上制作的动画仅适用于当前的Rollover状态,不能跨状态应用。 7. Web图像格式理解:GIF支持最多256种颜色,适合简单图形和动画...
【标题】"饱和度滚动效果.zip基因"指向的是一个与Silverlight相关的图像处理技术,具体是关于图片饱和度的调整和交互效果实现的项目。Silverlight是微软开发的一个富互联网应用程序平台,它允许开发者创建丰富的媒体...
在按钮元件上添加`on(rollOver)`事件监听器,激活`play()`函数,实现鼠标悬停时播放动画。 7. **图层管理**:通过创建新图层并复制不同颜色的渐变图层,可以实现多色过渡效果。在场景中,每个按钮元件都有独立的...
在Photoshop中,设置Rollover状态的效果并不意味着动画面板上的动画适用于所有Rollover状态,而是特定于当前状态。 2. **滤镜减少色带**:色带是渐变中颜色过渡不平滑的现象。滤镜>杂色可以减少渐变中的色带,使...
1. Rollover 状态与动画:在Photoshop中,Rollover状态是交互设计中的一种,指的是鼠标悬停在对象上时显示的效果。动画面板上的动画可以应用于不同的Rollover状态,但同一动画不能同时应用于多个Rollover状态。选项C...
1. Rollover 状态的效果:在 Photoshop 中,如果设定了 Rollover 中某个状态的效果,则动画面板上制作的动画仅适用于当前的 Rollover 状态。 2. 渐变中的色带减少:可以使用滤镜>风格化>扩散来减少渐变中的色带。 ...
同时,按钮组件可以创建交互式界面,通过设置不同状态(如上 rollover 和 down 状态)来实现不同反馈。 **综合应用** 最后,通过综合运用上述技巧,可以创建出各种复杂动画项目,如游戏、教学演示、广告等。在实践...
- "小猪"元件的动画是逐帧动画,每一帧都是一张不同的图片,形成连续的运动效果。 - 在"小猪"图层第60帧插入帧,小猪会保持在第60帧的状态,即会继续跳绳。 - "云"元件的移动通过在第60帧插入关键帧并创建补间...
在Photoshop中,动画面板上的动画可以应用于Rollover状态,但每个动画只适用于当前的Rollover状态,而不是所有状态。 2. 渐变中的色带减少:色带是由于颜色渐变中色彩过渡不平滑产生的现象。使用滤镜>杂色可以减少...