Free Flash Tutorials

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Flash Tutorial - Nested Interactive Buttons

301 InterAction
Flash Compatibility: MX 2004 (written for MX2004 but the principles are the same in earlier versions)

Written by: Phil

Length: 3200 words

Assumed Knowledge: Some experience of creating Flash Movies. Knowledge of the following would be useful: Animated Tweening, attaching simple actions to buttons.

Access: Members Bonus tutorial. For the full version you must: LOG ON To become a Member: Click here

 

For Free Tutorials: See listings: Free Tutorials

 

In simple terms interaction is change that has been determined by the user. In the simplest form interaction could be a menu on a web page. At the other extreme you have complex games that a user 'interacts' with. Interaction is one area where (in my opinion) Flash excels. It outstrips other technologies in it's ability to deliver interactive, fast loading and visually interesting content.

In Flash this interactivity is achieved through the use of ActionScript and the structure of how the Flash Movie is built. This tutorial concentrates on how to build a Flash movie with interactivity in mind. The mechanism that I use to show you how interactivity is built into a Flash Movie is a very simple example of an interactive button. Although it is interesting and useful to know how to build interactive buttons, the main point of the tutorial is to understand how interactivity is build into a Flash Movie.

Interactivity can be achieved in many different ways. It is quite possible to have two identical Flash Movies that have been built quite differently. When they are on a web page they could look identical. But and this is a big 'but' some ways are better than others. It is my intention to show you the best way and explain why.

Nesting and the Main Timeline

Nesting is when you place one symbol inside another (sometimes known as Compound Symbols). Throughout this site you will find that I come back to nesting time and again. There is good reason for that. Nesting is the best way to achieve interactivity. When you want an interactive movie it is almost always better to build it with a short Timeline on the main stage and most of the content inside symbols. Even the most complex Flash Movie could be built with a single frame in the Main Timeline and all the action happens inside nested symbols. It is not usually necessary to go to this extreme, but in theory it is possible. What you don't normally want is for the main Timeline to be two miles long!! Keep it short.

Why keep the main Timeline short?

The more frames you place on the Main Timeline the more difficult it is to build interactivity. What is perhaps just as important is flexibility. If you change your mind about something, it is usually much easier to change a Flash Movie that has a short Timeline and a heavier reliance on nesting.

Why have ever build a Flash Movie with more than one Frame in the Main Timeline?

The shorter the main Timeline the more you need to use nesting and the truth is that nesting is difficult! Sorry about that.

There can also be other reasons why you spread a Flash Movie over several or many Frames.

If one part of a Movie is very different to another, there is no advantage in building it in the same frame. The obvious example is when you have a large Flash Movie that has a preloader. The pre-loader and the main content are usually very different and there is no 'interaction' between the two. So you build them in different frames or even different scenes.

Another reason for spreading a movie out over several frames is file size. If a particular frame has too much content it may take a long time to load. For example on the webwasp home page the menus load before the roll over images. Therefore you can navigate the menus and most people will never even realise that something is missing. Just out of interest the webwasp home page has two scenes. The preloader and the main content. The content section has about five frames. If you want have a look: home page

What's Difficult about Nesting

Nesting is like Russian dolls. You put one thing inside another and inside another etc. To make it more complicated you can then place one Russian doll inside anther, inside another etc... In other words it can get complicated. In my experience beginners always get in a muddle (of course I never get in a muddle!!). Thankfully there are a few tricks to help you find your way through the labyrinth. Which I will show you latter.

The nature of nesting is reliant on the fact that you build different things in different places, even though the user may see them at the same time. This is crucial to interactivity. For example if you had 10 objects in your movie (an object could be anything - a button an animation, some text etc) and you built all 10 objects in the same place, you would see all 10 objects at once. But if you nested these objects within different symbols you can activate any combination at any time. So if you wanted you could see objects 1, 5 and 7 or any other combination. Flexible - yes - but the problem is that if you build them all in different places you cannot necessarily see object 1 (or where it is on stage) when you are building object 2. Again there are some tricks to help you with this which I will describe latter.

Cross Ref: The different types of symbols (Movie Clips, Graphics or buttons) are very different both when you are building a Flash Movie and in Playback. The more you understand about this the easier it is to work with nested objects. For more details on this see the tutorial Symbols: Movie Clip or Graphic?   Creating Buttons

Cross Ref: The other thing which is difficult about nesting is the Actionscript. You need to be familiar with Target Paths. That is how one part of a Flash Movie to talk to another. To a limited extent I will look at Target Paths in this tutorial. For more detailed explanation see the Tutorial on Target Paths

Now that I have told you all the difficulties of nesting I have probably put you off Flash completely!! I hope not, as even though nesting is a bit challenging, the rewards are great. I think that once you get your head around nesting you are well on the way to really understanding how Flash works. Enough theory, lets have a look at an example and then get stuck into the practical bit.

Building a Flash Movie with Interactive Buttons

Example: Download the Flash file IntAct 301a


The Stop and Play buttons change depending on the circumstances.

I know it is not a massively exciting Flash Movie but you need to start someplace. The point is that the button automatically changes to the new circumstances. An alternative would look something like this:

Example: Download the Flash file IntAct 301b


Only one button plays at a time which is a poor design in comparison.

Why have buttons visible that for half the time do not function? This could be confusing if it was part of a complex web page.

Step one: Setting up the Movie Document

  1. Open a new Flash Movie.
  2. Go to: Modify > Document
  3. Set the size to: 300 x 100 pixels
  4. If you wish select a: Background Colour
  5. Click: OK

 

This is a members only bonus tutorial. For the full text you must: LOG ON


For a full list of Free tutorials click here

 


37433 visitors to this page since Jan 04 •

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.