Flash Assignment 3 – Working with Artwork

Photo credit: Jen Marquez, uploaded via Flickr, Creative Commons License

3.1 Creating Vector Artwork in Flash:

Vector vs. Bitmapped Images – Images imported into Flash from a digital camera, scanner or some other applications are typically bitmapped images (such as .gif, .jpg or .png files). These are composed of an array of a fixed number of pixels. While it is advantageous to be able to work with imported images, one should be aware of the limitations of doing so. Specifically, bitmapped images do not scale all that well. Bitmapped images are enlarged by means of stretching the individual pixels, resulting in loss of sharpness of the image. This effect can be reduced by using higher resolution images, the trade-off being that high resolution images have large file sizes.

Conversely, objects created with the Flash drawing tools are what are known as vector images. Vector images are not defined by a finite array of pixels. Rather, they are defined by mathematical algorithms that define the points, lines, curves and fills composing an object. These objects can be scaled without suffering loss of quality, and are highly efficient in terms of file size.

Flash Merge vs. Object Drawing Mode – Refer to the discussion of the shape tool in the post entitled “Flash Assignment 2: The Interactive Tools Panel” for a discussion of merge vs. object drawing modes.

Creating Vector Art with Flash Drawing Tools – In this section, we follow along with our tutor to create a vector graphic image using the Flash drawing tools. Here we learn to use layers, filters, color gradients, and many of the tools on the drawing toolbar. This was quite a bit-o-fun. Check out the screenshot below.

As you can tell from the meter, this is dangerously awesome.

Creating Patterns from Symbols - Here we modify our drawing by creating a dashboard background for our instrument.  We do this with the deco tool, but rather than use a default shape, we create our own from scratch.  First we create our pattern as a new graphic symbol (I chose a checker-plate design).  Then we create a new movie clip symbol, and tile it with our new symbol using the deco tool.  We then return to out instrument drawing, and create a new layer for the dashboard, positioning it beneath all the instrument layers.  We drag the dashboard movie clip from the Library Panel and drop it right on to our dashboard layer.  Then a few size, position and filter tweaks later, our instrument appears mounted on a cool new panel.  

Awesometer on checker plate panel.

Using Advanced Drawing Tools -  This section focuses on using the deco tool and spray brush.  Both of these tools allow you create custom symbols to draw with.  We also incorporate some animation work here, using the baked-in fire animation as a movie clip.  We also explore some more of the predefined deco brush patterns, such as trees and buildings, which allow to create landscapes with surprising ease.

3.2 Importing Artwork:

Importing and Modifying Graphics and Images – Our example for this lesson is an animation that uses several layers, a motion tween (it turns out that a motion tween is not a fidgety middle-schooler.  Who knew?), and a mask.  A mask is a layer that creates a window to view some or all of a layer beneath it. 

We then modify this image by importing some graphics.  We can import images such as .gif or .png files into our library, making them available to drag-and-drop as we need them, or skip a step and import directly to the stage of we only need to use them once. 

In some instances, we may need to modify objects to enable manipulating them.  For example, we imported a .gif image of fog to create a spooky feel to our project.  However, to adjust the transparency of the fog, we first had to convert the .gif to a graphic object, thus allowing us to apply an alpha filter.  Similarly, we converted another .gif image from a bitmapped image to a vector shape, though it’s not really clear why we needed to do that.  Still, it’s nice to know that we can.

We then touch on another shortcut that allows us to swap bitmapped images or graphic objects one-for-another, rather than removing one and then adding another.  We also learn to plunder an external library for items that we want to use in our instant project. 

Lots of cool stuff goin’ on here.

3.3 Modifying Artwork:

Modifying Vector Art – In this section, the basics of using the drawing tools are revisited. This has been discussed in in the post entitled “Flash Assignment 2: The Interactive Tools Panel”.

Using Rulers and Guides – We learn here that we can display horizontal and vertical rulers in our work area to help with the placement of objects (this option appears in the view menu).  We can also insert guidelines that stretch across our work area.  Once our guides are in place, we can hide the rulers if we care to (to reclaim screen real estate), and the guides will remain visible. 

When we draw or move objects that we wish to align with these guides, we can set the snapping option on the view menu to snap objects to these guide lines. 

