Dreamweaver Assignment 10 – Creating Links

Photo credit: Bart Maguire, uploaded via Flickr, Creative Commons License

10.1 Introduction:

We start off by taking quick look at the Dreamweaver live view feature.  This feature allows one to see the page that appears in the design window to behave as though it’s being viewed in a web browser.  This means that one can check the function of mouse-over scripts, dropdown boxes and other dynamic elements without having to launch the browser each time.  Live view can be toggled on and off via the Live View button on the document bar, or via the Live View option on the View menu.

Moving on, our tutor outlines some of the different types of links we might incorporate into our pages.  For instance, our home page might have navigation links to sub-pages within our site.  We might also create links to external webpages.  Our links might be hypertext based, like this, or clickable images that link elsewhere.  We may use named anchor links, which most of us have experienced on FAQ pages, wherein clicking a link on a page simply scrolls the page to the appropriate content.  We may link to specific files within an FTP site, or files that launce on the users system with a third-party application, such as MS Excel or Word.  We may even utilize mailto: links, which launch the users mail client and populate the addresse field.

10.2 Linking to a Page on the Inter-Tubes

In this exercise, we create a link to an external website with hypertext.  This is a simple matter of selecting the text on our design page that we wish to serve as the hypertext, and then inserting the URL into the Link field in the Properties panel. 

We also note that the default behavior for the link is to launch the linked-to URL in the current browser instance or tab, leaving the current site.  Sometimes this is the desired action, but not always.  We can determine the browser’s behavior in this regard with the Target field, also in the properties panel.  By selecting “_blank” from the dropdown list, we can instruct the browser to launch the linked URL in a new window or tab. 

10.3 Linking to a Page on the Same Site:

Linking to other pages within your site can be done as with external links, by simply highlighting the link text, and inserting the target page in to the link field.  However, for internal pages one only need specify the relative filename of the page, such as foo.html, rather than the entire protocol/domain/suffix/etc…

An even cooler way to create links is to begin by highlighting the link text, as before, and then using the click-and-drag gesture in conjunction with the target icon next to the Link field in the properties panel.  One can drag this icon over to the files panel, and drop it on top of the desired link target.  The page filename will automatically populate into the link field, with no chance of misspelling the name.  Sweet!

10.4 Linking to a non-HTML File:

One can create a link to any type of file just as easily as linking to HTML file; the process is the same. 

10.5 Named Anchors:

This type of link is useful for long pages, especially text-heavy ones such as FAQ’s.  This technique allows one to create a link on a page that scrolls the page to another position.  For instance, one might create a named anchor link at the top of an FAQ page with the hypertext How much does it cost?  This link could then point to a named anchor further down the page where information on pricing is spelled-out.

To do this, one navigates to the target portion of the page, and inserts an anchor with the gold anchor icon found on the insert bar.  A dialogue box will appear asking for a unique name to assign to the anchor, such as pricing (no leading caps or spaces allowed here, just legal HTML).  Then, one can create the link by highlighting the hypertext-to-be, and specifying the target anchor’s unique name in the Link field, preceded by a “#” (pound-sign), such as “#pricing”.  Alternatively, one can use the target icon to drag a pointer to the anchor. 

10.6 E-mail Links:

E-mail links, which trigger the default mail client on the user’s system when followed, can be inserted as any other link.  The desired hypertext is highlighted, and the entry in the Link field takes the form of an e-mail address, preceded by the “mailto:” tag.

Alternatively, one can click on the e-mail icon in the insert bar, and a dialogue appears prompting one to insert the link text, along with the target e-mail address.

10.7 Images and Image Mapping:

Ordinarily, one can designate an image to serve as a hyperlink just as easily as text.  However, one can also create multiple links from within an image by creating hot spots, or an image map superimposed on a graphical image.  This is most frequently encountered when visiting a global homepage for a multinational entity, and a map of the world appears, asking the user to select her region. 

The developer achieves this effect by using the Dreamweaver image mapping tool to draw regions atop the desired graphic (although these drawings are not visible when the page is rendered in the browser).  With the image selected in the design view window, the Properties panel displays information about the selected image.  Also in the Properties panel, in the lower left corner, are a set of icons representing a cursor, rectangle, circle, and polygon.  These are the drawing tools that one can use to draw and edit shapes on top of the graphic image.  When a region is drawn with one of the drawing tools, or a previously drawn region is selected with the cursor tool, the properties panel changes to show the properties for the current hot spot.  Any of the previously discussed link types van be inserted as the link target corresponding to the current hotspot. 

Once the hotspots are defined, the instance of the image map drawn used should be given a unique name to avoid possible conflicts with other image maps on the page.  The name can be assigned in the Map field of the Properties panel.

10.8 Creating a Rollover Image:

A rollover image is simply an image that changes when a user’s cursor moves over it.  Often, this might involve an image changing color, or magnifying, of generally responding in some way to grab the user’s attention.  Inserting a rollover image does not necessarily require that a link be associated with the image in question, but this is an effective way to provide feedback to the user that an image serves as a link. 

