将鼠标悬停在Flash横幅中后切换图像

Question

我正在为客户制作一个flash横幅广告，这一切都很糟糕。

简短

我正在制作一个动作脚本，在3张图像之间切换，间隔为5000毫秒。但是，该功能不应该发生，直到存在2秒的悬停。我创造了2帧。第1帧用于空闲，当悬停2秒时，它进入第2帧。

问题

整个事情都在全力以赴，而我使用setTimeout添加的2秒延迟只运行一次，并且从之前继续，比如说我徘徊了1秒并将光标移开，它只需要下一次1秒。如果我将鼠标放在它上面，它会叠加淡入淡出效果，使图像随机消失，间隔时间不到800毫秒。这很奇怪？

目标

我希望横幅闲置，直到我将鼠标悬停在它上面2秒钟。如果我移除鼠标，整个事情应该重新设置。

虽然有效，但它应在3张图像之间淡入淡出，间隔为5000毫秒。

提前致谢！ ：）

代码

import flash.events.MouseEvent;
import flash.utils.clearInterval;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import flash.net.URLVariables;

stop();

image_1.alpha=1;
image_2.alpha=1;
image_3.alpha=1;

var current = 1;
var interval1;
var url1 = "http://www.danbolig.dk/bolig/koebenhavn/2200/udlejningsejendom/956tl000227-956";
var url2 = "http://www.danbolig.dk/bolig/gladsaxe/2880/andet/956tl000245-956";
var url3 = "http://www.danbolig.dk/butik/ErhvervKobenhavn";

setTimeout(intervall, 2000);

function intervall():void
{
    interval1 = setInterval(imageFades, 5000);
}

function imageFades():void
{
    if(current == 1)
    {
        current = 2;
        image_2.alpha=1;
        new Tween(image_1, "alpha", Strong.easeOut, 1, 0, 1, true);
    }
    else if(current == 2)
    {
        current = 3;
        new Tween(image_2, "alpha", Strong.easeOut, 1, 0, 1, true);
    }
    else if(current == 3)
    {
        current = 1;
        new Tween(image_1, "alpha", Strong.easeOut, 0, 1, 1, true);
    }
}

linkOverlay.addEventListener(MouseEvent.MOUSE_OUT, detoggleAnimation);

function detoggleAnimation(event:MouseEvent):void
{
    gotoAndStop(1);
    clearInterval(interval1);
    image_1.alpha = 1;
    image_2.alpha = 1;
    image_3.alpha = 1;
}

linkOverlay.addEventListener(MouseEvent.CLICK, gotoLink);

function gotoLink(event:MouseEvent):void
{
    if(current == 1)
    {
        navigateToURL(new URLRequest(url1));
    }
    else if(current == 2)
    {
        navigateToURL(new URLRequest(url2));
    }
    else if(current == 3)
    {
        navigateToURL(new URLRequest(url3));
    }
}

Answer 1

我看到一些问题。首先，你没有看到我能看到的第2帧。其次，你不是在任何地方都在监听悬停事件，而是在2秒后直接启动它而不管鼠标 - 这就是它只能工作一次。

使用Timer是一种更好的方法，希望我的代码注释可以解释所有内容。

这假设没有第2帧，只有第1帧的所有内容以及此代码:(未经测试）

import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.clearInterval;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import flash.net.URLVariables;
import flash.utils.Timer;

stop();

//lets keep all the image stuffs in an array, this way you can add as many as you want without change any code but the array.
var images:Array = [
    { img: image_1, url: "http://www.danbolig.dk/bolig/koebenhavn/2200/udlejningsejendom/956tl000227-956" },
    { img: image_2, url: "http://www.danbolig.dk/bolig/gladsaxe/2880/andet/956tl000245-956" },
    { img: image_3, url: "http://www.danbolig.dk/butik/ErhvervKobenhavn" }
];

var current = images.length-1; //cur index of the images array (first element is 0)

//a timer to keep track of the mouse hover
var hoverTimer:Timer = new Timer(2000, 1); //tick every 2 seconds, only 1 time
hoverTimer.addEventListener(TimerEvent.TIMER, goActive);  //when the timer ticks, run the goActive function

//a timer to rotate the images
var transitionTimer:Timer = new Timer(5000); //tick every 5 seconds, until told to stop
transitionTimer.addEventListener(TimerEvent.TIMER, imageFades)

linkOverlay.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);

