October 8, 2014

What’s due for this class?

1. DUE: Final inked version of your Pattern Mashup on a piece of 9″x12″ bristol board, based on your finalized preparatory compositions. Come prepared to present your work!
2. Post to the blog.
   • Create a new blog post called Sound Visualizations: Phase 2.
   • Take photos of your finished Inked Pattern Mashup and add them to the post (make sure it is well-lit and in focus.)
   • Include the hours that you worked on this part of the project.
   • Don’t forget to comment on at least 3 other student’s posts.
3. Materials needed: Flash/jump drive.

Critique

Present your finished inked mashups to the class.

Discussion

• Sampling
• Fair Use
• Copyright

Examples:

• Stayin’ Alive In The Wall (Pink Floyd vs Bee Gees Mashup) by Wax Audio
• “Hahahrawrrahaha” Someone made a song using Jeff Goldblum’s weird laugh from Jurassic Park
• Brian Williams Raps “Rapper’s Delight“
• ‘The Great Gatsby’ Mash-Up Turns Leonardo DiCaprio Into a ‘My Little Pony‘
• A Designer’s Midcentury-Mod Music-Graphics Mashups
• Esoteric mash up
• The Magic of Mashups – Corporate Logos
• 7 Mashups That Will Change The Way You Look At Music Forever

Lab 1 : Scanning and preparing digital files

SCAN:

• Create a folder on your drive called FirstInitalLastNameMashup
• Scan your finished inked Pattern Mashup (300dpi, grayscale, jpg).
• Save this hi-res file as FirstInitalLastNameMashupHIRES.jpg to the folder you just created.
• Open your file in Photoshop, rename it FirstInitalLastNameAnimatedMashup.jpg and save it to the same folder. Make the following adjustments:
  • Image size: 72 dpi, constrain proportions
  • Color Mode: RGB
• SAVE AGAIN.

PREP in Photoshop:

• Using the slice tool, slice up each pattern square for use in your animation.
• We will do this together in class.
• Save your files to your FirstInitalLastNameMashup folder.

LAB 2: Animating your mashup

You will create an animation using the sample files provided (here) and then repeat the process with your own images once your inked mashup has been scanned.

1. Visit animatron.com
2. Watch the starter tutorial.
3. Create an account or login via social media.
4. From the Animatron icon in the upper left corner, choose Project > New Project.
5. Name the project: FirstInitalLastNameAnimatedMashup
6. From the Animatron icon in the upper left corner, choose Import: Image, SVG, Audio, Font 
7. Navigate to the sample images or your own sliced images and import.
8. Click on the Project Library button, you should see all the images.
9. Set the size of the project to: 864 high x 648 wide
10. Move the Time Duration Flag to 2 seconds.
11. Now you are ready to begin!

Guidelines:

• Create a minimum 2 second animation using slices from your scanned inked Pattern Mashup.
• Start with a blank screen (at 0 seconds) and animate the sliced images onto the screen to assemble the mashup using translate, rotate, scale and opacity tweens (at 1 second).
• Then copy and paste the starting keyframes (at 0 seconds) to the 2 second marker. This will allow the animation to loop (blank screen > assembled mashup > blank screen).
• Adjust the keyframes so that there is a pause/hold around the 1 second marker. We want to be able to see the assembled mashup for a brief time before it breaks apart again.
• If you’d like to increase your animation to longer than 2 seconds that’s fine too.

Tutorials:

What is a TWEEN?

The four types of tweens in Animatron are:

1. Translate – changes in an object’s position on the canvas.
2. Rotate – changes in an object’s angle.
3. Scale – changes in an object’s size. (IMPORTANT!! don’t increase a bitmap object’s size)
4. Opacity – changes in an object’s transparency.

Use these four types of tweens to animate your mashup from a blank screen (0 second marker) to assembled mashup (1 second marker) using keyframes.  Return to a blank screen again (2 seconds marker) by copying the starting keyframes and pasting them at the end.

Troubleshooting:

• Check out the knowledge base page and tutorials page for answers.
• Contact me with questions.

Exporting the animation:

There are two ways to export or publish the animation once competed. Do both.

• HTML5: this will create a link to page that will play the animation
• GIF: this will give allow you to save the animated gif, but at a lower frame rate (10 fps)

Homework

1. Complete Staccato / Legato Animated Mashup.
   • Bring the HTML5 link and the animated gif to class.
   • Find your hi-res and sliced images for animation in this Dropbox folder.
   • NOTE: If you didn’t finish your inked mashup, please scan and slice using the guidelines above.
2. All parts of Project #2 will be due on Wed. 10/14, but we will add audio to your mashup in class and finish it together.
   • Bring two audio files (mp3, wave, aiff, m4a, ogg) to work with: one staccato rhythm and one legato rhythm.
   • You may also use the sample audio files provided.
3. Materials Needed for next project:
   • white and black gouache paints
   • sable-type watercolor brushes (do not buy brushes for acrylic or oil)
     • FLAT:  1/2″ angle, #4
     • ROUND: #1, #5
   • two water containers (yogurt cups, soda bottles with tops cut off, soup cans)
   • palette (round 10-well)
   • cotton rags (old white t-shirts or scraps)

Print this page