Also note that from the View => Guides menu, we can adjust the color of the guide lines, which may be required depending on the colors that we are working with.

Dreamweaver Assignment 4 - Planning Your Website

Photo credit: Brian W. Tobin, uploaded via Flickr, Creative Commons License

4.1 Project Management:

In this section, out tutor introduces us to the planning stage of website development.  Factors to consider here include such things as the ultimate goals for your site, budgetary constraints, who the key players will be in the development and operation of the site, and timeline for development.

Our tutor advises that the undertaking of a website project begin with a questionnaire completed by the client.  She uses such a document to garner information about the client’s mission, goals, expectations for expenditure and return on same, and generally develop on overall picture of the direction that the project will need to assume.

With the information from the questionnaire on-hand, we are advised to create a design document, or what amounts to rough framework from which to launch the design process.

From there, we formulate a more specific document known as the project plan.  The project plan will spell out some specifics, such as the responsibilities of each member of the development team, the protocols for communication and escalation of decision points, flowcharts for the design process and benchmarks for progress.  The project plan is a reference document for everyone involved in the project, defining their role and responsibilities, as well as identifying who the go-to principals are regarding each aspect of the project.  Furthermore, the project plan is a dynamic document that evolves along with the project.  The plan must delegate responsibility for keeping the plan itself up-to-date.

Finally, our tutor wraps up this section by stressing the importance of development team communication.  She then proceeds to shamelessly plug the various products and services offered by Adobe to facilitate your development team’s collaboration.  After all, this tutorial *is* an Adobe publication.  Say…couldn’t you just go for the refreshing taste of a Coca-Cola right about now?

4.2 Site Development:

I)  Site Definition and Planning

Copyright - We are advised in this section to be mindful of applicable copyright law as it applies to the content of our site.  This applies both to reserving the rights to the original content that we create, as well as to avoid infringing on the copyrighted works of others.

Accessibility - We are reminded that the World Wide Web Consortium (W3C) has issued standards for making websites accessible by those with disabilities.  Our tutor explains how to find the current Web Content Accessibility Guidelines (WCAG) for reference, and urges us to incorporate these guidelines into our site design.

• Screen Readers – One aspect of accessibility is compatibility with screen reading software.  Our tutor advises as to the popular screen reading applications in use today, and directs us to the WCAG guidelines pertaining to compatibility with same.

 Maintaining Consistency – Consistency throughout your site is important in that the user should always have a sense of orientation as to what portion of your site is currently displayed, how to get there, and how to get back to the top level.  Consistency can be preserved by maintaining elements such as fonts, colors, page sizes throughout.  Also, navigation links should be placed uniformly across all pages. 

One tool for achieving consistent look and feel is using the cascading style sheet (css) in the design of one’s site.  I do hope that we will be discussing those in more detail later.

Furthermore, in my personal opinion, a link to the top-level home page should in all cases be available near the top left corner of every page (often taking the form of a company/organizational logo). Also, and again in this writers opinion, a “bread crumb trail” showing the path to the current page, and links back to any level along the way, should also be displayed near the top left corner of every page.  For example:  Home\Support\Replacement Parts\Transporters\Heisenberg Compensators.  In this example, I could locate the Heisenberg Compensator that I require on the current page.  Then, if I also needed to find an anti-matter injector for my warp drive, I need not navigate all the way back to the home page again; I could simply click back to the Replacement Parts level, and navigate from there.

Content vs. Design – In this section, we are given a demonstration as to just how different some identical content can appear based on design changes achieved through the use of cascading style sheets.  Check it out: http://csszengarden.com

Fonts – Font sizes can be specified in the page design as either absolute or relative.  Absolute sizing can be specified in inches, mm/cm or points, but those specifications have more to do with print sizes than screen display size.  In many if not most cases, the graphics adapter is not aware of the monitor size, and thus cannot calculate how to display a 1” font size on the user’s screen.

Alternatively, font sizes can be specified in terms of absolute pixel size, or sized relative to the user’s default browser settings.

Font definition is another consideration.  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.

Finally, be aware that if you include text-as-image in your site, as does the header of this blog, note that screen reader software will not be able to read the image as text.  Therefore, you should make accommodations for that use case.  