Inserting a rollover image is really inserting a pair of images, and specifying one as the default image, and the other as the rollover image.  One can specify these images by choosing mthe Insert=>Image Objects=>Rollover Image menu command.  A dialogue appears prompting one to specify each image file location, and the optional link to which the image should point.

10.9 Inserting a Navigation Bar:

In this section our tutor discusses inserting a navigation bar that she created in Adobe Fireworks.  Unfortunately, the creation of the actual navigation bar, along with any HTML code embedded within same, was not covered (maybe that’s in the Fireworks DVD, sold separately, batteries not included, not available in Alaska and Hawaii). 

Well, the process of importing the Nav bar seems simple enough; Insert=>Image Objects=>Fireworks HTML. 

Dreamweaver Assignment 9 – Images and Rich Media

Photo credit: Yi-Lin Hsieh , uploaded via Flickr, Creative Commons License

9.1 Web Image File Formats:

In this section, our tutor discusses the pros and cons of various image file formats.  This discussion has been previously covered in Flash Assignment 5, posted 05/25/2011.

9.2 Inserting Images and “Alt” Text:

We begin this lesson by editing our “About Us” page to include a JPG image.   We inset this image by means of the Image icon on the Insert Bar (Common tab).  After browsing for the image file to attach, we are presented with an alternate text dialogue box, asking us to insert a description of the image to be read aloud by screen reader applications.

Once our image has been inserted on the page, we can select the image, and note that the Properties panel now contains fields related to the selected image.  From the panel, we can adjust properties associated with the image, but at this point we will be content to simply adjust the alignment property.   By default, our picture has been inserted “inline”, meaning that it has occupied a series of lines on the page, and pushed the existing text down below it.  We choose to change this alignment to “Left”.  This does not move the image on the page, as it was already aligned with the left margin.  What it does do, is place the image in an invisible box and truncates the pictures use of the lines at the image width.  This allows the text to move up and occupy the remaing area on each line to the right of the picture.  This is analogous to the Box layout in MS Word.

9.3 Image File Path:

Here we draw our attention to the Src field in the image properties panel.  We note that the path in the Src field points to the location from whence we retrieved out picture.  It is important that this path be HTML “legal”; that is, avoid using capital letters, spaces, or special characters in the path.  While the system one is developing on may be tolerant of such pathnames, many web servers will not be, which may result in the image not displaying as intended.

We also note here that if we move the image source file from within the Files panel in Dreamweaver, the application will acknowledge the move, and prompt us for approval to update the image path.  If, however, we executed the move at OS file system level, Dreamweaver would be left out-of-the-loop, and thus would not be able to find and display the image.

9.4 Working with the Assets Panel:

Here we refer to the Assets tab of our Files panel, and note that this tab lists for us, among other things, all of the image files in existing throughout the files and folders included in our Files panel.  Optimally, we really should keep our images together in one folder, but in some cases there may be good reason for separating them in the file structure.  Regardless, the images list on the Assets tab will parse all of included file strycture for image format files, and list them along with their associated properties (Pixel dimensions, file size, format, path).  It also includes a preview area, so a selected image can be viewed.  Furthermore, we can add images to a page directly from this panel, vis drag-and-drop, or by using the Insert button at the bottom of the panel.

9.5 Modifying Images:

We take a look here at the rudimentary image editing functions baked-in to Dreamweaver.  With an image such as a simple JPG photograph, we can make a few adjustments, such as cropping, scaling, and adjusting the brightness/contrast.  One should be mindful that when making adjustments to an image placed on a page, one is not merely adjusting the instance of the image on said page, but rather modifying the source file itself. 

It is advisable to perform anything beyond the very simplest of editing within a dedicated image editing application, such as Photoshop or Fireworks.  The Dreamweaver program preferences can actually be set so as to launch an external editor by default when opting to edit an image.

9.6 Photoshop Smart Objects:

If one is keen to work with images in Photoshop, and specifically in the native PSD format, then one can take advantage of the Smart Object image-linking feature in Dreamweaver.  This feature allows one to add select PSD files from the Files panel, and add them to ones page.  Now, browsers will not render PSD files, so what Dreamweaver does is make a copy of the PSD image and stores it in a standard format file (such as JPG).  The copy of the image is inserted into the page, but that copy maintains a link with the source PSD file.  So, if one wishes to modify the source file in Photoshop, Dreamweaver is notified that the source file has changed, and prompts the user to refresh the JPG copy on the page.  It is not necessary to manually replace the JPG file with an updated copy of the PSD source; Dreamweaver will cheerfully do that if given the nod.

9.7 Flash Files:

We see here that the process of inserting Flash SWF files is essentially the same as tha for inserting images.  We note that our Assets panel has an icon to display the Flash-format files in our file structure, and we can easily select, preview, and insert into our page Flash content just as we did with image files.

As with image files, we note that when a Flash file on our page is selected, the Properties panel displays information associated with this file type, and allows for the selection of some options governing the file’s behavior and appearance on the page.

9.8 Flash Video:

Adding Flash video (FLV or F4V) files to one’s webpage allows video playback to occur from within the browser (provided that the browser supports Flash content; sorry iPad users), rather than launching a stand-alone media player.  This may or may not be the best solution for one’s project, but Dreamweaver give one this option, regardless.

