Week 5 – Keyframe Animation

{loadposition adposition4}


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.

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}


Week 4

{loadposition adposition}


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.

Week 3 – Creating Flash Buttons

{loadposition adposition4}

{loadposition adposition5}Overview

This week we are going to learn to work with symbols. There are three types of symbols in Flash Movieclips, Buttons, and Graphics. Symbols are the meat and potatoes of Flash. The Nitty and the Gritty, the Starsky and the Hutch. Anyway, symbols especially Movieclips is what makes Flash such a powerful tool. There just isn’t any other web animation interactivity program that can compare. So we need to learn how to make symbols. With the button symbol you have complete creative control. The button can be a drawing, it can be text, an imported photograph (jpg), an animation, you name it. In the tutorials below, I turn the apple into a button and also I create a button from scratch. So I recommend watching all the video tutorials you can find, that will tell you about working with Movieclips, Buttons or Graphics.

Week 3 Assignment 1: Create your own Button Symbols

Create three or more buttons using your drawing tools. The buttons should be stylish and unique somehow. Watch my video tutorials below as well as the following tutorials at Lynda.com to learn more about creating buttons and movieclips:

Flash Professional CS5 Essential Training, with Todd Perkins at Lynda.com:

Section 14. Working with Button Symbols (all videos)
Section 15. Working with Movie Clips (all videos)

My Video Tutorials at my YouTube.com/DansCourses Channel:



{loadposition adposition10}





Turning it in:
Due date: End of Week 4

Your finished flash file should have three buttons on the stage. Your button should have an Up, Over, Down, and Hit State keyframes. Try to make at least one of your buttons function like other buttons you see on the web i.e. change color, offset, grow, dance etc. Your assignment is finished when you have sent me your Flash file with three buttons, as an atttachment to my dan.alberghetti@gmail.com email account.

{loadposition adposition9}

Video Tutorials from Flash CS3
These videos are done in CS3 but they are still pretty good and you can apply them to CS5 too!




{loadposition adposition8}


Week 2 – Drawing Vector Graphics with Flash

{loadposition adposition4}


This week we will learn about the Flash drawing tools. One of the nice things about Flash is that it has its own set drawing tools for creating graphics. In this way, you do not have to create all of your graphics in programs like Illustrator or Photoshop and import them into Flash. Like Adobe Illustrator, the Flash drawing tools create vector graphics which have a distinctive graphical or posterized look. Vector graphics stand in contrast to raster bitmap graphics, which are created in programs like Adobe Photoshop.

{loadposition adposition5}The pen tool is an important tool in computer drawing. It is hard to master and usually getting really good at it takes doing it all the time. The Pen Tool is also important because it is a tool that really highlights that Flash at its core is a “Vector” animation and drawing program. The tool is used to draw Bezier curves http://en.wikipedia.org/wiki/B%C3%A9zier_curve and Vector graphics. One of the main technical points about Flash is that it is a vector tool versus a bitmap tool. What is the difference between Vectors and Bitmaps(Raster)? Well one easy way to learn the difference is to experience it by drawing with tools that do each. If you are drawing with a brush or pencil in Adobe Photoshop you are working with Bitmaps(Raster images) but if you are working in Adobe Flash or Illustrator using their drawing tools you are drawing with Vectors (objects, lines, curves, fills). Vectors drawings are characterized by having anchor points, being selectable and easily scalable without distortion. Bitmaps on the other hand are characterized by pixels that don’t scale without distortion when enlarged. You can see this when zooming in on a jpg photograph. If you zoom in 600% on a photograph in Photoshop the image will begin to look like large square boxes of color, called pixelation. This situation is caused by the fact that a photograph is defined as a specific number of pixels, each with a separate color, arranged in a grid and if you try to enlarge the image the computer does not know what color to assign to the new pixels. With vector images, when you enlarge them they scale perfectly because the image is drawn by mathematical equations and algorithms.

Generally vectors are good for images that are built out of distinct lines and shapes like graphics, poster art, and line art. Images that look like drawings rather than a photographs. Photographic images on the other hand have fuzzy edges and usually no distinct lines. The usually look the best when created with a raster bitmap programs like Photoshop and saved as jpg image files.

{loadposition adposition4}

Vector Graphics (Geometric)

