Week 5 – Keyframe Animation

{loadposition adposition4}

Overview

Flash is primarily an animation tool, so it is important to know how to animate your graphical objects and text. Flash offers a number of ways to animate an object and make it fly across the stage. You can manually control the animation by Keyframing and inserting all the keyframes and frames yourself, or you can have Flash help you animate, by first setting the keyframes and then having flash handle all of the in-between frames. This is called Motion Tweening or Classic Tweening. {loadposition adposition5}There are tons of visual characteristics that you can animate, you can make an object fade in or out, speed up or slow down, follow a curve, or rotate and spin. You can also move objects in 3d space, blend colors, and morph shapes. Even though Flash offers amazing new tools to animate with, good animation still requires precise timing, control, and pause.

Flash Animation Methods

  1. Keyframing – frame-by-frame animation, edit each keyframe one by one
  2. Classic Tween – Flash executed frame motion, spanning between two keyframes, involving symbols, and grouped objects
  3. Motion Tween –  Flash executed frame motion, spanning between two keyframes, also includes a motion path
  4. Shape Tween – Flash executed frame motion, spanning between two keyframes, involving shapes
  5. Scripted motion – Flash executed motion, defined by actionscript programming

 

Lynda.com Tutorials

  •  Flash Professional CS5 Essential Training

    The following tutorials will help you learn how to animate objects sprites and images with Flash
    Chapter 8 Creating Frame-by-Frame Animations
    Chapter 9 Creating Shape Tweens
    Chapter 10 Working with Motion Tweens and the Motion Editor

{loadposition adposition9}

Week 5 Assignment – Creating Keyframing Animations

Use the following examples and video tutorials to create animations by creating and editing multiple keyframes on the Flash timeline.

Timeline
Due date: End of Week 6
The project is complete once you have sent me your .fla Flash editing files and .swf published flash movie files (please try and save your .fla file in the CS5 or older format)

Project 1: Keyframing a Cartoon Bomb

In this assignment you will use the timeline, keyframes, and Flash’s built-in vector drawing tools to create an animated cartoon bomb sequence. How will you do it? You will draw a cartoon bomb with a long fuse. Light the fuse with your vector paintbrush, and using keyframes have the fuse slowly expire until it goes off. What happens in the end? Add your own creative ending: flying text: "The end"? A cloud of smoke? A cartoon KA-BOOM? Confetti? A cartoon character appearing? It is whatever you can dream up, and it does not have to make sense.

Project 2: Keyframing a Bouncing Ball

A bouncing ball is a seemingly easy beginning animation project, yet it takes a lot of observation and skill to do it right! Using Keyframing, make a ball fall to the ground, bounce at least twice, and then roll and come to a stop. At the end of the roll make something fantastic happen. It is your choice for an ending. Some ideas for an ending might be: roll some credits, animate a "The End", make the ball morph into something else, it is up to your imagination.

 

{loadposition adposition8}

 

 

{loadposition adposition10}

 

Mystery Hunt & Click Game – Actionscript 2.0

{loadposition adposition4}

Flash Mystery Hunt & Click Game

This type of Flash web game involves players having to navigate their way through a story, usually scene by scene, by hunting and clicking with the mouse, trying to uncover hidden clues. To create this type of game you first need a narrative structure or plot for your game and then most of the game development will involve creating graphics, animations, and sound effects. {loadposition adposition5}The scripting for the game will mostly involve creating interactivity through hidden buttons, drag and drop, and conditional logic that tracks which objects and clues were found. Additional game challenges can be added by scripting interactivity that involves solving riddles, puzzles, and evaluating clues to unlock additional game areas. 

In the tutorials below, I use Flash to show how to create simple narrative timeline based interactivity. This includes invisible buttons, event functions, jumping and starting and stopping the timeline playhead, creating simple movieclip animations, and creating game variables to track game states.

 

Video Tutorials

In this video, I show how to create an invisible button which activates a zoom-in and fade-to-black scene transition

 

The video tutorials below were done with an older version of Flash but can be easily modified to work with CS6. The

 

Week 4 – Traditional Photographic Techniques

Overview

