`

图片rollover状态 动画easing效果

    博客分类:
  • Flex
阅读更多
<?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>
 
1
0
分享到:
评论

相关推荐

    用Javascript实现图片渐隐的效果.pdf

    此外,我们还可以使用JavaScript实现其他各种交互效果,如 rollover 效果、 hover 效果等。这些效果可以使网页更加有趣和交互性强。 在本文中,我们还介绍了如何使用Flash制作正多边形的方法。Flash是一种强大的...

    Flash制作滚动广告图片效果.doc

    ### Flash滚动广告图片效果制作教程 #### 一、前言 在互联网早期,Flash因其出色的交互性和动画功能而被广泛应用于网页设计中。本篇教程将详细介绍如何利用Flash软件制作一款具有滚动效果的广告图片。该教程适用于...

    dreamweaver怎么制作鼠标经过图片变换的效果?

    而当鼠标指针移动到图片上时,图片会自动变换为设定的悬停状态图片,从而产生鼠标经过效果。 制作这种效果的关键在于理解HTML的`&lt;img&gt;`标签以及其相关的CSS属性。在Dreamweaver中,它会自动生成一段代码,包括两个`...

    sprity-css-rollover:在鼠标悬停时提供视频预览效果

    提供鼠标悬停时的视频预览效果 如果没有鼠标悬停,则允许使用默认图像 查看 要求 版本&gt; = 1.0 安装 npm i sprity-css-rollover 用法 &lt;!-- Change cursor manually, if needed --&gt; &lt; style type =" text/...

    Flash中播放和停止动画.pdf

    总之,Flash中的动画播放和停止是通过ActionScript和时间轴控制实现的,熟练掌握这些技巧,能够创建出丰富的交互式动画效果,提升用户体验。无论是教学还是实际项目开发,理解和运用这些概念都是至关重要的。

    Flash TAB动画 含fla源文件.rar

    标题中的“Flash TAB动画 含fla源文件.rar”指的是一个包含Flash源文件(.fla格式)的压缩包,这个文件主要用于展示一种TAB式的动画效果。在网页设计中,TAB导航是一种常见的交互元素,它允许用户通过点击不同的标签...

    Photoshop认证考试题分享.pdf

    1. Rollover状态与动画:在Photoshop中,Rollover状态指的是鼠标悬停在对象上时的交互效果。在动画面板上制作的动画只适用于当前的Rollover状态,而不是所有状态,这意味着每个Rollover状态可能需要单独设置动画。 ...

    强大的Flash动画生成工具 - SWiSH Max3 v3.0 简体中文特别版

    SwiSHmax用来创建直线、正方形、椭圆形、贝塞尔曲线、动作路径、精灵、rollover按钮和导入表单的所有工具,全都囊括在一个非常容易使用的界面里。 SwiSHmax和SWiSH2最大的不同点在于全功能的描述语言:SwiSHscript。...

    FLEX 鼠标移上去图片放大,图片放大的倍数

    在Flex中实现图片放大效果的核心思想是通过响应`rollOver`和`rollOut`事件来调整图片的`scaleX`和`scaleY`属性。当鼠标悬停在图片上时,触发`rollOver`事件,使图片放大;当鼠标离开图片时,触发`rollOut`事件,恢复...

    ImageReady页面图片交换教程.pdf

    ImageReady是一款专为网页制作设计的图像编辑软件,与Photoshop捆绑销售,尽管Photoshop功能强大,但ImageReady在处理网页动态效果,尤其是页面图片交换方面具有独特优势。本文主要讲解如何使用ImageReady创建适用于...

    计算机平面设计-复习资料.pdf

    6. Rollover状态与动画:在Photoshop中,如果设定了Rollover状态的效果,那么在动画面板上制作的动画仅适用于当前的Rollover状态,不能跨状态应用。 7. Web图像格式理解:GIF支持最多256种颜色,适合简单图形和动画...

    saturation-rollover-effect.zip_genes

    【标题】"饱和度滚动效果.zip基因"指向的是一个与Silverlight相关的图像处理技术,具体是关于图片饱和度的调整和交互效果实现的项目。Silverlight是微软开发的一个富互联网应用程序平台,它允许开发者创建丰富的媒体...

    flash动画制作

    在按钮元件上添加`on(rollOver)`事件监听器,激活`play()`函数,实现鼠标悬停时播放动画。 7. **图层管理**:通过创建新图层并复制不同颜色的渐变图层,可以实现多色过渡效果。在场景中,每个按钮元件都有独立的...

    同问关于计算机二级Photoshop考试试题与答案.pdf

    在Photoshop中,设置Rollover状态的效果并不意味着动画面板上的动画适用于所有Rollover状态,而是特定于当前状态。 2. **滤镜减少色带**:色带是渐变中颜色过渡不平滑的现象。滤镜&gt;杂色可以减少渐变中的色带,使...

    (完整word)计算机二级photoshop练习题.doc

    1. Rollover 状态与动画:在Photoshop中,Rollover状态是交互设计中的一种,指的是鼠标悬停在对象上时显示的效果。动画面板上的动画可以应用于不同的Rollover状态,但同一动画不能同时应用于多个Rollover状态。选项C...

    ps选择题说课讲解.pdf

    1. Rollover 状态的效果:在 Photoshop 中,如果设定了 Rollover 中某个状态的效果,则动画面板上制作的动画仅适用于当前的 Rollover 状态。 2. 渐变中的色带减少:可以使用滤镜&gt;风格化&gt;扩散来减少渐变中的色带。 ...

    多媒体技术应用flash.ppt

    同时,按钮组件可以创建交互式界面,通过设置不同状态(如上 rollover 和 down 状态)来实现不同反馈。 **综合应用** 最后,通过综合运用上述技巧,可以创建出各种复杂动画项目,如游戏、教学演示、广告等。在实践...

    flash专题复习(含答案).doc

    - "小猪"元件的动画是逐帧动画,每一帧都是一张不同的图片,形成连续的运动效果。 - 在"小猪"图层第60帧插入帧,小猪会保持在第60帧的状态,即会继续跳绳。 - "云"元件的移动通过在第60帧插入关键帧并创建补间...

    Photoshop_认证考试题借鉴.pdf

    在Photoshop中,动画面板上的动画可以应用于Rollover状态,但每个动画只适用于当前的Rollover状态,而不是所有状态。 2. 渐变中的色带减少:色带是由于颜色渐变中色彩过渡不平滑产生的现象。使用滤镜&gt;杂色可以减少...

Global site tag (gtag.js) - Google Analytics