The Goals

• Learning how to use Flash Text, Flash Buttons, Flash Animations, and Image Viewer

Notes about the sections below

• section 1 - Goals and Notes
• section 2 - Creating Flash Text
• section 3 - Modifying Flash Text
• section 4 - Adding Flash Buttons
• section 5 - Modifying Flash Buttons
• section 6 - Adding Flash Animations
• section 7 - Using the Image Viewer

This tutorial requires the Yoga Songha files be placed in the expected folders.

And the Yoga Songha site has to be created correctly (if it does not exist).

• 257 Flash text provides you the use of any font
•     and you can create the text right in Dreamweaver
•     the text you create is saved as a small Flash file
•     with the file extension of .SWF
• 257 open index.html from the Lesson_07_Multimedia folder
•     position the Insertion Point
•         on a new blank paragraph line below the text
•         Welcome to Yoga Sangha near the top of the document
•     click the Media menu on the Common category of the Insert Bar
•     and select the Flash Text option from the menu
•     the Insert Flash Text dialog box appears
• 258 set the following options
•     from the Font menu
•         choose Comic Sans MS
•     in the Size text field, type 22
•     use the Color box to choose the #FFCC00 orange color
•     in the Text window, type Welome to Yoga Sangha
•     for Rollover color, type #FFFFCC
• 258 in the Save as text field
•     type welcome.swf
•     then click the OK button
•     the Insert Flash Text dialog box closes
•     the Flash text appears in the Document window
•     and the Flash Accessibility Attributes dialog box appears
• 259 replace the default filename in the Save as text field
•     with the proper descriptive name
•     the default location to place a flash file is in the same folder as the html document
•         you can save it in another folder or the image folder if you want
• 259 type Welcome to Yoga Sangha into the Title text field, and click OK
•     the Flash Text appears in the document
•     the Property inspector reflects the attributes of the welcome.swf Flash text file
• 259 in the Document window
•     select the Flash text
•     and resize it by dragging one of the handles
•     because the file is Vector based
•     you can increase or decrease the size of the image without concern about loss of image quality
•     hold down the SHIFT key to retain the Aspect ratio
• 259 you can now delete the original Welcome to Yoga Sanga text
•     located in the document
•     save the index.html document as index1.html
•     the text appears as it did in Dreamweaver
•     you can also sset a link and rollover color in Flash text
•     the Play button in the Property inspector will display the button in active states in Dreamweaver

Continue using index.html

• 260 in the Document window
•     double-click the Flash text
•     the Insert Flash Text dialog box is displayed
•     change the options to your liking and then click Apply to see the results
•     when you finish
•     click OK to close the Insert Flash Text dialog box
•     the edited Flash text is refreshed on the page and the SWF file is updated

Continue using index.html

• 260 in the index1.html Document window
•     position the insertion point at the begining of the line
•     EMAIL:Info@yogasangha.com
•     near the bottom of the document
•     you will insert a Flash button on this page
• 260 from the Common category of the Insert bar
•     click the Media menu and then select the Flash Button icon
•     the Insert Flash button dialog box appears
• 261 in the Style list
•     scroll down and select Glass-Silver
•     in the Button text text field, type Email
•     leave the Font and Size options at their defaults
•     Verdana and 12 respectfully
•     a sample area at the top of the dialog box shows a preview of the button style
•     you can move the mouse over this sample image to see how it will function
•     you can edit these settings later, if necessary
• 261 click the Bg color text field and enter #FFFFCC
•     the background color hexadecimal code represents the background color that will be used for the button
•     to make the button appear seamlessly on your page
•     you would instead select the same color as was used for the background of the page
• 262 in the Save as text field
•     type email-button.swf
•     then click OK at the upper right of the dialog box
•     in the Flash Accessibility Attributes dialog box
•     type Email into the Title field
• 262 Tip: the preview does not change dynamically as you alter the settings
•     it only shows the button style
•     if you want to view the button as you are making changes
•     you need to click the Apply button
•     so that you can see the changes in the Document window
• 262 the Insert Flash Button dialog box closes
•     and a button with the specifications you set appears in the Document
•     because the button was just inserted, it is selected
• 262 with the button still selected
•     click the Play button in the Property inspector
•     clicking the Play button
•         allows you to see the Flash button effects in the Document window
•     the button appears as it will in a browsers
•         and the selection handles disappear
•     the Play button becomes a Stop button
• 263 in the Document window
•     move the pointer over the Main button
• 263 with the button still selected
•     then click the button
•     the button changes to its rollover state when the pointer is moved over it
•     the button changes to its clicked state, a different visual appearance, when clicked
• 263 click the Stop button in the Property inspector
•     save the index1.html file as index2.html
•     the button changes states just as it did in Dreamweaver
•     depending on the pointer position and mouse click

