Hybrid Interactive Authoring

Attendance and Completed Homework:
Section 001
Section 002
Section 501

DIGM 242, Hybrid Interactive Authoring, builds upon basic knowledge of HTML, JavaScript, Flash, and Director. Students in this course work with concepts and software to better understand the functionality and integration of Internet multimedia-authoring programs with assorted browsers. Through a series of homework assignments and projects, students examine real world case histories to master advance JavaScript's, Flash Actionscript's, and Director Lingo concepts and applications. Students explore online uses of JavaScript, Flash, and Director in the fields of entertainment, streaming video, simulations, e-commerce. Role-play, group and individual instruction are used to gain a better understanding of the concepts, tools and social dynamics involved in the creation of effective and expressive interactive web media.

Midterm

Students will create an interactive photo calander program incorporating Director and Flash [800x600 max Director stage dimensions] to be delivered via the internet and hybrid CDROM]. The program will allow the user to navigate through 12 screens created by the student, one for each month. Calendar will contain at least 3 "hot" dates that displays additional information when clicked on. An optional Flash based scroll bar will contain the buttons for each month that will pass information into Director to navigate the program. Each month can have a visual and audio transition (extra credit). The DCR will be no larger than 1 MB. [ RFP, sample ]

Final

Students will create an interactive "Spoof" in Director covering a particular company or product [800x600 max stage dimensions] to be delivered via the Internet and hybrid CDROM]. Each student will pick a company or product that they want to make good natured fun of. This director movie MUST contain at least one animated sprite, All text w/borders, custom scroll bars for scrolling text, images, animations, sounds (short & long), and a Quicktime video. All buttons should have consistent rollover and mouse down feedback. This dir movie must also have a button that opens a custom Internet browser window with scroll bars and re-size bars only (popup instructions and or help). DCR no larger than 5 MB.

Grading

  • 20% Class attendance & participation
  • 20% Homework (functionality, content, creativity)
  • 30% Midterm (functionality, content, creativity)
    [10, 10, 10]
  • 30% Final (functionality, content, creativity)
    [10, 10, 10]

Equipment

  • Director MX 2004 for Windows and Macintosh: Visual Quickstart Guide
  • Flash MX [2004] for Windows and Macintosh : Visual QuickStart Guide
  • At least one form of media to to backup student work (i.e. CDROM, Flash drive, Firewire drive, etc.)
  • Headphones (If you want to listen to music while you work!)
Week 1

Introductions

Lecture: "Welcome..."
Topics:
Course Overview
  • Basic building blocks for internet delivery of media .. HTML & JavaScript
  • Interactive Vector based media .. Flash
  • Complex & Complete Interactive media .. Director
Homework for week 1

Due midnight the night before next class:

Submit via email to: jervis.thompson@drexel.edu, subject: "digm242hwk01s###jwt" [replace ### with your class section number, replace jwt with your initials]
Proposal describing midterm - In one page, respond to the RFP above. Make sure you convince me (the client) that you fully understand the problem at hand, and how you propose to solve it. Make reference to design and style as well as technical function. Try to sell me some advanced value-added features that you feel would make this a more useful tool. Be sure to include at least one image roughing out the interface.
Gather assets - Gather photos/graphics for use in calendar.
Post HTML - of proposal with image(s).
  • An extra 2 points will go to the student who succeeds in "selling" themselves to the client, and essentially getting the job.
Bring to Class - disk folder with all image assets ready to be used in Director.
Final grade extra credit questions:
Submit two printed copies [NOT handwritten] at the start of next class. Include your name, date due, 3 extra credit questions, correct answers, and page references] based on the following:
Read "Director MX 2004 for Macintosh & Windows"
Introduction
Chapter 1: Director Basics
Chapter 2: Assembling Casts
Chapter 3: Building a Score
Week 2

Which is better Flash or Director?

