Tuesday, Sept. 25 – Lab Day + Begin Banner Ad

We made great progress on our logo animations last week. Today is a lab day to refine, and continue working on them.

If you get to a good place with your logo… begin your animated banner design. (See below for specs)

To keep up with the “industry standard” we are going to follow Yahoo Ad Specs for this portion of the project. You may choose any size within the “Standard” banners. Choose one that suits your needs for your particular company and vision for the ad.

Your banner should include your logo but show additional elements of text, image and information about your company. Try to incorporate an additional image (s) – think of this as an ad for your company. . . What are you “selling”?

Behance

Classic Banners

Timeframe: 24 fps approx 200-400 frames

Kinds of Banners: 1. Simple 2. Expandable 3. Take Over 4. “Blocked Ads”

We are sticking to a simple ad at the moment… if you feel ambitious, see Chapter 8 for help with an Expandable ad.

Ads Best Practices (Taken from Chapter 2 – Flash Banners on lynda.com)

1. Clearly define goals (click or engage?)
2. Stick to publisher requirements (technical specs, size, etc.)
3. Keep optimization in mind (beautiful graphics vs. file size.)
   1. limit number of images
   2. optimize images before importing into Animate
   3. optimize your Animate file during and at the end of development
   4. avoid zooming or panning bitmaps
   5. use vector instead of bitmaps (smaller in file size)
   6. use simple fonts
4. Have a clear and prominent call to action (“Click Here for more”) – higher chance of
5. Call to Action should be in the beginning of animation
6. Use a border to separate it from the website it is appearing on
7. Maximize “hot spot” surface area (User should be able to click in a large area)
8. Keep flow going, keep users engaged
9. Pay attention to close buttons

Goal: provide content in simple ad design

Watch this video Best Practices for Flash Banners – focusing on Chapters 1 , 4 and 5. (1.5 hours)

In class demo: Setting up a Flash Banner Ad and using Templates

ActionScript for Navigating to a Webpage when you hover over ad: (See Ch. 4)

Reminder: Watch this in class: CLASSIC Tween VS. MOTION tween (6 min) and Adobe

Troubleshooting:

Fixing ActionScript3.0 Errors – FAQ (or try Googleing your “error”) Writing actions can be extremely tedious and the code has to be EXACT in order to work.

 

 

Advertisements

Tuesday, Sep. 18

Hello students,

Last week we spent a lot of time working on your logo in Photoshop/Illustrator and did a very basic Animate CC intro.

Today we are going to complete your logo file set up animation. Remember that this is an intro project to get you comfortable with the basic principles in Animate. Create logos that are showing simple animations that move, rotate, reflect, transform, scale, etc.

Key words to remember: 

Timeline: Where you designate what kind and for how long you want your animation to be. Divided into layers. Each animated object should be its own layer!

Keyframe: The place where you want something to happen

Motion Tween: Setting properties for an object for continuous motion animation or transformation of an object. Motion tweens appear in the Timeline as a continuous span of frames that can be selected as a single object by default. Motion tweens are powerful and simple to create. And here

Symbol: Lynda: Animate CC

Frame Rate: The speed the animation is played at, measured in number of frames per second. A frame rate that is too slow makes the animation appear to stop and start; a frame rate thats too fast blurs the details of the animation. A frame rate of 24 fps is the default for Flash, giving the best results on the web.

Great 20 min video on Animated Logo – Also great for illustrating “erasing” frame by frame by “breaking apart” text

Another on HTML5 Banner Ad

Frame by Frame vs. Motion Tween Animation

GENERAL HELP from Adobe.com 

Importing from Photoshop or Illustrator

Remember: Your Illustrator files are set up slightly differently by default. I will show you how to “Modify, Timeline, Distribute to Layers” within Flash.

Tweens: courtesy of Adobe.com

I will be demonstrating the following:

Additional Instructions from Adobe

1.Create new Animate CC document – HTML5

2.Importing .Ai or .PSD to Stage

3. (If Illustrator: Modify, Timeline, Distribute to Layers)

4. Select all Layers. Click on frame 100, Insert Keyframe.

5. Now your file is set up to start animating each layer separately within the 100 frame timeline for your animated logo. (Repeat this process for your banner as well)

6. I’ll also be showing you how to alter your created motion tweens in the Properties Panel (color effects, ease, orient to path, etc)

Keep in mind the general process of :

1. Making a Symbol 2. Inserting Keyframe 3. Creating Motion Tween

 

Dont do a lot of effects, glows, gradients in your Photoshop/Illustrator files – Animate tends to have trouble converting them and this effects how your layers will import. 

 

 

Tues, Sep. 11: Intro to Animate

Hey students,

Last week we had a great discussion regarding the History of Animation as well as you created fun and fast flip books.

What IS Animate???

What IS the Timeline?

This week:

Commercial Animated Project:

Animated Logo + Animated Banner 

Logo: 700 x 700 (approx)

Web Banner Ad Specs: 728 x 90.

Frame rate: 24 fps.

Tentative DUE DATE: Oct. 2

Technical Demo: Intro to Animate interface, keyframes, tweens, etc.

We will have extensive lab time today for beginning your logos, etc in Photoshop or Illustrator. Be ready to work! 

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

1. Creating Animations in Flash,

2importing-to-flash + video: Importing assets from Photoshop or Illustrator to Animate

3.Frames FAQ

I’ll be doing some demonstrations in class. .. and then we will talk about your plan of action for your Commercial Animated Project

Here are some great links to start our discussion

Animated Logos: HOW Magazine

Dribble: Animated Logos

Love this handwritten logo animation

Dynamic Branding Campaign

This is a beautiful example of the animation process

