Skip to Navigation | Skip to Content

MAT 150 - Flash 1: Animation and Interactivity

Menu

Class Exercises and PROJECTS

Exercise Details

Exercise details are provided on the schedule page within the week that they are assigned.

Project Details

Project 1: Animation (due 4/15, 4/22 now due 4/24)

Create an animated character and scene.

Using the drawing tools in Animate/Flash (and/or imagery created in Photoshop, Illustrator, or elsewhere), create an animated character of your choice (this can be an animal, bird, fish, robot, spaceship, or anything you can think of). Using nested movieclips and/or graphic symbols, animate at least two elements on the character (such as the wings and eyes).

Place your character within a scene that contains a foreground, middleground, and background. Animate the scene.

At minimum, you are required to create one animated character/scene. This requirement is purposely broad so that you can adapt this assignment to your own creative goals and level of expertise. However, you are encouraged to expand upon your animation and/or explore animation techniques in one of several ways, such as:

  • Using your animation to tell a simple short story, wherein you include a beginning, middle, and end (or have a narrative structure of some kind such as a setup, a conflict, and and a resolution).
  • Alternatively (or in addition), you are encouraged to explore voice-over and lip-syncing techniques so that you make your character sing or talk.
  • Alternatively (or in addition), you are encouraged to explore rigging a character and animating it using layer parenting and/or inverse kinematics (and the bone tool).
  • Alternatively (or in addition), you are encouraged to explore using the Camera tool to stage and animate your scene using panning and zooming as appropriate.
  • Alternatively (or in addition), you are encouraged to explore "parallax scrolling" wherein you animate the foreground, middleground, and background at varying relative speeds such that it appears that the background graphics move more slowly than foreground graphics, creating the illusion of depth in your 2D scene. If your character is in the foreground, for example, you may choose to create simple panning (and perhaps looping) animations for the background (such as clouds or mountains) and middleground (such as trees or objects) and animate the foreground/middleground graphics so that they are faster than the background graphics to give a sense of perspective, realism, and immersion.

Your animation project must include appropriate sound (background sounds, event sounds, or both).

Lastly, your project must include an interface with the project’s title and your name, and a "Play" (start or launch) button/link that is scripted to begin the project. Optionally, you may choose to add a "Credits" and/or "About" button to your interface to provide additional project details.

I recommend a stage size of 1280x720 for the project, but you may use any size you feel is appropriate.

Name your file with the naming convention lastname-p1 (ie. "cleveland-p1.fla") and publish it to create .swf and .html files. Upload the .fla, .swf, and .html files to the project1 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed instructions and a video tutorial.

Project #1 Demos and Video Tutorials

Sample Student Work From Previous Semesters

Project 2: Interactive Interface (now due 5/13)

Conceive, design, produce, and program (using Animate/Flash and Actionscript 3.0) an interactive user interface using content of your choice.

Animated CC is a powerful tool for enabling interactive storytelling that can integrate media (text, graphics, animation, audio, video, etc.) and be distributed to a wide variety of platforms, including on the Web (within the browser), on the desktop (as a stand-alone executable application for an informational kiosk at a museum or library, for example), or on a mobile device (app for iOS or Android).

Explore such interactive media design by creating an interactive user interface with at least 3 or 4 content sections ("screens" or "pages"). You should invent (or gather) your own content for the project, but the demos will use this sample content (derived from lipsum.org). Your content could take the form of an interactive documentary, how-to demonstration, or tour of something. Or, it could take the form of a more traditional website or interactive brochure that explores an idea or topic.