263 you can easily change many of the button attributes at any time

• 263 open the index2.html file
•     in the Document window
•     double-click the Flash button you just created
•     the Insert Flash Button dialog box appears
• 263 make changes to the Flash button settings
•     set the options however you want
•     for example, change the font to Arial
• 263 click Apply to see the changes
•     click OK when you are finished
•     you can add your own template of buttons
•         to those in the Style list
•         by using Flash to create SWTGenerator Template files
•         outside Dreamweaver
•     to add these files to Dreamweaver
•         you need to open the Dreamweaver program folder
•         and place them in the Configuration, Flash Objects, Flash Buttons folder

263 using Flash

• you can create
•     vector-based graphics
•     animations
•     and movies
• a Flash animation has been created for you
•     Dreamweaver cannot produce these types of files, only Flash

263 open the chakras.html document

• from the Lesson_07_Multimedia folder
•     add an extra paragraph above the text
•     and place the insertion point on the new line
•     be sure to use a paragraph return, not a line break
•     you need a new text block
• 264 from the Common category of the Insert bar
•     click the Media menu
•     and select the Flash icon
•     in the Select File dialog box
•     select Images/Chakras.swf
•     and then click the Select button
•     similar to images
•     you can also insert Flash animation from the Assets panel
• 264 in the Object Tag Accessibility Attributes dialog box
•     type chakras into the Title menu
•     the Flash animation is placed on the page
• 264 in the Property inspector
•     make sure that the boxes for Loop and Autoplay
•     are checked
•     click Play to view the animation in Dreamweaver
•     to view animation files in Dreamweaver, click Play
•     click Stop when you are done testing
• 264 Tip: you can resize animations by dragging their selection handles
•     hold down the Shift key to keep the aspect ratio
• 264 click Stop on the Property inspector
•     save the chakras.html document as chakras1.html
•     and preview it in the browser
•     AutoPlay causes Flash animation to begin as soon as the page is loaded into the browser
•     the animation plays repeatedly because you choose Loop in the Property inspector
• 264 Tip: always be sure to select a SWF file
•     when you insert a Flash animation
•     do not insert FLA or .SWT files because they do not show up in a browser

265 Flash Elements enable you to quickly add interactivity to your pages