For your animation:

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?

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 an animation comprised of 250 frames.
6. Save two versions of your file: .fla and .swf

We will have a couple of weeks to work on these animations. Make it great! Get acquainted with Animate!

Sept. 4: History of Animation

 

This slideshow requires JavaScript.

Gertie the Dinosaur – (1914) First “cartoon” to be made using keyframe animations. Over 10,000 drawings on paper were made to create this 13 minute film.

Edward Muybridge

Simple thaumatrope – a simple optical illusion working with the principles of Persistence of Vision (is the commonly used term to describe the optical illusion whereby multiple discrete images blend into a single image in the human mind and believed to be the explanation for motion perception in cinema and animated films.)

Flip Books: 

Juan Fontanive

Flip books with secret compartments

Flip book

Contemporary Examples of Artists using Historical Animation Techniques:

Zoetrope

Matt Collishaw: this is unbelievable. We exhibited a work by this artist at the gallery I also work at and I was blown away by the amount of detail, technical skill and historical references. Amazing.

Phonotrope

Lecture: History of Animation + short videos

In class mini assignment: Create a basic flip-book

Discussion: 12 Basic Principles of Animation + animation vocabulary + Illusion of Life

Homework: Watch these videos:

1. What is Animate?
2. Learning the Timeline
3. Importing from Photoshop or Illustrator

Next week I will do some intro to Animate technical demonstrations as well as we will discuss the parameters of our first project: the Commercial Project. Start thinking about the components of your Commercial Project (logo, web ad, banner)… we will build them in Photoshop/Illustrator.

We are doing great so far!

Homework: 12 Laws of Animation/Motion

Hello students:

Please read/watch the following:

12 Principles of Animation through Disney

12 Principles, HOW

Key terms: slow in and out, arcs, overlap and follow through, squash and stretch, anticipation, exaggeration, staging.

and check out this article and links including Wiki

We will discuss these videos and principles next class  – use your week to observe and take note of how objects move around you!

Download notes BASIC LAWS OF ANIMATION

The Illusion of Life examples

Basic Principles example number 2

Adobe.com animation basics

 

Welcome back! Happy new semester.

Above animations from Florian de Looji

Hey students.. Let’s fall into action with animation this semester! 

I’m thrilled to be teaching this course as we work our way through the history of animation, learning how to generate frame-by-frame motion and paths, adding sound to our animations, using grids to design the stage, using the 5 basic questions to guide our design process and applying animation effects to objects.

In this course, we are focusing on using Animate for our animations. We will use Photoshop + Illustrator and import as symbols. We will cover both the conceptual + technical skills and requirements of animations.

Please click here for our syllabus and always refer to this blog for our assignments, video tutorial requirements and due dates.

Things to go over today:

1. Syllabus
2. Schedule (see below)
3. Introductions + special interests
4. Adobe Tutorials
5. Homework: 12 Laws of Animation

This is our tentative schedule – but again, absolute deadlines + assignments are always going to be posted here. So check back regularly as I build this site.

WEEK ONE: Syllabus, intro, introductions, online tutorials, blog, HOMEWORK.

WEEK 2: HISTORY, STORYBOARDING, THEORY. Two intro projects: Thaumascope and flip book Homework: online tutorials

WEEK 3: Wireframe, mockup, begin + tutorial videos (Animate)

in class lecture: commercial project

in class lesson + technical demo: intro to Animate + creating effects

WEEK 4, 5, 6: COMMERCIAL PROJECT: logo + web ads + banner

Using Photoshop/Illustrator + Animate.

WEEK 7, 8, 9: ARTISTIC PROJECT: Animate your favorite painting: Make an object come to life, jump, simple things by using the drawing tools + onion skinning in Animate.

WEEK 10, 11, 12, 13, 14, 15: CHARACTER PROJECT: Character Animation with Action Scripting. Creating and Editing Bones

Walk cycles

 

This slideshow requires JavaScript.

List of Flash/Animate animated television series

Fun videos to watch: 

Frame by frame on gallery wall

Paper animation

11 Paper Place (created on Blender, the open-source 3D animation suite)

Google Doodles

Flash in logo design – 50 Flash Logo Animations in 3 minutes

This might be my favorite absurd animation of all time: GIRAFFES

HOMEWORK: See next blog post + bring a good pen and a small post it pad.

Final Portfolio / Critique Day

Requirements for Final Critique Day: Monday, April 23

BEGINNING OF CLASS CRITIQUE  on your Character Animation Project AND hand in of your final portfolio files.

No exeptions. No time to save files. Walk in, on time… be ready or points will be deducted from your final portfolio grade for lack of professionalism. (10 points will be deducted for failure to meet this beginning of class deadline)

Critique will begin promptly at 8:30 a.m.

Final Portfolio Requirements: (This counts as your Final Exam)

Animation Projects:

Your folder of files should have the following projects saved with all accompanying files – Each project should have a .fla file and a .swf file in the folder.

Please label the folders as follows:

1. Commercial Animation Project – logo + banner
2. Creative Animation Project
3. Character Animation

Design Statement:

1-2 page (typed) designer statement answering the following questions in paragraph format: (save as designstatement.docx in your folder)

What did you learn this semester? (Technical + conceptual)

How is your view of animation  and Animate different after taking this class?

What aspect of the animation process did you enjoy the most/the least?

Is there anything specific that you would have liked to have gone over?

How can you improve your design skills for the future?

What do you see as the future of animation?

How can I improve http://www.professorhopkins.com? Do you use it?

Anything else you would like to tell me?

FINAL CRITIQUE WILL BE ON Monday, April 23

Also – if you have changed any of your projects, please list what you have done to improve them within your Designer Statement so that I know you made changes.