//hide these initially
image_1.alpha=0;
image_2.alpha=0;
image_3.alpha=0;

function mouseOver(e:Event):void {
    if(!hoverTimer.running) hoverTimer.start(); //start the hover timer now that the mouse is over
}

//the mouse has been over for 2 seconds now, start rotating the images
function goActive(e:Event = null):void {
    imageFades(); //fade in the first image right away
    transitionTimer.start(); //start the transition timer so it changes every 5 seconds
}

function fadeOutCurrent() {
    //fade out the current image (if not already alpha=0)
    if(images[current].img.alpha > 0){
        new Tween(images[current].img, "alpha", Strong.easeOut, images[current].img.alpha, 0, 1, true);
    }
}

function imageFades(e:Event = null):void
{
    hoverTimer.reset();

    fadeOutCurrent();

    current++; //add one to the current index
    if (current >= images.length) current = 0; //go back to index 0 if the current index is greater than the amount in the array

    //fade in the NEW current item
    new Tween(images[current].img, "alpha", Strong.easeOut, images[current].img.alpha, 1, 1, true);
}

//events for resetting when leaving content area 
linkOverlay.addEventListener(MouseEvent.MOUSE_OUT, detoggleAnimation);  //when the mouse leave the linkOverlay element (if it takes up the whole swf, use the next line instead)
stage.addEventListener(Event.MOUSE_LEAVE, detoggleAnimation); //when the mouse leaves the swf
stage.addEventListener(Event.DEACTIVATE, detoggleAnimation);    //when the focus leaves the swf

function detoggleAnimation(event:Event):void {
    transitionTimer.reset(); //reset/stop the image fading
    fadeOutCurrent();
}

linkOverlay.addEventListener(MouseEvent.CLICK, gotoLink);

function gotoLink(event:MouseEvent):void
{
    navigateToURL(new URLRequest(images[current].url));
}

Answer 2

我认为你的横幅中不需要两个框架，你可以这样做：

var current:int = 0;
var fadeout_tween:Tween, fadein_tween:Tween;
var urls:Array = ['http://www.example.com/01', 'http://www.example.com/02', 'http://www.example.com/03'];

// timer that after one iteration, run imageFades
var hover_timer:Timer = new Timer(2000);
    hover_timer.addEventListener(
        TimerEvent.TIMER,
        function(e:TimerEvent):void {
            imageFades();
            hover_timer.stop();
            transition_timer.start();
        }
    )   
// timer that do images fades   
var transition_timer:Timer = new Timer(5000);
    transition_timer.addEventListener(
        TimerEvent.TIMER,
        function(e:TimerEvent):void {
            imageFades();
        }
    )
// to open links, of course current should be a valid image index
stage.addEventListener(
    MouseEvent.CLICK,
    function(e:MouseEvent):void {
        if(current > 0){
            navigateToURL(new URLRequest(urls[current-1])); 
        }
    }
)
// when we detect mouse in stage, starts our timer for 2 seconds
stage.addEventListener(
    MouseEvent.MOUSE_MOVE,
    function(e:MouseEvent):void {
        if(!hover_timer.running && !transition_timer.running){
            hover_timer.start();
        }
    }
)
// when mouse leaves our swf movie, stop all timers and tweens and init images alphas
stage.addEventListener(
    Event.MOUSE_LEAVE,
    function(e:Event):void {
        init();
        hover_timer.stop();
        transition_timer.stop();
        if(fadeout_tween && fadeout_tween.isPlaying) fadeout_tween.stop();
        if(fadein_tween && fadein_tween.isPlaying) fadein_tween.stop();
    }
)
// init images alphas
function init():void {
    current = image_1.alpha = image_2.alpha = image_3.alpha = 0;
}
// effects
function imageFades():void {
    if(current > 0){
        // fade out current image
        fadeout_tween = new Tween(MovieClip(getChildByName('image_'+current)), 'alpha', Strong.easeOut, 1, 0, 1, true); 
    }
    current = current < 3 ? current + 1 : 1;
    // fade in the new active image
    fadein_tween = new Tween(MovieClip(getChildByName('image_'+current)), 'alpha', Strong.easeOut, 0, 1, 1, true);
}

init();

您可以看到此代码正常工作here。

我希望这可以帮到你。