Web-Safe Colors – Back in the day, there was a palette of 216 colors that were considered “web-safe”, meaning that most client hardware would display them properly.  Venturing outside of this palette left you site vulnerable to improper display on some systems.  This is generally not a matter of concern today.

Browsers – Not all browsers are created equal, and not all content will display exactly as intended in all browsers.  Each browser has its quirks, and therefore one would do well to check one’s page across common platforms and clients. 

As of this writing, Firefox is the dominant client with a share of approximately 42%.  Other widely-used browsers are Internet Explorer and Chrome, each holding a share of about 25% (although the former is steadily losing ground, while the latter is increasing in popularity).  At the very least, you should check you site for functionality with these “big three”.

Also, be advised that functionality may vary by platform as well. That is, just because your site works with Firefox on a PC does not automatically mean that it will work with Firefox for Mac or Linux.

Design Principles – We are reminded here of the old adage “know your audience”.  The principle being that one should consider carefully the demographic one is trying to reach when forming one’s site design.  Examples given here include large fonts for seniors, or fun, interactive content for kids.

Also discussed here are guidelines governing the use of graphics.  For instance, the so-called “rule of thirds” dictates that when a graphic image is displayed on screen, the important portions of that image should appear corresponding to the intersections of the lines on an imaginary tic-tac-toe grid drawn on the screen.  So too should one take care to create balance and symmetry on a page displaying graphical content.

Lastly, our tutor offers a few pointers on good design vs. bad.  Pages that are too “busy”, tightly compressed, or have inconsistent themes, colors or fonts can make a page feel unwelcoming.  Not clear on the concept?  Just point your browser over to http://cmdshiftdesign.com/ilovesmekitty, or http://mizzpheonixrightxxxx.piczo.com/ (if you have a *really* strong stomach).  You should probably let somebody know that you are going there, however, so they can send help if you don’t come back soon.

Usability & Readability – It is unquestionably worth considering how practical your site will be to the intended end-user.  These considerations mandate that one must consider page size and corresponding load-time, the necessity of plug-ins to display page content, whether to use cookies, JavaScript, etc. 

Finally, an easily overlooked but oh-so important item to remember when making design choices:  Keep your documentation updated!  You will likely change your plans ub-teen-kazillion times during the design process.  If you don’t keep your design plans up-to-date to reflect all of these design change decisions, you’ll likely be left dumbfounded some day, asking yourself “why the hell did I do foo there, when the plan called for bar?”

II) Information Architecture

Visual Heirarchy – A tree-like diagram, or sitemap is helpful in defining a big picture of the various pages contained in your site, and the appropriate levels at which each should exist.  Every site needs a “home” page, or a landing point for a browser pointed to your URL.  This is regarded as a level one page.  From there, and in fact from every page below, should exist a consistent set of site navigation links, each pointing to a level two page, such as Products, Support, Locations, Contact, etc.  From there, pages cascade down into logical lower levels, as alluded to previously, i.e. Home\Support\Replacement Parts\Engines\Warp Drive\Anti-matter Injectors\.

Site Hierarchy Tree

Wire Frames – Wire framing a page simply involves using blank placeholders to arrange content on your page, without having had to decide on the actual look of the content elements themselves.  For instance, where should the site navigation links be?  How about the company logo?  If there needs to be a log in form, where should it be?  You can easily play around with a wire frame design to decide on the best placement for these elements, without being distracted by the look of the elements themselves.  Below is the wire frame example that our tutorial uses.

Page Wireframe

 

Our tutor also discusses site wire frames, but there seems to be little distinction between the site wire frame and the site hierarchy tree discussed above.

Flowcharts – This section covers the use of flowcharts to define processes that may need to occur within the scope of one’s site.  The tutor discusses the process of logging in to a site, but we can also imagine processes such as adding items to a shopping cart, processing a payment, or changing one’s contact information.  To anyone who has done any significant programming, the use of flowcharts to define processes should be familiar.

Storyboards – Storyboarding is the next step taken after wire framing.  Generally, this involves filling-in the elements of the wire frame page layout with mock-ups of the desired content.

4.3 Site Testing

