COMD1100 Class 11: Sound Mashup

October 14, 2015

What’s needed for this class:

  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 are due by the end of class, 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 piece with staccato rhythm and one with legato rhythm.
    • You may also use the sample audio files provided.

Lab: Adding Sound

We will be importing two pieces of music, one with staccato rhythm and one with legato rhythm. You may use the two sound files for the project in the Dropbox folder.

  1. Move your sound files (MP3, WAV, AIFF, M4A, and OGG file formats are acceptable) into your project folder on the desktop.
  2. Open your animation project in by signing in and choosing the project from the Project menu.
  3. From the Animatron icon in the upper left corner, choose Import: Image, SVG, Audio, Font 
  4. Navigate to the sound files and import the two files provided or your own.
  5. Add the audio files to the timeline and choose sections of each song to mix together.
  6. You are only working with a 2 second timeline, so we will use End Actions > Loop (2 times) to increase the animation to 4 seconds.
  7. We will also soften the in and out points using keyframes and adjusting the volume.
  8. If you’d like more information about editing audio in animatron, here is a tutorial.
  9. Export/Publish your animation with sound using HTML5.

Documentation and Feedback

  • Create a new blog post called Sound Visualizations: Phase 3.
  • Add a link or embed to your animation and sound mashup
  • Include the hours that you worked on this part of the project (both animation and sound).
  • Don’t forget to comment on at least 3 other student’s posts.


Present your finished animated mashups to the class.


  1. Check your grade
    • Request a password using the request password link (Password is for this site only)
    • Enter your City Tech email and new password on the Check Your Grade page.
    • Your grade + comments will be displayed on screen.
    • See me with questions or concerns.
  2. Materials Needed for next class:
    • 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)
  3. Combine Phase 3 and 4 feedback/documentation posts for Project #2 into one post. and comment on at least 3 other students animations.
  4. Complete Humument work for this project
    • Using Tom Phillips’ original Humument project as a guide, create a series of pages in your chosen book that demonstrate the concepts we’ve covered in this project:
      Line, Rhythm, Repetition, Variety, Pattern
    • Each page should clearly visually communicate these concepts to your reader/viewer:
    • Experiment with blocking out and/or revealing certain areas of text or individual words to communicate your concepts.
    • Use pencils, inking pens and (collage) to create your pages.
    • Consider trying to create a flipbook animation in one of the corners of the book.
    • These should be beautiful objects when complete.

Print this page Download PDF