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
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
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
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.
:)
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
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.
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.
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
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.
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.
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
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.
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!
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
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
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.
As promised, here is what you requested in Flash (MX version).
you can get your file at http://www.realinteresting
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.
Business Accounts
Answer for Membership
by: itwerxPosted on 2004-05-15 at 04:03:48ID: 11074854
Hi annas,
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.