Building on your knowledge of Animate/Flash and as demonstrated in class tutorials, your interface design should have all the basic components of any typical interface or website, such as a header (with the logo/banner/name of the site or application), a navigation menu (with 3-4 rollover and/or animated buttons), page/screen identifier graphics (so we know which content section we're currently viewing), and of course, your body content (which might be textual content or graphics, photos, video or some combination).

Enable the navigation buttons on your interface to dynamically load and/or otherwise navigate to the body content/sections.

The basic user interface requirements are purposely broad so that you can adapt this assignment to your own content, creative goals, and level of expertise. However, you are encouraged to explore interactive media design and production techniques in one of several ways, such as:

  • Dynamically loading your content sections and/or images from the library or from external files (.swf, .jpg, .png), such that you create an interface shell with section content that dynamically loads into the interface.
  • Using animation (such as in the transitions from section to section or on buttons that animate on ROLL_OVER and ROLL_OUT).
  • Using sound (such as event/button interface sounds, background soundtracks, or by considering audio as narrative content).
  • Using video (.flv or .mp4) that dynamically loads into your interface.
  • And/or creating more complex navigation using animated drop-down (or slide out) menus and movieclips.

You can use any document size you wish, provided your movie will fit within a browser window. I'd recommend a size of 1280x640 (which will fit within the viewport of most desktop browsers without the need to scroll).

Name your main interface file with the naming convention lastname-p2.fla (ie. "cleveland-p2.fla") and publish it to create .swf and .html files. Create a folder with the naming convention lastname-p2 (ie. "cleveland-p2"). Put all of your files inside of this folder, including any dependent, external .swf, image, or video files may load into the interface. Upload your folder (which should include all the related .fla, .swf, and .html files) to the project2 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for FTP instructions and a video tutorial.

Project #2 Demos and Video Tutorials

Sample Student Work From Previous Semesters

Final Project (now due 5/22)

Conceive, design, and produce (using Animate) an interactive multimedia project around a new theme/idea of your choice or extend one of your first two projects to create a robust and refined final project.

Examples of appropriate projects include:

  1. An illustrated, animated, interactive multimedia poem
  2. An interactive, animated “How To” demonstration of something
  3. An animated “Interactive Tour” of something
  4. An interactive, multimedia-based documentary (or mini-documentary) on a topic
  5. An interactive, animated short story
  6. An interactive multimedia game
  7. A multimedia-based interactive music video
  8. A Flash-based interactive website
  9. An interactive multimedia art project that explores/comments on a social, cultural, or political theme or explores an abstract concept such as time, love, fear, etc.

Your final project must be created in Flash (and other audio/video/imaging software as appropriate). You must use imagery, animation, sound and interactivity but are encouraged to also use text, video, or any other media elements as appropriate to your concept. You can use any screen size you wish, provided your movie will fit on a standard 1024x768 monitor.

Your project must include an interface with the project’s title and your name, and which at minimum includes a start or launch button/link to begin the project, a link to an artist statement (if relevant), and a link to any credits or acknowledgements (if necessary). Note: the requirement of an introductory interface is waived if doing a website interface project or similar project where the inclusion of an interface would be redundant or unnecessary.

You should consider how to use interactivity in your project. Think about how to involve the user and create a rich and dramatic experience. Take advantage of Flash's tools for creating a dynamic user experience with sequential imagery and interactive navigation. Each of your media and/or design elements should relate to and support your theme and/or concept. However, beware of being too literal or relying on clichés. Try not to be trite or trivial. Sometimes the simplest projects are the most engaging (i.e. KISS). Beware of creating something too grandiose or beyond the time limitations for this project.

Explore a variety of ideas/concepts. Do several storyboards, thumbnails, flow-charts, etc. for possible ideas on your project. Brainstorm ideas and possibilities. Keep your eye out for and gather any assets including imagery, video, text, textures, animation, sound, etc. that may relate to your concept.

Be sure to give credit where credit is due. Ideally, you should compose your own text, photographs, drawings, sound, etc. However, if you appropriate anything, give the author/artist credit.

Use the naming convention lastname-fp (ie. "cleveland-fp.fla") for the final project and publish it to create .swf and .html files. Create a folder with the naming convention lastname-fp (ie. "cleveland-fp") if you plan to use dependent, external .swf files that will load into the project. Reference these files in your code by referencing this folder (ie. "cleveland-fp/myfile.swf"). Upload the .fla, .swf, and .html files to the finalproject folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for FTP instructions and a video tutorial.

Explorations and the Blog

In this class you will survey, research, and explore compelling and cutting-edge examples of interactive media art and design, the studios and artists involved in the production of such work, and other issues related to the design of interactive multimedia products and/or experiences. Your research will culminate in two blog postings to the class blog and one oral presentation/demonstration of your findings (on one of the exploration areas) to the class.

Note: Oral presentations are no longer required, given our move to online instruction.

Your research will focus on two of four possible areas/topics of exploration:

Due Dates:

  • 1st Exploration due before 3/13 (or before your oral presentation)
  • 2nd Exploration due before 5/6

ORIGINAL ORAL PRESENTATION DATES (NO LONGER REQUIRED):

Date

Student(s)

Feb 19

 

Feb 24

Di

Feb 26

Jackie

March 2

 

March 4

Andrew

March 9

 

March 11

Joanna

March 23

Riley

March 25

Ruanny

March 30

Priscilla

April 1

Faith

April 6

Michael

April 8

Cynthia

April 13

Zitzzy

April 15

Dante

April 20

Zayy

April 22

Jordan

April 27

Matt

April 29

Ernesto

May 4

Serena

May 6

Thomas

May 11

Dominique

May 13

 

Studio/Artist Exploration

Find and research a compelling and cutting-edge interactive multimedia design studio, interactive media artist, or animator who uses Animate/Flash or similar tools. In the class blog, post the equilvalent of a one page paper describing their work, background, techniques, conceptual philosophy, themes, client list, etc. Explain what sets this studio/artist apart from others, why you are attracted to their work, and what you think makes their work effective, well designed, moving, or otherwise innovative. Provide short reviews and links to 2 or 3 examples of this studio's/artist's work. Include all relevant URLs.

Design Exploration

Find 1 or 2 examples of good, effective, and compelling interactive multimedia design developed in Animate/Flash or other similar technologies. Investigate and contemplate your chosen examples in depth. Dissect the design elements, uncovering the design principles and techniques that are at work, and how these principles are applied and/or operate within your examples. It will be helpful for you to review these Web and Multimedia Design Principles, Tips, and Good Habits and/or other resources that discuss the basic principles of design.

In the class blog, post the equilvalent of a one page paper about your exploration, and the ideas and insights you've gained into effective multimedia design. Referencing your examples, describe the design principles and techniques that are at work, and explain how these principles create an effective and engaging experience.

Remember that design is about problem solving. The design you see is one of thousands of possible design solutions. Use the design to think in reverse about the problems the designer(s) faced and the goals and objectives that he or she wished to accomplish. Articulate how the design functions to accomplish these objectives -- how it functions to communicate a message, create a mood or feeling, encourage an action, facilitate use and understanding, or otherwise solve a communication problem. Try to uncover the strategies and techniques that the designer employed to solve design problems. Don't just describe "what" is on the site, but explain "how" and "why" the design functions as it does. Try to articulate how the design "works" and how the design principles utilized in your examples aid effective communication and/or create an engaging experience. Include all relevant URLs.

New Media Exploration

The new media exploration is designed to be an open-ended, flexible exploration of an aspect or issue related to multimedia. Explore/research a topic of your choice related to the design, production, distribution, and/or experience of interactive media. The new media exploration will culminate with a post in the class blog (post the equivalent of a one paper) about your exploration and the ideas and insights you have gained.

You may wish to explore:

Technology
Research/explore a recent or expected future technology that will affect the creation, production, distribution, and/or experience of multimedia or animation products. Play the role of futurist and describe how the technology might effect (or is already effecting) not only multimedia products and/or the multimedia industry, but also communication and society as a whole. Examples of appropriate technologies include virtual reality, broadband and/or networking technology, artificial intelligence, wireless technology, multi-touch screens, nanotechnology, quantum computing, Internet TV, digital television, OLEDs, search engine technology, robotics, physical computing, or software applications such as Processing or MAX/MSP + Jitter.

New Media Theory/Criticism
Research/explore critical theory related to new media/multimedia or animation. You may wish to explore such questions as: What is unique about how new media objects/experiences create the illusion of reality, address and involve the viewer, and represent space and time? What concepts or characteristics are unique or intrinsic to multimedia (i.e., interactivity, participation, integration, narrativity, hypermedia, nonlinearity, immersion, collaboration, personalization, forms of distribution, etc.)? What are the ways in which new media relies on older cultural forms, languages, or definitions and what are the ways in which it breaks with them? How does the history of media technologies and modern visual culture help us understand new media products/experiences? Does the nature of new media/multimedia -- often thought of as open, democratic, non-hierarchical, fluid, and varied -- evade definition? Why have some critics and scholars resisted attempts to define and/or identify dominant themes in the emergence of this new medium?

Process
Many design firms provide information about their process: the business, creative and/or developmental process that guides the completion of their multimedia projects from conception through delivery. Find and research interactive multimedia design studios/firms that provide information on their developmental process (many of the design firm web sites listed in the online resources have a section describing their process). Review and compare the process of two or three such firms. What are the typical process stages in the development of a multimedia project or Web site? What is involved in each stage? Why do you suppose process is important?

RESOURCES Exploration

Design and development for interactive media is a dynamic and constantly changing field. As technologies and practices change, designers need to be able to keep up. As a designer, it's important that you learn where to find sites of information, inspiration, and resources. Find and explore at least 4 websites that provide resources (information, tutorials, forums, stock resources, scripts, downloads, articles, advice, design tips, or links to well-designed and inspiring sites) that are of value to the multimedia designer, developer, or animator. In the class blog, write a post describing the sites you've found, what the sites are about and how they are useful, and include links to their URLs.