Again, referring to the Assets panel, we note there is an icon for Video files.  Here, one can find a list of the FLV or F4V files contained within the site file structure.  Adding a video is as easy as drag-and-drop, but note that the Insert FLV dialogue box will appear, asking us to specify a skin option for the video.  The skin is just a set of playback controls that gives the user some degree of control over the video playback. 

Again, note that one added to the page, a video object can be selected and the relevant properties associated with same will be accessible in the Properties panel.

We also note that Adobe provides a media encoder with CS5 that allows one to convert numerous video formats into the Flash FLV or F4V formats for use in inline video playback.  This is fine if one has an uncompressed source video file to convert from.  However, because of its large file size, most video is stored in compressed formant (often encoded on-the-fly by digital video cameras).  If one has only video in a compressed format, such as MPEG, to begin with, then it is ill-advised to re-encode that video to another compressed format.  Doing so has the effect of amplifying compression artifacts, resulting in severe degradation of the video (and audio) quality.

9.9 Favorites:

In an effort to enhance user convenience, Dreamweaver has added the Favorites feature to each of the Asset categories covered above.  That is, if one browses over to the Images list in the Assets panel, and finds that one has exactly three ka-jillion image files therein, it will of course prove tiresome searching for the images that one needs, especially those used frequently. 

Fortunately, one can add those oft-used files to the Favorites area of the assets panel.  This is as simple as a right-click on a selected item (or group of selected items), and selecting Add to Favorites from the context menu.  Now, when one navigates to the Images list on the Assets panel, one can select between the radio buttons atop the panel labeled Files and Favorites, which correspond to all images in the file structure, or just those added to the favorites.  

Of course, this feature apples to each of the asset lists, not just Images.

Flash Assignment 8 – Working with Shape Tweens

8.1 Creating a Simple Shape Tween:

Shape tweens, as the name implies, are restricted to working with shapes.  That is, vector shapes drawn in merge drawing mode, or bitmaps converted to vector shapes with the Modify => Break Apart menu option. 

The process of creating the shape tween is slightly different than when creating an object tween.  To create a shape tween, we define our keyframes first by selecting the desired frames, and choosing insert keyframe from the context menu.  Next we navigate to each of the keyframes and manipulate our shape to the desired configuration.  Finally, we select the frame span between the first and last of the keyframes, right-click to view the context menu, and select Create Shape Tween.  An arrow will now display from keyframe to keyframe within our shape tween, and the entire span will be tinted a light-green color, indicating that a shape tween exists therein.

8.2 Shape Tweening Text:

In Assignment 6, we learned how one can select a text field, then choose the Modify=>Break Apart command to separate each character in the field into its own text field.  If the Modify=>Break Apart command is then reiterated, the text fields evaporate completely, leaving behind the text characters as simple shapes (of course, this renders the text un-editable, so do use care when doing so).  At this point, one can proceed to create shape tweens with the characters as with any other shape.

8.3 Advanced Underwater Zero-G Blindfolded Shape Tweening:

Here we focus on shape tweening of the morphing variety.  That is, rather than working with a single shape, and moving and/or manipulating that shape between keyframes, we can morph one shape into a completely different shape between keyframes with a shape tween.

For instance, suppose one draws places a piece of artwork in the shape of a tofu lump on keyframe A.  Then, say 24 frames (1 second) later, one inserts another keyframe B.  On Keyframe B, one can remove the tofu, and place instead a shape in the form of a crispy slice of warm, savory bacon (mmmmm….bacon).  By joining the two keyframes with a simple shape tween, one can create that ultimate culinary alchemy, turning tofu into bacon before ones eyes. 

Furthermore, if we fine that a shape tween morphing between two different shapes does not progress in the manner we had hoped for, one can edit the morphing process by inserting Shape Hints.  Shape hints are simply reference points that are placed in pairs on the morph from and morph to shapes.  These serve as guide points to directs the morphing process.

Flash Assignment 7 – Working with Layers and the Timeline

Photo credit: Joanna Paterson, uploaded via Flickr, Creative Commons License

7.1 Understanding Layers:

7.1.1 Working with Layers – They say that time is nature’s way of keeping everything from happening all at once.  In much the same way, layers are a means to give ones Flash content some elbow room on the stage.  By separating various graphics objects, shapes and text fields onto separate layers, modifying each of them becomes much easier.  It also lessens the risk that one will change finished content accidentally.  Furthermore, in some cases multiple layers are absolutely mandatory.  For instance, animation tweens are restricted to a single tween per layer, so multiple tweens require multiple layers.

Layers are managed in the Timeline panel.  Within the panel, we can add, delete, organize into folders, show/hide or lock layers. 

• A new layer can be added by clicking the New Layer icon in the panel.

• Clicking the Trash Can icon deletes the current layer.

• The Folder icon creates a new layer folder that layers can be moved into.

• The Eyeball icon toggles layer visibility on/off. 

• The Padlock icon toggles layer locking on/off.  No changes can be made to a locked layer.