This week you will learn how Photoshop can be used to simulate creative photographic techniques that were traditionally done in the darkroom. 1) How Photoshop can simulate the use of photo filters on a lens; 2) How to create a sepia toned digital image and you don’t have to use super toxic toning chemicals; and 3) How to mask a portion of an image or paint in the color.

Week 4 Assignment 1: Improve a Landscape with Warming Photo Filters

Using one of your own digital landscape photographs, follow along with Chris Orwig and customize a landscape photograph with warming photo filters. For this assignment you will need to watch the following Lynda.com video tutorials:

Photoshop CS3 Creative Photographic Techniques, with Chris Orwig
Chapter 2. Creative Color
2.4 Warming photo filters

Turning it in:
Due date: End of week4

Turn in your assignment by uploading before and after jpeg images to your online image sharing account (eg. Flickr, Imgur, Photobucket, etc.) and then post links to your before and after images within the Blackboard assignment submission.

Week 4 Assignment 2: Create a Sepia Toned Photograph

With a separate digital photograph that you have shot yourself, follow along with Chris and create a digitally sepia toned photograph. For this assignment you will need to watch the following Lynda.com video tutorials:

Photoshop CS3 Creative Photographic Techniques, with Chris Orwig
Chapter 2. Creative Color
2.6 Sepia tone

In the video tutorial Chris starts with a black & white photograph, so I recommend that you do the same. To turn your photograph into a black and white image, open the image in Photoshop, from the pull down menu go to Image > Adjustments > Desaturate. Note: this technique is not an Adjustment Layer, this is a permanent change to the starting image, so to safeguard your original image, first do a File > Save As and save the image with an alternate file name. You should now have a black and white grayscale image, and you are now ready to follow along with Chris and create a sepia toned image.

Turning it in:
Due date: End of week 4

Turn in your assignment by uploading before and after jpeg images to your online image sharing account (eg. Flickr, Imgur, Photobucket, etc.) and then post links to your before and after images within the Blackboard assignment submission.

Week 4 Assignment 3: Create a Partially Colored Black and White Photograph Using Layer Masks

For this assignment, I want you to create an image, that you will manipulate in Photoshop, where only the subject of the image is in color. Think of a wedding portrait where everything is black and white except for the bride and groom, or a flower where only the petals and the stem are in color. Your photograph should have a discernible subject, which you will keep in color, the rest will be black and white.

Watch my tutorial video on how to use a Layer Masks in conjunction with an Adjustment Layer here: How to Paint Color Back to a B&W image with Layer Masks

Turning it in:
Due date: End of Week 4

Turn in your assignment by uploading before and after jpeg images to your online image sharing account (eg. Flickr, Imgur, Photobucket, etc.) and then post links to your before and after images within the Blackboard assignment submission.

Older Examples  

These Photoshop tutorials are older, but they are still worth watching:

Week 4

{loadposition adposition}

Overview

This week we are going to cover the benefits of nested movieclips and timelines in creating animated characters and objects in Flash.

Week 4 Assignment 1 – Animate a Character with Blinking Eyes in Flash

I have step by step video tutorials, you can see them here: Animate a Character with Blinking Eyes in Flash 

Turning it in:
Due Date: End of Week 6

The assignment is finished when you have sent me your finished Flash file as an email attachment.


Week 4 Assignment 2 – Create an Animated Glowing Lantern in Flash

I have step by step video tutorials, you can see them here: Create a Glowing Lantern in Flash

Turning it in:
Due Date: End of Week 6

The assignment is finished when you have sent me your finished Flash file as an email attachment.


Basic Switch Configuration and Port Security

Switch Security Overview

In the video tutorials below, I show how to use Packet Tracer to build a small LAN with a Cisco 2960 Switch, three PC clients, and two PC servers, one of the servers is placed on a separate VLAN for management purposes. Excellent review and study for the Cisco CCNA exam. The networking tasks that are accomplished in the videos are:

• Changing the management VLAN on the switch,
• Configuring the switch with an IP address,
• Configuring the switchports as access ports and assigning them to VLANs,
• Remotely connecting to the switch with telnet,
• Configuring passwords for console and virtual terminal ports,
• Configure privileged user mode with an md5 encrypted password,
• Configuring the hostname on the switch,
• Testing LAN connections with the Ping utility,
• Backing up the switch configuration file and IOS image file to a TFTP server using the copy command,
• Using the show mac-address-table command,
• Configuring switchport port-security and sticky mac address

