Create a Preloader in Flash CS5

{loadposition adposition4}

Overview

In this series of video tutorials, I add a preloader at the beginning of the Flash timeline, a "skip intro" button to allow the user to bypass the introductory animation by taking him/her to the end of the animation, and an external loader, added to the end of the timeline, which will load the actual website.

Video Tutorials

In this part, I add a preloader to the Flash intro movie

 

{loadposition adposition9}

In this part, I add a "skip intro" button to the Flash intro movie

 

{loadposition adposition10}
 

In this part, I load an external Flash movie (website) from the intro movie using contentLoader in Actionscript 3.0

{loadposition adposition8}

 

Week 8 – Preloaders and Loading External FIles

Overview

Last week we created an intro animation that users will see before they get to our website. Now we need to make it work by adding these elements:

  1. a pre-loader at the beginning of the intro movie (we will look at a couple options)
  2. a button to skip the intro and go straight to the website
  3. the code to load the actual website once the intro movie is finished

Lynda.com – You can get even more information on how to do these important Flash techniques from the Lynda.com video tutorials that are available to you. I recommend watching the series by Paul Trani, "Creating a First Flash Website with Flash Professional CS5". It is a great series of videos for beginners and he covers all of the necessary pieces to get started with Flash CS5. 

Week 8 Assignment – Create a pre-loader to pre-load the intro movie and then pre-load the actual website homepage. Go here for my video tutorial on this assignment: Create a Preloader in Flash CS5 

Turning it in:
Due Date: End of Week9
You will need to zip your entire web site folder with all the files, and send it to me as an email attachment.


 

Create a Flash CS5 Intro Movie with Motion Graphics and Images Fading In and Out

{loadposition adposition4}

Overview

{loadposition adposition5}Many Flash sites start with an introductory animated sequence designed to entice the user and show off multimedia content. Usually the user can opt to skip the intro if he or she has already seen it. Usually by clicking a button that loads the actual Flash website. In this assignment you will create a Flash intro animation that will then load the actual Flash website. Along the way, you will learn and utilize many Flash animation techniques and methods

{loadposition adposition9}

Step by Step Video Demonstration

Note: You will need to provide your own graphics, logo, photographs (jpg, png) to create an introduction to your own website.


In this video I start animating objects with Motion Tweening and the 3d Rotation Tool

 

{loadposition adposition8}

In this video I focus on controlling the frames and adding easing

In this video I use alpha transparency and a glow filter effect

 {loadposition adposition4}


In this video I control the keyframes and add images that fade in and out
 
 

  {loadposition adposition8}

Week 7 – Create a Flash Intro Movie

Overview of the Semester Final Project – A Flash Website

We need to start working towards the final goal of creating an entire website using Flash. Flash is a very deep program so there will always be things to learn bit-by-bit along the way. We also need to learn about motion tweening and classic tweening because they will help make our Flash website more exciting by adding motion graphics.

Week 7 Assignment – Create a "Flash intro animation" as a precursor to our Flash website project.

Many Flash sites start with an introductory animation sequence that the user can skip if he or she has already seen it. Usually by clicking a button that loads the actual Flash website. In this assignment you will create a Flash intro animation that will then load the actual Flash website. Along the way, you will learn and utilize many Flash animation techniques and methods including:

  1. Motion Tweening
  2. Classic Tweening
  3. Motion Paths
  4. Easing
  5. 3d Rotation Tool
  6. Alpha Transparency
  7. and more… 

Remember – The Flash intro animation that you make in this assignment will lead into your Flash website which is the main project for the rest of the semester. So think about what kind of a website you are going to make. It could be a personal site, a business site, a fan site, a humor site, a portfolio site. If you have an idea of the site you are going to make then it will help in making the intro animation…

If possible try to use your own non-copyrighted images and graphics.

Click here to go to the Assignment: Create a Flash CS5 Intro Movie with Motion Graphics and Images Fading In & Out

Turning it in:
Due Date: End of Week 8

Send me your Flash file as an email attachment.

Animate a Character with Blinking Eyes in Flash

{loadposition adposition4}

