October 8, 2014
What’s due for this class?
- 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!
- 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.
- Materials needed: Flash/jump drive.
Present your finished inked mashups to the class.
- Fair Use
- 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
- 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.
- Visit animatron.com
- Watch the starter tutorial.
- Create an account or login via social media.
- From the Animatron icon in the upper left corner, choose Project > New Project.
- Name the project: FirstInitalLastNameAnimatedMashup
- From the Animatron icon in the upper left corner, choose Import: Image, SVG, Audio, Font
- Navigate to the sample images or your own sliced images and import.
- Click on the Project Library button, you should see all the images.
- Set the size of the project to: 864 high x 648 wide
- Move the Time Duration Flag to 2 seconds.
- Now you are ready to begin!
- 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.
The four types of tweens in Animatron are:
- Translate – changes in an object’s position on the canvas.
- Rotate – changes in an object’s angle.
- Scale – changes in an object’s size. (IMPORTANT!! don’t increase a bitmap object’s size)
- 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.
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)
- 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.
- 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.
- Materials Needed for next project:
Print this page