Site Testing Overview – When one’s site is has all the pieces assembled, it’s time to start testing it out for functionality.  Our tutor suggests that it’s best to get some fresh eyes on your design, and seek beta testers from outside the web development team.  You should ask them to complete some tasks that you want users to be able to do on your site, such as navigate to the locations page and find a local store near their star system, of find a parts diagram for galaxy-class starship impulse thruster power coupling.  Beta testers can give you important feedback on their experiences using the site, which you can use to streamline the design.

Usability Testing – After beta testing and tweaking is complete, you will need to conduct a full-fledged usability test on your site.  This is a comprehensive test that will require significant planning, resources and documentation.  We are advised that usability tests require tester recruitment and demographic data collection regarding same.  Your site needs to be hosted on the same hardware during testing as it will be when rolled-out.  You need well-defined tasks to give to testers and a model for collecting feedback.  Less obvious concerns must also be considered, such as how to compensate testers, and whether non-disclosure agreements with testers are applicable. 

Of course, and as always, be certain to document everything; rinse and repeat as needed.

Flash Assignment 2: The Interactive Tools Panel

Photo credit: Gordon Ross, uploaded via Flickr, Creative Commons License

2.1 Interactive Tools Panel

The Flash Tools

Tools:

• Selection Tool – This is the tool that does most of the heavy lifting. With it, you select objects, or portions of objects, upon witch you can perform myriad graphical editing tasks.  Having not had any experience with other Adobe graphical applications (such as Illustrator or Photoshop), I’ll have to admit that I’m not up-to-speed on most of the editing tricks and terminology used in this portion of the tutorial.  Still, the capabilities are impressive.

• Subselection Tool – Similar to the selection tool.  Used primarily for modifying edges, points and contours of objects.

• Free Transform/Gradient Tool – The free transform tool is a powerful tool for scaling, translating and rotating objects about any axis.  Especially cool is the feature that allows one to set the stationary reference point from which to scale an object.  By default, objects are pinned at the center, meaning that they scale radially outward without translating across the stage.  Nifty.

The gradient tool creates color gradients, both linear and radial.  These too can be rotated and/or aligned as needed, and the slope (or rate of change) of gradiation altered in more ways that one can imagine. 

• 3D Rotation/Translation Tool – This tool is somewhat similar to the free transform tool, but with the time dimension thrown into the mix.  Thus, when working with objects in this venue, we must first select modify => convert to symbol from the menu bar, and select the movie clip option.  These symbols can now be animated in translation/rotation over the span of a timeline.

• Lasso Tool – This works as a specialized selection tool.  Irregular closed curves or polygons can be bound with the lasso tool for editing.  Another feature of this tool is magic wand mode, which directs the program to select areas of an object based on edges or color differentials that it detects.  This can be useful for items that can’t be broken down to constituent elements, such as photographs.  For example, we all have one of those flattering photos of ourselves that we’d love to display, but can’t because we’re standing arm-in-arm with our ex-significant-other.  The lasso and magic wand tools can help us finally achieve that clean break, and really move-on.

• Pen/Anchor Point Tools – This little gadget is somewhat counter-intuitive if thought of as analogous to a pen or brush in some other graphics applications.  In fact, the pen works not as a click-and-drag free-form drawing tool, but rather as a tool for creating lines and complex curves by defining a series of points, then warping the segments connecting them.  The functions of creating and adding contours are not unlike those of the subselect tool, though with the pen tool, you can create and modify lines and curves as you go, rather than switching back and forth between creation and modification tools, making it a big timesaver if you find yourself frequently doing that sort of thing.  You might say that this doohickey lets you draw and then modify before the ink is even dry.

• Text Tool – The text tool is used to insert text boxes on the stage.  A single click with the text tool creates a dynamically sized text box, meaning that it will continue to grow as insert more text.  Alternatively, you can click and drag to draw a text box of fixed size.  In either case, the size of the text box can be resized. 

An interesting feature is that of text box threading, meaning that you can make text flow out of one textbox in into another. 

When working with text boxes, note that the properties panel contains all of the options for selecting font, font size, leading (space between lines), and so forth.  Flash has a great number of formatting options available for text.

• Line Tool – The Line tool is a simple click and drag tool for freehand line drawing.  Note that holding the shift key while drawing lines ensures perfectly horizontal, vertical or 45 degree diagonal lines.  Options are available to adjust line styles, appearance of end caps, join properties, and a number of other line-oriented miscellanea.

