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!)
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
- Basic building blocks for internet delivery of media ..
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
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]
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
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]
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
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
- 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]
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
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
Client limitations, Client changes
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
Internet of today -vs- Internet of the future
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)
Garbage in .... = .... Garbage out!
- Topics:
- Media management
- Flash to JavaScript communication [sample] [download]
- Director to JavaScript communication [sample] [download]
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
Last call for questions and answers!
- Topics:
- Final questions & Lingo trouble shooting
- Director, Flash, Javascript, & HTML troubleshooting
- Preloading QuickTime movies within shockwave [sample] [download]
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
Yes, you can get paid for this 8-)
Final Project turn in, and class crit:
- 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]