New Project: Typographic Animation

Today’s essential question: How can I depict the meaning of a word using only the letters in the word and definition?

Today we will introduce our typographic word animation project and create storyboards for potential animations. We will sketch each of the major keyframes, write a written description of the action, and identify which Flash tutorials and tools we will use to create each action (ex. scale, rotation, transparency, motion path). If you are not sure which tool to use, ask a classmate or Ms. Lawson for help! You must post a photo of your storyboard and a one paragraph description of your planned animation in order to receive credit.

Typographic Animation Project Requirements

  • Created in Adobe Flash
  • Uses only the letters in the word (and potentially the definition of the word)
  • Illustrates the meaning of the word
  • Follows the Principles of Animation
  • Sound adds to the meaning of the piece
  • 5 seconds long

Typographic Animation Examples

Examples of typographic animations created by previous SOTA Students:

Random internet examples of typographic bumper animations:

Animation Project Planning Blog Post Requirements:

Here is an example of what I am looking for in a storyboard:
Storyboard1.jpg

Here are some examples of typographic animation project proposals created by previous SOTA students:

Today we will:

  • Introduce the typographic word animation project
  • Sketch storyboards for potential animations
  • Create a new blog post with the following:
    • A photo of our storyboard. Your storyboard must include:
      • sketch each of the major keyframe
      • a written description of the action
      • a list of which Flash tutorials and tools you will use for each part of the animation (ex. scale, rotation, transparency, motion path)
    • A few sentences describing your planned animation

 

 

Advertisements

Animation Tutorials Day 3: Motion Path

Today’s essential question: How can I make an object follow a custom motion path?

motion-path.png

The bouncing ball tutorial taught us how animate an object that moves from one point to another.
Sometimes you may want an object to follow a more elaborate path of motion, such as a race car following a track, or a butterfly fluttering around a screen. In these cases, you would draw a line called a custom motion path for your object to follow.

How to Create a Custom Motion Path in Flash CS5

Part 1: Setting Up the File & Layers
  1. Create a new Flash Document in Actionscript 2.0
  2. Save the butterfly PNG below. (Or download an image of your choice with a transparent background.)
    small_blue_butterfly.png
  3. Import the picture of the butterfly.
    File ->Import-> Import to Library->small__blue_butterfly.png
  4. Go to the timeline at the bottom of the screen.
    Double-click “Layer 1” and rename it “butterfly.”
  5. Click on the Libraries panel.
    Select “small__blue_butterfly.png” and drag it onto the stage.
  6. Right click (or control + click) on the butterfly image -> convert to symbol -> convert to movie clip.
    Name the movie clip “butterfly.”
Part 2: Creating the Motion Path
  1. Create another new layer on the Timeline, select the Pencil tool 1 in the Tools panel,
    and select a stroke color from the Property inspector on the right.
  2. Draw a path on the stage with the Pencil tool.
    2
  3. Switch to the Selection tool 3 and double-click the path you just created.
    4
  4. Choose Edit→Cut to remove the path from the stage temporarily.
    5
  5. Right-click (Windows) or Control-click (Mac) Frame 1 of the layer that contains your symbol and choose Create Motion Tween from the contextual menu that appears.
    6
    A new tween span is created for your triangle symbol.
    7
  6. Choose Edit→Paste in Place to paste the path you created earlier.
    8
    Flash automatically converts the path to a motion path, and your symbol snaps to the path.
    9
  7. Press Enter or Return to play your movie. The symbol follows the path you created.

Today we will:

  • Complete Motion Path tutorial, upload both the flash and swf files to the animation folders in our school Google Drive accounts, and make sure we have shared the folder with Ms. Lawson
  • Upload Motion Path animations to YouTube
  • Create a new blog post with the following:
    • completed Motion Path Animation
    • a few sentences on our blog summarizing any challenges you faced today, how you worked through those challenges, and how you currently feel about computer animation.
    • any other missing or incomplete assignments

Animation Tutorials Day 2: Rotation Points

Today’s essential question: How can I use the transform tool and rotation points to animate a moving character in Adobe Flash? 

