Subject Area - Course Number: MAGD 271 Cross-Listing

University of Wisconsin-Whitewater Curriculum Proposal Form #3 New Course

Effective Term: 2107 (Fall 2010)

Subject Area - Course Number: MAGD 271 Cross-listing: (Contact the Registrar's Office at x1570 for available course numbers. See Subject Areas listing)

Course Title: (Limited to 65 characters) Flash Development 1. 25-Character Abbreviation: Flash Development The 15 and 25 character abbreviations may be edited for consistency and clarity.

Sponsor(s): Elena Bertozzi Department(s): Communication College(s): Arts and Communication

Consultation took place: NA Yes (list departments and attach consultation sheet) Departments: Programs Affected: BA/BS Media Arts and Game Development Is paperwork complete for those programs? (Use "Form 2" for Catalog & Academic Report updates) NA Yes will be at future meeting

Prerequisites: MAGD 220

Grade Basis: Conventional Letter S/NC or Pass/Fail

Course will be offered: Part of Load Above Load On Campus Off Campus - Location

College: Arts and Communication Dept/Area(s): MAGD

Instructor: Elena Bertozzi Note: If the course is dual-listed, instructor must be a member of Grad Faculty.

Check if the Course is to Meet Any of the Following: Technological Literacy Requirement Writing Requirement Diversity General Education Option: Select one: Note: For the Gen Ed option, the proposal should address how this course relates to specific core courses, meets the goals of General Education in providing breadth, and incorporates scholarship in the appropriate field relating to women and gender.

Credit/Contact Hours: (per semester) Total lab hours: Total lecture hours: 48 Number of credits: 3 Total contact hours: 48

1 Can course be taken more than once for credit? (Repeatability) No Yes If "Yes", answer the following questions: No of times in major: No of credits in major: No of times in degree: No of credits in degree:

********************************************************************************

Proposal Information: (Procedures for form #3) Course justification: The Multimedia Committee in the College of Arts and Sciences has decided to change the name of the program from Multimedia to Media Arts & Game Development (MAGD). Thus we are changing the names of the core classes in the sequence to reflect the new program title.

Journalism/Speech 271 was designed to meet the needs of the Multimedia curriculum in Spring 2006. This course is to be deleted.

The prerequisite has been changed to a new course in the core MAGD 220 which has been developed for the new MAGD program and will be a more appropriate prerequisite.

Relationship to program assessment objectives: This course already existed, but its redevelopment as a new course in the MAGD core for all majors was a reaction to program assessment, which indicated a need for this material.

Budgetary impact: There are no changes in the way this course has been offered or in how frequently it will be offered at this time.

Course description: (50 word limit) Course focuses on design and development of interactive media and games using Flash ™ software. Students create storyboards and design notebooks; then construct modular time-based projects controlled by Actionscript. Flash allows for creation of interactive media incorporating text, animation, audio, and video. Work is assessed for functionality, elegance and usability.

If dual listed, list graduate level requirements for the following: 1. Content (e.g., What are additional presentation/project requirements?)

2. Intensity (e.g., How are the processes and standards of evaluation different for graduates and undergraduates? )

3. Self-Directed (e.g., How are research expectations differ for graduates and undergraduates?)

Bibliography: (Key or essential references only. Normally the bibliography should be no more than one or two pages in length.)

See attached syllabus

The University of Wisconsin-Whitewater is dedicated to a safe, supportive and non-discriminatory learning environment. It is the responsibility of all undergraduate and graduate students to familiarize themselves with University policies regarding Special Accommodations, Academic Misconduct, Religious Beliefs Accommodation,

2 Discrimination and Absence for University Sponsored Events (for details please refer to the Schedule of Classes; the “ Rights and Responsibilities ” section of the Undergraduate Catalog; the Academic Requirements and Policies and the Facilities and Services sections of the Graduate Catalog; and the “Student Academic Disciplinary Procedures (UWS Chapter 14); and the “Student Nonacademic Disciplinary Procedures" (UWS Chapter 17).

Course Objectives and tentative course syllabus with mandatory information (paste syllabus below):

3 Course Title: MAGD 271- Flash Development Prerequisites: MAGD 220

Course objectives and tentative course syllabus:

Instructor: Elena Bertozzi 472-1725 or [email protected], McGraw 104A (Office Hours W(8-11)Th(1-2)

MAGD 271 builds on the foundation of MAGD 270. Flash ™ software allows us to have more control over the environment in which the user is placed. The software allows for much more sophisticated use of graphic design, programming and interactivity. We shall explore the possibilities offered by these tools. We shall also examine issues of usability. What is good for the designer might not be the best thing for the user. How do we maximize our design goals while still creating an optimized environment for the user? This class starts with the assumption that students know HTML, elementary Photoshop, basic Javascript and the basics of pre-production for all media.

Assignments and Grading

Attendance You are fully grown. If you choose to throw away your tuition money by not attending class, that is your choice. Be advised that you cannot succeed in this class if you don't attend regularly.

All assignments are "turned in" when they are posted to your web site. Weekly design assignments must be posted by 6pm Sunday night. Other due dates are on the schedule. At the end of the semester, you will turn in all of the work that you did over the course of the semester on a CD that I will archive. I have a NO LATE WORK policy. If your work is not turned in on time, you don't get credit for it. You still need to have all of the assignments done to pass the course though, so just do your work on time!  design notebook This is an extremely important part of the class. You should bring it to every class. The notebook should include the following: responses to readings assigned in class (How do the readings change the way you think about the process?), comments and critiques of the work that is presented in class (what do you think of these projects? how might they be improved? how does this work make you look at your work differently?), and the storyboards for all of your assignments. It is a good idea to note down ideas that you have for future design projects as well The design notebook will be randomly checked during class, handed in 1 time during the term and at the end of the term. The notebook is graded on: completeness, neatness and quality of content. I strongly suggest that you dedicate a 3-ring binder as your notebook and divide content up into appropriate sections so I can grade it easily. (total = 10%)  quizzes on lectures and readings. There are 10 quizzes. Each is worth 2 points. If you get more than half the quiz correct, you receive full credit, less than half, 1 point. There are no make-ups on quizzes unless you have a written medical or family excuse. (total = 20%)  design assignments - see assignment schedule. There are 10 assignments. Each is worth two points. If your assigment is up on the web and it is WORKING on both platforms and in all browsers, you receive full credit. If it is up and NOT working, 1 point. If it is not up on time, 0 points. (20%)  poem or song Go to www.poets.org or any other source and select a poem or choose a song that you like. Create an interactive transmedia piece with the poem or song. (5%)  midterm project

4 You are going to create a piece that teaches nursing students a difficult concept through animation, audio and storytelling. We will discuss the difference between pallid and vivid storytelling. Your midterm should be vivid. Your project should include audio and the code/techniques that we have learned in class to date. (10%). Multimedia Grading Criteria  midterm usability test Write a usability test which assesses the effectiveness of your midterm. How will you decide if you piece worked? Administer the test to at least five people. Remember that a good usability test elicits negative feedback which shows you where your work needs to be improved. Write up the results. Focus on what doesn't work and how you could improve this piece and use what you learned for future pieces. This should be posted to your site and be in your design notebook on paper. (5%)  final project You have a lot of flexibility for your final and should choose to do something that really excites your imagination and utilizes the technical, design and usability skills you have acquired during the class. The final should in clude the code/techniques that you have been taught in the class this semester. Your project MUST have a preloader. Do a fantastic design on PAPER before you go to the computer. Your storyboards constitute 5 points of the 20 for this project.

Final Project requirements Client: You should have a client who is not related to you and does not love you. This person will approve your design document and assess the effectiveness of your work. Message: You should be clear about what you hope to communicate/accomplish with the project. This should be articulated in the storyboards so that you can measure success in your usability test. Interactivity: Your project must allow the user to interact with it in some way. You should also have a replay button, a button that links back to your homepage, and credits for all media. Sound: Appropriate sound should be integrated into the piece. Controls should be present and functioning. (20%) Multimedia Grading Criteria  final usability study Design a usability test for your final project. Determine the desired audience, write up a questionnaire and administer it to at least eight people from your target audience. Turn in a paper that discusses the results of your study, what you learned, and how you would need to change your piece to better serve your audience. This should be up on your site and in your design notebook on paper. (5%)  nudge Given that this is a class which involves a great deal of group work (group critiques, students helping each other, discussion) your grade will be affected by your interaction with the professor and the class as a whole. Participation, civility and generosity are desirable traits. The thoughtfulness of your evaluations of other's work is also considered in this grade. (5%) No passing grade will be given if all assignments are not completed and handed in. Constructive classroom involvement will be used to nudge a grade either up or down. Constructive classroom involvement is attendance, constructive discussion, helping other students, and volunteering for demonstrations. Non-constructive involvement is anything which adversely disrupts the labs and non-attendance. This specifically includes working on the class computers during times when the instructor is lecturing or students are making presentations. Students who insist on being disrespectful in this manner will have their grades docked.

It is your responsibility to keep track of your grades over the course of the semester. Your grades are posted on D2L and can be checked at any time. You earn your grades by the degree to which you meet the requirements of the assignments. If you find that you are not doing as well as you would like to be doing in the class you can meet with me to discuss extra credit projects. If you feel that I have made a mistake recording a grade or failed to enter a grade that you earned correctly, I encourage you to email me so that I can correct it. I do not wish to receive emails requesting that I change your grade because you would prefer to have a higher one. I will not reply to emails of this nature. Students need to have to have a 2.0 or better in Multimedia prerequisites in order to move along in the sequence. Please watch your grade carefully and come and speak to me if you have concerns.

5 grade percentage description

A+ 100 Exceeds outstanding. Truly amazing work.

Outstanding achievement. Student performance demonstrates full command of the course A 96-100 materials and evinces a high level of originality and/or creativity that far surpasses course expectations.

Excellent achievement. Student performance demonstrates thorough knowledge of the A- 91-95.9 course materials and exceeds course expectations by completing all requirements in a superior manner

Very good work, above-average, Student performance demonstrates comprehension of the B+ 88-90.9 course materials and exceeds course expectations.

Good work. Student performance meets designated course expectations, demonstrates good B 84-87.9 understanding of material.

Better than average. Student performance demonstrates better than average understanding of B- 81-83.9 material.

C+ 78-80.9 Slightly better than average work.

C 74-77.9 Average work.

C- 71-73.9 Slightly below average work.

D+ 68-70.9 Below average work.

D 64-67.9 Below average work.

D- 60-63.9 Below average work.

F Less than 60 Failing.

Timeline

MAGD 271 Flash Development Prof. Elena Bertozzi Week 1: Introductions, Read: intro chapter in TYA.

Drawing in Flash How the different tools work. . The difference between pixel-based programs like . Photoshop and vector-based programs like Illustrator and Flash. . How to import bitmaps from other programs . how to trace bitmaps. . the difference between F5 and F6

Actionscript of the week: Hour 1 in TYA In-class assignment: Make drawings of yourself in Photoshop and Flash. Import the photoshop drawing of yourself and a bitmap into Flash. Trace the bitmap and see what happens. Add some text. Put the Flash file up on your web site. Example 1, Example 2 By the end of this week (6pm Sunday night) you should have a file with at least 30 keyframes that does something interesting with your initials. This should be animated step by step with keyframes, no tweens please. Here is the example.

Week 2: Take a look at Storyboarding. Good storyboarding skills are essential to your success in this class. We will talk about how to build them, what tools to use and how to present your work. Here is a good template.

6 How are comics and storyboarding related? Write about this in your design notebook. Actionscript of the week: telling buttons what to do. TYA Hour 2. Chapter 1 of Understanding Comics

Flash : How to make a button, Example: starting and stopping animations Week 3: Read: Chapter 2 of Understanding Comics Drawing in Flash. Spend some time with the various tools and draw things. Put them on different layers. Learn how to use the library and what symbols are. Practice modifying instances of symbols.

Use more sophisticated drawing skills. Next week we will learn how to use motion guides and movie clips. ActionScript of the week: starting and stopping MC animations (car example and stars example, ball in a box example).

In your design notebook: what are the differences between comics, sequential art, graphic novels? How does consciousness of the frame help you advance the story? Assignment 3: By the end of this week (Sunday, 6pm), you should have a file that includes multiple instances of a symbol that flies. Check out the example. Quiz 2: Flash to date and Chapters 1 and 2 of Understanding Comics Week 4: Today we will learn how to do motion tweens. See the falling leaf or the effect of a Scotch-filled tulip on a bee.

Read the Flash vs. Html usability test.

In your design notebook, discuss which Flying Beasts you liked and which worked less well and why. Start discussing usability in Flash. First usability test. Here are the questions. Tricks with text. Three kinds of text in Flash and how to manipulate them. Actionscript of the week: Creating and filling dynamic text fields. First half of TYA Hour 3. This is a way to play with text. Assignment 4: By the end of this week, you should have a file that includes motion and shape tweens, static and dynamic text. See the example. Quiz 3: Usability, actionscripting terms from TYA and know the types of text fields and what they are for. Week 5: Actionscript of the week: controlling sound with functions. Second half of TYA Hour 3. Here is a good source for sounds: http://www.soundsnap.com/. Look at this sound example each plane has a different sound when it enters the frame and they each have the same sound when you click on them. Here is a song/tweens example. Quiz 4: How buttons work and what you can do with them. You should know: the states of buttons, where you attach scripts, the kinds of scripts we discussed in class. Also know the types of text fields and what they are for. Week 6: Today we will spend more time on how to manipulate sounds and talk about the midterm. You will either come up with your own idea or build a flash piece that could be used on the Apple Iphone. News just came out that the Iphone will be able to play flash apps, so this is your big chance. Week 7: Due today: Poem or Song in Flash. Look at last semester's work. Each student will present his/her work, discuss technical challenges and usability. Read about Preloading, publishing, optimizing files -- pgs 313-320 in TYA. Next week we will build a preloading sequence for a large flash file.

Look at these two examples: only text and with graphics Week 8: Look at this example of a file that has inputs and outputs based on user behaviour. Due in class on Wed.: a preloading sequence for your poem/song project. Work on preloaders for poem/song assignment. Quiz 5 : Sounds, Basic Actionscripting, variables, outputs Finish TYA Hour 4 We will due another usability test today. Complete paper storyboards for your midterm. Assignment 5:

Week 9: Turn in Design Notebooks. with midterm storyboards

7 We will walk through how input assignments work: Here are two examples Snowy and Humiliating quiz. Both games draw text from internal variables. Here is an example of a file that is downloading text from an external text file. Look at this example: test me Week 10: Usability test and work on midterms. All midterms should have working preloaders. Midterm project presentations and evaluation. Every one in class responsible for reviewing the next 4 people in our class from our class list. This review form can be found here Week 11: Assignment 7: By the end of this week, post a file that includes a video clip. There are two ways you can choose to do it. Here is the flv example. Here is the embedded swf example We will learn how to load text from external text files. And do a usability test. Today please turn in your usability sheets and summary of results both on paper and on the web. Quiz 6 Understanding Comics Ch. 3/Inputs/ Comparisons of Variables/ Outputs We are importing video into flash next week. Come to class with a chunk of video from some source that you will integrate into flash in some way. Understanding Comics Chapter 4 Quiz 7 on Actionscript to date and Understanding Comics 4 Importing Video -- how to get it in, how to make it work. Week 12: Due in class today, a 1-2 page summary of your final project which serves as the first part of your complete storyboards. Discuss: . who your client is . what the message is . how large the project is . how you will implement it . how you will deliver it (web, CD, etc.) how you will test the usability of it Quiz 8 on Flash Facts to date. Your task is to build something that works the same way this does and post it to your website. Assignment 8: Due by the end of the week: A file that dynamically manipulates movie clips-- makes things appear and disappear in response to user interaction. Take a look at this example. TYA Hour 7 . Week 13: Today we discuss how to make masks in Flash. Here is an example, and here is another. Link to a sample contract. TYA Hour 8. Due: Storyboards for your final Project. Today we'll work more on masks. Look at how you can make a cool logo. Week 14: Assignment 9 Due linked to your site by the end of the semester or as part of your final: File that uses masks Quiz 9 on Usability TYA Hour 14: scrollbars Today we will discuss how to build full screen projectors, minimize file size, and discuss the importance of meta tags for search engine optimization. issues.

Week 15: Quiz 10 projectors and publishing Work on Final Projects discuss audience and usability issues Due to me on or before our final exam on May 16th at 3:15: . Usability test for final project (Remember that you have to have at least five people do a usability test of your site and then turn in the questionnaires and your analysis of their responses) . Assignment 10: Projector (to really do it right, you should have one for the PC and one for the Mac, but one on either platform that works will do. . All of your work for the semester on disc. Why not deliver your final project to me as a projector? . Evaluations of 5 students' final projects . Your final notebook

UWW Statement The University of Wisconsin-Whitewater is dedicated to a safe, supportive and non-discriminatory learning environment. It is the responsibility of all undergraduate and graduate students to familiarize themselves with

8 University policies regarding Special Accommodations, Academic Misconduct, Religious Beliefs Accommodation, Discrimination and Absence for University Sponsored Events (for details please refer to the Schedule of Classes; the ' Rights and Responsibilities ' section of the Undergraduate Catalog; the Academic Requirements and Policies and the Facilities and Services sections of the Graduate Catalog; and the 'Student Academic Disciplinary Procedures (UWS Chapter 14); and the 'Student Nonacademic Disciplinary Procedures" (UWS Chapter 17)

Bibliography

Paperdreams, the Art & artists of Disneys Storyboards by John Canemaker.

Dombrower's Art of Interactive Entertainment Design by Eddie Dombrower. Paperback - 352 pages Bk&Cd- Rom edition (January 16, 1998) Computing McGraw-Hill; ISBN: 0070174970

Snap to Grid: A User's Guide to Digital Arts, Media, and Cultures by Peter Lunenfeld. Hardcover - 240 pages (April 28, 2000) MIT Press; ISBN: 026212226X

Required Texts (available as rentals from the bookstore)

SAMS Teach Yourself Flash MX Actionscript in 24 Hours by Gary Rosenzweig

Understanding Comics by Scott McCloud explains the process of storytelling through images. Paperback - 224 pages Reprint edition (May 1994) Kitchen Sink Press; ISBN: 006097625