Morphing two shapes together
This tutorial allows two shapes to be morphed together using a shape tween in adobe flash.
- Select frame 1 and draw your first shape in it. This is the animation start point.
- Select the last frame and insert a blank keyframe (insert/time line/blank keyframes). this is the end point.
- Draw the secound shape in the last frame.
- Reselect frame 1 and in the properties panel set tween = shape
Do not insert keyframes at step 2 as this denotes all selected frames are the same.
Do not insert frames as this denotes unchanged frames.
Creating a Navigation bar
This method is for creating web site navigation bars in Fireworks and importing them into Dreamweaver.
- Create your canvas
- Open the Document Library in the side panel or from top menu – Windows/Document Library
- Select Edit/Insert/New button
- Select the rectangle tool and draw a button on top centre cross
- Add text
- Select the button and text. Then from top menu – Modify/Align/Centre Vertical. Then repeat for Centre Horizontal. You have now created the UP state for the button.
- Now select the “Over” state in the properties panel.
- Select “Copy up graphic”
- Edit the image to reflect the OVER state.
- Select the “Page 1 ” tab to go back to the button image
- In the original view, position the button on the canvas
- To get another button instance, drag it from the “Document Library” panel onto the canvas and position it. repeat this for number of buttons required.
- Select Modify/Canvas/Fit Canvas to crop to size
- Select each button in turn and change its text in the properties text box
- Make sure the button images are GIF’s and then save as a PNG
- To preview operation select File/Preview in Browser
- To edit all buttons (Library Image) double click the button in the Document Library then Select Up or Over state and edit. This is then applied to all
- To export for Dreamweaver select File/Export/Select the Folder (html and images)/
In Dreamweaver select the location for insertion. Then Insert/Image Object/Fireworks HTML. Browse to the .htm of the fireworks exported files and select. With the Nav bar now in place link each button to its required page. This is done using the SRC Target tool in the properties pane. Future button edits are done in Fireworks and re exported.
In the Common Library pane pre designed buttons (Mac/Button) can be dragged onto the canvas and customised :
- Select Edit/Insert/New Button and drag a button in from the Common Library.
- In the Symbol Property tab at the bottom change its label to “Home”
- Now Edit/Copy the button. Then select “State 2″ and Paste it in.
- In the Symbols Properties change its State to Press
- Double click on the stage to go back to original canvas
- In web tools turn off slice mode. Go to the states tab and create a duplicate state.
- Select State 1 then File/Export (images only)
Rounding corners on a image
This article lists how to put rounded corners on an image like on a web site banner
- Import your image onto the canvas
- Put a rectangle over the image (copy/Paste)
- Apply “round corners” to the top image
- Select both images
- From top menu select – Modify/Mark/Group as mask
These notes can be printed.
A full screen HD video of this tutorial is available Here or click within the video box above.