Setting Up The Movie And Timeline

Setting Up The Movie And Timeline

Start off by creating a new ActionScript 3.0 Flash movie, I have used the default settings for a 550x400px canvas size, 12fps for the framerate and white for the background. You may change these as you please by accessing the Properties Inspector on the bottom of the screen.

         

We are now going to set up our timeline, the timeline is the controller of our Flash movie and it has frames and layers. At each instance, Flash can show one frame at a time just like a film frame. More than one layer can be put in each frame the same way an image is composed in Photoshop. We are going to create several layers on our timeline to make our content organised. Use the Insert Layer button to add 3 more layers to your timeline.

  

You should end up with 4 layers, double click the label of these layers one at a time to rename them Background, Buttons and Title, Content, and Action from the bottom to the top to end up with something similar to the image below. Each of our layers will hold the content type specified on its label.

    

Our movie and timeline is now set. We are going to add content to each of our frames in the next section of our tutorial.

Creating All Graphical Content For Our Website

Our website is going to have a preloader and four sections. Each of these is going to be located on a frame by its own on the timeline. Some of the layers of our timeline are going to have different key frames in each of these frames, while some will share the same content on several frames (e.g. the background). We are going to go in to more detail next as we work on these frames one by one.

We are going to start off with our preloader first, this frame is only going to have the text "Loading" and it will remain there until the website finishes loading. To do this, click once on the layer labeled Content then pick the Text Tool and write Loading in the middle of the stage.

We are now going to write the code for the preloader, click once on the Actions layer and then right-click it and select Actions to open up the Actions panel. Paste the code below to program the preloader.

That completes our preloader part, close the Action panel once you are done to go back to your movie. We are going to start now working on the rest of the website. We will start off now by adding the background. You can use our background here to follow the tutorial. Simply right-click this image and select Copy, we are going to paste it in Flash later.

Back in Flash, we are going to work on our website sections now. We will put content from the bottom up in accordance to our layer structure. The first layer from the bottom is the background. Right-click the second frame in the Background layer and select Insert Blank Keyframe, this should create a blank keyframe that differs in content of frame 1. Our background is going to be the same in all of our website sections, so we can have the same keyframe span across all the sections. To do this Right-click the fifth frame of the background layer and select Insert Frame to make our keyframe expand across to this frame. You should end up with something similar to the image below.

To add the background to this part of our website simply now right-click the stage and select Paste (assuming that you have copied the image above!), your background should be positioned at the right place and it should span across the 2nd, 3rd, 4th, and 5th frames of your timeline. We are done working with this layer, so click on the Lock point on your layer label to prevent any changes to this layer.

 

Moving on to the Buttons and Title layer, we are going to add in this layer both of these things. Just like the Background layer, the Buttons and Title layer is going to remain the same for all the sections of our website, so we will just need one Keyframe that spans across the four section frames. To create that frame simply right-click the second frame of the Buttons and Title layer and select Insert Blank KeyFrame, this should create a blank keyframe that differs in content of frame 1. To make the content of this new frame remain the same for all of our upcoming frames, we can simply right-click the fifth frame of this layer and select Insert Frame to make the frame expand all the way up to this frame. You should end up with something similar to the image below.

It is time to put content in this layer now. Click on the name of the layer once to make sure that you are adding content to it. For the buttons, we are going to use the Button Component. Component are little smart Flash objects with built-in functionality. To get an instance of the Button Component go through Window>Components to open up the Components Panel. Look under the User Interface category to find the Button Component and simply drag and drop an instance of it onto stage. Repeat the drag and drop three more times to get four buttons in total on stage similar to the ones you see in the image below.

We will need to change the labels of our buttons and assign to them Instance Names in order to be able to manipulate them via ActionScript. Starting with the labels, select the first button on the top left, then access the Properties Inspector and click on the Parameters tab to edit the parameters of the component. Simply click once on the Label field to rename the button, label the first one Home, you can assign the instance name to it by filling the field on the left side of the Parameters tab, assign the instance name home_btn to this button.

An Instance Name is a reference to an object that can be used to manipulate this object using ActionScript. Instance Names in ActionScript are case-sensitive and cannot start with a number. You can learn more about Instance Names by reading our tutorial on Variables and Data Types.

