Better Flash Navigation using AS3 Classes

In this article, you will learn a much better, more object oriented way to structure a Flash application than the typical "frames on the main timeline" scheme that you see so often everywhere. This better way might be summed up in a few words as "MovieClips as screens." This is so far superior to "Frames as screens," that I think you will be as amazed as I was, when I line out for you exactly why. Read on!

Source File: 

Comments

lucky
User offline. Last seen 27 weeks 5 days ago. Offline
Joined: 01/15/2010
Great article! Now I need to do something else...

I'm really loving the technique! Thanks so much. 

I've run into a situation that I don't understand. I want to have a navbar on stage at all times, and then by clicking on a button in that navbar, cause another screen to load. How do I call a handler in my Main object (that adds and removes children) from my navbar object? I have tried just calling my gotoHome() function in the Main script from the NavBar script, but I get errors.

jeanmarin
User offline. Last seen 26 weeks 2 days ago. Offline
Joined: 01/22/2010
PopUpManager gone in Flash CS4 AS3

Hi,


 


I love the article and I too want to lever coding rather than use the timeline. I have one small problem, I want my code to be nimble and want to create dynamic dialog boxes rather than designe a bunch of swf files, or library object and then call them from the code. AS2 had a class called PopUpManager, and it looks like Adobe in favor of Flex have depresiated this  class in Flash CS4 AS3. Have you seen an alternative in your travels? I would really like your input.


 


JLM

Jody Hall
Jody Hall's picture
User offline. Last seen 9 hours 44 min ago. Offline
Joined: 04/26/2009
JLM, Thank you for your

JLM,

Thank you for your comment. Here is my humble take:

PopUpManager was part of the V2 component set. It allowed you to (fairly) easily create and pop up an instance of one of the other component classes. The component set in Flash never went over very big, however, as far as I know and from what I've read and heard. The intention was to make a set of components so that the average person, programmer or not, might be able to just jump in and start making applications with them. It didn't quite work out that way. And if you did get the hang of the components, you still wound up with applications that looked like somebody used components, as they were notoriously almost impossible to skin.

I don't want to pretend to know components inside out, because I don't. Nor do I know their full history. But Flash still comes with components, and they apparently kept the most popular ones, and weeded out the not-so-popular. And they brought back the UIScrollbar because of popular demand. And they made them all a lot easier to skin.

I have mostly for the most part shied away from components, except I experiment with them sometimes. My advice, though, is that you should write your own popup window class, that extends Sprite. You will be able to customize it a lot better, and get the look you want right off the bat. Just ask yourself what would be the parts of it? A background, a dynamic textbox for content text, a dynamic textbox for the title bar, a "close" button, etc.... Those would be its properties. What would be its methods? In other words, what should you be able to tell it to do from the outside? Well, you should be able to set its title and text, you should be able to make it open and close, and you should be able to size and position it. Also you might make it autosize itself depending on the size of the content textbox. One tricky aspect is going to be how to make it "modal." A modal window won't let you interact with the rest of the application until you dismiss it.

Designing classes is fun, when you start getting the hang of it. I am still intermediate myself, but I'm coming along okay. I think (hope!) that's the appeal of my tutorials, I am one of you, your fellow traveller.

Jody

eheidner
User offline. Last seen 26 weeks 4 days ago. Offline
Joined: 01/22/2010
navigation from Main.as

Like another reader, I am also very curious about how to use a menu/navigation bar that stays on the stage to switch between 'screens.'


Right now I've got it set up so that the menu buttons are on the main Fla file's stage, and the AS to switch screens is in my equivalent version of Main.as. No action script is in the main Fla file, and all of the buttons are being called by their instance name. In the Fla file, my buttons are movie clips, similar to the button array tutorial you also have here.  After I added an event listener to button, this is the code I used.


function homeHandler(event:MouseEvent):void {  
 removeChild(currentScreen);
 addChild(home);
 currentScreen = home;


}