Today we will complete the Cat Rotation tutorial. Then we will finish any missing/incomplete animation tutorials from last week.

Cat Rotation Tutorial

This tutorial will teach you how to set anchor points and how to rotate objects around those anchor points. You will need to sign into your school Google Drive account, open the Animation folder I have shared with you, and download the “black_cat.psd” file. Do not try to save the image from this blog post, as it will not have the body parts on separate layers like PSD file in Google Drive does.

 

 

Missing/Incomplete Assignments

The following people still need to finish and post the following assignments to their blogs:

  • Danny – Ghost Dog
  • Omarion – Square Collage, Accordion Book, Bouncing Ball, Ghost Dog
  • Colin – Bouncing Ball, Ghost Dog
  • Dax – Bouncing Ball, Ghost Dog
  • Aquan – Square Collage, Accordion Book, Bouncing Ball, Ghost Dog
  • Jamila – Ghost  Dog
  • Shaborn – Bouncing Ball (incomplete)
  • Seth – Square Collage, Bouncing Ball, Ghost Dog
  • Jaden – Ghost Dog
  • Viviam – Bouncing Ball (incomplete)
  • Rae – Bouncing Ball (incomplete), Ghost Dog (incomplete)
  • Carleton – Square Collage, Bouncing Ball, Ghost Dog
  • Raul – Accordion Book, Bouncing Ball, Ghost Dog

Today we will:

  • Complete Cat Rotation tutorial, upload both the flash and swf files to the animation folders in our school Google Drive accounts, and make sure we have shared the folder with Ms. Lawson
  • Upload the Cat Rotation animation to YouTube
  • Create a new blog post with the following:
    • link to completed Cat Rotation Animation
    • a few sentences on our blog summarizing any challenges you faced today, how you worked through those challenges, and how you currently feel about computer animation.
  • Finish any missing/incomplete animation tutorials and post those links to your blog

Animation Tutorials Day 1: Bouncing Ball & Ghost Dog Transparency Tutorials

Today’s essential questions: How can I use the principles of animation to animate a bouncing ball in Adobe Flash? How can I use alpha channels to create fade effects when animating in Adobe Flash?

Today we will begin our animation unit by completing two tutorials in Flash.
They will teach us how to fade an object, and how to animate a bouncing ball.

Bouncing Ball Tutorial


Open Adobe Flash on your computer.
Then follow the steps in this handout to animate a bouncing ball!

Ghost Dog Transparency Tutorial


Complete the Ghost Dog Transparency tutorial. Save the image of the ghost dog from this blog post, or download your own image with a transparent background to use.

Uploading a Flash Animation to YouTube

You will need to save all your flash files and upload them to your Google Drive (this will also allow you to open up the file and make changes at a later date if needed), but you will not be able to post this file format to YouTube. Therefore, you must also export an MOV of each tutorial and post that to YouTube in order to receive credit. Here is how you can export an MOV file from Flash:

  1. Click File -> Export -> Export Movie
    file_export
  2. Select Quicktime from the drop down menu, name your file with your name, and press export
    export_window
  3. Upload the MOV to YouTube and link it in today’s blog post

Today we will:

  • Complete the following tutorials:
    • Bouncing Ball
    • Ghost Dog Transparency
  • Upload the Animations to YouTube
  • Create a New Blog Post with the Following
    • Finished Bouncing Ball Animation
    • Finished Ghost Dog Transparency Animation
    • A few sentences describing any challenges you faced and how you worked through those challenges

Infographic Day 8: Picking a Cohesive Color Scheme

Today’s essential question: How can I balance similarly saturated colors with neutrals to create a cohesive color scheme?

Look at the infographics below. Each infographic has a few dominant colors of equal saturation or brightness, as well as some neutrals. What purpose do the neutrals serve? What might the dominant colors for your infographic be? Why is it important to conscientiously limit your color palette?

The coolors website and the design seeds website are great resources for picking color schemes.

Today we will:

  • Continue working on our infographic projects
  • Create a new blog post with our progress. Include:
    • a PDF of your project
    • a PNG of your project
    • a few sentences explaining what has been easy and what is still challenging