Fireworks - "sophisticated rollover" help

[Guest_imported]

Hey, i just created a "sophisticated rollover" as it is called in fireworks 4, where you rollover a button and it makes something else change on the page, but now i need help.

I have done this for 1 button, and i want to do it for several other buttons. The rollover will occur on the button and somewhere else, i have done this once, now i need to do it several other times, all of which the other change must occur in the same place? confused?

to round it up, i want to create several sophisticated rollovers, and the rollover effect (besides the button itself) must occur in the same place!

If anybody understands me slightly and can help me please e-mail me at:

thanks a million

 

[TulsaJeff]

I will do what I can to help you... I will be home after 5:00 PM CDT

Send a copy of your png file to tulsajeff@home.com... this will speed up the process quite a bit in helping me to understand what it is you are attempting to accomplish. Ya' Gotta Love It!

 

[Guest_imported]

Thank you for your help, but when i downloaded the PNG file from hotmail, the image of the file appeared, instead of the file downloading!

weird

if you can can you send the file to my other Outlook address at: mark.howlette@hansol71.freeserve.co.uk

thanks a million

Mark

 

[TulsaJeff]

I am at work this morning and the file is at home...can you right click on the file and select "save target as"? this should allow you to save it to your pc instead of opening it.

I will resend it this afternoon if you still cannot get it.

Jeff Ya' Gotta Love It!

 

[Guest_imported]

no sorry, it i cant download the png file :-(, could you please send it to me at: mark.howlette@hansol71.freeserve.co.uk tonight?

thanks a million

Howlette

 

[TulsaJeff]

I will do that. Ya' Gotta Love It!

 

[Guest_imported]

Hi me again, would you also be able to explain in some detail how you done it?

thanks a lot for this


Mark

 

[TulsaJeff]

Yes...I will explain what I did and why I did it that way... I actually did not change that much...you were well on the way;-) Ya' Gotta Love It!

 

[Guest_imported]

Thanks a million for this, i will put ya name in the site there somewhere

When do you reakon you will be sending it? how many mins from now? because i am from the UK and you are somewhere else i guess so there is the time difference, so in mins will be easier for me to work out


thanks a million again

Mark

 

[Guest_imported]

me again and again....sorry about this... as well as explaining what you did etc can you also explain how i am to include other buttons (which i have pre made like the "store" and "home&quot into the image, and again, the boys in the corner must also change what they are saying

thanks a million

Howlette

 

[TulsaJeff]

Sorry...I have been out of the office for a while.

I will be sending this thing in about 30 minutes from now. It is 4:45 PM here in Tulsa, Oklahoma, USA

Ya' Gotta Love It!

 

[Guest_imported]

Hey, thanks for your help but i am having a little trouble putting in another button which i made.

I inserted another Frame (Frame 4) and put an "About us" button in there and edited the a bubble symbol.

When i previewed this the new bubble appeared as if it was part of the boys picture, i.e. it didnt take a rollover to make it appear as it was already there.

Could you please please please explain how i insert a new button in a bit more depth, i.e. the behaviour i have to add to the about us button etc etc, make it so that a dummie can understand it (as i am a dummie) hehehe


thanks a million

Mark

 

[TulsaJeff]

all the buttons will go on frame 1...the simple(orange) rollovers will all go on frame 2... the new bubble symbol for "About Us" goes on frame 4

here it is in detail:

first off...you will have to have a separate bubble symbol for each button you want to create. so select one of your buubles in the library and then click on the black option arrow at the top right of the library panel... select duplicate...rename it bubbleAboutUs or whatever you like. this is the only thing you need to drag into frame 4.

make sure the new About Us button is located on frame 1...if you want it to have a orange simple rollover like the others then that would go on frame 2 just like your other button rollovers.

select the button and then click on the little round object on the little behaviour button that shows up in the center and select "add swap image behaviour" ...this will bring up the dialogue box.

in the diagram you will see an outline of your slices ...select the big one where the swap will be taking place and then select frame 4 in the drop down menu at the bottom.

hit ok and use preview to see if it works.

Ya' Gotta Love It!

 

[Guest_imported]

Hey me again,

I made the about button work and it is coool, when i made another button and went through the same procedures,
*Edit the bubble
*But button on layer 1
*Create new layer (layer 5)
*Put the bubble on there
*Set behaviour of lyrics button

and when i previewed it, the lyrcics button was present without rolling over anything? weird?


thanks a million

sorry because i am being a real pain


Mark

 

[TulsaJeff]

Email me whatyou have so far...maybe I can figure out what is getting you hung up;-)

I have church this morning... I will look at it and send it back to you with my analysis this afternoon.

tulsajeff@home.com Ya' Gotta Love It!

 

[Guest_imported]

Hey,

