Page 1 of 1

Swap Images in Fireworks Using Slices Rate Topic: -----

#1 firebolt  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 92
  • View blog
  • Posts: 5,561
  • Joined: 20-February 09

Post icon  Posted 06 May 2009 - 12:15 AM

The example shown was created in Fireworks MX 2004 and the result may differ with other versions of Fireworks.

We will create a simple swap image tutorial example swaping a shape with different colors. To start off, we need to create our design. I have made 3 rectangular buttons left of a large rectangle which will become the swap image. The design will be simple like the below image.
Attached Image

Save the image as a .png and name it appropriately. Now we go over to the right, and focus on the Frames and History window. In the frames window, click on the small button at the top right which looks like a list and click duplicate frames.
Attached Image

In the opened window, just click ok and repeat the process again. Now you will have three Frames. Click on the second frame and you will see a blank page. Go to File, Import and find the image that you have used for the first frame. Repeat this for the third frame.


After we have created our design, we will need to create slices. Slices are used to link images, swap images, create the status bar message and other simple yet effective actions. To insert a slice, we right click the first button and click Insert Slice.
Attached Image

By default, a green shape of the same shape will now appear over the selected image. Do this for the other two images as well as the larger rectangle. However, the other two frames will not need to be altered. Refer to diagram.
Attached Image

Now we need to link the buttons to the main image viewer, the larger rectangle. What we do is simply select the slice and a small circle will appear in the center of the button slice. Click and hold and drag your mouse to the larger rectangle. A faint line will appear, like the below image, and that is to show a connection. Right after dragging, a message box will appear. It will ask to link the button to which frame. Select the frame corresponding to the button and click the More Options and in that, uncheck the Restore image on mouse out. Repeat for the other two frames.
Attached Image

To test it out, press F12 and it will open in a web browser.
Thanks.

Is This A Good Question/Topic? 0
  • +

Replies To: Swap Images in Fireworks

#2 spuja  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 19-January 11

Posted 19 January 2011 - 05:53 AM

give me the simple code for creating web template
Was This Post Helpful? 0
  • +
  • -

#3 Pakiisp  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 19-February 11

Posted 19 February 2011 - 01:52 AM

really nice, i will try thanks.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1