We need to repeat the process to each of our three buttons, label each of these buttons About, Links, and Contact, and assign the instance names about_btn, links_btn, and contact_btn respectively. You should end up with your buttons labeled in the following manner and with the proper instance names assigned to them.

The final thing to add to this layer is the title of the website. Use the Text Tool to type something above your buttons, I wrote My Super Simple Flash Website. You can write whatever you want and use whatever font you wish to use here.

We are done working with this layer, finish it off by locking it.

We are going to add the actual Content to our website and we will do that frame by frame. Unlike our previous two layers, this layer is going to have different content in each of the frames. We are going to achieve this by creating a separate keyFrame in each of the frames of this layer. We are going to start up with first section of our website, the Home page. To begin editing clicking once on the name of the Content layer to ensure that you are editing this layer, then right-click the second frame on the layer and select Insert Blank KeyFrame. Once you do that you can use the Text Tool to write an introductory text for your website.

   

Adding content to the other sections goes in the same way, right-click the next frame and select Insert Blank Keyframe, then use the Text Tool to write something on that page. You can put any sort of content in this frames whether they are vector shapes, bitmaps, text of whatever.

 

We have done the Home and About sections, repeat the process we did above to do the Links and Contact sections. Your timeline should end up with all the Content layer filled up the way it does below.

The final step to complete all of our content assets is the frame labeling process. Labeling frames is not necessary for navigating through a movie clip using ActionScript as you can use frame numbers, but using labels makes thing much easier because you do not need to figure out what the frame number is. We are going to put the labels on the same frames as our content. To label the first actual frame of our website which has the 'Home' content, simply click on Frame 2, and then access the Properties Inspector and type Home as the Frame Label.

 

Repeat this process for all the other frames, label them About, Links, and Contact. Once you are done you should notice a red flag icon on each of your labeled frames, this simply means that this frame has a label.

All of our content is now set and ready for us to make it come to life using ActionScript 3.0.

Coding The Website Using ActionScript 3.0

We are going to attach all of our code to a single new keyframe on our Action layer, click once on the Action layer and then simply right-click the second frame on the Actions layer and select Insert Blank KeyFrame. Right-click this frame and select Actions to open up the Actions panel and start coding.

Our code is going to have two main tasks (1) stop the movie from playing endlessly, and (2) make the buttons move to different frames in the Flash movie.

Tools

Tools Overview

     

               

Stroke

In flash, a shape is made of two parts, the stroke and the fill. The stroke is the outside border around the shape. You can change its color by clicking the color block next to the pencil icon.

                     

Fill

The fill is the inside "guts" of the shape; the stuff that fills in the borders that the stroke has defined. You can change the color by clicking the color block next to the paint bucket icon.

                    

Drawing a Circle

To draw a circle, hold down shift while you drag with the oval tool. A circle, or any shape, is made of a stroke around the outside and a fill in the inside.

Drawing a Line

Hold down shift while dragging with the line tool to keep it perfectly horizontal or vertical. A line is a stroke without a fill

Colors