Topics:
Homework review
Flash -vs- Director [view]
  • Symbols/Library -vs- Cast Members/Cast Library
  • Movie Clips -vs- Film Loops
  • Timeline -vs- Score
  • Layers/Instances -vs- Channels/Sprites
  • Motion Paths -vs- Paths
  • ActionScript's -vs- Lingo
  • Keyframes -vs- Keyframes
  • Publish -vs- Publish
Importing Media
  • Standard Import
  • Include original data for editing
  • Link to external file
Custom Director Button Behavior [download]
Embedding fonts
Score layout
Modify:Movie:extras
Publishing & Posting Director shocked movies to the web
  • "dcr"
  • "html" [center L/R with color coordinated background]
  • "dswmedia" [folder with external files if needed]
Homework for week 2

Due midnight the night before next class:

Submit via email to: jervis.thompson@drexel.edu, subject: "digm242hwk02s###jwt" [replace ### with your class section number, replace jwt with your initials]
Create flash scrollbar and import all assets into Director.
In Director.. layout each month/section with markers with simple back and forward buttons to advance through each month/section.
Post HTML and DCR to website and email functional URL.
Final grade extra credit questions:
Submit two printed copies [NOT handwritten] at the start of next class. Include your name, date due, 3 extra credit questions, correct answers, and page references] based on the following:
Read "Director MX 2004 for Macintosh & Windows"
Chapter 4: Animating Sprites
Chapter 5: Playing & Refining Movies
Chapter 6: Using Paint Tools
Chapter 7: Drawing Vector Shapes
Week 3

Putting it all together. HTML, JavaScript, Flash, & Director

Topics:
Play & Refining movies
  • Control Panel
  • Scene Transitions.. CAUTION! Disable button functionality during transitions
Using Paint Tools
  • Cheesy. Use external editor instead
Drawing Vector Shapes
  • Cheesy. Use Flash and import swf
Animating Sprites [sample] [parts] David Maietta
Animating Sprites [sample] [parts] Jervis Thompson
Path animation
  • Fadein.. Fadeout
  • Resizing over time
  • Moving along a path
Frame animation a.k.a Cell animation
Film loops
  • limited compared to Flash Movie Clips
Rollover buttons
MouseDown -vs- MouseUp events .. be consistent
Flash -> Director communication [download]
Homework for week 3

Due midnight the night before next class:

Submit via email to: jervis.thompson@drexel.edu, subject: "digm242hwk03s###jwt" [replace ### with your class section number, replace jwt with your initials]
Functioning midterm BETA project URL ready for critique.
Final grade extra credit questions:
Submit two printed copies [NOT handwritten] at the start of next class. Include your name, date due, 3 extra credit questions, correct answers, and page references] based on the following:
Read "Director MX 2004 for Macintosh & Windows"
Chapter 8: Compositing Images
Chapter 9: Working on the Stage
Chapter 11: Using Flash Movies in Director
Chapter 12: Adding Text
Week 4

HTML & JavaScript, Internet Interactive foundations on which all else is built.

Topics:
Working on the Stage
  • Customizing
  • Drag and Drop
  • Stage and Score relationship
Managing Color
  • Use web safe colors whenever possible
  • 32 bit.. Allows alpha channel
  • 16 bit.. Half the size, no alpha channel
Text & Field Power
  • Text -vs- Field cast members
  • Scrolling with border
  • HTML formatting