• the Image Viewer Flash Elements creates a slide show interface that you can use to present a series of images
•     this interactive presentation format
•     which can be configured easily within Dreamweaver
•     gives you a varity of options
•     including the ability to set captions and links
•     for each image in the slide show
• 265 Note: the Image Viewer is the only Flash Element that Dreamweaver 8 initially contains
•     additional Flash Elements may be created in the future
•     by Macromedia or third-party developers
•     and made available through the Developers Exchange on the Macromedia Web Site
• 1. open yogastudio.html from the Lesson_07_Multimedia/about folder
•     choose the Flash Elements category on the Insert bar
•     and click the Image Viewer button
•     the Save Flash Element dialog box appears
• 265 2. type yogastudio into the Save as text field
•     and save the file into the Lesson_07_Multimedia/about folder
•     the Image Viewer Flash Element file is saved
•         and Dreamweaver automatically adds the required SWF extension
•     if the new file yogastudio.swf does not immediately appear in the Files panel
•         click the Refresh button at the top of the panel to update the list of files
•     the Image Viewer appears in the Document window
•         as a large gray placeholder with the Flash icon in the center
• 266 3. click the Play button on the Property inspector
•     the Image Viewer now appears in the Document Window with default settings
•     a control bar is located at the top of the Image Viewer
•         which contains a blank area to the left for a title
•         a text field that displays the number of the current image
•         and allows the user to type in a number
•         and jump to a different image
•         and three buttons
•             Back
•             Play/Stop
•             Forward
•     below the control bar is the image area
• 266 4. in the Tag inspector
•     whose title bar changed to read Flash Element when you selected the Image Viewer
•     click the Color picker for frameColor
•     and choose the #666666 gray
•     you will do the majority of the configuration for the Image Viewer in the Tag inspector
•     which open automatically when the Image Viewer is inserted
•     and displays the initial default settings for this Flash Element
• 266 Tip: if the Tag inspector is collapsed
•     click the Expand/Collapse button to the left of the name to expand it
•     if you do not see the Tag inspector
•         choose Window, Tag Inspector
• 267 5. in the Tag inspector
•     click the (No) value for the frameShow option to make menu buttons available
•     choose (Yes) from the menu that appears
•     the frameShow option turns the border option on for the Image Viewer
• 268 6. in the Tag inspector
•     click the value field for frameThickness and change it to 1
•     then press ENTER to apply the change
•     click the Play button on the Property inspector
•     to see the Image Viewer again in the Document window
•     the border is now set to a width of one pixel and you can see the gray outline around the Image Viewer
•     the bgColor (background) option in the Tag inspector is white by default
• 268 7. click the value for the imageURLs option in the Tag inspector
•     then click the Edit Array Values button
•     that appears to the right of the text field
•     the imageURLs option defines the images that the Image Viewer will contain
•         you need to use this option to specify the location of the images
•     Note: a series of values in Flash Elements is called an array
•         the Image Viewer uses arrays for the image, caption, and URL options
•     the Edit 'imageURLs' Array dialog box opens
• 269 8. with the cursor placed in the line with the first item
•     click the folder icon that appears to the right of it
•     use the Select File dialog box to browse to the Lesson_07_Multimedia/about/Images folder
•     and select studio_photo.jpg
•     the values, which are the paths to the images
•         will be contained in single quotes
•         these quotes must be included for the Image Viewer to work properly
•     Note: if the Edit 'imageURLs' Array dialog box shows any images in the Value list
•                  when you first open it (pehaps in the form of 'img1.jpg')
•     delete them all before adding the studio_photo images by selecting each one
•                  and clicking the minus (-) button
• 269 9. click the plus (+) button to another value field
•     and select the studio_phot2.jpg image
•     continue to add additional value fields
•     and set their sources to studio_phot3.jpg,
•     studio_phot4.jpg, studio_phot5.jpg,studio_phot6.jpg, and studio_phot7.jpg
•     click OK to close the Edit 'imageURLs' Array dialog box
•     Tip: you can press the Tab key
•                   to create add another item to the list when the insertion point is in the last value
•     you now have seven images defined in the Image Viewer
• 270 10. click the value field for the imageCaptions option in the Tag inspector
•     then click the Edit Array Values button
•         that appears to the right of the text field
•         type Yoga Sangha (be sure to include the single quote marks)
•         in the Value text field
•     press Tab or use the plus (+) button
•         to insert six additional value fields while adding the same caption to the remaining images
•     click OK
•     the captions must be contained in single quotes
•     add captions in the same order the images were added
•     you can additionally set captionColor, captionFont, and captionSize
• 270 11. click the value field for the title option in the Tag inspector
•      then type Yoga Studio into the text field
•         and press Enter
•      click the Play the button on the Property inspector
•      to see the Image Viewer again in the Document window
•      the title is placed in the space on the left of the control bar
• 271 Note: you can control titleColor, titleFont, and titleSize options
•      from the Tag inspector
• 271 by default the transitions between images are set to Random
• 272 12. click off of the Image Viewer in the Document window
•      to deselect it
•      save the yogastudio.html document as yogastudio1.html
•      preview it in your browsers
•      you can chage the size of the Image Viewer through the Property inspector