Solved

Fireworks animation and button states don't work in Dreamweaver

Posted on 2004-08-10
12
221 Views
Last Modified: 2013-11-19
My FW animation and FW button states don't work in DW.  I have already done the Export, HTML, insert FW object route.  However, when I preview them in the browser, they are images only.  I ran an accessibility report and there were a number of lines that stated "Failed."  Inclusive answers and hints are very much appreciated as I am learning as I go-- and working with a deadline.  Thank-you so much for your expertise.
0
Comment
Question by:Caddygirl
  • 7
  • 3
  • 2
12 Comments
 
LVL 8

Assisted Solution

by:alexhogan
alexhogan earned 150 total points
ID: 11774219
Have you previewing your animated gifs outside of DW?
Do they animate?
0
 

Author Comment

by:Caddygirl
ID: 11774541
Yes.  I previewed it in FW and everything works great.
0
 

Author Comment

by:Caddygirl
ID: 11774995
I just figured out the animation.  Your answer tipped me off a little bit.  I had optimized it as a jpeg because it is a fade in on top of a photo, and I read that jpeg was best for photos.  I hadn't realized that an animation can only be gif.  So I tried optimizing it that way, and it works great now.  

However, still no luck with the buttons.  Does it have anything to do with Javascript?  I am not sure what to try if it does, but would love suggestions.
0
 
LVL 8

Expert Comment

by:alexhogan
ID: 11775456
Yes, the button behavior is controlled by javascript.

You said that the button states don't work.  
Are they not swapping the graphics?  
Do you have FW creating tables?

Can you post the code?
0
 

Author Comment

by:Caddygirl
ID: 11776454
I created 5 buttons separately in FW with 4 states each and imported them all into one document, alligning them horizontally.  When I insert it into DW and check the preview, I can see the graphics, but when I move my pointer over them, the whole nav bar disappears.  

What kind of FW table do you mean?  

Which code?
0
 
LVL 19

Expert Comment

by:webwoman
ID: 11777823
Did you slice them up? Create the appropriate number of frames?

You CANNOT do an animation AND a rollover in the same Fireworks file. You must have SEPARATE files, with SEPARATE actions.

It is MUCH better to learn what is being generated, and how, and combine the javascripts AND the tables/graphics yourself.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:Caddygirl
ID: 11777958
The animation is a separate file from the buttons and is working fine now.

As for the buttons--  Each button exists within its own FW file, and is also copied into one file which combines all of them.  Does that make sense?  In the one file, they all retain their respective behaviors (states), etc., they are just alligned next to one another.  So they rollover just fine next to one another until inserted in DW.

It was my understanding that FW is an easy way to create custom buttons, which are very necessary for the artistic end of my design...and that FW generates the Javascript for you.  So when it is inserted into DW, it already has the necessary attributes to make it work in DW.  Did I misunderstand that?
0
 
LVL 8

Assisted Solution

by:alexhogan
alexhogan earned 150 total points
ID: 11778055
No.., you got it correct.

FW is an easy and streamlined way to make custom buttons.  It does have a tendancy to produce too much code sometimes.  This might be what has happened here.

You don't need to make then seperate files though.  You can design them and house them in the same FW file and they'll work just fine.  You can seperate the different buttons by using directories on the layer panel.  If you put them in a buttons directory you can make the individual buttons subdirectories.

Anyway,

When using FW to make buttons to import into DW gets cranky sometimes.  Try this;

Create a FW file with 2 buttons on it.
Import that into DW and see if it works as expected.  If so, then it was the process of creating the buttons in seperate files and then placing them into the second FW file that hosed things.
0
 

Author Comment

by:Caddygirl
ID: 11784433
Great.  Thank-you, I will try that and let you know how it works.  Thanks for your patience and advice.
0
 

Author Comment

by:Caddygirl
ID: 11784711
I tried that approach, only I just included one button to see what would happen.  When I inserted it and previewed it, I got the same problem.

Maybe this will help:  the accessibility report says, "Non spacer IMG with valid ALT--- ALT of image is empty string."
0
 

Author Comment

by:Caddygirl
ID: 11786040
alexhogan,

You asked for the code.  Here it is.  Does this help?

<blockquote> <a href="javascript:;" target="_top" onClick="MM_nbGroup('down','navbar1','About20Us20Button','About%20Us%20Button_f3.gif',1);" onMouseOver="MM_nbGroup('over','About20Us20Button','About%20Us%20Button_f2.gif','About%20Us%20Button_f4.gif',1);" onMouseOut="MM_nbGroup('out');"> <img name="About20Us20Button" src="Buttons/About%20Us%20Button.gif" width="100" height="25" border="0" alt=""> </a></blockquote>
0
 
LVL 19

Accepted Solution

by:
webwoman earned 350 total points
ID: 11789458
Not really --- it's not enough, and you don't include the javascript.

If you're trying to create a menu bar --
Make ALL the buttons in ONE file, set up EXACTLY how you want it to look. First frame is mouseout/initial setting of the graphic. Frame 2 is mouseOVER. Forget the other frames. They're basically useless anyway -- if you want something to be shown as active, they must be actually CLICKING it, and the other state would be when they were on ANOTHER PAGE, so you can set that yourself later.

Set up slices, set up a simple rollover behavior for each, with the link if you must (you can always add that later, in the actual code, where you have much more control). Then run the export wizard, generate HTML/images, put the images in a subfolder (it makes life easier), and CAREFULLY look at the code that's generated. Everything you need is there.

And change your names -- your graphics file names should have NO space, NO punctuation, NO special characters. Makes life a lot easier.

Another thing that will make your life a LOT easier (like by a factor of 1 gazillion) -- learn HTML, and the basics of javascript. Then when you create wizard done things in Fireworks or DW, you'll have a chance of fixing them when they don't do exactly what you want.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now