{loadposition adposition6}Overview

Flash is a great tool to create vector based animated characters. You can use Flash’s built in vector drawing tools to create rough cartoon characters or really advanced graphics like in the example to the left. Notice how all of the characters lines are shapes with varying widths and tapered dagger ends. Notice how the colors of the face have three tiers from light to shadow. The animator has taken care to make sure the blinks are not happening too often. 

What about animation? Since Flash movieclips have their own timelines they are perfect for creating blinking eyes that will blink on a loop every few seconds. In this assignment you will learn how to do it!

Video Tutorials – Animating Blinking Eyes

In these videos I create a blinking character in Flash. It is a good exercise because many of the basic aspects of animating in Flash are covered: movieclips, timelines, nested movieclips, nested timelines, keyframe animation, looping an animation and controlling timing. 

 

{loadposition adposition9}

 

 {loadposition adposition8}

 

 

 

{loadposition adposition10}

 

Why Use Flash?

Why Use Flash?

Flash has been the premiere tool for creating interactive multimedia on the web for over ten years. Flash can be used in many different ways, for a variety of purposes. Flash’s initial success came from the incredibly small file sizes of the Flash movie file format while still being able to deliver clean graphics and animation. The Flash Player also benefited from being a relatively small download compared to other players like Shockwave and Quicktime. Soon after, Flash became the tool of choice for creating games for the web and Flash’s native scripting language Actionscript has seen 3 major iterations over the years. In the last 5 years, Flash surged in popularity again due to its ability to stream quality video through the .flv format. and the Flash Player. 

Flash used in motion picture sites:

http://www.hellboymovie.com/main.html

http://thedarkknight.warnerbros.com/

Flash is viewed in movies (“.swf” files) that are linked or embedded into web pages. Sometimes the Flash movies can be very small like the small Flash movie that shows Flash Video (“.flv” files) at http://www.espn.com or it can be a large Flash movie that takes up the whole web page like the Flash movie sites listed above.

In order to view Flash movies you need to install the Flash Player by visiting http://www.adobe.com and downloading it. Flash can play in most major browsers including Internet Explorer, Firefox, and Safari. Once you have the player installed you can view Flash content.

Recently Flash has revolutionized the web again by being the most impressive tool in delivering video over the web. Flash’s speed is due to its small file sizes (.swf and .flv files), and by streaming the video (allowing video to start playing before having been completely downloaded). Flash is extremely customizable (components) with a large assortment of built in tools and a robust object oriented scripting language (Actionscript).

Flash video used in major sites:

http://www.youtube.com

http://www.cnn.com

As a purely narrative animation tool Flash has been impressive since its inception. Flash was able to create motion graphics and animation with smaller file sizes through the use of frame based vector graphics while still retaining the ability to work with bitmaps. Many 2D cartoons on major networks use Flash to create their animation.

Flash narrative animation on these sites:
http://www.ninjai.com

http://www.homestarrunner.com/

TV shows done with Flash:

Mucha Lucha!
Little Einsteins
Metalocalypse
Harvey Birdman, Attorney at Law

Flash has been used to deliver political humor in an interactive multimedia format on sites such as http://www.jibjab.com and http://markfiore.com. As an educational interactive multimedia tool on sites such as http://www.sesamestreet.org.  large percentage of games on the web have been done with Flash.

Flash Games are on these sites:

http://www.newgrounds.com/game/

http://www.addictinggames.com/index.html

Week 6 – Video to Photoshop to Flash

This week we are going to use digital video and Photoshop to help us on the way to creating fantastic Flash content. As well as drawing vector graphics Flash can import all kinds of content like video files (.mov, .avi and .mpg), image files (.jpg, .tiff, .gif and .png), and sound files (.mp3, .wav, and .aiff). This assignment will ask you to create a video, edit it in layers in Photoshop, and bring it into Flash to animate it and add effects. Everything you need to know is in the Week 6 Overview. If you don’t have Photoshop, then I suggest you go to Adobe.com and download the 30 day trial.

Here is an example of video imported to layers in Photoshop
and then the Photoshop file is imported into keyframes in Flash: