EDIT Studio Workshop Notes

Lloyd Rieber

Topics

• Introduction to CSS
• Authoring Tool "Sneak Peeks"
• Introduction to Flash: Drawing and Simple Animation
• Introduction to Flash: Animation Techniques
• Introduction to Flash Action Scripting
• Introduction to Flash: Learning Interactions
• Flash Advanced ActionScripting
• Introduction to Fireworks
• Introduction to Authorware: Icons & Flowline
• Introduction to Authorware: Introduction to Interactions
• Introduction to CourseBuilder for Dreamweaver
• Introduction to Creating Dynamic ASP Web Pages with Dreamweaver

Introduction to Cascading Style Sheets (CSS)

Step 1: Zen Garden: Experience the Power of CSS

Step 2: Understanding the difference between HTML vs. XHTML

Content vs Presentation

Step 3: Understanding basic principles of CSS

Lloyd's Quickee Notes on Starting to Use CSS in Your Web Site (4 page PDF)

Compare some of Lloyd's latest Web sites using CSS to those that do not:

• CSS
  • Project Promote
  • Peer Financial Counseling
  • Professors of Instructional Design.com
  • Community Supports for Adults with Autism
• Non-CSS
  • NowhereRoad.com
  • WWILD Team

Resources for a Studio web page meant for non-majors we will build in class:

• Studio banner graphic
• People graphic
• Page content

Good CSS Resources

• Doug Holschuh's CSS Workshop Page (not active)
• Jina Tollett's CSS Resources Page
• maxdesign: CSS examples and tutorials
• Zen Garden
• W3C CSS Resources
• The Web Standards Project

Firefox & Web Developer Resources

• Firefox Web Brower Dowload Page
• Chris Pederick's Web Developer Extension for Firefox

Step 4. Once you understand the basics of CSS, you are encouraged to find and use a free CSS template.

Here are some examples (do your own google search for "free css designs templates")

• The Designer Arcsin
• Open Web Design
• freecsstemplates.org
• Click here for some samples I downloaded from these sites

Other - Dreamweaver Information for MyWeb

Text to copy/paste for myweb (click here for UGA explanation):

http://mydrive.uga.edu/oneNet/NetStorage/Home@UGA/www/

Your URL will look something like this: http://lrieber.myweb.uga.edu/

Introduction to Fireworks

Workshop Resources (download prior to workshop) Click here for workshop PPTs. Sports Clip Art PPT (right-click to save to your computer) Photograph of Yosemite (we'll use this in the workshop) Photograph of Shine (my daughter's lab) Photo of Lloyd Photo of Bluebelle & Justin (taken by Lloyd) Photo of Amsterdam (taken by Lloyd)

Authoring Tool "Sneak Peeks"

Visit the Macromedia Showcase for lots of examples of all projects completed with all Macromedia products (including Flash and Authorware).

Flash

• What is a Print?
• Harry Potter - Quidditch Game
• Ben Rockwood's Save the Shells
• Lloyd's Dual-Coding Theory Demonstration

Authorware

• Space Shuttle Commander
• Mineshaft - Estimation Game

StageCast -

• Pachinko (probability model)
• 99 Bottles of Root Beer - Example model shipped with product

Introduction to Flash: Drawing and Simple Animation

Workshop Handout (PDF)
Workshop Presentation (PPT)

Workshop Resources (download prior to workshop)

• Flash 30-Day Trial Version
• Video demonstrations of drawing with Flash
• Video demonstrations of creating simple animations with Flash

Workshop Project

• Cool Name Fly-by (As you play this, resize browser window to see movie constrain to window)

Introduction to Flash: Animation Techniques

Workshop Handout (PDF)
Workshop Presentation (PPT)

Workshop Resources (download prior to workshop)

• Flash 30-Day Trial Version
• Video demonstrations of Flash animation techniques

Introduction to Flash: Action Scripting

Workshop Presentation (PPT)

Workshop Resources (download prior to workshop)

• Flash 30-Day Trial Version

Workshop Projects