• The Rectangle icon toggles the layer view between normal and outline.  Outline view can be helpful when you need reference the position of content on another layer, but don’t want that content to obscure your view of the current layer.

The hierarchy of the layers in the Timeline panel corresponds to the layer visibility on the stage.  That is, content on the top layer will obscure content on any layer below it.  The hierarchy can be easily adjusted, as layers in the panel can be dragged up or down as needed.

Double clicking the name of any layer in the panel allows the user to rename it.

7.1.2 Organizing Artwork with Layers –  In this section, our tutor introduces the use of the guide layer property.  By double-clicking the layer icon (to the left of the layer name in the timeline panel), we open the layer properties dialogue.  Selecting the Guide option turns our layer into content that we can view while assembling or project, but will not show up in the finished SWF file.  This is especially useful for positioning items, such as when creating tweens.  Using guide layers in conjunction with outline visibility mode is particularly useful.

7.2 Understanding Frame Rate:

The frame rate is a property of the time line that dictates how many frames per second (fps) are played when our finished SWF file runs.  A higher frame rate results in smoother animation, but also increases file size.  By default this rate is set at 24 fps, which is the same as a traditional motion picture frame rate.  Under most circumstances, this rate represents a good compromise between quality and file size, will not need to be changed.  However, the frame rate can be set anywhere from .01 to 120 fps.  To do so, simply click anywhere on the stage, and refer to the Properties panel.  Along with the stage size and color options is a property labled FPS, which represents the projects frame rate.

7.3 Understanding the Timeline

7.3.1 Understanding the Timeline Icons in a Classic Tween – In this section, we concentrate on the information contained on the right side of the timeline panel, which is the timeline itself.  Here we see a liner series of frames, represented as small rectangles, located to the right of each layer.  Also in the timeline, there may appear a number of icons.  In this exercise, we will explore the meaning of these icons as they relate to the Classic Tween. 

NOTE:  The term Classic Tween refers to tweens created with versions of Flash prior to CS5.  While CS5 still supports this earlier format, it is termed Classic to differentiate it from the CS5-style Motion Tween.

The first icon we discuss is the solid circle, or dot, smack-dab in the middle of a frame.  This represents a keyframe, or a frame in which some change on the stage is defined.  This could be the appearance of a piece of artwork, or one endpoint of a tween, for example. 

An arrow extending from one keyframe to another is indicative of a classic tween spanning the intervening frames. 

A frame containing an empty rectangular icon indicates that the content in that layer has remained on the stage but unchanged since the last keyframe.

Finally, a empty circle or empty dot represents a blank keyframe.  This indicates that any content on that layer has been removed.

7.3.2 Understanding the Timeline Icons in an Object-Based Tween –  The Object-based tween is quite similar to the classic tween, excepting that it applied to graphic objects, that is, graphic symbols, movie clips, bitmaps or artwork created in object drawing mode.  The appearance of an object-based tween in the timeline is only slightly different.  Specifically, the horizontal arrow spanning the tween is gone, replaced instead by a blue hue overlaying the frames within the tween.  Also, keyframes subsequent to the first within a tween span are not solid circles, but rather diamond-shaped icons.  Once a tween span is defined, selecting an individual frame within the span on the timeline requires the use of the Ctrl+click command; a simple click on a frame within the span selects not the frame, but the entire span.

7.3.3 Aligning Objects with Onion Skinning and the Grid – Onion skin view is a feature that is helpful for editing frame-by-frame animations.  For instance, If one needs to decide where to place an object on frame 30 of an animation clip, it might be helpful to know where the object has been over the previous 5, 10 or 20 frames.  One could move the playhead back to prior frames to see how an object moved over time, but that information is then lost when one returns to edit frame 30.  With onion skin view, one can elect to see a semi-transparent of view of an object as it existed in a given number of frames prior (or subsequent) to the current frame.  The effect mimics that of an illustrator drawing an animation cell laid atop a number of previous cells on a light table.  The onion skin view is selected by means of the onion skin icon just below the timeline.   Once selected, the top row of the timeline (where the frame numbers are displayed) is tinted grey over the span of the onion skin view.  There are handles on either side of this tinted area, allowing one to adjust the covered span my means of dragging the handles left or right.

Also assisting with object placement is the grid overlay.  As one would expect, this feature simply displays a uniform grid atop the stage to aid with alignment.  The grid is displayed via the View=>Grid=>Show Grid command.  Selecting the View=>Grid=>Edit Grid command allows the user to change the grid pitch, color, and whether or not objects snap themselves to the gridlines when placed in proximity to same.  The snap feature can be thought of as magnetizing the grid lines.  The relative strength of this attractive force is adjustable as well.

7.3.4 Using Frame Labels – When defining actions with ActionScript code, it may be necessary to direct the process to a particular frame in the timeline during the execution of the script.  For instance, clicking a particular button may direct the application to frame 50 in the timeline.  While one can reference frame 50 by its frame number in the ActionScript code, this may be problematic.  If the Flash project needs to be modified in such a way that adds or removes frames, the target frame referenced by the button may no longer be at frame 50.  Fortunately, there is a means to assign a label to a given frame, which remains constant even if a frames position in the timeline is changed.

