︎
︎Back DMD 2
Spring 2024 ︎︎︎Purchase College, SUNY ︎︎︎ (DES2460)DMD2

Project: Motion Story




Background & Objectives

You have recently started your journey in After Effects and the web, and now you must put them together. The goal of this project is to synthesize your understanding of both skillsets.

The outcome for this project will be a video (or small set of videos) that are displayed on a webpage. You must use “animation” on your webpage in an additional way, through CSS or javascript animation OR a tool to let you display SVG’s as animations on your page natively (we’ll go through these together, though I’ve already stalked about CSS animation).

This will give you a chance to fix or amend your process from our early projects, as well as learn new and advanced techniques. 

Description

You will use the skills and techniques we have discussed in class, and what you have learned or sought out through tutorials to tell a story. This does not need to use language (ie “once upon a time…”), however typography must be included in some way (titling, sound effects, lyrics, etc.). You should aim to use your imagery and or type to create something with a “beginning” “middle” and “end.” You might also think of this as a joke structure with a “setup” and “payoff.”  

The website must serve the story in some way. That could be as simple as splitting parts of your video split for tension, or have multiple endings. It could also provide information (ie backstory for the characters or “behind the scenes” process and sketches)

Final Submission

A folder which contains the following (inclusions are highly recommended to be in subfolders for clarity and organization) (if your project does not conform to this file structure please discuss it with me and we’ll work it out)
    • 2-3 final style frames as .png, .jpg or other raster images
    • Final storyboard as a .pdf file
    • Final wireframes for your web component as a .pdf file
    • Final animatic as an .mp4 file
    • Final video as an .mp4 file
    • A link to your final web project
    • A subfolder with all process imagery and writing.

Requirements

    • Your final piece must at least include type, for example a kinetic type lyric video would be acceptable. For this piece you cannot use system default typography. Gill Sans is also not allowed for philosophical reasons. This can also include self-generated lettering.
    • Yout must include animation on your website via a tool like Lottie (animated SVG’s from After Effects), or CSS or javascript animated elements. 
    • Use only royalty-free or self-generated imagery and sound.
    • Video is allowed, but cannot be the sole method of image generation (this is mainly to say, do not do a 30-second short film. However if you’d like to use video as some kind of a background for a type-heavy piece, this is more than likely fine)
    • Styleframe resolution should be the same as your final video (1920 x 1080px)
    • Storyboards do not need to use a template but must give directions for camera movement and provide a description of the contents of each scene
    • Your total video should be at least 30 seconds long

No Shuriken Mode Challenges

(Please note that, doing these do not guarantee a better grade or extra credit by any fixed or demonstrable amount, but if you’re doing or approaching these things, you’re probably doing well. The point is that, like not using shurikens in Shadow Dancer, it is more difficult, and increases your proximity to the material. All this being said don’t hurt  yourself and consider your other assignments and mental and physical health. Additionally, if you are not feeling challenged by the class or an assignment, and these suggestions are not sufficient for you, please le me know.)
    • Include a 3D (simulated or actual) parallax shot to establish a location
    • Include dialogue and/or music which you record with a classmate (I can help with the sound aspect if you need)
    • Learn a tool like duik (free) or rubber hose (not free, but affordable) to create a character for your animation
    • Project some kind of animation on yourself (via a miniature projector we have access to them)

Considerations

    • Words are images ︎︎︎consider how the shapes of letters, specific type choices and the like, effect tone and your message. Think of typography not as a “costume” for the words you want to say, but as inextricably linked from the message. There is no “vanilla” form of type without style, tone, or “image-ness”
    • Refined-ness is important ︎︎︎ 30 seconds is not a lot of time; thus I am asking for a considerable amount of polish and care be put into this 30 seconds. This is also to say, avoid “stretching” or delaying for time.
    • Simplicity is not “easy” ︎︎︎ An animation that involves simple circles could be quite complex to animate. I would err on the side of finding simpler forms that you apply a greater degree of care to animating.


Inspirational Examples

(Showing these examples does not mean looking like any or all of these works is considered “good” or that you should imitate them, this is simply to help with idea and concept generation)

Dakota by Young-Hae Chang Heavy Industries


I Am A Chain Reaction by Insert Silence
(Amit Pitaru and Presstube/James Paterson)


My Mind & Me by Selena Gomez


Quizno’s “Spongemonkeys” Commercial


Desgined by Apple in California by Buck Studio

Grading

    • 20% ︎︎︎ Styleframes
       This will be graded based on the clarity with which you convey tone and energy and the evaluated in relation to where the final animation. This is not to say that the style frames must “match” the final, but I will look at the final vs your initial intention and see how they lined up and what about your process effected one or the other.

    • 20% ︎︎︎ Storyboard/Wireframes
      This is not a drawing class, to be clear. This aspect of the project will be graded based on your ability to denote the complexity of the action on screen and think about the “flow” or editing of your piece.

    • 20% ︎︎︎Craft
      This is the care and attention to detail you put in your keyframes, elements lining up with each other, clarity of comments in your code and the like 

    • 40% ︎︎︎ Final Animation/Website
       This will be graded based on the general ambition, execution and energy as well as how you incorporated concepts and techniques we learned in class or ones you sought out. The concept or idea which the piece is about will also be evaluated

Relevant Dates

04/04/2024 ︎︎︎ Introduction
(start your styleframes / wireframes as well as generate ideas for homework. Complete the parallax exercise for homework)
04/11/2024 ︎︎︎Check-in on initial ideas.
Styleframe review. Introduction to Lottie in class.
04/18/2024 ︎︎︎ Initial style frames due
04/25/2024 ︎︎︎ Final style frames + initial storyboards due
05/02/2024 ︎︎︎Animation/Website viewing party + writing assignment
05/09/2024 ︎︎︎ Writing review


︎Back DMD 2