Topics:

• Loading External Assets
• Using Tweens and Transitions
• Third Party Libraries: Tween Lite

>>Example files

Loading External Assets

As you could see from the banner ad exercise, file size adds up quickly when you are bringing graphics into your library. Even if you don’t have the kind of size restrictions that the banners do, an overly large file is going to take forever to download and start playing in the viewer’s browser. One way to minimize this is to load the assets as you need them when the Flash movie is playing. This is similar to the way you include images in a Web page. It also means that you have to upload those images to your Web server along with your swf and html files in order for them to load and display.

Step 1: Create the Loader

You can load images (jpeg, png, or gif only) or other swf files. First you need to create a container to hold the image you are going to load. This container is a special object called a Loader. This is how you create a loader:

var myLoader:Loader = new Loader();

In this example, “myLoader” is a variable Name that you decide, everything else is set.

Step 2: Add the Loader to the Stage

When we create an object like this with ActionScript 3, it doesn’t automatically add that object to the stage. Adding the loader is simple:

addChild(myLoader);

Even though the loader is now part of the stage, you won’t see it. Loaders have no appearance of their own, they are just an empty container to put things into.

Step 3: Identify the asset to load

Next we need to create an object to hold the path to the image or swf that we want to load into the loader. This object is called a URLRequest.

URL stands for “Uniform Resource Location”, which is just a fancy way of saying Web address. In other words, URLs are what you see in the address field of a Web browser. The URLRequest is going to show the path to the asset on our local machine or the server.

There are two ways to represent this path, relative or absolute.

In an absolute path, you give the full address on the local machine or Web server: http://www.domainname.com/subdirectory/filename.ext

In a relative path, you only give need to give the path relative to the swf file the image will be loaded into: subdirectory/filename.ext

It’s best to use the “relative” path to the asset, because this will be the same when you are working on your local machine as when you publish to the Web server. To simplify things and stay organized, keep your assets in a subdirectory (folder) in the same directory (folder) as your Flash files.

So, if you had an image called “my_image.jpg” in a subdirectory called “images” the relative path to it would be “images/my_image.jpg”

You create the URLRequest like this:

var myImage:URLRequest = new URLRequest(imagePath);

In this example “myImage” and “imagePath” are variables. You can either put the image path directly in to the parentheses after URLRequest or create another variable to hold it.

Step 4: Loading the Asset into the Loader

Now that you’ve created the empty container, and identified the asset to go into it, it only remains to load one into the other:

myLoader.load(image);

If you test your movie, you will now see it on the stage. Here’s a couple things to note about the loader object:

Positioning Loaded Content

The loader is placed at the 0,0 coordinates on the stage, so you may want to reposition it. You can do this by accessing it’s x and y properties:

myLoader.x = xposition;
myLoader.y = yposition;

Scaling Loaded Content

The image is loaded into the the loader at 100%. You can scale with code with the scaleX and scaleY properties, but like importing into the library, it’s better to resize it outside of Flash. The larger the asset is, the longer it will take to load, and you don’t want to make the viewer wait around unecessarily. The scale property is a percentage expressed as a decimal between 0-1, so .5 represents 50%. You can scale above 100%, but you’d be blowing a bitmap up larger than its pixel dimensions, which is never recommended!

myLoader.scaleX = myLoader.scaleY = yposition;

Now let’s look at an example that puts the loading code into a function so that you can reuse it for multiple loaders. This will help you get started on the homework:

Tweens

The Tween class allows you to animate the same properties you could using a Motion Tween on the timeline:

Tween Reference

Now, with these objects, for the first time we are using Flash packages that are not automatically imported when we publish the file, so we have to do that first:

import fl.transitions.Tween;
import fl.transitions.easing.*;

Transitions

There are a number of transitions designed to bring content on or off the stage in the fl.transitions package. The Transition Manager class allows you to access these transitions:

Transition Manager Reference

Homework

Create an image gallery / slideshow that does the following:

• Loads at least 10 external images
• Automatically loads a new image every 10 seconds (slideshow)
• Stop button to stop the slideshow
• Play button to play the slideshow
• Has buttons or some other navigation element to move to the previous and next images, one by one

Extra credit: Add either a tween or a transition to switch between images