When selecting a particular frame in the timeline, note that the Properties panel reflects that a frame is selected and displays property options for that frame.  Name is among the listed properties, and any frame can be given a label by making an entry in this field.  Once a frame is labeled, ActionScript code can reference the frame by name, regardless of where it may be in the frame sequence.

When labeling frames, one should create a dedicated layer to hold the labels.  Also note that when labeled, a frame will display on the timeline bearing a red triangular flag to indicate that a name has been assigned to it.

7.3.5 Editing Frames on the Timeline – In this lesson we cover the basics of selecting, adding, deleting and moving frames in the timeline. 

Selecting a single frame is ordinarily accomplished with a simple click.  The exception, as noted above, lies in selecting a frame within an object tween (which requires a Ctrl+click). 

A range of frames can be selected by selecting a single frame first, then selecting another frame while holding the shift key.  This results in the span of frames connecting the two being selected.

Once selected, a number of operations can be performed on frames with a right-click context menu.  For instance, selecting a frame and selecting insert frame from the context menu adds a frame in the selected place, pushing existing frames to the right to accommodate the addition.  Similarly, selecting remove frames deletes the selection and shifts the subsequent frames (if any) back to the left, filling the void.

A click-and-hold on a selection allows one to drag the selection of frames to another location on the timeline.

When the frames within an object tween are selected (by clicking anywhere inside the tween), one can expand or compress the length of the entire tween by placing the cursor over either end of the span, which will change the cursor to double arrows, and then using a click-and-drag action to move the endpoints.  Note that this adds frames in a distributed manner across the tween span, so if the length of a tween is doubled, then the interval between any two keyframes within the tween is also doubled.  If this is not the intended result, do not fret.  One can simply select any of the keyframes within the span and drag them to the appropriate positions.

Note also that selected frames can be cut, copied and pasted by means of the right-click context menu.

Dreamweaver Assignment 8 – Formatting Text with CSS

[Image Removed]

http://farm6.static.flickr.com/5307/5638584830_9f88b5a13d_z.jpg

Photo credit: romanlily, uploaded via Flickr, Creative Commons License

8.1 Introduction to CSS: 

Cascading Style Sheets (CSS) provide a means to create rules for formatting the appearance for one’s web site.  With CSS, one can set advanced text formatting options, background appearance, page break behavior and the like by creating a set of CSS rules.  One these rules are set, they can be propagated to pages throughout the website, thus eliminating the need to individually format every bit of content added to one’s site.  Furthermore, once a set of CSS rules are defined, they can be imported and used on other web content projects.

CSS rules are created and managed via the CCS panel in Dreamweaver.

8.2 Places to Store Styles:

Here our tutor gives us glimpse of how CSS sheets propagate onto pages within a site.  We note that there is an HTML <link> tag on the a page to which a particular style sheet should apply, instructing the browser to refer to that CSS rule set, and render the content accordingly.  For comparison, we also see how these formatting rules can be stored without the use of a style sheet, by embedding the formatting code within the individual page’s HTML.  It is immediately evident that this method would involve much duplicity, and making a design change would involve editing this code on each individual page to which the design change would apply. 

8.3 Creating and Linking to a .CSS File:

In this exercise, we use the CSS panel to link a pre-defined CSS file to our example HTML page.  We utilize the link icon in the CSS panel to browse to our ready-made CSS file, and specify that it should apply to rendering the content on the screen (as opposed to applying to print layout, or a screen reader, or some other output format).  When this style sheet is linked, we note that the <link> tag appears in the code window of our example page.  We also note that a new item appears in our related file tool bar, above the code view window.  This item bears the same name as that of the CSS file that we linked to.  By clicking on that item, we can see the actual code contained in the style sheet.

8.4 Creating a Style for an HTML Tag:

Continuing to work with our pre-defined CSS sheet, we note here that our CSS sheet leaves us with some room for improvement, and we would like to add additional formatting rules to our page.  Specifically, we have defined a definition list on our page, and we would like to add some formatting to this list.  Note that our definition list consists of definition terms, denoted in the HTML code with the tag <dt>, and corresponding definition descriptions tagged with <dd>.

To format these items, we refer to our CSS panel, and select the icon for New CSS Rule.  A New CSS Rule dialogue appears, asking us for a context for which this rule will apply.  We specify the Tag option, indicating that we want to propagate a rule to items with a specific tag.  Next, we select from the list of all valid HTML tags, to indicate which tags should be the rule we are about to specify.  In this case, we select the <dt> tag.  Finally, we must define in the dialogue box where this rule will be stored.  We can choose to apply it to this document only (which presumably would embed the style code in the page HTML code, thereby bypassing the style sheet).  We can also choose to store this code in a new style sheet.  Finally, we have the option to add this rule to the existing style sheet that we have linked to.  This third option is the one selected by our tutor.  It appears that caution should be exercised here.  Apparently, we are electing to modify a stand-alone style sheet that we have only linked to.  If we were to link to this sheet from within other projects, these changes would then be evident in those projects as well.  So, look before you leap would probably be some appropriate words of wisdom here.

