Typographic Animation Day 3: Randoms

FT_dogs.PNG

The following people need to turn in their permission slips for the RIT Field Trip:

  • Omarion
  • CJ (also need med form for nurse)
  • Dax
  • Aquan
  • Seth (also need med form for nurse)

Flip-a-Clip

If anyone thinks it would be easier to create a hand drawn animation of their word, talk to Ms. Lawson and she can show you how to use Flip-a-Clip on an iPad. It will take significantly longer since you have to draw every frame (so you would need to draw 60 pictures for a 5-second animation.)

Blog Post Reminder

Please remember to post your progress to  your blog every day. Once you start animating, you should post YouTube links of the actual animation. In the meantime, use the snipping tool to take a screen shot of your progress.

Advertisements

Typographic Animation Day 2: Converting Text to Vector Outlines in Illustrator

Today’s essential question: How can use Adobe Illustrator to create the graphics I will later animate in Flash?

Part 1: How to Convert Text to Vector Outlines in Adobe Illustrator

  1. Select the type tool. type_tool
  2. Change the size and typeface from the drop down menu at the top of the screen. Choose a large size (72-200pt) so you will be able to see your word.
    typeface_window
  3. Type some text.
    word
  4. Select the selection tool. selection_tool
  5. Type -> Create Outlines
  6. Object -> Ungroup
    This will separate the letters.
    outlines
  7. You can now move, scale and rotate individual letters with the selection tool.
    ungroup
  8. You can also select and move individual points on a letter with the direct selection tool. direct_selection_tool
    e1 e2
  9. You can delete points by clicking and holding on the pen tool to bring up the Delete Anchor Point tool, and using it to delete any points that you do not want.
    delete_anchor_point.png
    f_point_deletion_process.png
  10. You can also use the shape tools such as the rectangle tool rectangle_tool.PNG to draw parts of the letters back in as separate shapes, like in the example below:
    f_arms_separated.PNG
  11. Make sure you save your file as an Ai and PNG and post your progress to your blog.

Why might you want to convert each letter (or even part of a letter) into separate graphics before bringing them into Flash?

The videos below were created with letters that were first separated into pieces before being animated:

Part 2: How to Import Vector Graphics into Flash

  1. Make a new Flash file
  2. File -> Import -> Import to Library
    menu_Screen_Shot
    import_to_library
  3. Select “Convert to Flash Layers”
    flash_layers.PNG
  4. Go to the library and drag each graphic onto its own layer in your timeline.

Today we will:

  • create our word graphics in Illustrator
  • save our file as both a Ai and PNG
  • import our graphics into Flash
  • make a new blog post with images of our progress
  • back all our files up to our animation folders in our Google Drives

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

 

 

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