# Help with dynamic rollovers in AS3

**URL:** https://forum.kirupa.com/t/help-with-dynamic-rollovers-in-as3/261573
**Category:** Uncategorized
**Created:** [May 28, 2008, 11:04pm UTC](https://forum.kirupa.com/t/help-with-dynamic-rollovers-in-as3/261573 "2008-05-28T23:04:03Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![sabresfan](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@sabresfan](https://forum.kirupa.com/u/sabresfan)
#### Post date: [May 28, 2008, 11:04pm UTC](https://forum.kirupa.com/t/help-with-dynamic-rollovers-in-as3/261573/1 "2008-05-28T23:04:03Z")

</div>

im sort of a flash cs3 noob. i’ve been using flash 4 (believe it or not) forever and have much to learn about . so be please gentle.

so im trying to create a simple button that changes color when rolled over and and fades back to normal when the mouse leaves the hit button. simple enough… i also want it to dynamically load an external jpeg so that i can use the same .swf file many times on one page so i only have to change the variable in the html, using javascript i think.

i think i’m half way there but i have 2 problems:

1. when my .swf loads i have to roll the mouse over the button for my external jpg to appear. once i do that it appears to work fine… it just doesn’t show up initially when it first loads.

2. i’m calling for the specific .jpg right in the actionscript code. i think i’d rather call for a variable so that i can use the same .swf over again for a different image.

so here’s the code that i’m using… if it helps i uploaded the .fla file, the before and after rollover images, and one .jpg file that i’m working with. thanks in advance to anyone who can help. i will be forever in your debt.

* * *

import fl.transitions._;  
import fl.transitions.easing._;

var images:Array = [“before.jpg”, “after.jpg”]

// image 1  
var image1:Loader = new Loader();  
image1.load(new URLRequest(images[0]));  
addChild(image1);

// image 2  
var image2:Loader = new Loader();  
image2.load(new URLRequest(images[1]));  
image2.alpha = 0;  
addChild(image2);

stage.addEventListener(MouseEvent.MOUSE\_OVER, mouseOverHandler);  
stage.addEventListener(MouseEvent.MOUSE\_OUT, mouseOutHandler);

function mouseOverHandler(e:MouseEvent):void  
{  
image1.alpha = 0;  
image2.alpha = 1.0;  
}

function mouseOutHandler(e:MouseEvent):void  
{  
image2.alpha = 0;  
image1.alpha = 1.0;   
var myTween:Tween = new Tween(image2, “alpha”, Strong.easeIn, 1, 0, 5, false);  
var imageRequest:URLRequest = new URLRequest(“bird.jpg”);

var imageLoader:Loader = new Loader();

imageLoader.load(imageRequest);

addChild(imageLoader);  
imageLoader.x = 10;  
imageLoader.y = 10;  
imageLoader.addEventListener(MouseEvent.CLICK, doSomething);  
function doSomething(Event:MouseEvent):void  
{  
var \_link:URLRequest = new URLRequest(“[http://www.google.com](http://www.google.com)”);  
navigateToURL(\_link);

}  
}

---

<div class="post-metadata">

### Author: ![sudhansurana](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@sudhansurana](https://forum.kirupa.com/u/sudhansurana)
#### Post date: [May 30, 2008, 7:16am UTC](https://forum.kirupa.com/t/help-with-dynamic-rollovers-in-as3/261573/2 "2008-05-30T07:16:14Z")

</div>

Try this one

> 

import fl.transitions._;  
import fl.transitions.easing._;

var images:Array = [“before.jpg”, “after.jpg”]

// image 1  
var image1:Loader = new Loader();  
image1.load(new URLRequest(images[0]));  
addChildAt(image1,0);

// image 2  
var image2:Loader = new Loader();  
image2.load(new URLRequest(images[1]));  
image2.alpha = 0;  
addChildAt(image2,1);

var imageRequest:URLRequest = new URLRequest(“bird.jpg”);

var imageLoader:Loader = new Loader();

imageLoader.load(imageRequest);

addChildAt(imageLoader,2);  
imageLoader.x = 10;  
imageLoader.y = 10;  
imageLoader.addEventListener(MouseEvent.CLICK, doSomething);  
function doSomething(Event:MouseEvent):void  
{  
var \_link:URLRequest = new URLRequest(“[http://www.google.com](http://www.google.com)”);  
navigateToURL(\_link);

}

stage.addEventListener(MouseEvent.MOUSE\_OVER, mouseOverHandler);  
stage.addEventListener(MouseEvent.MOUSE\_OUT, mouseOutHandler);

function mouseOverHandler(e:MouseEvent):void  
{  
image1.alpha = 0;  
image2.alpha = 1.0;  
}

function mouseOutHandler(e:MouseEvent):void  
{  
if(mouseX\>=stage.x && mouseX\<=stage.x+stage.width && mouseY\>=stage.y && mouseY\<=stage.y+stage.height){

```
}
else{
image2.alpha = 0;
image1.alpha = 1.0;	
var myTween:Tween = new Tween(image2, "alpha", Strong.easeIn, 1, 0, 5, false);
}

```

}

I think you problem is solved .If no plz leave a message in  
[http://sudhansurana.wordpress.com/](http://sudhansurana.wordpress.com/)

---

<div class="post-metadata">

### Author: ![sudhansurana](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@sudhansurana](https://forum.kirupa.com/u/sudhansurana)
#### Post date: [May 30, 2008, 7:17am UTC](https://forum.kirupa.com/t/help-with-dynamic-rollovers-in-as3/261573/3 "2008-05-30T07:17:59Z")

</div>

Get the modified flahere…