• My first action script: example | download .fla file
• Adding simple user control to an animation: Columbus's Voyage example | download complete .fla file | download incomplete .fla file
• Getting and using the user's name: example | download .fla file
• Civil War Hypermedia Project: example
  • download complete .fla file (without sound; sorry, copyright restrictions!) | download incomplete .fla file

Introduction to Flash: Learning Interactions

Workshop Resources (download prior to workshop)

• Flash 30-Day Trial Version
• I will add questions to the Civil War Hypermedia Project built in the last workshop. Click here to download a copy.
• I will also use the following two graphics in my drag and drop demonstraton -- I invite you to save these to your computer. However, you can use any graphics you wish.

Flash Advanced ActionScripting

Prerequisites:

• You should be able to construct a project similar to the following prior to this workshop:
  • How to get to Scull Shoals: scull_shoals.fla | example
  • Pictures from the Scull Shoals hike: scull_shoals_report-final.fla | example

Workshop Resources (download prior to workshop)

• Flash 30-Day Trial Version
• PowerPoint Presentation

Workshop Projects

• bouncing_ball.fla | example
• step_by_step.fla | example
• dragNdrop.fla | example

A "step" toward gaming

The following three examples build on the "step_by_step" example above to add a gaming component. The first example shows how to create a "roll-over" effect -- the target changes only when the player reaches it, but then the target reverts back when the player leaves. I've added some text explanation to accompany this example to help you "dissect" it. The second example includes two targets and a scoring feature. When the player reaches a target, the target graphic changes and stays that way. The player is expected to find all the targets. The third includes some obstacles to force the player to maneuver around the page, creating a "maze-like" feel.

• step_wRollover.fla |explanation | example
• step_wRollover2.fla | example
• step_wRollover3.fla | example

Other Projects

• ssc1.fla (simple version of space shuttle commander) | example
• ssc4.fla (more elaborate version) | example
• findLloyd.fla (a lame version of "Where's Waldo?") | example
• mystery_number.fla | example
• basketball_camp.fla | example

Introduction to Authorware: Icons & Flowline

Recommended book: Getting Interactive with Authorware: Building Simulations & Games (400+pages)

• Cost: Free; you can either print it yourself (email Lloyd for the download site) or reimburse the department for the cost of printing (approx. $25)
• A sign-up sheet for printed copies will be distributed during the workshop, or email Lloyd by 10:00 am the day after the workshop

Workshop Resources (download prior to workshop)

• Authorware 30-Day Trial Version
• Digital movies
• Simulation & Games Slide Show (created totally in Authorware)

Other resources that go along with the book (though not needed for this workshop)

• Rieber Clip Media (clip art, working copies of all of the book chapters, etc.)

Introduction to Authorware: Introduction to Interactions

Workshop Resources (download prior to workshop)

• Authorware 30-Day Trial Version

No other special resources are required for this workshop. It will be assumed that you have covered at least chapters 1 and 2 in Lloyd's book (Getting Interactive with Authorware: Building Simulations & Games).

The workshop will begin by reviewing the following:

• The flowline and how to use the display, erase, motion, and wait icons.

The workshop will then give an overview of the Interaction icon in the context of creating a simple quiz on the American Civil War.

If time permits, an overview of the process of packaging will be covered using Authorware 6. (If you are using Authorware 5.2, it is highly recommended that you convert your files to Authorware 6 just to take advantage of the one-button publishing feature of version 6. You can keep working with your version 5 files.)

Introduction to CourseBuilder for Dreamweaver

Workshop Resources

• Your computer must have the CourseBuilder Extension for Dreamweaver MX installed in Dreamweaver. All of the Windows computers in Room 616 already have it installed, but the Macs do not.
• After you download this, you install it simply by double-clicking on this file. It will automatically install itself into Dreamweaver.
  If you are using Dreamweaver 4, click here for the CourseBuilder extension.
• CourseBuilder Manual - PDF
• I will use the following two graphics in my drag and drop demonstraton -- I invite you to save these to your computer. However, you can use any graphics you wish.

Click here for a cool map of the Battle of Gettysburg.

CourseBuilder Examples:

• Battle of Gettysburg Quiz and Drag and Drop Activity
• Instructional Design
• Sink your teeth into the human digestive system (Shayle Abelkop - Blue Sock award!)