(at one point I had a line above remove child that read: home = new Home();          But that also brought no changes so it's commented out)
Right now, I don't get any errors, but things also don't work. I can even see the frame changes within the button-movie-clips when I mouse over or click on the buttons.


Do you have any suggestions or hints to offer? Thank you!!!

Jody Hall
Jody Hall's picture
User offline. Last seen 9 hours 44 min ago. Offline
Joined: 04/26/2009
Buttons in Main Class

eheidner (and lucky),

You can have your buttons on the main timeline, then just program those stage instances in your document class. Then all your screen switching is done from the main class, and maybe that is neater. But if you have screens that are the same size as the stage, when you use addChild() to display them, they will go on top of the display list and cover up your navigation buttons. To get around this, you might use addChildAt(screenName, 0) so that you always add a screen to the display at the lowest depth, then it will tuck neatly behind your buttons. Of course, in this case, you will have to design your screens to allow for the fact that the buttons will now be covering up a portion of your screen.

I have put together a wham-bam simple example of what I am talking about, complete with button disabling and all that. structure_tutorial_buttons_in_main.zip. Don't expect any great designing in this one, it's just to demonstrate the stucture. The Main.as document class is commented as to what's going on.

You'll notice I just used separate buttons, but if you wanted to make those buttons part of a container navigation bar, you could do that too. Just nest them inside a container movie clip, and use dot syntax to program the nested buttons.

Another idea might be to have a "fly out" menu that doesn't cover up much of the stage until you mouse over it. I guess any number of variations are possible.

Hope that helps!

eheidner
User offline. Last seen 26 weeks 4 days ago. Offline
Joined: 01/22/2010
Thank you so much! This is

Thank you so much! This is extremely helpful and exactly what I was hoping to do! :)


(I had given up on listing the buttons in an array because it doesn't seem to matter how many times I read about arrays with movie clips, I can't seem to code them right, so that part is especially useful!!)

linelogesh
User offline. Last seen 1 week 4 days ago. Offline
Joined: 01/08/2010
I Need Alert Component

I'm following your tutorials and very eager to learn tricks and tips post by you. Really Thanks a lot. And I need Alert component in AS3.0 best reference site can any body helping me in welcome!.. Thanks and regards, Logeshkumar P.

jeanmarin
User offline. Last seen 26 weeks 2 days ago. Offline
Joined: 01/22/2010
Thank you... Cheers, JLM

Thank you...


Cheers,


JLM

fhickler
User offline. Last seen 24 weeks 1 day ago. Offline
Joined: 02/09/2010
Possible improvement

Hello -

Thanks for this tutorial. I am using it on an actual project and am hopeful it will make it efficient and will improve my OO skills in the process. I came up with an idea that could be a slight improvement and am interested in hearing what you think of it. I thought I'd try consolidating all the goto functions into one like this:

public function gotoScreen(screen):void {
 removeChild(currentScreen);
 addChild(screen); currentScreen = screen;
}

 

That would cause you to change the class code to be (for example):

MovieClip(parent).gotoScreen(MovieClip(parent).learn);

Do you think there are any possible issues that could come up as a result of doing it this way? 

 

 

Jody Hall
Jody Hall's picture
User offline. Last seen 9 hours 44 min ago. Offline
Joined: 04/26/2009
Re: Possible Improvement

fhickler,

Thanks for the nice comments, and I'm glad to see you are finding the information useful. It would seem from what you suggested that the different screens would have to know about each other, so I don't think that would do. But if you have an example, I'd love to see it!

Anyway, there are probably tons of variations on this that are possible, and this was intended to be a starting point. In fact, you've got me thinking of ways to improve it right now. Like maybe an "addScreen" method in the main class? Also in the tutorial, I used screens that were centered on their registration point, but now I keep thinking that may not necessarily be the best way of doing things.

You will find your own (specific) best ways of working--the main thrust of the tutorial, though, remains true, that the general methodology outlined here is easier and more fun to work with than frames on the main timeline.

tzachi
User offline. Last seen 20 weeks 14 hours ago. Offline
Joined: 02/15/2010
Wondering about the old object

Cool tutorial.

 

on the last page of the tutorial, when you explaind about "reset" the drag page by instanciating a new Drag object.

 

I wonder, what happens to the "old" Drag object? Does he still holds its value, or is it become ready for garbage?

 

Tzachi

Jody Hall
Jody Hall's picture
User offline. Last seen 9 hours 44 min ago. Offline
Joined: 04/26/2009
The old object becomes

The old object becomes eligible for garbage collection when it loses its reference. And it loses its reference when you set the same variable equal to a NEW object.

The garbage collector can't be forced, it deletes the old object unpredictably. And only when all references to it have been removed.

tzachi
User offline. Last seen 20 weeks 14 hours ago. Offline
Joined: 02/15/2010
Intro.swf and Intro.as ??

 I'm trying to follow the idea with a little different method:

Instead of linking a library symbol "Intro" to a class named "Intro", I'm trying to link a swf named "Intro.swf" to a class "Intro".

 

The idea is to load from the main movie a swf called Intro.swf that all its code is written in a linked class (Intro.as ?)

 

