Exercise Details
Exercise details are provided on the schedule page within the week that they are assigned.
Class Exercises and Projects
Project Details
- Project #1: Animation (due 4/24)
- Project #2: Interface (due 5/15)
- Final Project (due 5/22)
- Explorations and the Blog (posts due by 3/13 and 4/24)
Project 1: Animation (due 4/24)
Create an animated character and scene.
Using the drawing tools in Animate (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 opening credits and/or a title screen with the project’s title and your name.
Begin by creating a new file (File > New) and selecting ActionScript 3.0 as the platform type, as you will ultimately export your animation to video. I recommend a stage size of 1280x720 and frame rate of 24 fps for the project, but you may use any size you feel is appropriate (no larger than 1920x1080).
Create a folder with the naming convention of lastname-p1 (ie. "cleveland-p1). Save your file (File > Save As) into this folder and name it with the naming convention of lastname-p1.fla (ie. "cleveland-p1.fla"). Export an .mp4 video of your file using File > Export > Export Video/Media (the default format should be H.264 .mp4 video, which is what you want). Upload your folder (with the .fla and .mp4 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: Character Animation – Creative Research and Process Work
Some Sample Student Work From Previous Semesters
Project 2: Interactive Interface (due 5/15)
Conceive, design, produce, and program (using Animate CC and HTML5/JS) an interactive user interface and/or interactive and animated information graphic 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 (as an 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" or "pop up, flyout, or modal content"). You should invent (or gather) your own content for the project. Your content could take the form of an interactive (mini) documentary, how-to demonstration, or tour of something. It could take the form of an animated, interactive information graphic (such an interactive map). Or, it could take the form of a more traditional website, microsite, or interactive brochure that explores an idea or topic. Content sections can include: text sections (written content), image/slideshow sections (image content), video sections (video content), info graphic sections (like maps, charts, diagrams, etc), and/or multimedia sections (content with some combination of text/video/graphics/animation/audio, etc.).
Building on your knowledge of Animate CC 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 a logo/banner/name of the project, 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 navigate to (or open/reveal) 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:
- Using animation (withing the interface, or in the transitions from section to section, and/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 (.mp4) that dynamically loads into your interface.
- Using pop out, flyout, or drop down items (such as on info graphics)
- Dynamically loading your content sections (in the form of movieclips), such that you create an interface shell with section content that dynamically loads into the interface.
- And/or whatever creative directions or production techniques that support your vision.
Begin by creating a new Animate file (File > New) and selecting HTML5 Canvas as the platform type. You can use any document size you wish, provided your interface will fit within most standard browser windows. I'd recommend a size of 1280 x 640 (which will fit within the viewport of most desktop browsers without the need to scroll).
Create a folder with the naming convention lastname-p2 and save (or Save As) your file with the naming convention lastname-p2 (ie. "cleveland-p2.fla") putting it into this folder. Then, publish it to create the .html, .js, and dependent (images) files needed. Upload your lastname-p2 folder (with all the .fla, .html, .js and dependent files/folders within) to the project2 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed instructions and a video tutorial.
Sample Code that may be useful for Scripting Navigation and Interactivity
Final Project (due 5/22)
Conceive, design, and produce (using Animat CC) an animation or 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.
If you choose to extend one of the first two projects, strive to refine and expand the scope of the project in order to turn it into a portfolio-worthy piece of animation and/or interactive design. If you choose do do something new, consider the examples of appropriate projects below.
Examples of appropriate projects include:
- An illustrated, animated, interactive multimedia poem
- An interactive, animated “How To” demonstration of something
- An animated “Interactive Tour” of something
- An interactive, multimedia-based documentary (or mini-documentary) on a topic
- An interactive, animated short story
- An interactive multimedia game
- A multimedia-based interactive music video
- An interactive website or microsite that using HTML5 Canvas
- 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 Animate/Flash (and other audio/video/imaging software as appropriate). You must use imagery, animation, sound but are encouraged to also use interactivity, text, video, or any other media elements as appropriate to your concept. You can use any screen size you wish, provided your movie is no larger than 1920 x 1080.
Your project should include a title screen (opening credits) and/or include an interface with the project’s title and your name. 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 Animate'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.
Create a folder with the naming convention lastname-fp and save (or Save As) your file with the naming convention lastname-fp (ie. "cleveland-fp.fla") putting it into this folder. Then, publish it to create the .html, .js, and dependent (images) files needed and/or the .mp4 video needed. Upload your lastname-fp folder (with all the .fla, .html, .js, .mp4 and dependent files/folders within) to the finalproject folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed 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 / discussion post on Canvas and one short oral presentation/demonstration (on one of your explorations) to the class.
Your research will focus on two of four possible areas/topics of exploration:
Due Dates:
- 1st Exploration due by or before 3/13 (or before your presentation date)
- 2nd Exploration due by or before 4/24
ORAL PRESENTATION DATES:
Date |
Student(s) |
| 2/18 | Anthony L, Miles F |
| 2/20 | Jana B |
| 2/25 | Oden S |
| 2/27 | Andrea C |
| 3/4 | Molly C |
| 3/6 | Anthony J |
| 3/11 | Mason B, Annabelle K |
| 3/13 | Enrique L |
| 3/25 | Brian G, Dominick C |
| 3/27 | Jim L |
| 4/1 | Kristina L |
| 4/3 | Quinn S |
| 4/8 | Keeva H, Riley M |
| 4/10 | |
| 4/15 | Angel S |
| 4/17 | Kendra H |
| 4/22 | Juancarlos R |
| 4/24 | Sofia G |
| 4/29 | Claire B |
| 5/1 | |
| 5/6 | |
| 5/8 | Felicidad A |
| 5/13 | Carolina M |
Studio/Artist Exploration
Find and research a compelling and cutting-edge interactive multimedia design studio or interactive media artist who develops using Animate/Flash, ToonBoom, AfterEffects, Processing, p5.js, Arduino, openFrameworks, HTML5/JavaScript, Canvas/Web GL, or or other technologies for creating animation and/or rich media experiences. In the class blog, post the equivalent 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 a couple good examples of this studio's/artist's work. Include all relevant URLs.
Design OR ANIMATION Exploration
Find 1 or 2 examples of good, effective, and compelling animations, rich media web experiences, and/or interactive multimedia application design developed using Animate/Flash, HTML5/JavaScript, or other technologies. Investigate and contemplate your chosen examples in depth. Dissect the design elements, uncovering the design or animation principles and techniques that are at work, and how these principles are applied and/or operate within your example(s). 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 equivalent of a one page paper about your exploration. Explain what attracted you to your chosen design(s) and share any ideas or insights that you've gained into effective multimedia design. Referencing your example(s), describe the design principles and techniques that are at work, and explain how the design functions to 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 page 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 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, augmented reality, broadband and/or networking technology, artificial intelligence, wireless technology, multi-touch screens, nanotechnology, quantum computing, Internet TV, 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. 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 3 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 Animate/Flash designer and/or developer. 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.