Bitmap/Raster Images (Grid of Pixels)

.swf  (flash movie)




.eps (Encapsulated Postscript)


.pdf (text, images, and vector graphics)

.png (supports transparency)

.wmf (Windows metafile)


.dxf (AutoCAD)

.bmp (bitmap file)

{loadposition adposition9}

Week 2 Assignment 1: Draw an apple with the pen tool

{loadposition adposition6}Draw an apple with a stem using the Pen Tools, the Subselection Tool, the Paint Bucket Tool, and the Gradient Transform Tool

        1. Watch Lynda.com video tutorials about the Flash drawing tools:
               Flash Professional CS5  Essential Training, with Todd Perkins
                  Section 2  Drawing Basic Shapes
                  Section 3  Moving Beyond Basic Shapes 
        2. Watch my YouTube.com video tutorials:

                    These videos are done with an earlier version of Flash:  apple 1apple 2, apple 3,

        3. Draw your apple in Flash -Time for you to go for it! If you want to draw something else that is great.
        4. If you need a reference download my sample files (Older files created in CS3)

Turning it in:
Save the assignment as a flash file (.fla) then zip it (.zip) and attach it to an email to dan.alberghetti@gmail.com

{loadposition adposition8}

Week 2 Assignment 2: Draw your own personal logo

  1. Watch video tutorials about the Flash drawing tools:
          Flash Professional CS5  Essential Training with Todd Perkins
          Section 2  Drawing Basic Shapes
          Section 3  Moving Beyond Basic Shapes
  2. Watch my video tutorial:

    This is a useful video for grabbing easy to use vector graphics

  3. Using the selection tool, the text tool, the pencil, brush and eraser tools, as well as, paint bucket and ink well tools. Create a logo for your own company or yourself. Your logo should be a creative use of text and/or graphics combined. The logo should make use of outlines (strokes), color gradients (linear or radial), and text.

Turning it in:
Save the assignment as a flash file (.fla) attach it to an email and send it to dan.alberghetti@gmail.com .


Week 1 – Flash Web Design

{loadposition adposition5}


I have been using Flash since 1993. Flash has been my main love in computers. The thing I like to do the most is make Flash interactive animations, websites and games. Some of the most exciting, and dynamic sites on the web are done with Flash. {loadposition adposition5}Flash is the most versatile multimedia tool on the web; it is an amazing vector animation and graphics tool as well as having an extremely powerful object oriented scripting language for programmatic interactivity. Careful though, Flash can be addicting.

We will be learning how to work with Flash in this class and to do that we will be watching online video tutorials from lynda.com as well as videos made by me. We will also be working on weekly assignments and creative projects.

Class Materials

The content of this class is designed to help you learn Flash from a novice to an intermediate level. To allow you access to a wide range of learning material we are going to be using online materials consisting of video tutorials from http://Lynda.com. Lynda.com is the leader in creating easily accessible learning and training materials from top professionals in the field. As an educator, I have the ability to to create a course bundle of 5 Lynda titles which you will be able to purchase through Lynda.com using the invitation code I will be sending you in an email. The approximate cost will be under $40 and will give you access to the 5 titles for 16 weeks. Each of the titles I will be choosing, will offer you a different of approach to Flash and animation.

In additional to the Lynda tutorial videos, I write my own assignments and lessons and use my own video tutorials which are hosted online at http://youtube.com/danscourses 

Class Schedule and Policies:

{loadposition adposition6}This class is offered either as Self Directed Learning-SDL, or Online. SDL students are required to be in the Lab – GMB133, a minimum of 2.5 hours per week you will log your hours in the lab. Here are some questions you will want answered:

  • When can I come to the Lab?
    I am in the GMB133 class/lab over 30 hours per week, for my exact lab times click on Lab/Classroom Hours.
  • Can I work in the Lab when you are not there?
    Yes, if the door is open you are welcome to come in and work. If the door is locked try coming into the lab through GMB130 the Flex Lab. The Flex Lab opens Mon-Sat at 9am and is open late Tuesday until 9pm.
  • Can I work with Flash in the lab?.
    Yes, I the newer looking HP towers against the wall all have Flash installed on them.
  • What if I am an online student, and I can’t work with Flash in the lab?
    If you are an online student you will need to work with Flash on your home computer. In order to do this you can purchase Flash either directly from Adobe.com or through an educational discount reseller like http://creationengine.com or the http://academicsuperstore.com . As a college student you can get an amazing price on Flash. You will need to provide proof that you are a student by attaching your current class schedule and to an email and sending it to them. The general public also has the ability to try Flash for free for 30 days by downloading the 30 day trial from Adobe.com  
  • When should I come to class?
    As soon as you can you should stop by the Lab in GMB133 and introduce yourself. Remember SDL students are required to be working in the lab 2.5 hours per week. It is up to you to decide exactly what your schedule will be.
  • How can I assure that I will be successful?
    The students that show up regularly, week by week, both online by logging in to DansCourses and in person by coming to the lab are the ones that will be successful. To finish this class, I recommend you sit down and create a schedule of times that you will work on the class and its assignments.

  • Is there a syllabus?
    The syllabus outlines the course, please download it and save it for your records: To be posted shortly
  • How will I turn in assignments?
    All assignments will be turned in as email attachments to dan.alberghetti@gmail.comThis e-mail address is being protected from spambots. You need JavaScript enabled to view it
  • How will I be graded?
    I grade on a point system. Every week you will have the opportunity to earn points by doing projects. This class is about project based learning. Each week you will be asked to complete a different task in Flash, by the end of the semester you will have built a website completely in Flash. The projects will come from my own experience, alternative sources and texts that I have worked with over the years, and the curriculum provided by Lynda.com. To earn full points on a project or assignment, you will need to follow my instructions and accomplish the task presented to you as well as add your own creative process and individuality. If you follow the instructions and apply yourself in a thoughtful manner I am sure you will receive full points! Ultimately your final grade is based on scale of total points earned to total points possible. 

{loadposition adposition9}

Week 1 Overview

This week you will need to purchase your Lynda.com class materials. To do this, you will need the course invitation code which I will email to you. the cost is going to be $36.00 and will give you access to 5 amazing titles for the length of the class. I the email address that you would like the invitation to be sent to; for some of you, that may be your sheridan.edu email account, for others hotmail, yahoo, or gmail accounts. Please let me know which email address you would like the invitation sent to. You can do this by stopping in the lab the first week or by emailing me at dan.alberghetti@gmail.comThis e-mail address is being protected from spambots. You need JavaScript enabled to view it

If you are an online student you will need to secure a copy of Adobe Flash to work with at home (See above: What if I am an online student, and I can’t work with Flash in the lab?). At http://creationengine.com type the word "Flash" into the search box, press search and you will find the current version and price for Flash. Make sure you specify the Windows or Apple platforms. Currently, with a college student discount is $175 http://creationengine.com/html/p.lasso?p=18059 which is a fantastic price considering the list price is $699.

Week 1: Assignment 1 – Get your materials and introduce yourself

  1. Acquire Adobe Flash, or a 30 day trial version, or at least a place where you will be able to use it like my lab in GMB133 – Sheridan College!
  2. Purchase the Lynda.com Curriculum – Contact me in person or with your email address so I can send you the Lynda.com curriculum invitation to your preferred email account.
  3. Read Why Use Flash?
  4. Watch the introductory videos about Flash and the Flash interface at Lynda.com. With your purchased Lynda.com class bundle you will have access to five titles on Flash. Even before you purchase your access Lynda allows public access to some of the videos on every titles. Just go to the lynda.com website look up the title and see which videos are available for free. This week we will introduce ourselves to Flash watch the follwing videos:
    Flash Professional CS5 Essential Training with Todd Perkins. Watch the following tutorials:
       Introduction (all videos)
       1. Getting to know Flash (all videos)
    Creating a First Website with Flash Professional CS5 with Paul Trani. Watch the following tutorials:
       Introduction (all videos)
       1. Getting started (all videos)
  5. Create a user account for yourself at this website, verify your account through your email, login on this site and go to the Forum and post an introduction, telling us a little about yourself.

    Week 1: Assignment 2 – Create a Flash Banner Ad

    Click here to go to "Create a Banner Ad with Flash"

    Due Date: Due at the end of Week 2.
    Zip your Flash file and post it to the Forum
    under: Flash Banner Ad

    Please feel free to get creative with the assignment or use a different banner size orientation.

    {loadposition adposition8}