Having completed the first dialogue box, we see that the <dt> tag now appears as an item under the styles.css item in our CSS panel, and a new dialogue box appears asking us to define the actual rules that we wish to apply.  Here we select some font particulars, such as weight, size and color, and apply them.  We repeat this process for the <dd> tag.  By clicking on the styles.css item in the related files toolbar, we can see the changes that we made reflected in the CSS sheet.

8.5 Creating a Class Style/

8.6 Editing a Style:

In this exercise we work with our Downloads page, upon which we have previously created an unordered list.  We decide that a portion of the text belonging to each list item, specifically the text indicating the file format and size, should be formatted differently from the main text of the list items.  Since the text at issue does not exist within it’s own specific tag (it’s within the <li> tag, along with the rest of the list item text), we elect to create a new class of text to which our new rule should apply, and then specify that text as a member of that class. 

To do this, we again begin with the new CSS rule dialogue, but this time we specify the context as class rather than tag.  We must specify a name for our class as well.  Note that spaces are forbidden in class names, as are leading capital letters (although subsequent capitals appear to be valid).  After naming our new class and clicking OK in the dialogue, we see that our new class appears as an item under styles.css in our CSS Styles panel (as we ,chose to store this style information in the existing CSS file).  We also note that the name of the new class is preceded by a period, as is the convention for classes.  We did not add the period when we named the class.  Rather, Dreamweaver added this element for us. 

We are again presented with the CSS Rule Definition dialogue box, where we make the specific formatting rules as we have done previously (font type, color, etc.).  We exit the dialogue box by clicking OK when finished.

At this point, we now proceed to select the pieces of text that we wish to designate as belonging to this new class.  The easiest way to do this is by selecting the desired text, then referring to the properties panel.  We note that there is a Class dropdown box in the panel, and our newly created class type is now populated as an option in the dropdown list.  Selecting that class from the list includes our selected text as a class member.  Referring to the HTML code window, we note that this text is now bound by a <span> tag, along with a class designation.

We must repeat this process for all of the text that we wish to assign to this class.  However, once this is accomplished, we can easily change the appearance of all text belonging to that class by simply modifying the class rules.  To do so, we simply select the class name in the CSS Styles panel, and then edit the details displayed in the CSS Properties panel.

8.7 Custom Font Stack:

As we discussed in Assignment 4, if you specify content to display in a font that is not installed on the user’s system, the text will not display as you intended.  It is good practice to specify commonplace alternative fonts for the browser to use, lest the browser revert to the user’s default font, leaving you with no control over how the content will appear.  Here we see how one can specify a list of fonts, in order of preference, that the browser should look for on the user’s system when rendering text content. 

Note that in the Properties panel, there is a pair of buttons labeled HTML and CSS, respectively.  These buttons toggle the Properties panel between HTML and CSS properties.  If we select the CSS button, we see that there is a drop-down box in the properties panel labeled Font.  If we click on the drop-down arrow, we note that the list contains not individual font names, but sets of comma-delimited font names.  By default, Dreamweaver has grouped together similar fonts.  If one selects one of these font groups for ones CSS styles, the browser will be instructed to seek out the fonts specified in the order listed. 

If one wishes to specify ones own list of font preferences, known as a font stack, the Edit Font List option at the bottom of the list will allow for adding any font installed on the developer’s system, and in any order one so chooses. 

8.8 Styles Created by Page Properties: 

While most of this section has dealt with defining styles within a CSS file, we are advised here that there does remain a means for making style definition to a particular page with a site, via the Modify => Page Properties dialogue box.  Property definitions made here do not get written to the CSS file, but rather are baked right in to the HTML code for that specific page.  Note that the style definitions made in this way are still visible in the CSS styles panel, but are not listed as items under the CSS file, but under the generically named <style> header.

8.9 CSS for Printing:

In section 8.3, we discussed linking to a CSS file, and noted that when we did so, we specified a media type that our style sheet should apply to.  In that case, we opted for screen, meaning that we were to define the styles that controlled how our content appeared on a monitor.  If we now wish to define a different set of styles that govern the printed form of our page, grayscale-friendly, for instance, we can do so by linking to a different style sheet in the same manner as done before, but opting instead for the print option in the media drop-down box.  A new CSS entry will appear in our CSS panel, with the parenthetical (print) adjacent to the name, reminding us that it applies to the printed format.

After defining our print styles, we need not print our page to test its appearance.  We can make visible the Style Rendering toolbar (View => Toolbars => Style Rendering), and select the printer icon.  This will display our page on-screen in accordance with the CSS print styles that we have defined.

8.10 Using the Code Navigator

The Code Navigator feature in Dreamweaver is a handy little applet that give one quick feedback on the style rules that apply to bits of text within a page.  Because CSS styles cascade through pages in a website, it can sometimes be unclear just why a particular piece of text if formatted the way it is, especially if one did not intend it to be so.  This type of behavior should be immediately clear to anyone who has ever had to set access permissions in a network file system; “Where was that delete permission inherited from, and why the hell didn’t that modify permission propagate down to that subdirectory?!?”.

