University of Sunderland CDM105 Session 6 Dreamweaver and Multimedia Fireworks MX 2004 Creating Menus and Button images

University of Sunderland CDM105 Session 6 Multimedia The same issues (i.e. formats, different browsers) still apply as those discussed earlier in the course ! Sound and movie files are imported via the plugin object from the Special panel within the object panel

University of Sunderland CDM105 Session 6 Java Applets Parameters required by the applet are set by clicking the Parameters button. This results in a dialog box appearing which permits parameters to be set Java Applets are imported via the Applet object from the Special panel within the object panel

University of Sunderland CDM105 Session 6 Macromedia Multimedia - Flash Vector based files sometimes called Flash Shockwave -Director / Authorware Shockwaves - Dreamweaver has some built-in Flash functions/objects Flash Buttons Flash Text

University of Sunderland CDM105 Session 6 Flash Text Inserts a small Flash movie which contains user defined text (plus size, font, colour etc.) Pro: The font used is not required to be installed on the end viewers computer Con: User must have have the Flash player installed on their computer/browser plus many pieces of Flash text are pointless after you have learnt Flash itself ! Note: the movie is saved external to the page just like over Web multimedia

University of Sunderland CDM105 Session 6 Flash Buttons Like Flash text but more ‘complex’ Same pros and cons as Flash Text Add your text and pick a button + colour etc. Then add the link

University of Sunderland CDM105 Session 6 The Assets Panel Management of all the Digital Media assets that make up the web site –Images –Colours –URLs –Flash / Shockwave (Director) Movies –Digital Video/Movies –Scripts –Templates

University of Sunderland CDM105 Session 6 Fireworks MX 2004 An image editor made by Macromedia but closely integrated into Dreamweaver. Permits easy creation of Web graphics Like Dreamweaver it has a complex interface but once learnt the package is very powerful

University of Sunderland CDM105 Session 6 Firework Tools Panels Interface style used again like Dreamweaver Fireworks Interface Document Window

University of Sunderland CDM105 Session 6 The Document Window Original: the actual image saved as PNG by Fireworks Preview + 2-Up +4-Up used to test different compression algorithms Aim: is to select the image format that results in good quality output and a smaller image file size

University of Sunderland CDM105 Session 6 The Optimize Panel Use this panel to select an image format (e.g. GIF or JPG) and then use File Export to save the image The image type

University of Sunderland CDM105 Session 6 Buttons, slicing and effects Fireworks makes it easy to create button images and the required HTML (which can then be imported into Dreamweaver). Fireworks enables you to slice an image into smaller pieces and add interactivity to them. Plus Fireworks has many excellent effects that can be easily applied (and removed if you don’t like the result)

University of Sunderland CDM105 Session 6 Example 1: Example 1: Creating a button in Fireworks Step 1: Create a new image File->New Step 2: Select Edit -> Insert -> New Button

University of Sunderland CDM105 Session 6 Step 3: Draw an oval (ellipse) on the ‘Up’ tab image Step 4: Change the fill colour/pattern using Properties panel Example 1: Example 1: Creating a button in Fireworks

University of Sunderland CDM105 Session 6 Step 5: Create a button effect using the effects properties. For example Try the Inner Glow effect Example 1: Example 1: Creating a button in Fireworks

University of Sunderland CDM105 Session 6 Step 6: Add text to the button using the text tool Example 1: Example 1: Creating a button in Fireworks Click the cursor on the button image to enter text

University of Sunderland CDM105 Session 6 Step 7: Click on the ‘ Over ’ Tab and click the Copy Up Graphic button to create a copy of the Up button image Example 1: Example 1: Creating a button in Fireworks

University of Sunderland CDM105 Session 6 Step 8: Select the Over image by clicking the mouse while the mouse pointer is over the image (a light blue outline should appear). Then apply an effect of your choice to the over state ! Try Glow first …. and then experiment Click on the tick to remove an effect or select it and click on the “-”icon. Clicking on the ‘i’ permits you to modify effect parameters. Example 1: Example 1: Creating a button in Fireworks

University of Sunderland CDM105 Session 6 Step 9: Click on the ‘Active Area’ tab image Note: You can create Down and Over states but this doubles the total download time for the button. Also, the JavaScript needed in the HTML fails to work in older Browsers. You can set the URL for the button using the Properties panel but this is best done in Dreamweaver The red lines show how the image will be sliced up and the active area of the button Example 1: Example 1: Creating a button in Fireworks

University of Sunderland CDM105 Session 6 Step 10: Click the Done button. The button is now copied onto image. The blue lines show the selected slice Example 1: Example 1: Creating a button in Fireworks

University of Sunderland CDM105 Session 6 Step 11: To export just the selected slice (i.e. the button images for the rollover) and the required HTML i) First ensure you have selected the button slice and then ii) select File -> Export Example 1: Example 1: Creating a button in Fireworks

University of Sunderland CDM105 Session 6 Step 12: Select a directory/folder to save the HTML and the graphic files. Step 13: Input a file name Step 14: Ensure you have chosen selected slice only. Also make sure the other options are not selected. Example 1: Example 1: Creating a button in Fireworks

University of Sunderland CDM105 Session 6 Step 15: Start Dreamweaver MX Step 16: Select the Insert -> Image Objects -> Fireworks HTML Step 17: Browse to the location of the HTML file created by Fireworks Example 1: Example 1: Creating a button in Fireworks

University of Sunderland CDM105 Session 6 The button loads in the Dreamweaver page Step 18: Preview the page in a web browser Example 1: Example 1: Creating a button in Fireworks

University of Sunderland CDM105 Session 6 Layers and Web Menus Example 2: Creating a Web menu using more than one button and demonstrating the use of layers Step 1: We will use the button created in the first example but we will resize it. Select the slice (click on it) then select modify -> transform -> scale Note: You can move the button after resizing using drop and drag

University of Sunderland CDM105 Session 6 Step 2: Copy and paste and the first button a couple of times. Note: the pasted objects will appear on top of the original object so you have to move them (drop and drag.) Example 2: Example 2: Layers and menus

University of Sunderland CDM105 Session 6 Step 3: Click on each button in turn and modify the button text using the Properties panel Example 2: Example 2: Layers and menus

University of Sunderland CDM105 Session 6 Add new layer Step 4: Add a new ‘layer’ to the image using the layers panel Example 2: Example 2: Layers and menus

University of Sunderland CDM105 Session 6 Step 5: Name the new layer ‘background’ by double clicking on the name of layer Step 6: Move the background layer to bottom of the list. This way anything on this layer will be drawn first. Ensure the layer is selected (i.e. Pencil icon) Example 2: Example 2: Layers and menus

University of Sunderland CDM105 Session 6 Step 7: Draw a background object and experiment will fills and blurs. Example 2: Example 2: Layers and menus

University of Sunderland CDM105 Session 6 Step 8: Now export to the menu to Dreamweaver by using the Fireworks export to Dreamweaver method. Example 2: Example 2: Layers and menus

University of Sunderland CDM105 Session 6 Step 9: Now load the example in Dreamweaver using the method as in example 1 Insert -> Image Objects -> Fireworks HTML You can now select the buttons in Dreamweaver and give them URLs to load when clicked Example 2: Example 2: Layers and menus

University of Sunderland CDM105 Session 6 Machine Based Tutorial The tutorial session requires you to learn how to use Fireworks to create images to build rollover buttons and graphical menu systems. Complete the online exercises. Ensure you have read hours (11 to 18) of the key text book (Bruce, B - Sams Teach Yourself Dreamweaver MX 2004 in 24 hours) before the next session.