Button rollover stays in downstate after being clicked.
When Creating a text based button in Fireworks, I want the button, after being clicked, to return to to the upstate instead of being locked into the downstate. how can I do this?
Annas
Annas
ASKER
Well.....I really wanted a fireworks solution since this is the fireworks forum.
Thanks, at least i know that fireworks is too limited for my purposes. I wonder why they would limit you to just one choice like that. It's a pretty expensive program to be so limited
Paul
Thanks, at least i know that fireworks is too limited for my purposes. I wonder why they would limit you to just one choice like that. It's a pretty expensive program to be so limited
Paul
Paul,
Well...don't give up on fireworks just yet. It is a very versatile program. I have been using it for years and I have yet to discover all its capabilities. You may be able to achieve the result you are looking for by playing with the "behaviours" panel (Window>Behaviours).
Personally I find the Fireworks generated HTML to be cumbersome and unnecessarily complex so I tend to hand-code all my rollovers and effects. Hence my steering you towards a hand-coded solution for what you wished to achieve.
Cheers,
Justin
Well...don't give up on fireworks just yet. It is a very versatile program. I have been using it for years and I have yet to discover all its capabilities. You may be able to achieve the result you are looking for by playing with the "behaviours" panel (Window>Behaviours).
Personally I find the Fireworks generated HTML to be cumbersome and unnecessarily complex so I tend to hand-code all my rollovers and effects. Hence my steering you towards a hand-coded solution for what you wished to achieve.
Cheers,
Justin
Hey Paul,
It is unusual to have a down state that you're only using on the press of your mouse. The purpose of the downstate is really for navbars, and that is why the functionality is included in fireworks as suck. The whole idea is that in the navbar situation, the user knows which button on the navbar reflects the active page. If you're trying to circumvent that feature, then why not stick with rollovers? From a usability standpoint, your users are aware and understand the rollover effect, and a downstate that is only active on mousepress would be confusing.
:)
It is unusual to have a down state that you're only using on the press of your mouse. The purpose of the downstate is really for navbars, and that is why the functionality is included in fireworks as suck. The whole idea is that in the navbar situation, the user knows which button on the navbar reflects the active page. If you're trying to circumvent that feature, then why not stick with rollovers? From a usability standpoint, your users are aware and understand the rollover effect, and a downstate that is only active on mousepress would be confusing.
:)
ASKER
I suppose so. I just wanted to mimic the action of a real pushbutton, ie push and release. Flash is of course the more versatile program and i could do it in that.. I ran acroos a tutorial once that told me expicitly to check some noption in creating the button that would let the button do jut that(stay down when clicked. Presumably, leaving the box unchecked, would let the button be released. I have since lost the link to that tutorial. I could also create the four states of the button in a drawing program and do i that way, but I would lose the effect I want to use fireworks for. That effect is the glow around text. Its a great way to give the the effect of a light comming on.
Annas
Annas
Hmmm, but you wanted the "light" to turn off once the mouse is off the button. Right?
ASKER
Right.
Paul
Paul
Then you want a mouseover and NOT a click. You can also set something to UNCLICK when you click something else -- this would be an image SWAP and NOT a mouseover.
Normally mouseovers are TWO states -- on and off. If you're generating something else, you may also be generating another PAGE. Normally if you click on something like that, you're supposed to be going somewhere.
Normally mouseovers are TWO states -- on and off. If you're generating something else, you may also be generating another PAGE. Normally if you click on something like that, you're supposed to be going somewhere.
Hey, not sure if I've come a bit off-track here, but if I understand from your first post, you want the button to 'light' when clicked, and 'turn off' when un-clicked (onMouseUp, lifting the mouse button). If that's not correct, I apologize.
A close approximation of that in Fireworks would be to use an animation as the Down state, so it would unlight shortly after clicking (like a slightly stiff push-button perhaps?)
1) Draw your button (probably start with its Up state), then duplicate the frame and apply the glow effect to Frame 1. Set looping to None and Frame delay to something under 50/100sec. (I found the default 7/100 a tad too quick for this, like blink and you miss it). Save as animated GIF.
2) Delete Frame 1 (which should be the Down state) and in the remaining frame, draw a slice (or hotspot) over your button.
3) Go to the Behaviours panel (this isn't open by default, but you'll find it in the WINDOW menu) and click the '+' button. On the flyout, choose 'Nav Bar Down State'.
4) Change the radio button from 'frame' to 'file' and browse to your animation. Preview the result, your button should show the glow for a split-second and then return to its Up state. Don't know if it's quite what you were after, but hope it helps.
A close approximation of that in Fireworks would be to use an animation as the Down state, so it would unlight shortly after clicking (like a slightly stiff push-button perhaps?)
1) Draw your button (probably start with its Up state), then duplicate the frame and apply the glow effect to Frame 1. Set looping to None and Frame delay to something under 50/100sec. (I found the default 7/100 a tad too quick for this, like blink and you miss it). Save as animated GIF.
2) Delete Frame 1 (which should be the Down state) and in the remaining frame, draw a slice (or hotspot) over your button.
3) Go to the Behaviours panel (this isn't open by default, but you'll find it in the WINDOW menu) and click the '+' button. On the flyout, choose 'Nav Bar Down State'.
4) Change the radio button from 'frame' to 'file' and browse to your animation. Preview the result, your button should show the glow for a split-second and then return to its Up state. Don't know if it's quite what you were after, but hope it helps.
ASKER
Havin_it,
I followed your steps closely. after saving the file, as an animated gif I opened it to be sure it was animating and it was. I then performed steps 2 thru 4 . When I went to preview it I got the normal up button and the cursor changed to a hand I clicked and the button disappeared! I don't know what happened. I recreated the button and the same thing happened.
Paul
I followed your steps closely. after saving the file, as an animated gif I opened it to be sure it was animating and it was. I then performed steps 2 thru 4 . When I went to preview it I got the normal up button and the cursor changed to a hand I clicked and the button disappeared! I don't know what happened. I recreated the button and the same thing happened.
Paul
Hmm. That's odd. Ummm..
Sounds as if the path for the GIF might be wrong in the preview, and it's not loading. Try having a look at the source and see if the link is accurate - there should be atleast three references to it in the page, one in the <body> tag and two in the <img> tag .. I think.
FYI, I saved my Fireworks PNG in the same folder as the GIF before previewing - might have some bearing on the results. Will have another look later, I'm away from my design-box right now.
Sounds as if the path for the GIF might be wrong in the preview, and it's not loading. Try having a look at the source and see if the link is accurate - there should be atleast three references to it in the page, one in the <body> tag and two in the <img> tag .. I think.
FYI, I saved my Fireworks PNG in the same folder as the GIF before previewing - might have some bearing on the results. Will have another look later, I'm away from my design-box right now.
Okay, I see what you mean now - seems to be some hinky behaviour in the 'preview' pane in Fireworks itself, not (as I previously assumed) in the browser preview. Maybe it's because we're trying to look at an external image rather than a native part of the Fireworks document.
It appears you'll get that happening within Fireworks regardless of any other conditions. But if you preview in your browser (F12 key) it should work okay, and export okay too.
It appears you'll get that happening within Fireworks regardless of any other conditions. But if you preview in your browser (F12 key) it should work okay, and export okay too.
ASKER
No, I got the same thing after I exported. Seems a shame I would like to get this to work I've wanted to create a "movie" whithin a "movie" . I've tried it with flash but couldn't get it to work there either.
Paul
Paul
Right, I'm determined not to be beaten by this! Let's go back to the exported HTML code. Can you identify the references to the animated GIF, and are the paths correct? If you're not sure, you can post the code here.
Also, just for context, what version of Fireworks are you using?
Also, just for context, what version of Fireworks are you using?
it can definitely be done in flash, btw. I can help w/ that if you dont get your answer w/ Fireworks.
ASKER
Thanks, guys. I do want to it in flash also lammontoya.
in the mean time I will see if I get the html code posted, if I can find it.
found it!
<html>
<head>
<title>testbut</title>
<meta http-equiv="Content-Type" content="text/html;">
<!-- Fireworks MX Dreamweaver MX target. Created Mon May 24 13:48:34 GMT-0400 (Eastern Daylight Time) 2004-->
</head>
<body bgcolor="#ffffff">
<img name="testbut" src="testbut.gif" width="169" height="136" border="0" alt=""></body>
</html>
not very much here you would think there would be two images to corespond to the two frames. I have the folder set to "filmstrip" and as soon s I click on the image(testbut.gif) the button glows once. When I open the htm file in netscape, the button load, glows once and goes back to normal. It's not acting like a button though no finger pointing hand when the cusor moves ove the button.
I tried it again, This time I got a msg that sait to choose export slices(already selected) This time I got the htm fle, and the hand moves over the button but when clicked I just get a smmaler version of the gray button. no image of the button glowing. I could email you the png file.
Paul
in the mean time I will see if I get the html code posted, if I can find it.
found it!
<html>
<head>
<title>testbut</title>
<meta http-equiv="Content-Type" content="text/html;">
<!-- Fireworks MX Dreamweaver MX target. Created Mon May 24 13:48:34 GMT-0400 (Eastern Daylight Time) 2004-->
</head>
<body bgcolor="#ffffff">
<img name="testbut" src="testbut.gif" width="169" height="136" border="0" alt=""></body>
</html>
not very much here you would think there would be two images to corespond to the two frames. I have the folder set to "filmstrip" and as soon s I click on the image(testbut.gif) the button glows once. When I open the htm file in netscape, the button load, glows once and goes back to normal. It's not acting like a button though no finger pointing hand when the cusor moves ove the button.
I tried it again, This time I got a msg that sait to choose export slices(already selected) This time I got the htm fle, and the hand moves over the button but when clicked I just get a smmaler version of the gray button. no image of the button glowing. I could email you the png file.
Paul
Yep, definitely something wrong there. There's no ja vascript in that code, nothing to swap the images about. Looks like somehow you've failed to apply the 'Nav Bar Down' behaviour to the slice. You want the IMG tag to refer to the static image of the up state, and the script to tell it to swap it for the animation when clicked.
What you should be getting is something like this:
<a href="#" onClick="MM_nbGroup('down'
<img name="NameOfMyPNGFile" src="NameOfMyPNGFile.gif" width="122" height="34" border="0" alt=""></a>
[Not to mention a pretty large script in the HEAD of the document]
Mail me the file if you like, my addy's in my profile. In the meantime you might want to re-try applying the Nav Bar behaviour since that seems to be the root of the problem.
What you should be getting is something like this:
<a href="#" onClick="MM_nbGroup('down'
<img name="NameOfMyPNGFile" src="NameOfMyPNGFile.gif" width="122" height="34" border="0" alt=""></a>
[Not to mention a pretty large script in the HEAD of the document]
Mail me the file if you like, my addy's in my profile. In the meantime you might want to re-try applying the Nav Bar behaviour since that seems to be the root of the problem.
ASKER
I have tried applying the nav bar behavior several times and it still doesn't work I looked up your profile but didn't find an email addy listeded. If you want email me at paul01 at handleys dot us and I will send the png as an attachment in my reply. That way your email will remain private. Mine is a throwaway by virture of my server host . when I start getting to much spam I will delete it!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
we're NOT supposed to give out email addresses in this forum. It is against the rules. With the benefit of email, I could have solved this problem for you the first time.
Please follow the rules of the forum.
Please follow the rules of the forum.
ASKER
Well if you want to know the truth, email wasn't very helpful either. I only accepted an answer because I was getting tired of sppining my wheels. It's pretty apparent to me that Fireworks is not a soluion, only part of the problem. I will stick with flash and swishmax from now on. Too bad there is not a forum for either on this website.
I apologise for the email error. I wasn't aware of the that paticular rule. It was not my intention to remove the question to email anyway.
Like I said, Flash only from now on. Delete the question.
Thanks,
Annas
I apologise for the email error. I wasn't aware of the that paticular rule. It was not my intention to remove the question to email anyway.
Like I said, Flash only from now on. Delete the question.
Thanks,
Annas
ASKER
let it stay like it is. I don't want any hard feelings. as for posting the solution I don't think there is one, but here's what what was emailed to me.
Paul,
OK I managed to get an impression of how your work was setup. One main problem is your animation (frames.gif) wasn't sized correctly to swap with the slice you made over your 'up' button. My bad for not mentioning this, but the GIF needs to be saved at the same dimensions as that slice.
That's why your downstate is appearing so small - your exported html is replacing an image about 134px x 62 px with one that's much larger - it solves this by squashing the GIF to meet these dimensions. Also, it appears the GIF and the test.png file are at different resolutions - you should make sure both are at 72dpi (or 96dpi depending what you believe the browser can really render!)
I see you also left a lot of space around the button in your test. In my example for a single button, the canvas was just the size of the GIF (no surrounding slices) but if you want to, for instance, do a series of buttons in one layout, positioning will be less easy.
In that case, I'd suggest making your layout with all the 'up' graphics first, then convert them to slices and for each one, copy the slice into a new document and use that as the starting-point of each animated GIF.
Hope all that makes sense, if not, I'll see ya back on the board.
Cheers,
Havin_it
Havin_it, I don't really understan what you are saying here(my fault, not yours:)). As far as the slices go, I just folowed step 2 in your instructions and made a slice exactly equal to the button. I've accepted your solution because you exerted the most to help me out, but like I said, I'll stick to flash from now on :). If the other experts disagee with this, we'll let a moderator decide
Paul
Paul,
OK I managed to get an impression of how your work was setup. One main problem is your animation (frames.gif) wasn't sized correctly to swap with the slice you made over your 'up' button. My bad for not mentioning this, but the GIF needs to be saved at the same dimensions as that slice.
That's why your downstate is appearing so small - your exported html is replacing an image about 134px x 62 px with one that's much larger - it solves this by squashing the GIF to meet these dimensions. Also, it appears the GIF and the test.png file are at different resolutions - you should make sure both are at 72dpi (or 96dpi depending what you believe the browser can really render!)
I see you also left a lot of space around the button in your test. In my example for a single button, the canvas was just the size of the GIF (no surrounding slices) but if you want to, for instance, do a series of buttons in one layout, positioning will be less easy.
In that case, I'd suggest making your layout with all the 'up' graphics first, then convert them to slices and for each one, copy the slice into a new document and use that as the starting-point of each animated GIF.
Hope all that makes sense, if not, I'll see ya back on the board.
Cheers,
Havin_it
Havin_it, I don't really understan what you are saying here(my fault, not yours:)). As far as the slices go, I just folowed step 2 in your instructions and made a slice exactly equal to the button. I've accepted your solution because you exerted the most to help me out, but like I said, I'll stick to flash from now on :). If the other experts disagee with this, we'll let a moderator decide
Paul
I dont think there is a solution in Fireworks either. If you have trouble with this in flash, again, I can help you with that. Do you want me to create a flash example for you?
We all want you to get the answer you seek. That is truly why were are here. <smile>
We all want you to get the answer you seek. That is truly why were are here. <smile>
ASKER
Sure that would be great! I am nervous about having you email it though!
Annas
Annas
heheh.. no need. I will post the fla :)
ASKER
great!
Paul
Paul
Sorry to have been involved in a bout of bad netiquette guys. I did intend to post my comments on the PNG that Paul sent me, but I see he's covered that already.
It was a pretty simple error, relating to a finer point i didn't cover in my previous solution. Paul's PNG had a small slice being replaced by a much larger image, which was therefore squashed into the dimensions of the slice and appeared smaller. I simply trimmed the GIF down to the size of the slice, at which point the whole thing worked fine for me. I'm not sure why it's still not working for you Paul, the PNG and exported HTML were checked before I sent them back to you.
So let's not be so fatalistic about Fireworks's capabilities here - I've used animations in this manner before and you can get some really nice effects for navbars etc.
It was a pretty simple error, relating to a finer point i didn't cover in my previous solution. Paul's PNG had a small slice being replaced by a much larger image, which was therefore squashed into the dimensions of the slice and appeared smaller. I simply trimmed the GIF down to the size of the slice, at which point the whole thing worked fine for me. I'm not sure why it's still not working for you Paul, the PNG and exported HTML were checked before I sent them back to you.
So let's not be so fatalistic about Fireworks's capabilities here - I've used animations in this manner before and you can get some really nice effects for navbars etc.
As promised, here is what you requested in Flash (MX version).
you can get your file at http://www.realinteresting.com/flashexperts/tempdownstate.fla
if you want to change the number of seconds, change the code the number of milliseconds in the code to correspond to the number of seconds you would like the button to stay in the down state before changing over. The line says intervalID = setInterval(changeme,6000)
Bring on the points! hahhaha.. Im just kidding! I know the question had been accepted already. I'd ask the moderators to copy this thread on Flash, just in case someone needs it.
Let me know if you need assistance.
you can get your file at http://www.realinteresting.com/flashexperts/tempdownstate.fla
if you want to change the number of seconds, change the code the number of milliseconds in the code to correspond to the number of seconds you would like the button to stay in the down state before changing over. The line says intervalID = setInterval(changeme,6000)
Bring on the points! hahhaha.. Im just kidding! I know the question had been accepted already. I'd ask the moderators to copy this thread on Flash, just in case someone needs it.
Let me know if you need assistance.
ASKER
thanks,
Iammontoya
Iammontoya
I don't think that this is doable in Fireworks. (Of course I may be wrong and if anyone knows how, please correct me.) You might want to try doing this by modifying a simple "Rollover" JavaScript. Firstly create yourself a .js file. I usually call mine rollover.js but you can call it anything you like. This .js file will reside in the root directory. See below for an example:
----------------Example .js file----------------
*/Comment: Declare new images*/
if (document.images)
{
button_Off=new Image();
button_Over=new Image();
*/Comment: Add file source for images*/
button_Off.src="images/btn
button_Over.src="images/bt
}
else{
}
*/Comment: Add the following for browsers that don't support images*/
button_Off.src="";
button_Over.src="";
}
}
*/Comment: This next part contains the two swap-images functions*/
if(document.images){
function btnOver(imgName)
{
originalImage=eval(imgName
document[imgName].src=orig
}
}
if (document.images){
function btnOut(imgName)
{
originalImage=eval(imgName
document[imgName].src=orig
}
}
---------------End of File------------------
Now to implement this we:
1. Insert the following between the <head> tags to link the page to our external .js file.
<script src="rollover.js" type="text/javascript"></s
2. After inserting the image we are going to use as a rollover, we have to give it a distinctive name. In this example I will call it "link". So now our html for this image should read something like:
<img src="images/btn_off.gif" alt="Click Here" name="link" width="45" height="22">
3. We add the link (in this example to "newpage.htm")
<a href="newpage.htm" target="_self"><img src="images/btn_off.gif" alt="Click Here" name="link" width="45" height="22" border="0"></a>
4. Lastly we link our JavaScript by adding "onMouseDown" which will change the image when clicked on, and if you want it to restore to the upstate, "onMouseUp".
<a href="newpage.html" onMouseDown="btnOver('link
Hope all that makes sense. If you have any problems implementing this I will be happy to steer you in the right direction. Once you get the hang of it, you'll find it is very simple and can be utilised in many ways.
Cheers.