To use the code navigator, one need only select a string of text, and Alt+click on it to show the code navigator applet.  The code navigator window shows which CSS rules are governing the selected text.  Now, how one goes about correcting styles that propagate unintentionally, well, that’s a story for another time…..

The Code Navigator applet window

Flash Assignment 6 – Working with Text

Photo credit: Stacey Lynn Baum, uploaded via Flickr, Creative Commons License

6.1 Understanding Flash Text:

The Flash text properties panel.

• 6.1.1 Understanding Text Field Types:  In this introductory section, we cover the various types of so-called classic text field types in Flash.  Text fields of this type may assume one of three forms:
• Static text, or what might be called a label, is text that will not be modified during the execution of the Flash movie.
• Input text describes a text field where a user might enter some information, such as a user name or password.  This type of text may be read and used in the execution of Action Script code within the Flash movie.
• Dynamic text is what might be termed output-text.  This is text that may be generated and displayed by processes executed within the Flash movie.

When creating text fields in Flash, regardless of type, we note that the properties panel affords us a rich variety of formatting options on par with what one might expect in a full-fledged word processing application.

• 6.1.2 Understanding Text Layout Format:  In addition to the so-called classic text type discussed in the previous section, Flash CS5 introduces a new type of text known as Text Layout Format (TLF).  Text designated as TLF has many more formatting options, going beyond that found in most word processing apps.  The formatting options for TLF text are in fact more akin to those found in desktop publishing and typography apps, allowing for granular control over elements such as leading (spacing between successive lines), tracking (character spacing), multi column layout, and so forth. 

Particularly noteworthy is that when using TLF text, one may elect to have the chosen display font baked right into the compiled Flash SWF, so it is not incumbent on the user to have a particular font installed on her system in order to view the content as envisioned by the designer.  Good stuff!

6.2 Working with Text:

• 6.2.1 Creating Text Fields:  Here we review some of the material we covered earlier in our primer on text boxes.  We note that we can create expandable text boxes with our text tool by simply clicking anywhere on our stage and beginning to type.  We know that we are working with an expandable text box by the circular handle present at the upper right corner of the box.  This type of text box will continue to widen as we continue to enter text therein.

A second type of text box is the fixed-width variety.  We create a fixed-width box by using our text tool to click and drag a rectangular shape until we reach our desired width.  When we begin typing in this type of box, our text will automatically wrap when the fixed width has been reached, continuing to push the lower bounds of the box downward as we add more text.  The fixed-width text box is readily identifiable by the presence of the square handle at the upper right corner of the box.

A noteworthy property of the above-reference shaped handles on these text boxes is that they can be used to alter the text box type.  For instance, one may grab the circular handle on the expanding box, and drag it to any desired width.  This will size the text box accordingly, and convert it to a fixed-width box.  Similarly, double-clicking on the square handle of a fixed-width box will unwrap the text therein and size the box width to accommodate the existing text.  At that point, the box will be converted to an expandable box, continuing to grow as more text is added.

We note here that when creating input text fields, we do not have the click-and-type option available to create expanding text fields.  However, once a fixed width input field is defined, we can still convert it to an expandable field in the conventional manner.  Also remarkable with respect to input fields is the enabling of the show border around text button in the character section of the properties panel.  Selecting this option gives the field the appearance of the familiar input box, replete with white background and black border.

• 6.2.2 Advanced Text Formatting:  Perhaps this section less than aptly named; this is a bit of review on the subject of text formatting.  Herein, we experiment with adjusting font style, size, character spacing, leading, and alignment.  These are important skills to master if one will be doing much work with text. 

• 6.2.3 Using Text Rendering Methods:  As noted earlier, Flash enables one to embed specific font data into one’s published SWF file, ensuring that the text will render as intended regardless of whether or not the desired font is installed on the user’s system.  However, in this exercise, we experiment with this type of embedding and note its effects on the resultant file size of the SWF.  Of course, larger file sizes are less desirable than smaller ones, so this technique should be used sparingly. 

We also examine other options for rendering our text in the published SWF.  The most efficient of these is simply instructing Flash to use the device fonts, which means that Flash will search the user’s system for the specified font, and use it if available, or some other reasonable alternative if the specified font is not installed.

Another option is to instruct Flash to create bitmap shapes of the character outlines.  This can be more efficient space-wise than embedding the font definitions, but results in a lower quality approximation of the desired font.  This effect can be mitigated somewhat by opting for the application of anti-aliasing filters to the bitmapped characters.  This results in a better quality image than a purely bitmapped approximation of the typeface.  The resulting SWF is somewhat larger than a bitmapped version, but still smaller than a SWf with the specified font data baked-in.  Note that there are a few options for applying anti-aliasing filters, so it might be worth experimenting with them to see which works best for one’s particular application.  As always, your mileage may vary.

6.3 Advanced Text Techniques:

• 6.3.1 Adding Filters to Text:  In this section, we examine some the powerful graphic filters that Flash can apply to our text.  We have used some of these filters previously in our tutorials on working with artwork, so these are not wholly unfamiliar. 