But it doesn't work.

 

Any help?

tzachi
User offline. Last seen 20 weeks 14 hours ago. Offline
Joined: 02/15/2010
 Is it that i have to write

 Is it that i have to write the Intro (Intro.as) as the document class of the Intro.fla ?

 

Jody Hall
Jody Hall's picture
User offline. Last seen 9 hours 44 min ago. Offline
Joined: 04/26/2009
That's right

Yes, the Intro.as file would have to be the document class of the Intro.fla file. You will also have to use a loader object to load the external swf.

Marcos Reboucas
User offline. Last seen 12 weeks 23 hours ago. Offline
Joined: 04/07/2010
add a loader

Hi Jody,

It's a very good article that really encouraged me start developing in AS3 instead of AS2.

Now it's very clear for me how to structure a site with classes and don't get that # 1009 errors anymore.

But what if I want to add a loader movieclipe that plays while my Intro clip is loading or being added to stage? Is there a way to do it using this same structure you show in the article?

Thank You

Marcos

 

 

jamestagal
User offline. Last seen 1 week 6 days ago. Offline
Joined: 04/15/2010
Excellent Introduction to using classes for Navigation!

Normal
0

false
false
false

EN-US
X-NONE
X-NONE

MicrosoftInternetExplorer4


Hello Jody,

Your article has really been an eye-opener to say the least! More like a revelation better describes it! I am fairly new to Flash and writing Actionscript so having some of the basics has helped me get a handle on the concepts/code in your tutorial! But this approach to organising a Flash project makes so much sense! And as you have so wonderfully illustrated how it works. And as you say it’s not too difficult to conceive and do. I haven't come across anything else (Flash tutorials) that incorporates the use of Classes to navigate through "screens" offering a better alternative to timeline navigation. In a way, it has pointed out to me how my project could be improved because I was experiencing all the same problems you mentioned at the beginning of your article. Also I wanted to praise you for was how well you are able to explain some of the more complex concepts, very logically and clearly, not losing a newbie like myself.

You have made me rethink how I have been developing my first Flash project so that I am now going to rework it following your method. Here's a link to a demo of what I've done so far. www.eddiesoft.id.au/Ben/WaterWise.html

My one uses the timeline with frame labels for navigation but it shouldn't be too difficult to change using your method. Thanks again for this fantastic tutorial! I have also just finished reading your tutorial on AS3 Dropdown Menu with Reusable Classes and will try to incorporate that too.

I was thinking about how I could incorporate some other custom graphics or objects in the Dropdown Menu instead drawing the shapes as you have shown in that tutorial?  

Regards, Ben.

Jody Hall
Jody Hall's picture
User offline. Last seen 9 hours 44 min ago. Offline
Joined: 04/26/2009
You made my day

Ben,

I appreciate all the nice comments! You really made my day!

(Sorry I am just now getting around to replying. I've been away from my own site for too long!)

If you read to the end of the dropdown menu tutorial, you will see that I showed at the end how to make it use MovieClip instances because they qualify as Sprites, and the menu's "addItem()" method only requires that you send it a Sprite instance. And of course you know that you can literally incorporate whatever custom graphics you want in a MovieClip, including other MovieClips and buttons. You can put whatever you want in the dropdown menu.

Jody

Walt
User offline. Last seen 7 weeks 20 hours ago. Offline
Joined: 06/08/2010
Sharing between classes

Like the others before me I want to say "great job" on this tutorial. And thank you for the time you take to explain what the code is doing in depth in-stead of skimming over the information. I look forward to working through some of your others.


I have one question... in the text you state "Classes are all nice and encapsulated that way. By default, they don't share information with each other, and later I will show you how to make them share with each other just the information you want." I may have missed how you share information between classes. What I am looking for is if I create a variable in a class and need to access that information in another class how does that happen?

Jody Hall
Jody Hall's picture
User offline. Last seen 9 hours 44 min ago. Offline
Joined: 04/26/2009
Walt, Classes communicate

Walt,

Classes communicate with each other mainly through "getters" and "setters." Another way is by dispatching events. Sorry if I failed to bring that out in the tutorial. Keep reading, and find out how getters and setters work, and you will have no problem getting your classes to communicate with each other.

Jody

emmanuelulloa
emmanuelulloa's picture
User offline. Last seen 2 weeks 8 hours ago. Offline
Joined: 07/15/2010
MovieClips as Screens approach.

Jody this is a really great tutorial! As a Flash Educator it helps a lot to teach this approach. I also implemented something like your approach in my application Simple Class Generator for AS3.