Solved

Fireworks animation and button states don't work in Dreamweaver

Posted on 2004-08-10
12
228 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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
 

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Adobe Dreamweaver CS4 -  “Licensing for this product has stopped working” 2 144
Dreamweaver server behavior gone 6 146
jQuery Date picker not working 16 177
React or Angular? 6 80
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 …
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
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 receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

840 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