Rollovers with external images

1

Hi,

im trying to make a flash rollover that dynamically inserts an external jpg. here’s what i’ve got so far: http://www.ronniesalvato.com/help

the main problem is that there is no image when it first loads until i actually rollover with my mouse. after that it seems to function properly.

also, is there an easier way to create a rollover like the one i have without using the before and after .jpgs?

heres my code, thanks:

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.ronniesalvato.com”);
navigateToURL(_link);
}
}

2

anyone?

3

um. there is no image until you roll out because thats where you ask it to load the bird.

not sure what you are actually trying to do. can you elaborate on what its supposed to do ?

4

try this :


import fl.motion.Color;
import flash.geom.ColorTransform;

import fl.transitions.*;
import fl.transitions.easing.*;

var tintActive:Color = new Color();
var tintNormal:Color = new Color();

// active tint and inactive tint ( alpha set to 0 )
tintActive.setTint(0x0FFFF,.2);
tintNormal.setTint(0x000000,0);

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);
imageLoader.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
imageLoader.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);

function doSomething(Event:MouseEvent):void {
	var _link:URLRequest = new URLRequest("http://www.ronniesalvato.com");
	navigateToURL(_link);
}

function mouseOverHandler(e:MouseEvent):void {
	//set the tint on the object, making it highlighted.
	e.target.transform.colorTransform = tintActive;
}

function mouseOutHandler(e:MouseEvent):void {
	//set the tint to the invisible one.
	e.target.transform.colorTransform = tintNormal;

}
5

hi thanks for the response rbnzdave

i want to have the thumbnail image (the bird.jpg) with a dark gray border (about 10 px thick) that when you roll over it turns bright green. (just the border not the image itself) and when you roll out it fades back to dark gray. pretty much how it looks in my link.

im using this for a portfolio gallery. ultimately i’d like to create the an swf that uses external jpgs in the html code (probably by using the so.addvariable javascript)…so i can use the same flash rollover effect multiple times on the page without having to create a new swf for each thumbnail. does this make sense?

let me know what you think

6

okay then. here you go.


import fl.transitions.*;
import fl.transitions.easing.*;

var borderSize = 10;
var imageRequest:URLRequest = new URLRequest("bird.jpg");
var imageLoader:Loader = new Loader();
var movOriginal:MovieClip = new MovieClip();
var movOver:MovieClip = new MovieClip();
var home:MovieClip = this;	

//am using a load event to be able to get the size of the link image for the border drawing.
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadedImage);
imageLoader.load(new URLRequest("bird.jpg"));

function onLoadedImage(e:Event):void {
	//draw the borders, basically big rects behind the link image.
	var g:Graphics = movOriginal.graphics;
	g.clear();
	g.beginFill(0x999999);
	g.drawRect(0,0,imageLoader.width+borderSize*2,imageLoader.height+borderSize*2);
	g.endFill();
	var g2:Graphics = movOver.graphics;
	
	g2.clear();
	g2.beginFill(0x00FF00);
	g2.drawRect(0,0,imageLoader.width+borderSize*2,imageLoader.height+borderSize*2);
	g2.endFill();
	
	//hide hover colour
	movOver.alpha=0;
	//make sure border is at the correct pos
	movOver.x = movOriginal.x  = imageLoader.x-borderSize;
	movOver.y = movOriginal.y  = imageLoader.y-borderSize;

	//put items on the stage
	home.addChild(movOriginal);
	home.addChild(movOver);
	home.addChild(imageLoader);
}

imageLoader.x = 10;
imageLoader.y = 10;
imageLoader.addEventListener(MouseEvent.CLICK, doSomething);
imageLoader.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
imageLoader.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);

function doSomething(Event:MouseEvent):void {
	var _link:URLRequest = new URLRequest("http://www.ronniesalvato.com");
	navigateToURL(_link);
}

function mouseOverHandler(e:MouseEvent):void {
	//making it highlighted.
	var myTween:Tween = new Tween( home.movOver, "alpha", Strong.easeOut, home.movOver.alpha, 1, 5, false);

}

function mouseOutHandler(e:MouseEvent):void {
	//setting it to normal again
	var myTween:Tween = new Tween(home.movOver, "alpha", Strong.easeIn, home.movOver.alpha, 0, 5, false);

}

I also suggest getting the caurina tween tools, I commonly activate several transitions at once, and caurina really makes that simple.

for example.


   Tweener.addTween(home.selector, {alpha:1,x:40,time:1, transition:"easeOut", onComplete:loadSelector});
7

sweet!! i was busy all weekend and just had a chance to see it this am. the rollover works great. and you eliminated the before and after jpgs. thats perfect.

so now i’m one step closer to what i want to do. right now in the code you provided, when i click on the swf it opens a new full size window with toolbars. i’d like it to open a small fixed size window with no toolbars, just a scrollbar.

i tried inserting an inline javascript function but i get an error that said “Can’t run script because Safari doesn’t allow JavaScript to be used in this way.” i’m still new to as3 so the answer is probably obvious but i cant seem to figure it out.

what i tried to do was insert the following code:

var jscommand:String = “window.open(‘http://www.ronniesalvato.com’,‘win’,‘height=300,width=300,toolbar=no,scrollbars=yes’);”;
var url:URLRequest = new URLRequest(“javascript:” + jscommand + " void(0);");
navigateToURL(url, “_self”);

in place of this code:

var _link:URLRequest = new URLRequest(“http://www.ronniesalvato.com”);
navigateToURL(_link);

also, i want to be able to use the same .swf multiple times on one page for different thumbnail images that will open different html documents. is there a way to change the bird.jpg image and the URL in the popup function to variables that can be controlled by using the following javascript in my html:

<script type=“text/javascript”>
var so = new SWFObject(“assets/flash/project.swf”, “video”, “390”, “100”, “8”);
so.addVariable(“imgName”, “bird.jpg”);
so.addVariable(“imgLink”, “bird”);
so.write(“bird”);
</script>

as always, any help is much appreciated:)

8

is it possible to do what i described? am i close?

9

probably use Flashvars for adding something like that. infact thats probably the most intended use of it.

as far as javascript popups, I’d have no idea sorry. if you get the navigateToURL to call the link with the “_blank” param, you could then get js to resize the window on loading.


  var url:String = "http://www.ronniesalvato.com";
  var request:URLRequest = new URLRequest(url);
  try {
    navigateToURL(request, '_blank');
  } catch (e:Error) {
    trace("Error occurred!");
  }