FORUMS: list search recent posts

rollOver using external file....or something?

COW Forums : Adobe Flash

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
joe jukes
rollOver using external file....or something?
on Dec 10, 2009 at 9:53:35 pm

HI.

I have made my site entirely using Flash cs4 and as2.

On the galley page for my photograph portfolio i have laid out thumbnails of each picture, along with a title. I have created buttons from this, which when you click on them [currently] load the large image into a separate window, from the external folder which is on my server.I have done this (obviously) using geURL and _top.

What I would like to do, is have the larger image appear in a floating, frameless and borderless state over the current page whist the thumb is being rolled over.

Can i do this in the same way somehow (ie, load from and external place like it's currently set up)
or am i forced to create different rollOver states for each button and photo all in the timeline. This creates to much of a heavy file.....

Appreciate the help if you have it!

Joe.




Return to posts index

Marcus Geduld
Re: rollOver using external file....or something?
on Dec 11, 2009 at 3:55:23 pm

Here are some files for you that should help:

http://www.grumblebee.com/stuff/cow/popupImage.zip

There is no need to make a different function for each button. Instead, you can set up an associative array that links button names to image urls:

var images : Array = [];
images[ "button1" ] = "cat.jpg";
images[ "button2" ] = "dog.jpg";
images[ "button3" ] = "moose.jpg";

In the above code, the names button1, button2 and button3 are the instance names of buttons on the stage.

Now, you can add callbacks to these button, linking them all the the same function:

button1.onRollOver = rollOverFunction;
button2.onRollOver = rollOverFunction;
button3.onRollOver = rollOverFunction;

Inside the function, you need to figure out which button called it.

function rollOverFunction() : Void
{
trace( this._name );
}

The built-in variable "this" gets automatically set to whichever button called rollOverFunction. So if the user rolls over button2, this = button2. And all buttons have names, so if the user rolls over button3, he'll see "button3" print out in the output panel.

To get the imageUrl instead of the button name, you change the function as follows, so that it uses the button name to look up the url in the array:

function rollOverFunction() : Void
{
var url : String = images[ this._name ];
trace( url );
}

Now, if the user rolls over button1, he'll see "cat.jpg" in the output panel.

In the files I liked to, above, I show how to use that url to load the image. In AS2 you use something called a MovieClipLoader to do that. In as AS3, you use a Loader. I have included both AS2 and AS3 versions of the code.

Here's the code above translated into as3:

var images : Dictionary = new Dictionary();
images[ button1 ] = "cat.jpg";
images[ button2 ] = "dog.jpg";
images[ button3 ] = "moose.jpg";

button1.addEventListener( MouseEvent.MOUSE_OVER, rollOverFunction );
button2.addEventListener( MouseEvent.MOUSE_OVER, rollOverFunction );
button3.addEventListener( MouseEvent.MOUSE_OVER, rollOverFunction );

function rollOverFunction( event : MouseEvent ) : void
{
var button : SimpleButton = event.target as SimpleButton;
var url : String = images[ button ];

trace( url );
}

Author "After Effects Expressions"
Co-author "After Effects For Flash, Flash For After Effects"
Artistic Director, Folding Chair Classical Theatre, Inc
Senior Flash Developer, Zeitbyte.com


Return to posts index

joe jukes
Re: rollOver using external file....or something?
on Dec 13, 2009 at 4:56:13 pm

wow! thank you!!

that was a really detailed and informative response! I think it has answered my question too!
I'll let you know after the weekend when I get back on it!!

once again thank you.

joe


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 CreativeCOW.net All Rights Reserved
[TOP]