Flash Animation

Hello students,

Welcome back! Today we will start our animation portion of our mulitmedia explorations!

I have created a few handouts on creating basic animations. Please look at them

1. Creating Animations in Flash,


3. Motion Guides  (Myrna and Kim, thought you might be interested in this)

4.Frames FAQ

I’ll be doing some demonstrations in class. .. and then we will talk about your plan of action for your Animated Logo or Animated Web Ad Banner. (Your choice)

Here are some great links to start our discussion

Elro Portfolio

Banner Design

Basic Ad Banners

Basic Ad Banners

Animated Logos

For your animation:

I want you to imagine that this banner ad/animated logo is part of your product’s exisiting advertising.  Things to pay attention to:

  1. Color scheme – this should be unified with your overall branding campaign.
  2. Typefaces already used by your company.
  3. The style of copy used.  What voice is the writing in?
  4. Who is your audience who uses the product/your services?

Web Banner Ad Specs: 728 x 90. Frame rate: 24 fps.

Pre-visualization Steps:

  1. Determine your overall concept for the advertisement.  What aspects of your product do you want to communicate?  What will your copy (or text) say? What are some adjectives you could use to describe your product?
  2. Start a storyboard mockup.
  3. Import previously made graphics from Photoshop or Illustrator
  4. Begin altering keyframes and creating tweens!
  5. Create a 10-second animation
  6. Save two versions of your file: .fla and .swf

We will have a couple of weeks to work on this animation. Make it great! Get acquainted with Flash!

p.s. The above YouTube clip is a flip book of one of the earliest pioneers in stop-motion photography, animation and motion pictures: Eadweard Muybridge. Also take a look at an early animation device, the phenakistoscope! GIFS of Phenakistoscopes and another  (Historic multimedia?)

Friday, Oct. 18

Today is a lab day to complete the front page of your website, design your Interactive PDF and catch up on any other components that need tweaking.

Next week we will start the Flash component of your semester long multimedia branding campaign.

To get ready for this, please watch Flash Professional CS6 Essential Training and gather 10 examples of flash web ad banners or flash logos that are inspiring to you. Look for components that you can see incorporating into your own flash animation – for example, timing, overall aesthetic, color scheme, use of texture, line, etc.

Keep up the good work!

Friday, October 10



Screen shot 2013-10-10 at 11.56.59 AM


Today is another work day – get caught up!

You should be finishing your website design today and starting your Interactive PDF.

See last week’s posts for some tips, links and lynda.com video to watch.

Requirements of Interactive PDF:

1. 2-pages (the front page can be your logo only or logo + mission statement, etc)

2. Email links

3.Hyperlink to your webpage

4. Interactive buttons from one page to another (or to submit a form)

5. A form

We are going to brainstorm as a group what the best end result would be for your individual branding campaigns for your companies. For instance: Kimberly and Jorge might want a menu or delivery ordering form; Jesse might want a “Fill out your shipping label” form; Patrick might want a form to submit artist materials; Myra – a membership form?; and Christina a form to submit your own jewelry designs?

These are just ideas…

Other options: Linking to your social media page – remember, anything can be made into a button!

Be sure that your Interactive PDF is still functioning within your branding campaign. Be sure to create unity through typography, color scheme and your loog. Don’t forget to keep your mission statement and demographics/audience in mind at all times!

Friday, Oct. 4

This slideshow requires JavaScript.



1. LAB day for Dreamweaver Website Design.

2. Group Brainstorming session on your options for your Interactive PDF.

3. One on one help with your specific Dreamweaver questions.

Links for Myrna (Search bar code help): Adobe

How to make your site “search-friendly” Layers Magazine

Consider adding a Google Custom Search to your website

“Insert New Fluid Grid Layout” – beginning of Responsive Web Design

Discussion: Responsive Web Design: shifting layout around depending on what Columns get smaller, but retain the same proportions. Read this article in A List Apart

1. Fluid grids – grid based design, consistent column and gutter width.

2. Media queries – style sheets

See The Boston Globe for a great example at a website that changes layout for different screen formats.

Tutorial for Responsive Web Design and using Fluid Grid Layouts

and another

Coming up next: Starting to develop your Interactive PDF for download.

This should act as a 2-paged PDF with buttons, forms and interactive contact information for a prospective client. Your PDF should give the viewers more than just a typical reading experience, with interactive buttons, form fields to fill out and more. They are easy to read, distribute and access on multiple devices.

You should watch the following Lynda.com video: InDesign Insider Training: Interactive PDFs before you begin.

Keep working, you guys are doing a great job so far!