Flash animations
Flash Buttons - Cursor control in director
Midterm for week 4
Submit via email to: jervis.thompson@drexel.edu, subject: "digm242midterms###jwt" [replace ### with your class section number, replace jwt with your initials]
Url to your functional midterm project.
Submit via cross platform CDROM at the start of next class...
How to burn true cross platform CDROM's. [view]
Your digital final project with assests
All files MUST be placed in a folder named "digm242midterms###jwt"
  • [replace ### with your class section number, replace jwt with your initials]
Week 5

When to use Flash.. When to use Director.. When to use Javascript?

Topics:
Projectors
Publishing to the Web/Shockwave
Sound
  • Importing internal -vs- External
  • Controlling sound with the score
  • Controlling sound with Lingo
Homework for week 5

Due midnight the night before next class:

Submit propsal and storyboard for final project.

Submit via email to: jervis.thompson@drexel.edu, subject: "digm242hwk04s###jwt" [replace ### with your class section number, replace jwt with your initials]
URL to Proposal to include following sections:
  • Product explanation
  • State the problem
  • Propose a solution
  • Show some preliminary assets including but not limited to product logo, color swatches, and roughed interface ideas
  • Estimate cost and hours needed for all differernt aspects (project management, content generation, graphic design, graphic production, director work, quality control)
  • Your own company description with past credential
Final grade extra credit questions:
Submit two printed copies [NOT handwritten] at the start of next class. Include your name, date due, 3 extra credit questions, correct answers, and page references] based on the following reading:
Read "Director MX 2004 for Macintosh & Windows"
Chapter 13: Adding Sound
Chapter 17: Creating a Projector
Chapter 18: Making Movies for the web
Week 6

Client limitations, Client changes

Topics:
Finals.. Preparation of assets
Intro and Exit animations [sample] [parts]
Homework for week 6

Due midnight the night before next class:

Web portal for client image approval.

Submit via email to: jervis.thompson@drexel.edu, subject: "digm242hwk05s###jwt" [replace ### with your class section number, replace jwt with your initials]
Create a website with interface screens for client review. (can post multiple versions if you are undecided and want class input)
  • Thumbnailed image
  • When client clicks on thumbnail image, broswer, launches HTML in a new custom browser window using Javascript.
Final grade extra credit questions:
Submit two printed copies [NOT handwritten] at the start of next class. Include your name, date due, 3 extra credit questions, correct answers, and page references] based on the following reading:
Read "Director MX 2004 for Macintosh & Windows"
Chapter 10: Adding Digital Video
Chapter 14: Adding Behaviors
Chapter 15: Scripting Lingo
Chapter 20: Using Xtras
Week 7

Internet of today -vs- Internet of the future

Topics:
Xtras
Behaviors [sample] [download]
Lingo
Video
  • Importing
  • Controlling
Homework for week 7

Due midnight the night before next class:

Final client webpost with all screens.

Submit via email to: jervis.thompson@drexel.edu, subject: "digm242hwk06s###jwt" [replace ### with your class section number, replace jwt with your initials]
Screenshots re-submittals with all screens due
  • Thumbnailed images for each screen
  • Launches larger images in new custom browser windows using Javascript
  • Link to other media assets posted (video file, sound files, etc)
Week 8

Garbage in .... = .... Garbage out!

Topics:
Media management
Flash to JavaScript communication [sample] [download]
Director to JavaScript communication [sample] [download]
Homework for week 8

Due midnight the night before next class:

Alpha prototype.

Submit via email to: jervis.thompson@drexel.edu, subject: "digm242hwk07s###jwt" [replace ### with your class section number, replace jwt with your initials]
URL to Director Alpha prototype
  • All assets imported into Director
  • Complete main menu with cursor aware buttons. One "path" fully functional
  • Publish and post too your website
Week 9

Last call for questions and answers!

Topics:
Final questions & Lingo trouble shooting
Director, Flash, Javascript, & HTML troubleshooting
Preloading QuickTime movies within shockwave [sample] [download]
Homework for week 9

Due midnight the night before next class:

Beta prototype.

Submit via email to: jervis.thompson@drexel.edu, subject: "digm242hwk08s###jwt" [replace ### with your class section number, replace jwt with your initials]
URL to Director BETA prototype
  • Fully functioning and complete
  • Ready for in class critique
  • Treat it as the final product
Week 10

Yes, you can get paid for this 8-)

Final Project turn in, and class crit:

Final project for week 10
Submit via email to: jervis.thompson@drexel.edu, subject: "digm242final_s###jwt" [replace ### with your class section number, replace jwt with your initials]
URL to your final "index.htm" page
Submit via cross platform CDROM at the start of next class...
How to burn true cross platform CDROM's. [view]
Your digital final project with assests
All files MUST be placed in a folder named "digm242final###jwt"
  • [replace ### with your class section number, replace jwt with your initials]