Week 9: AS3 Part 2 – Loading External Assets

Topics:

• Variables Explained
• Loading External Assets

Variables

A variable in a programming language is a way to store a value that may or may not be known at the time the program runs, and may change over the life of the application. You can store all kinds of values in a variable – numbers, text, true/false values, the names of objects on your stage or objects you create with code. You can also pass variables as function parameters.

A simple variable declaration looks like this:

var variablename:Type;

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 = position;

Publishing Your Flash Projects to the Web

Publish Settings

The publish settings panel has three tabs: Format, Flash, and HTML. Before publishing your final movie, you’ll need each of these appropriately.

Modifying the HTML file

You can edit the HTML file that your Flash is embedded into if you are familiar with HTML and CSS.

Embedding Flash in any Web Page

To embed your Flash movie in another Web page, copy and paste everything in between the <div id=”flashContent”> tags:

<div id="flashContent">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="728" height="90" id="FoodFight_728x90_1_v6_as2" align="middle">
                <param name="movie" value="FoodFight_728x90_1_v6_as2.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#cc3300" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="window" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="FoodFight_728x90_1_v6_as2.swf" width="728" height="90">
                    <param name="movie" value="FoodFight_728x90_1_v6_as2.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#cc3300" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="window" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>

Note: This may look different depending on your version of Flash.

Posting Your Files to the Web

To publish your Flash to the Web, use FTP to move all your files to the Web server. Make sure to upload both your .swf and .html files, and the image files that go with them! If you do not currently have Web space, Citytech students can get a hosting account with Kionic for a reduced price:

http://kionic.com/cuny

Homework

Create a Simple Image Gallery

Using what you have learned today about loading external images, plus the timeline navigation we learned last week, create a simple image gallery using your own images that loads one image at a time onto the stage, and allows you to navigate back and forth through a series of images, as well as jump to the beginning and end, just as you did with last week’s exercise.

Publish your files to your web space. Remember that you must upload your image files as well as your html and .swf files. Also bring your .fla files to class next week so I can look at them if I need to.

Post a link to your HTML file as a comment on the blog.

Final Project

After Spring Break we are going to start work on your final projects. Your final project is going to be an interactive “documentary” project. The subject of this documentary is up to you. I encourage you to pick something you already have some knowledge about, and some passion for. The project can be instructional like a “how-to” or more informational. You don’t have to do anything for the final project yet, but start thinking about it.