Once you have clicked the color block next to the appropriate icon, you will be given a Palette of colors to choose from. You can either pick a color or type the proper Hexadecimal Code in the white box. If you want the color to be clear, then choose the white color box with the red stripe through it. We will be using black for all drawing lines, and blue (#0000FF) for all construction lines, as in the TepConventions.

                          

Stroke Width

We now know how to draw a circle, how to distinguish between the stroke and the fill, and how to change the color of either. Now we'll learn how to change the width of a stroke. For our animations, we want the stroke to be hairline width.

In FlashMX

To change the stroke width you simply select the stroke and look at the property panel that usually sites at the bottom of your screen. If you cannot find it, you can make it appear by choosing Window >> Properties. You then select the type of stroke and thickness from this panel.

    

In Flash 5

In Flash 5, select the stroke and then choose Window >> Panels >> Stroke. In the Stroke Panel, you can change the stroke type and thickness:

                      

Rotating

There are two ways to rotate a shape in Flash, free rotation by hand or numeric rotation by typing in numbers.

Free Rotation in Flash MX

In Flash MX, you use the Free Transform tool (below the pencil) from the Tools Palette. Select the tool, select the object, then drag it to rotate.

                   

Free Rotation in Flash 5

In Flash 5, once you select your object, a rotation tool will appear at the bottom of the tools palette:

                

Numeric Rotation in Flash MX

Choose Window >> Transform from the menu on top, then type in the number of degrees you would like it to rotate.

           

Numeric Rotation in Flash 5

Choose Window >> Panels >> Transform, then type in in the number of degrees you would like it to rotate.

        

Alignment

Often, you will need to space or align your shapes evenly on the screen. This is very difficult to do by hand, but very easy to do with the Align Pallette. You must first select both object that you wish to align, and then click the appropriate icon in the Alignment Pallette.

In Flash MX, you will find the Alignment Pallette under Window >>Align.

In Flash 5, you will find the Alignment Pallette under Window >> Panels >> Align.

If the icons don't make sense, play around with them to get an idea of what does what. In the example we are aligning the two objects along their center lines:

             

This covers the basics of drawing in Flash. If you have any questions please let me know

Archive for the 'Flash Tools' Category

Flash Player 10 FileReference Changes

In this post I hope to address some of the concerns raised by Keith Peters in his recent blog post. In the post Keith brings up some existing applications that will be broken because of the new security enhancements to the FileReference class. I for one had no idea that this issue existed so thanks to Keith for bringing it up. Let’s first take a look at exactly what has changed.

In previous versions of the Flash Player, you could programmatically call the FileReference.browse method to open a file browser dialog window which enabled users to locate a file on their system so that it could be uploaded to a server. Many existing applications use this feature including various WordPress and Flickr uploaders. In Flash Player 10 you can no longer spawn this dialog window programmatically and it must be initiated by a user click. The attempt to launch the dialog with code will throw a security exception, effectively breaking these existing applications.

There are other important changes in the FileReference class like the new ability to read and write local files. My initial reaction was that the new security features were added because of these new features. But actually these changes were coming anyway due to some existing security concerns surrounding the FileReference class. Let’s a take a quick look at what some of these concerns are. Please bear in mind that I’m not going to go into too much detail about what all the security implications are but rather give a high-level overview.

HTML security guidelines do not allow the opening of file dialog windows without user interaction. The new changes in Flash Player 10 will move Flash in line with general web security guidelines. So why are there security concerns with doing this in the first place? Well for one, developers can do things like repeatedly open the dialog forcing users to choose a file before being able to continue. This can essentially lock the user out of the application. Another potential concern arises from the situation where there are multiple SWF files on the same page from different sources. The user seeing the file dialog window does not necessarily know which SWF spawned the dialog. I will let you use your imagination about how this could lead to some bad things.

These concerns and others have made it vital that we implement the need for user interaction to launch the dialog. So then what will happen to existing applications that rely on the programmatic launch approach? In short they will have to update their applications to account for these changes. That being said, there are some workarounds available for applications that are launching Flash-based uploaders from HTML content. One such workaround is to create the HTML upload button in Flash rather than HTML so that the user will initiate the upload request from Flash. Similarly, another possibility is to overlay a transparent SWF button over the HTML content so that again, the user clicking happens in Flash and not in HTML. We are currently reaching out to partners to help them find the best solution for them.

Keith mentioned some well-known applications that will currently be broken because of the new security features like WordPress and Flickr. If you know of other applications please let me know in the comments section so that we can connect with them to help them find the optimal solution for their application.

After hearing the internal reasoning behind the new security enhancements I think they make total sense. There are just too many security concerns that arise when you allow developers to spawn native dialog windows programmatically. But we will definitely step up our efforts to ensure that existing developers get the help they need to update their applications accordingly.

Using TextMate for ActionScript 3 Development

Over the last few days I’ve been checking out TextMate to see how useful it is for Flash development. I can now report that I’ve found the most versatile text editor in existence. There are so many possibilities with this tool simply because it’s so extensible. I plan on eventually doing a tutorial on using it but for now, here are some things that I’ve learned.

The first step is obviously to download the latest version of TextMate. From there you should download the ActionScript 3 bundle which adds a whole host of templates, commands, and snippets that will help you write ActionScript with ease. This blog post has all the details of installing it. After installing the bundle, you can unleash the real power of TextMate by modifying the bundle and adding your own commands and snippets.

I added a command that allows you to hit Cmd-Enter to automatically save your project and switch to Flash to test your movie. This based on a command in the old ActionScript bundle but I have modified it to fit my needs. You can see the details of how to setup it up in the screenshot below.

         

I highly recommend anyone on OS X to download this editor and check it out as I think I will be doing a lot of my coding in it from now on.

Free SWF Preview Utility

Eltima has released a free tool called SWF Live Preview. It enables you to see preview thumbnails of your SWF files inside of Windows explorer. This is a great timesaver since you don’t have to run every SWF file in a directory to find the one you want. Eltima makes a wide range of Flash-related tools and I will writing reviews of them in the coming weeks. But this is one free tool that will come in VERY handy.

            

CREATING A NEW DOCUMENT

CREATING A NEW DOCUMENT

You can create all kinds of different elements for the web or for CD-ROMs and devices using Flash. First, you create a file in the Flash authoring tool, which you use to output SWF files. SWF files are the files that you can put online when you embed them in a web page. The Macromedia Flash Player plug-in then displays the SWF file, so your website visitors can view or interact with the content.

Your SWF file can contain video, MP3 sound, animations, images, data, and so forth. The benefit of using an SWF file over other formats is that the Flash Player plug-in is incredibly common. Let's get started building a banner:

1. Open the Flash application.

By default, Flash displays the Start Page (see Figure 1), which enables you to select a recently edited document, create a new Flash document (or other kinds of documents if you use Flash Professional 8), or create a new document using a prebuilt template. 

      

 

Figure 1. By default, Flash displays the Start Page when it is launched. This figure shows the options available in Flash Professional 8.

2.  Click Flash Document in the Create New column on the Start Page to create a blank document. If Flash doesn't display the Start Page (the feature might have been disabled earlier if you share a computer), you can select File > New from the main menu to create a new document. Make sure the General tab is active, select Flash document, and click OK. 

 

3.  Select File > Save As from the main menu. Name the file banner.fla and click Save when you're done. Flash saves editable documents as FLA files. From the FLA document, you export (or compile) SWF files that you can embed in an HTML page. Flash Player, installed on most computers, plays the SWF files that you export from Flash. 

It's a good idea to save a new document when you start working with it (and often thereafter) so you don't lose any of your hard work. After you finish saving the file, proceed to the following exercise where you will change the document's properties.

Changing Document Properties

At this point you're looking at a blank canvas surrounded by many controls (see Figure 2). The large white square is called the Stage, and it's where you place assets you want to display in the SWF file, such as images, buttons, text, or animations. The Stage and panels are commonly called the Flash workspace or authoring environment.

 

Figure 2. The Flash authoring environment includes a Stage where you can place and manipulate assets.

Around the Stage you see a variety of panels. The panel on the left is called the Tools panel (see Figure 3). This panel includes tools you can use to create and modify documents, such as tools you use to draw and make selections.

       

Figure 3. Use the Tools panel to draw and make selections. You use the Selection tool (the black arrow) to make selections in these tutorials.

A panel near the bottom of the Flash application is titled Properties (select Window >Properties > Properties if you don't see the panel). This panel is called the Property inspector 

(see Figure 4). This panel enables you to change various properties of whatever is currently selected in your document (such as an image or a frame) or set properties for the entire SWF file (such as the frame rate or dimensions). If you don't have any objects or frames selected, the Property inspector enables you to modify properties for the document itself. 

1. Open the Property inspector (select Window > Properties > Properties) and click the button next to the text that says Size to open the Document Properties dialog box. 

Note: Make sure you don't have a frame selected. Click the Stage if you don't see this button.

          

 

Figure 4. Click this button in the Property inspector to open the Document Properties dialog box. You can then change the size and color of the Stage.

The button displays the current dimensions of the FLA file (550 x 400 pixels). By default the Stage size in a new Flash document is 550 pixels wide by 400 pixels high. When you click this button, you open a dialog box where you can change several document-wide properties (such as the Stage dimensions, color, and document frame rate).

2. Type 160 into the Width text box and 600 into the Height text box.

When you type new values into these text boxes, you resize the dimensions of your FLA document. There is a reason that you need to use these specific dimensions. Because you're creating a banner, you should use a standard banner size. In this tutorial, you're creating a "wide skyscraper." For a list of standardized banner sizes, check out the Interactive Advertising Bureau's page on Interactive Marketing Units.

Note: You can also create banners from a Macromedia template by selecting File > New from the main menu. Select the Templates tab and choose the Advertising category.

3. Click OK when you finish entering the new dimensions to return to the authoring environment.

When you return to the authoring environment, notice how the dimensions of your document change. You can also change the current document's background color and frame rate directly in the Property inspector, without going to the Document Properties dialog box. You'll find information about frame rate in Part 2 of this tutorial.

Remember to save your work (File > Save) before you continue.

Importing Graphics 

When you work with Flash, you'll often import assets into a document. Perhaps you have a company logo or graphics that a designer has provided for your work. You can import a variety of assets into Flash, including sound, video, bitmap images, and other graphic formats (such as PNG, JPEG, AI, and PSD). 

Imported graphics are stored in the document's library. The library stores both the assets that you import into the document and symbols that you create within Flash. A symbol is a vector graphic, button, font, component, or movie clip that you create once and can reuse multiple times.

So you don't have to draw your own graphics in Flash: You can import an image of a garden variety gnome from the tutorial source file. Before you proceed, make sure that you download the support files for this article (if you haven't done so already) and extract the images to the same directory as your banner.fla document. 

1. Select File > Import > Import to Library to import an image into the current document.

You'll see the Import dialog box (see Figure 5), which enables you to browse to the file you want to import.

 

Figure 5. Browse to the folder on your hard drive that contains an image to import into your Flash document.

2. Navigate to the directory where you extracted the support files, select the gnome.png image, and click Open (Windows) or Import (Macintosh).

The image is imported into the document's library. 

Note: You can drag assets from the library onto the Stage several times if you want to see several instances of the artwork. Your file size doesn't increase if you use several instances on the Stage. The SWF file only stores the information of the original symbol or asset from the library and treats each instance like a duplicate.

3. Select Window > Library to open the Library panel.

You'll see the image you just imported, gnome.png, in the document's library.

4.  Select the imported image in the library and drag it onto the Stage.

Don't worry about where you put the image on the Stage because you'll set the coordinates for the image later. When you drag something onto the Stage, you will see it in the SWF file when the file plays.

5. Click the Selection tool and select the instance on the Stage.

If you look at the Property inspector you'll notice that you can modify the image's width and height, as well as the image's X and Y position (also called coordinates) on the Stage. When you select an object on the Stage, you can see and modify the current coordinates in the Property inspector (see Figure 6).

     

 

Figure 6. The X and Y coordinates match the registration point, which is the upper left corner of this random movie clip symbol.

6. Type 0 into the X text box and type 0 into the Y text box. Doing this sets the X and Y coordinates both to 0, as shown in Figure 7. 

 

Figure 7. Set the X and Y coordinates using the Property inspector. Set the X and Y values to 0.

Setting new coordinates moves the upper left corner of the image to the upper left corner of the Stage. You can drag the bitmap image around the Stage using the Selection tool instead of changing coordinates in the Property inspector. You should use the Property inspector when you need to set a specific position for an object, as you did in this step.

Remember to save the document before you proceed to the next exercise.

Note: You can also import sound files into your FLA documents. This isn't covered in this tutorial, but you can find out more information if you do a search on "importing sounds" in the Help panel (F1).

Introducing Layers and the Timeline

The Timeline panel is above the Stage. The Timeline helps you organize assets in your document, and also controls a document's content over time. To help control content, the Timeline contains layers and frames. Flash documents can play over a length of time, like movies or sound, which is measured using frames. Layers are like transparencies that stack on top of one another; each layer can contain images, text, or animations that appear on the Stage. You'll learn more about frames and the Timeline in Part 2 of this tutorial.

The FLA document you're working on has one layer (Layer 1) with contents on a single frame (Frame 1). This is the default way that a Flash document opens. 

In this exercise, you lock and rename Layer 1. Often you'll want to place objects in a particular position on the Stage. To help you keep those objects in place, Flash enables you to lock layers so you cannot select the items on a layer and accidentally move them. 

         1.Select Layer 1 in the Timeline and click the dot below the lock icon, as shown in Figure 8.

 

Figure 8. Lock a layer so its contents aren't accidentally moved or deleted from the Stage. You can also prevent inadvertently adding other assets to that layer.

With your only layer locked, you need to add new layers before you can add any other objects to the Stage. You cannot add new objects to a locked layer.

Select the Selection tool in the Tools panel and double-click the name Layer 1.

When you double-click a layer name, you can modify the name.

            2. Type background into the layer name to rename the layer, and save your file.

When you start building projects with many layers, layer names like Layer 1 and Layer 14 don't help you determine what's on that layer. Giving layers a descriptive name is a good practice to adopt.

Tip: You can also organize layers into layer folders. For more information, do a search on "layer folders" in the Help panel (F1).

Creating a New LayerIn just about any Flash project where you use imported graphics and animation, you'll need to create at least a few layers. You need to separate certain elements onto their own layers, particularly when you start to animate objects. You can also stack graphics on top of each other, and even create a sense of depth or overlapping by using multiple layers.

Select the background layer on the Timeline and click the Insert Layer button to create a new, empty layer.

The new layer is created above the background layer (see Figure 9).

 

Figure 9. Click Insert Layer to insert a new layer above the currently selected layer.

Double-click the name of the new layer so the layer's name becomes editable. 

Type animation to rename the new layer.

Graphics on the Stage stack according to the layers on the Timeline. For example, anything you put on the animation layer will appear above the image on the background layer. You will add animation to this second layer in Part 2 of this tutorial. 

Be sure to save your progress before moving on.

Tip: If you need to reorganize your layers, you can use the Selection tool to select and drag a layer above or below other layers on the Timeline.

Importing onto a Layer

In an earlier exercise, you imported the gnome.png image directly into the document's library. Then you dragged the image onto a selected layer on the Stage. You can also import assets directly to the Stage instead of into the library. First you need to select the frame into which you want to import the image on the Timeline. Then you can import the image onto that frame, which appears on the Stage. You use this technique to import an image in the following exercise:

1.Select Frame 1 of the animation layer. 

You need to import star.png image to the animation layer. 

2.Select File > Import > Import to Stage.

The Open dialog box appears where you can select an image from your hard drive. Find the folder of this tutorial's source files on your hard drive.

3.Select star.png in the tutorial's source files and click Open (Windows) or Import (Macintosh). The image imports to the animation layer (see Figure 10), and then appears on the Stage.

 

Figure 10. The image imports to the frame on the layer that you select on the Timeline. You will learn more about the Timeline and layers in Part 2 of this tutorial.

4.Open the Library panel (Window > Library).

The image you just imported to the Stage also appears as an asset in the library. Even if you import an asset directly to the Stage, Flash always stores the assets you import in the library as well.

5.Click the Selection tool in the Tools panel. 

6. Move the star.png file on the Stage to just above the gnome's head in the image, as shown in Figure 11.

 

Figure 11. Move the star.png image just above the gnome's head.

7. Select File > Save to save your document before moving on. 

Test Your Progress

To finish, you can test your document in Flash. This tests the SWF file in Flash Player. For example, you can see how your code works in Flash Player, see how animations play on the Timeline, test user interactivity, and more. It's much faster than uploading your work to a server each time you want to see the SWF file in action:

1.Select Control > Test Movie from the main menu.

The test environment opens and plays your document in Flash Player. You can now see the compiled SWF file version of your FLA document. You will often use the Test Movie command to view your progress when you work on a FLA file.

2.Click the banner.fla document tab (Windows) or the SWF file's close button (Macintosh) to return to the authoring environment. 

3.Find the folder on your hard drive where you saved banner.fla at the beginning of this tutorial. 

When you open this folder, you should see an additional SWF file called banner.swf. This is the compiled version of the banner.fla document. When you want to create a finished version of your file to upload, you'll want to make additional publish settings in Flash before you compile your SWF file. You'll look at these settings in Part 3 of this tutorial.

Where to Go from Here

In a very short period of time, you have set up a FLA document, imported and arranged assets in a FLA file, created and modified layers, and tested a SWF file. You're on your way to creating a banner in Flash so you can embed it in an HTML page using Dreamweaver. In Parts 2 and 3 of this tutorial, you will create and modify symbols, create an animation, add some simple ActionScript for a button that opens a web page, and add the banner to a website.

To see the completed file for this part of the tutorial, find banner_pt1.fla in the folder of source files that accompanies this tutorial.

To continue on to Part 2, see Using Flash for the First Time – Part 2: Adding Symbols, Animation, and ActionScript.