Filters are managed in the lowest portion of the properties panel.  Selecting the add filter icon at the bottom of the filter management area opens a menu list of filter effects from which to choose.  Options include drop shadow, blur, glow, bevel, gradient glow and gradient bevel.  Once a filter is selected, further options appear in the filter management area, allowing one to tweak the filter settings as desired.  If one gets a little too crazy with filter settings and is not sure how to back-up, there is also a reset filter button, that sets the filter options back to default.  One can also choose to discard the filter altogether with the delete filter button, or simply remove its effects with the enable/disable filter button.

6.3.2 Using External Text Files:   In this exercise, we explore the process of generating text from an external text file in a SWF movie.  The example used here is a tip of the day flash movie that would be updated daily with a new passage of helpful text.  The trick here is that the tip should be able to be easily updated without having to re-edit the Flash FLA file each day.  Instead, this method will enable one to simply instruct the SWF movie to display the contents of a stand-alone text file, which itself can be easily updated daily.

We begin this process by inserting a special type of text box known as a text area from the components panel.  This text area can be dragged-and-dropped from the components panel right onto our stage, then sized and positioned on the properties panel.  Also set on the properties panel are some other behavior options, such as word wrap and scroll properties.

Next we will go to our code snippets panel and locate the item load external text located in the load and unload folder.  We will also display our actions panel in the application (recall that all of our myriad panels, if not present on our screen, can be made visible by checking them on the Window menu).  Now, with our code snippets and actions panels in view, we double click on the load external text code snippet, and note that our actions panel immediately populates with some action script code. 

We edit this generic code a bit, specifically instructing Flash to grab the tip of the day text that we want to display by specifying its path.  Also, we specify where the text should be displayed (in our text area).  In the Function segment of out action script code, we add a line with the form object.property = value, which should be familiar to those who have done some work with object oriented programming.  The object at issue here is our text area, which is a movie clip object that we gave an instance name of TipText_mc.  The property we wish to define is Text, and the value we will assign is textData, which is the variable name that Flash choose to assign to our text file.  So, in object.property = value syntax we specify:  TipText_mc.text = textData; (the semicolon being a line terminator in ActionScript syntax). 

Now, when we run our executable SWF file, the text in the plain TXT file that we specified is rendered in the text area of our Flash movie.  The beauty of this is that we may now have our minions update this text file daily, without the need for any modifying of the Flash movie.

6.4 Animating Text:

• 6.4.1 Animating Text Perspective:  In this lesson we have some fun with our 3D rotation tool in conjunction with motion tweens.  By right-clicking on various objects on our stage, text boxes in this example, we open a context menu and select create motion tween.  This inserts a 1 second timeline (by default) associated with the object’s layer, and creates a keyframe at the last frame in the timeline.  We can now manipulate the object’s appearance in the ending keyframe with any one of the tools available (such as 3D rotation, free transform, etc).  Now when we generate the SWF and play the movie, our object will gradually transform from its appearance in the first frame to the appearance in the last frame over the duration of the movie.  We can repeat this technique for each object and/or layer in the Flash movie.

As an additional exercise, we add a bit of code to prevent our flash movie from continually looping (the default behavior) by inserting a stop(); command in our actions panel.  Note that we create a new layer for the actions command, as is dictated by good practice guidelines.

• 6.4.2 Animating Text Characters:  Well, this is pretty freakin’ cool.  Here we select a text box containing some content.  From the menu we select Modify => Break Apart, and presto, each character now exists in its own text box.  Now we can manipulate each character individually.  In this example, we create key frames on every fifth frame of our movie, allowing one additional character (text box) to appear at each keyframe.  Neat!

• 6.4.3 Animating Text with a Motion Tween:  In this exercise, we do a bit more with motion tweens.  Here we reveal letters progressively as in the previous exercise, but we also add another object into the mix.  A movie clip object in the form of a pencil will follow along with the text as it is revealed, giving the illusion that the pencil is drawing the letters.  The trick here is that rather than just specifying a start and end point for the pencil, we specify a keyframe at each individual frame in the animation, so the pencil appears to trace-out the letters faithfully.  By moving the position of the pencil along the path of the letter slightly at each frame, this effect is realized.

• 6.4.4 Animating Text with a Mask:  Building on the previous exercise, we enhance the effect of the pencil drawing out the characters here by using a mask over the characters to progressively reveal the strokes as the pencil object moves along.  The clever bit here is copying the text and pasting it in place to a new layer above the text layer. Here we again choose Modify => Break Apart, which splits the newly pasted text box into individual boxes, as in the previous example.  However, if we perform the same menu command again, the individual text boxes fall away, and we are left with a graphic object that is merely a shape in the form of our text.  Right-clicking on the layer icon allows us then option to convert this shape to a mask.  Adding keyframes to this layer that correspond to the pencil keyframes allows us to reveal the mask along with the strokes of the pencil, making for more realistic animation of the pencil drawing the characters. 

Furthermore, we are introduced to the motion editor panel, which allows us to step our way through a motion tween, and refine the motion further.