Reakon you could help me out with the problem then? I sent the file last night you should have got it, if not mail me ok?

thanks a trillion

Mark

 

[secretsquirrel]

hey mark,

i've read through this thread, and despite being a fan of fireworks, would it not have been easier to do this in html, with a bit of javascript...

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD ALIGN=CENTER>
<IMG SRC=&quot;button1.gif&quot; ONMOUSEOVER=&quot;rollover.src='rollover1.gif';&quot; ONMOUSEOUT=&quot;rollover.src='spacer.gif';&quot;>
<IMG SRC=&quot;button2.gif&quot; ONMOUSEOVER=&quot;rollover.src='rollover2.gif';&quot; ONMOUSEOUT=&quot;rollover.src='spacer.gif';&quot;>
<IMG SRC=&quot;button3.gif&quot; ONMOUSEOVER=&quot;rollover.src='rollover3.gif';&quot; ONMOUSEOUT=&quot;rollover.src='spacer.gif';&quot;>
<IMG SRC=&quot;button4.gif&quot; ONMOUSEOVER=&quot;rollover.src='rollover4.gif';&quot; ONMOUSEOUT=&quot;rollover.src='spacer.gif';&quot;>
</TD>
</TR>
<TR>
<TD ALIGN=CENTER COLSPAN=&quot;4&quot;><IMG SRC=&quot;spacer.gif&quot; NAME=&quot;rollover&quot; WIDTH=&quot;50&quot; HEIGHT=&quot;50&quot;></TD>
</TR>
</TABLE>
</BODY>
</HTML>

 

[Guest_imported]

Yes it would have been easier if i knew javascript :-( and i know little/basic HTML :-( So i am best doiong it this way.


What do i do with this script now?

Thanks

Mark

 

[secretsquirrel]

rollovers work by replacing one image with another, when a 'onMouseOver' event occurs. this is done by basically saying &quot;when the mouse moves over image x, change image x to another image&quot;. it is also possible to say &quot;when the mouse moves over image X, change image Y to another image&quot;. this is how your sophisticated rollovers work. i'll explain the above bit of code first and then put in an annotated version of it below...

the above script is an entire html page consisting of a table with two rows.

the first row has four cells, each containing an image. these are your rollover buttons (image X).

the second row has one cell containing a spacer image (a transparent 1 pixel square used so that we have something for to replace when the mouseover occurs - image Y).

i've called image Y 'rollover' so that i can reference it from other parts of the page (this is done with ' NAME=&quot;rollover&quot; ').

each image X has two event handlers inside it (ONMOUSEOVER and ONMOUSEOUT), these tell the page what to do if either of these events occur.

the ONMOUSEOVER function 'rollover.src=&quot;rollover.gif&quot;' simply says &quot;when the mouse is over this object, find the object in this page called 'rollover' and change the source (src) to rollover.gif&quot;.

'rollover.src' breaks down as object.action with rollover as the object and src as the action (as in &quot;set the source to be...&quot;

and the ONMOUSEOVER function 'rollover.src=&quot;rollover.gif&quot;' simply says &quot;when the mouse moves out of this object, find the object in this page called 'rollover' and change the source (src) to spacer.gif&quot; (the original image).

if you take this entire code, replace the filenames with your own images and save it as html, you should be able to run it in a browser with no problems.


<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD ALIGN=CENTER>
FIRST BUTTON --> <IMG SRC=&quot;button1.gif&quot; ONMOUSEOVER=&quot;rollover.src='rollover1.gif';&quot; ONMOUSEOUT=&quot;rollover.src='spacer.gif';&quot;>
SECOND BUTTON --> <IMG SRC=&quot;button2.gif&quot; ONMOUSEOVER=&quot;rollover.src='rollover2.gif';&quot; ONMOUSEOUT=&quot;rollover.src='spacer.gif';&quot;>
THIRD BUTTON --> <IMG SRC=&quot;button3.gif&quot; ONMOUSEOVER=&quot;rollover.src='rollover3.gif';&quot; ONMOUSEOUT=&quot;rollover.src='spacer.gif';&quot;>
FOURTH BUTTON --> <IMG SRC=&quot;button4.gif&quot; ONMOUSEOVER=&quot;rollover.src='rollover4.gif';&quot; ONMOUSEOUT=&quot;rollover.src='spacer.gif';&quot;>
</TD>
</TR>
<TR>
<TD ALIGN=CENTER COLSPAN=&quot;4&quot;>
SPACER IMAGE, WHERE ROLLOVERS WILL APPEAR --> <IMG SRC=&quot;spacer.gif&quot; NAME=&quot;rollover&quot; WIDTH=&quot;50&quot; HEIGHT=&quot;50&quot;>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


this is probably really unclear, but i think it's all there. any problems, let me know.

ss