Video Tutorials

Create a Flash Mr. Potato Head – Actionscript 2.0

{loadposition adposition4}

{loadposition adposition5}Overview

This tutorial will continue to introduce you to the basics of creating interactive Flash animations. The basic Flash scripting tools that you will learn, are the building blocks for future scripted Flash game development.

Mr. Potato Head is a popular child’s toy because of its interchangeable or interactive body parts. In this project, you will create a potato head movieclip, with separate movieclips for the body, eyes, nose, mouth, hat and shoes. You will also create Flash button symbols, that when pressed, will switch between multiple hats, noses, eyes and mouths.

I have created video tutorials that demonstrate how to execute this project. Watch the videos and create the project.

Video Tutorials 

• Potato Head 1

• Potato Head 2

• Potato Head 3

• Potato Head 4

• Potato Head 5

• Potato Head 6

• Potato Head 7

Photoshop Brightness & Contrast, Adjustment Layers, Black & White

Overview

Now that you know how to size your images correctly, as well as crop and rotate them what is the next thing you need to know how to do? For me, I need to be able to adjust brightness and contrast, adjust my tonal range of white to mid gray to black, and I need to correct my color. This week we will learn how to do some of those things to really be able to improve our images.

Also we are going to be looking at some black and white photography so I thought it would be useful to know how to convert a color image to black and white.

Week 3 Assignment 1: Brightness and Contrast Adjustment Layer

Videos to Watch at Lynda.com

  • Photoshop CS5 One-on-One: Fundamentals, with Deke McClelland
    Chapter 7. Basic Color Correction (Watch the second video Brightness and Contrast)
    Note: this title is not in your class bundle but you have access to select teaser videos
  • Photoshop CC for Photographers: Fundamentals, with Chris Orwig
    Chapter 11. Improving Basic Exposure and Tone
    11.1 – Adding brightness and contrast
    11.2 – Fixing an Image that is too bright
    Chapter 14. Improving Exposure with Adjustment Layers
    14.1 – Automatically improving your images
    14.2 – Making custom levels adjustments
    14.3 – Fine tuning an image with Curves
    Note: If you are using Photoshop CS5 or CS6 I recommend locating the equivalent videos in Chris Orwig’s Photoshop CS5 for Photographers title.

After learning how to adjust Brightness and Contrast with Deke McClelland and Chris Orwig, and learning to do so in a flexible manner using Adjustment Layers which gives you the ability to go back and re-edit your image. Your assignment is to fix a photograph using Brightness and Contrast and Adjustment Layers. Please use one of your own images that you have taken yourself.

Turning it in:
Due end of week 4

Please send me your finished .psd file with a Brightness and Contrast Adjustment Layer. You may need to lower your image’s resolution to successfully upload it to Blackboard or email it to me. In Photoshop, do an Image > Image Size > check the resample image check box and lower your image’s resolution to 72 or 100 dpi so that it is easier to email me the file as an attachment.

For this assignment, please upload before and after jpgs to your online photo web album and then post links to the photos in Blackboard.

Week 3 Assignment 2: Convert to Black and White with the Black and White Adjustment Layer

Watch my video:

For a more in-depth tutorial watch:

  • Photoshop CC for Photographers: Fundamentals, with Chris Orwig
    Chapter 15. Adding, Changing, and Removing Color with Adjustment Layers
    15.6 – Converting to black and white
  • Photoshop CS5 for Photographers, with Chris Orwig
    Chapter 19. Black-and-White Conversion
    Watch all videos!

        

Since we are going to be looking at a great black and white photographer this week I though you should create a black and white photograph out of a color photograph. Your assignment is to manipulate a color photograph, turning it into a black and white photograph. The subject of the photograph is your own choosing but make it interesting because I want you to post it!

Turning it in:
Due end of week 4

Your assignment is finished when you save before and after images as .jpg files, upload them to your online photo web album and post links to the images in Blackboard! Please remember to give it a title too.