• Shape Tool – When using the shape tools, as well as some other drawing implements, it is important to note that drawing can be done in either object mode or merge mode.  The applicability of this option is evidenced by the appearance of the object drawing button in the tool options area when a tool is selected.  Clicking this button toggles object drawing on and off.  The button is on when it is darker grey, and off (merge mode) when it turns light grey.

When one draws in object drawing mode, individual elements maintain their identity.  For example, if a circle is drawn within a previously drawn square, one can later move the circle to a new position on the stage, outside of the square, and still retain both as complete objects.  Conversely, if the same process were done in merge mode, the circle would replace the portion of the square upon which it was drawn.  The circle could still be selected and moved, but moving it would result in a “hole” being left inside the square where the circle had been, since that portion of the square was erased by the circle being drawn overtop of it.

When using the rectangle or oval shape tools, note that the shift key performs a function analogous to that with the line tool.  Just as shift draws perfectly horizontal or vertical lines, so too does it allow one to draw perfect circles or squares when used in conjunction with the shape tools.

·         Pencil Tool – This is a freehand drawing tool.  There are three modes in which one can draw with the pencil:

o        Straighten – In this mode, a rough line will be converted to perfectly straight, and a sloppy circle becomes uniform.

o        Smooth – Here, the resulting lines and curves more closely approximate what was actually drawn, but the roughness is sanded-down a bit.

o        Ink – This mode is supposed to remain the most true to the actual shape created by the freehand, but I find little difference between this setting and smooth.

·        Brush/Spray Brush Tool – Important to note here that while one may associate the word brush with stroke, and furthermore that one may select a stroke color for use with the brush tool, this tool nonetheless has no stroke associated with it. It is the fill color that determines the color of the brush tool.

Furthermore, when using the spray brush tool, one can select both the stroke and fill, but the spray brush has neither stroke nor fill.  To select the color of the spray, one must go to the properties panel and select there.

By default, the spray tool sprays blobs paint like a real sprayer.  However, Flash lets you spray any shape you choose.  You can create your own shape (such as a star, for instance), convert it to a graphic symbol with the Modify => Convert to Symbol menu command, and then select that symbol for your spray type in the properties panel.  So, your spray tool can spit out tiny stars rather than paint blobs, if you’re into that sort of thing.

• Deco Tool – This tool allows one to draw with many preset shapes and patterns.  Some of these deco items can also be inserted as animation, such as fire or lightning.  Working with animation items requires us to do some work with layers on the timeline, which hasn’t been covered in the tutorial yet, making this a bit difficult to follow.  Still, playing with this a bit gives one an insight into the design possibilities afforded one with this application.

• Bone/Bind Tool – Together, these are known as the inverse kinematic (IK) tools.  These are used to create articulation in objects, allowing them to change shape with respect to time.  This can be thought of as adding bones to an object (hence the name bone tool) connected at moveable joints.  A series of connected bones and joints is called an armature.

There are options for restricting or allowing the rotation and translation of individual joints.  Our tutorial instructor demonstrated these functions on an object with many members, but that’s a bit too busy, in my opinion.  I found it much easier to get a feel for how these setting work by starting with one member first.  This first bone automatically has a joint, but it really isn’t a true joint in this case, since it does not join two members.  At this point, the joint is really just a pivot/anchor point.  By adjusting the translation/rotation settings on this member, you can gain a good appreciation for how the settings work.  Adding a second member to the first, with a connecting joint between them, then gives you a grasp of how a series of members move together.

The bind tool is supposedly for modifying the deformations of an object as it deforms, but I honestly can’t get any sense of what it does based on the tutorial.

• Paint Bucket/Ink Bottle Tool – This tool floods strokes (ink bottle) or fill areas (paint bucket) with a selected color. 

• Eye Dropper Tool – The eye dropper tool samples colors, gradients or bitmaps from objects to be replicated in other objects.  This is useful for color matching, especially from imported objects, such as photographs.

• Eraser Tool - Someone once said “To err is human, but when you wear out the eraser before the pencil, you’re overdoing it”.  Well, no such trouble exists in Flash.  The eraser tool provides options for erasing fill areas, strokes, selection areas only, interior areas only, or just plain erase everything.  Err away, then erase to your heart’s content.

• Hand Tool – The hand tool is simply a means for pushing the stage around in your document window in order to navigate to different areas.  This is useful when you’re zoomed in to one area of the stage, and want to move to an area that’s off-screen.  It has the same effect as scrolling around with the scroll bars, but easier, since you can push the stage in any direction.  If you happen to be using another tool, you can temporarily convert that tool into a hand tool by holding the spacebar.

• Zoom Tool – As one might expect, the zoom tool sets the magnification level of the stage.  Clicking in the document window with the zoom tool doubles the current zoom level, while clicking with the Alt key held down cuts the zoom level in half. 

Dreamweaver Assignment 3: Getting a Quick Start

Photo credit: Balazs Gemesi, uploaded via Flickr, Creative Commons License

3.1 Starter Layouts

Selecting the File => New menu option brings up the new document dialogue box.  Here, we can select from a number of different layouts for our new document.  For instance, the number of columns, column widths and inclusion or exclusion of headers and footers can be selected.

Note that liquid column width will adjust to the width of the user’s display, whereas fixed column width will display as created by the author.

Also available in this dialogue box is the option to select the document type (the default being XHTML 1.0 Transitional), and the CSS Layout (cascading style sheet).

3.2  Building the Starter Layout Homepage

In this section, we begin our page by from the new document dialogue box.  We selected a new blank HTML document of the two-column fixed-width type with a left sidebar.  We also attached an existing CSS file to the new page.  

Creating our new page

3.3 Creating the Header Area

Switching over to code view on our newly created page, we note the extensive use of comments embedded in the code.  These comments serve to explain the various sections of code, explaining how to use them, and how they affect the page.

Returning to design view, we place the cursor focus in the main content area of our page, and note that the status bar indicates that we are located in the .content area.  Moving to the CSS Styles panel, we highlight the .content item in the rule list, and note that the properties for that item are displayed in the area below the rule list.  We select the option to Add Property, which allows us to choose the background image option, and browse for the image we desire.

We then add the property that limits the image to one instance, as opposed to repeated tiling.

Next we move to our assets panel to select an existing logo for our page.  Our tutor has already defined locations for her assets, but need to visit the files panel, and use the manage sites option to point the application to our asset folder.

Having found our logo on the assets panel, we click insert, and get a dialogue to define some image properties if desired.

We are also instructed to use the title textbox in the view bar area to specify a page title.

3.4 Adding a Navigation Bar

Here we move to our sidebar area, which will serve as our navigation pane.  Setting or focus therein, we move to our properties pane and set our background color.  Interestingly, not only can we select colors from a color panel, but also select areas of the existing document to color-match.  Neat!

Next we modify the navigation links in the sidebar.  We edit the text on our first link to reflect that it points to the Products page.  We also note that the properties panel at the bottom of the screen allows us to specify a target page for that link.  Next to the link combo box, we note a crosshair icon.  We can click and drag an arrow from this icon to an existing page on our files panel, and the mapping is completed auto-magically.  Freakin’ sweet!

We also revisit the CSS styles panel to adjust the font properties of the links in our navagation sidebar.

3.5 Adding Main Content

Moving back to our files panel, we see that we have a file called text.html with our desired text content already created.  We open this file and copy the text in design view.  Switching back to our project page, we paste this text into design view in the main content area.  The cool part here is that the existing CSS rules are automatically applied to our content here, so no additional formatting is required.

3.6 Modifying Link Styles

Here we modify the Font size of the sidebar links with the body rule on the CSS panel.  We change the font size from “100%” to “12px”, or 12 pixels.

3.7 Completing the Homepage

In this section we revisit the assets tab, adding a couple of images and some text to round-out our sidebar.

Having done that, out tutor instructs us to click on the globe icon on the view bar, allowing us to preview the page in our browser.

3.8 Adding the Page Boarder

Here we are introduced to the page container.  All of our content lies within this container, with the area outside being page background.  Too add our container boarder, we select the container item in the CSS styles panel, and add a boarder property.  Unfortunately, there are no options to choose from; our properties must be entered in command-line style.  There is however a tool tip displayed when we hover over the boarder field, advising that we enter “style color width”.  In our case, the syntax is “solid #000 1px”, meaning solid line, black, one pixel wide.

Design view of our starter page