Due to the success (and quality) of Asual's SWFAddress, I've decided to stop work on this project. SWFAddress is now capable of all the things that StateManager is, so it doesn't seem very beneficial to the open source community to continue development on StateManager. The source code and examples will remain available but no longer be updated, but keep checking xa for other open source code!

Within days after posting the above message, Rostislav Hristov (the creator of SWFAddress) sent me a very flattering email asking me to join the SWFAddress team. While I probably won't be able to contribute too much time to the project, Rostislav has informed me that he has incorporated my Safari findings into the SWFAddress code base.

The flash community has been talking about, and proposing solutions for, "fixing the back button," for much longer than I've been developing in Flash, but when a sunKING client asked for a working back button in their flash site, I decided to have a go at it. Like most of these things, the xa StateManager fixes the back button and provides deeplinking. Unlike all of the other solutions, the ex animo StateManager is the first method to be fully compatible with Safari. Since the class uses ExternalInterface, you'll need to publish to at least Flash 8. It's been tested successfully in IE5.5, IE6, FF 1.5.06, and Safari 2.0.4 but will degrade gracefully (i.e. behave like a normal flash page) in unsupported browsers.

Check out this simple example to see it in action, then download the StateManager example and source as a zip file or from my as3 subversion repository (last updated 2007.04.30) to see how it's done. The zip file includes the AS2 and AS3 versions.

The StateManager also works for AJAX applications. For more information, read Using the StateManager in AJAX Apps.

In the following tutorial, I'll walk you through two methods for adding state management to your ActionScript 2 Flash applications. (It's almost exactly the same for AS3: just update your event handling.) In the first part, I'll show you how to build a Flash application that includes state management. Then, in the second part, I'll go through the steps for adding state management to an already existing project. The FLAs are in the source folder of the StateManager example and source files zip. Note that, in order for the published SWFs to work, you'll have to move them to a directory that also contains a suitable html file and statemanager.js.

Part I

Step One: Setting Up the HTML

First things first. The StateManager makes heavy use of JavaScript and most of the heavy lifting is done by the "statemanager.js" file. That means you'll need to import the file with a script tag in the head of your html document (see flash-1.html):

<script type="text/javascript" src="statemanager.js">

You're also going to have to make sure that your SWF is allowed to communicate with the browser. At sunKING, we're in the habit of using Geoff Stearns's SWFObject but you can use any embedding technique you want as long as you allow script access. The following code in the body of your html file should do the trick:

<div id="example">Download Flash!</div>

<script type="text/javascript">
/*<![CDATA[*/
    var mySWFObject = new SWFObject('example.swf', 'mySWF', 400, 300, 8, '#fff');
    mySWFObject.addParam('swLiveConnect', 'true');
    mySWFObject.addParam('allowScriptAccess', 'always');
    mySWFObject.write('example');
/*]]>*/
</script>

Of course, if you do choose to use SWFObject, don't forget to import "swfobject.js" with another <script> tag.

Step 2: Importing the Class

In order for your Flash Application to use the AS2 StateManager class, you'll have to import it. As you can see in "flash-1.fla" (you have downloaded the StateManager example and source files, right?), this is done with a simple import directive in the first frame of our movie:

import com.exanimo.managers.StateManager;

In order for this to work, you'll have to copy the "com" folder you downloaded to your ActionScript directory. Note that there are now two different versions included in the StateManager example and source files: one for AS2 and one for AS3. Make sure you grab the right one! For more information on importing classes, read the LiveDocs on the subject.

Step 3: Initializing the StateManager

Having successfully imported the StateManager, you'll now have to initialize it:

StateManager.initialize();

When this line is executed, the StateManager will run its initialization routine and, if the user has followed a deep-link, will attempt to load the specified state. Therefore, it's important that you not call initialize until your application is ready to change states.

In previous versions of the StateManager, the class would be initialized automatically when you imported it. However, this caused some problems for some preloading techniques on deep-linked pages. Though it requires the user to type an extra line, this new method provides more flexibility: you can now control exactly when a deep-link will cause a state change.

Step 4: Setting a State

Now that you've imported everything, you're ready to start setting states. To do so, simply pass the ID of the state you wish to set to the setState function. The browser url will then change to reflect the new state, and an entry will be added to the browser history. In the following code (from "flash-1.fla"), the "portfolio" state is loaded every time the user clicks portfolioButton.

portfolioButton.onRelease = function():Void
{
    StateManager.setState('portfolio');
}

You can set as many states as you want and state IDs can be any url-encoded string ("portfolio," "/portfolio," "/portfolio/art," etc.). There is also one special state: the default state of your application. This state is represented by an empty hash in the browser's address bar (i.e. "index.html" or "index.html#"). If you think about it, this makes perfect sense: when a user follows a link without a hash portion, they should get the default state of the Flash application. The ID of the default state is stored in the property StateManager.defaultStateID. So, if you want a button to return your application to the default state (as we do in "flash-1.fla", you would use the following code:

homeButton.onRelease = function():Void
{
    StateManager.setState(StateManager.defaultStateID);
}

In previous versions of the StateManager, the ID of the default state was always "home". In the new version, it defaults to "defaultState", but you can chose anything you want. To change it, simply set the defaultStateID property before you initialize the StateManager. But remember — the ID you chose will never show up in the URL; the default state is always represented with an empty hash value.

Step 5: Reacting to a Change of State

Of course, setting states doesn't mean anything unless something happens when you do it. To make sure something does, listen for the StateManager's "stateChange" event. In our example movie, our frame labels contain the registered state IDs so we can simply pass the IDs to the gotoAndPlay function. But be careful — frame labels can't be the identical to the state IDs! (That's why each of the frame labels in our example starts with "#".) We also use the setTitle function to change the browser window's title bar value.

function stateChangeHandler(e:Object):Void
{
	// Your navigation code here.
	gotoAndPlay('#' + e.id);

	// Set the title.
	StateManager.setTitle('My Website :: ' + e.id);
}
StateManager.addEventListener('stateChange', stateChangeHandler);

That's it!

The above code is all it takes to build a flash app with state management. Simply call setState when you want to.. well, set a state.. and listen for the stateChange event to handle your.. well, state changing. And, of course, there's no reason why your states need to be as rudimentary as those in the example; you can do whatever you want in the stateChange handler.

Part 2

Of course, chances are that you aren't going to want to build your application around the StateManager. You've got your own system of navigation and want something that'll integrate with it as simply and smartly as possible. Don't worry — the StateManager has got you covered. Part two of this tutorial covers adding state management to existing projects. It assumes that you've got a central navigation function which, in our example ("flash-2.fla" from the StateManager example and source files), is called "myOldNavigate". Steps one through three are exactly the same for this method so we'll jump right in to..

Step 4: Setting States

Clearly, if we want to add state management to our pre-existing project, we're going to have to add some code to our navigate function. That way, each time it's called, the user will get a new URL for deep-linking, and an item will be added to their browser history so they can use the back button. As it turns out, our setState function comes to the rescue again. This time, we provide it with a second argument — the title we wish to appear in our browser's title bar.

function myOldNavigate(id:String):Void
{
    // Your navigation code here.
    gotoAndPlay('#' + id);

    // Add this..
    StateManager.setState(id, 'My Website :: ' + id);
}

Step 5: Reacting to Changes of State

We've only added this one line to our already-existing myOldNavigate function and already, items are being added to our browser history and our browser title is updating. However, at this point, nothing happens when we click "back." Luckily, the StateManager provides us with the "stateRevisit" event. Any time the user revisits a state — whether it's by clicking the back button or forward button, or following a deep-link — the "stateRevisit" event will be dispatched. So, to update our application accordingly, we need to call our myOldNavigate function whenever this happens.

function stateRevisitHandler(e:Object):Void
{
    myOldNavigate(e.id);
}

StateManager.addEventListener('stateRevisit', stateRevisitHandler);

Now our navigate function sets the state and a change of state (that occurs as a result of a back button click, etc.) calls our navigate function! Those of you paying attention may be thinking that we've got a nasty infinite loop on our hands here, but the StateManager has an internal mechanism for preventing that, so we're alright.

What's next?

Nothing. You're done! Hopefully, after this quick walkthrough, you're on your way to creating state-aware Flash applications — or adding state management to a couple of old projects!

The StateManager is available under the MIT License with the additional request that any substantial work done on it be returned here so we can all benefit. In exchange, you could find your name next to an @author tag in the next release (!!!).


Comments

Gravatar rlt

Hmm… I'm not sure if this used to work before, but deep linking in the example doesn't seem to work. I can type the url to the example followed by #about or #portfolio and it doesn't go directly to those states. Also, when I do this, it seems to mess up navigating backwards. Example: Start with flash-1.html. Then manually type in #portfolio in the location bar. Then click through the navigation a few times. Then click the back button in the broswer. It seems to not go back to the correct state. I am using Safari 2.0.4.

Gravatar matthew

Thanks for the heads up. Safari's deeplinking was indeed broken in the last update. I fixed it now but the second bug you mentioned (manually typing in hashes other than the initial one) still needs attention.

Gravatar Ade

Is there a way to use the Movieclip Loader Class with the StateManager ?

Gravatar Primus

very well done. Works perfectly with Safari and the other commen browsers.

Big thx form Germany

Gravatar matthew

@Ade: Not sure I know what you mean. Can you be more specific?

Gravatar Douglas

This is wicked. Thank you so much for all your hard work. Really really appreciated. Works great!

I am, however, running into a scope problem: I'm trying to integrate this into a fully class based web application (AS2). And from what I can tell there doesn't seem to be a reference to the class object that instantiated the StateManager through the "StateManager.addEventListener('stateChange', callbackFunction);". Thus, when the 'callbackFunction' is called it is in the scope of (or becomes a method of) the StateManager instance and not the original class, and thus doesn't have access to any of the class variables (or methods). So from there it can't really do anything (like, call other methods), which kind of defeats the purpose.

I've tried lots of work arounds. But without modifying the StateManager class itself (which I can do, but would rather not), I'm not sure what to do to fix the scope issue. Any suggestions? Am I missing something? Is there some reference there I'm not aware of? (BTW- I've read that this won't be an issue in AS3, because methods will always stay within the scope of the original class, but for now…).

Gravatar Douglas

Never mind. Found my answer. For anyone interested, the trick is to use 'Delegate':
StateManager.addEventListener('stateChange', Delegate.create(this, callbackFunction));
And be sure to add: import mx.utils.Delegate;

Thanks Again. Great Work!!!

Gravatar Terrence

Thanks for the code. I know this took alot of time.
Great work man!

Gravatar Robert Laing

This is fantastic, and so simple. Thank you so much.

Gravatar Joel LaMascus

Wow. You rock!

Gravatar jason vancleave

was the safari's deeplinking broke with a safari update or this code's update?

if safari, what version broke it?

Gravatar matthew

@Jason:
Neither? It's functioning fine on version 2.0.4 which, AFAIK, is the latest version. Is the example not working for you? Or are you having issues with a project of your own?

Gravatar Aaron

I will use this on every flash site from now on. very well done. I had a back button solution but yours is vastly superior.

Gravatar Liam

MTASC:
Hello, I'm sure you're already aware but MTASC is not a fan of some the coding styles used in the JSInterface class.
Particularly the nested function inside the __resolve method. I'm not really sure what's going on here to be honest, I'll not use MTASC for now but if you could let me know if you've got it compiling in MTASC that'd be great!
Cheers,
Liam

Gravatar matthew

@Liam:
I did away with JSInterface for version 2007.04.30 so you should be good to use your compiler of choice again (:

Gravatar Douglas

Great work! The new 'initailize' is much better. Helps a lot. I've run into a few bugs, however, with mac Safari that you might want to look into if you get a chance (btw – seems to be ok in mac FireFox):
1. Deeplinking (bookmarking) does not work if the site is already loaded. It will default to the homepage instead. This is also probably the same issue that the other poster (rlt) mentioned about typing in '#page' manually. If the site is not loaded you can type in the address with hash manually or via bookmark and it deeplinks perfectly.
2. The history once created is not overwritten by the new history. e.g. navigating this series: home, page1, page2, back, back, page4, page5, back will take you to page1 instead of page4 like it should.

Thanks again. Big cheers for mathew. ;)

Gravatar Andy

Has anyone dealt with the issue where the Flash application is handling a transition and is not ready to accept a state change? Within my Flash app I disable the Flash buttons while navigation is occurring and the app is in a non-interruptible transition, which may last a couple seconds. Ideally I could make a similar effect on the browser buttons, where they are ignored if the Flash app is "busy". Has anyone else looked into this? Ideally the Flash stateChange handler can somehow respond with a status value (failed), which is received by the javascript, which re-appends the state onto the history.

If I can't accomplish that, I suppose I will have to build some kind of event queue within Flash to record the list of incoming states from the browser, and then process the navigations when ready. That would seem to be the only way to honor the navigation requests, but doing it on a delayed basis like that will be more confusing for the user than the preferred effect of disabling the browser buttons during transitions.

Gravatar Nico

I noticed that you have to place the default state after the initialization, like this
StateManager.initialize();
StateManager.defaultStateID = 'news';

Otherwise it won't load anything when you first visit the site with specifying a deeplink.

Gravatar Jef

Thanks a lot for this usefull script. I never thought it would be so easy to add a backbutton to my flash websites!

Gravatar matthew

@Nico,
Are you sure about that? Remember, the defaultStateID only determines how you refer to the default state internally; the url that corresponds to the default state always contains an empty hash.

In other words, a user gets to your application's default state by navigating to "index.html" or "index.html#" regardless of the value of defaultStateID (assuming, of course, that your application is housed in an html file named "index.html"). The reasoning behind this is twofold:

A user unaware of your site's amazing deeplinking features (i.e. one that navigates to "index.html") should get the default state. There shouldn't be two hash values that correspond to the same state. It follows that an empty hash must represent the default state.

Secondly, and more convincingly, if the default state's hash value is anything other than empty (i.e. 'news'), then navigating to "index.html" would have to change the url to "index.html#news". (I suspect that this is the result you are getting (and what you are looking for) by specifying the default state after the initialization.) But that means that an extra history entry is added (the original "index.html" and the new "index.html#news"). Clearly, there should not be two history entries when the user has only visited one page. Therefore, the default state's hash value, again, must be empty.

The default state is special: it is the only state whose ID is not necessarily the same as its hash value. The defaultStateID property is only present so that you can better control the internal workings of your program. It may be a little confusing at first, but once you accept that the default state's hash value must be empty, it should be much clearer.

Gravatar rchu

has anyone try this in I.E. 7? I put up the source files and when you type directly into the URL string, it doesnt work at all (same goes with Safari). Everything works well in firefox.

Gravatar Joel

How would you path the button code when the buttons is in a different MC than the stateManager code. For example, all your buttons are on the same timeline as your code, but when you have them in a seperate MC and I changed the code to:

portfolioButton.onRelease = function():Void
{
_root.StateManager.setState('portfolio');
}

it doesn't work. Any ideas?

Gravatar Joe

Andy,

Im also looking for a solution like that..
please keep me posted on your progress!

thanx!

Joe

Gravatar Justin

Hi

Awesome work, very usefull.

I would like to know, is it possible to use both modes…flash and ajax. So you are able to use swf and html in your page, and all states will get appended to StateManager so the stateChange event will fire in Flash even if the user changes state from with in HTML.

thanks

Gravatar Justin

re: Joel

StateManager is static class, meaning you don't need to instantiate it. As long as you called the initialize method, you should be able to call Statemanger.setState('whatever'); from anywhere, as long as Statemanager can resovle to it's namespace. So instead of doing _root.StateMa…. , rather say com.exanimo.managers.StateManager.setState('whatever');

Gravatar matthew

@Andy, Joe:
Literally ignoring the user's back button presses is, of course, not possible. I suppose that it's possible, as you suggest, to push history entries back onto the stack but (IMHO) that seems like a dubious application design decision. For example, consider a user who does a Google search for "awesome dudes" and clicks on the first result, andyandjoe.com. After navigating through your site a bit, he decides that it isn't what he was looking for and attempts to click back to Google but is forced to sit through andyandjoe.com's transitions.

I think the best solution in the situation of an "uninterpretable" transition is either some type of queue or, upon completion of the transition, to honor the last request.

@Justin:
That's a really interesting question! I haven't played around with using the StateManager in JS and Flash simultaneously but I think that (in its current state) the StateManager is not quite up to the task. I'll put it on the list for the next update, though. Also, thanks for fielding Joel's question.

Gravatar Mariano

I've customized this code in order to integrate it with an already existent navigation system. The only change I've made is replace every instance of the the '#' symbol that is appended to the URL, with a '?p=', since this is the expression the current navigation system uses.

The page works successfully on Safari on Mac, but fails to work on Firefox on both PC & Mac.

Here's a test URL:
http://bbh.unworkinc.com/vaseline_web/vaseline_0718/us/index.html

Navigate the site on Safari and on Firefox and you'll see how Safari successfully adds '?p=' to the end of the URL, while Firefox still shows a '#'.

I've been trying for days and I can't figure it out. Any help will be greatly appreciatted and accordingly rewarded.

Thanks,
Mariano

Gravatar matthew

Unfortunately, Mariano, I don't think what you're trying to accomplish is possible. I didn't choose the # symbol at random.. it's used because the hash portion is the only part of a url that can be changed without causing the browser to refresh the page. Since the whole point of the StateManger is to mimic traditional page-based browser states for single-page web applications, I'm afraid it isn't really applicable to situations in which the query string is changing.

Gravatar Justin

@Matthew
I managed to extend stateManager…I've added method called callFlash(method, arg1).
This is used in Flash the same way you would subscribe to the stateChange event, except, now you would subscribe to the onFlashMethod event.

AS:
StateManager.addEventListener('onFlashMethod',handleFlashMethod);
function handleFlashMethod(e:Object)
{
trace (e.method)
//maybe call a method
//scope[e.method](e.arg1);
}
function testMethod(what)
{
trace (what);
}

JS:
StateManager.callFlash("testMethod", "argumentsample")

It would be cool if you can take a look at my code, and then, if youre interested, include it in your library.

Gravatar Carol

Excellent work, thank you.

However, I've spotted some other problems.

In IE7, if you click any place within the flash that is not a menu button (right after loading the page without deep-linking), page title changes to a simple # and nothing more.

In Firefox 2.0.0.5, the url field won't change if you clicked other menu buttons and then typed the "#something" portion manually before using the back browser button.

In Safari 3.0.2, back button is not working for your example (http://exanimo.com/examples/as2/StateManager/flash-1.html) but works for the website I'm working on (www.shinigami.com.br). This is apparently because I've set defaultStateID manually.

Lots of problems in Opera 9.2, but I believe you never tried to make it work with Opera anyway =P.

Not trying to be picky, your code is already really useful even with those few bugs.

Also, I would like to ask whether it is possible to enable the "backspace" key as a shortcut for the browser back button.

Regards,
Carol

Gravatar Joe

Hi,

For some reason, when i hit the back button all works well when i do not return to the default state..
as soon as i get back to the default state, flash seems to not allow any input from mouse or keyboard.

is this something im doing wrong..
i have a feeling it is as no one else has reported this problem..

any advice would be much appreciated!

thanx

Joe

Gravatar mat 2x

Hi i extendet the accordion class and tried to
hook it straight to the accordion to change setting
looks pretty sweet in my opinion :)

accordion change dispatch event is getting set when onPageSet
so its getting straight set by the Statemanager :P

hey Man thats fantastic
just click straight on my webpage fpr preview :D

Gravatar mat 2x

>> Edit : this example is drive by amfPhp

Gravatar nathan

same as douglas

1. Deeplinking (bookmarking) does not work if the site is already loaded. It will default to the homepage instead. This is also probably the same issue that the other poster (rlt) mentioned about typing in ‘#page’ manually. If the site is not loaded you can type in the address with hash manually or via bookmark and it deeplinks perfectly.

any ideas?

Thanks
Nathan

Gravatar nathan

cool. disregard my last post. seems to be direct linking fine now.

only problem is that if i push a button muliple times i end up loading loading states that belong to different buttons. :(

Gravatar nathan

lol. disregard both. done

Gravatar tsmo

Lil help? Deep linking is working for me in both Safari and Firefox, but there's no response to the forward/back buttons. Any guesses? Troubleshooting advice?

Thanks for an invaluable tool-
tsmo

Gravatar tsmo

Problem solved: http://www.actionscript.org/forums/showthread.php3?t=120433

"ExternalInterface callbacks don't work locally."

Doesn't work in the debugger, doesn't work on my local machine— but deployed to the test site, it rocks ass. Thanks!

Gravatar Joel LaMascus

Need to step backwards to flash 7. :(

Have been having a lot of trouble with people not having flash 8. (I know, 9 is already out!).

I get error messages when I publish as flash 7. All of the errors say the same thing :: There is no method with the name 'ExternalInterface'. ::

Can anyone tell me what this means. I started learning flash with version 8. I don't know anything about version 7 or 9. If you publish the source files as version 7 you will see the same messages.

Any help would be greatly appreciated!

Gravatar MAXp0wr

I love you.

Gravatar Matt Przybylski

Joel, ExternalInterface is a class that was introduced in Flash 8 so publishing/using Flash 7 would not work, as matthew points out in the original posting for this class.

Nice job on this. I haven't tested it yet but from reading the comments it seems there are still a couple of things to work out. I think if you use it for what it was intended for in its minimal state it'll work well.

Good luck on the move.

Gravatar Natacha

I am using your awesome class in the following site: http://www.stedmans.com.au
Deep linking/Bookmarking works beautifully, but the fwd/bck browser buttons don't – even though the browser address bar is updating perfectly.

In one of the above posts you list this as an issue:

- I didn’t choose the # symbol at random.. it’s used because the hash portion is the only part of a url that can be changed without causing the browser to refresh the page. Since the whole point of the StateManger is to mimic traditional page-based browser states for single-page web applications, I’m afraid it isn’t really applicable to situations in which the query string is changing.

Due to this, I'm wondering if it is actually possible to get the fwd/back buttons to work on my site at all for this reason.

My site uses a combination of Flash 8 (for the site + navigation header), Flash ExternalInterface calls to a javascript DHTML function to swap the body content without page refreshing.
Plus, I'm using sIFR for the HTML h1 text to display HTML text text characters as Flash in order to keep the desired font for the headers and quote text on the page.

Do you know off the top of your head if any of the above could be causing my issue?
My stateRevisitHandler() does not seem to kick in at all.

Gravatar Natacha

Ignore my last post about the back/fwd buttons not working – I forgot that the StateManager class was calling stateRevisitHandler() within a locally owned reference… Delegate works great for this, as mentioned by a previous poster…

EXCEPT for PC IE7. The problem described in my previous post still exists for this browser only. Mac safari + PC/Mac mozilla firefox is fine.

If anyone has any ideas on this I'd greatly appreciate it.

Gravatar Ingmar

there is no solution for ie7? everything works grea, except this browser.

Gravatar Natacha

I have actually found it is not just IE7, but All versions of IE on a PC. Of course this may be a fault of my own code.

Can anyone confirm if they have the script successfully working in IE on a PC?

Every other browser is perfect for me…

Gravatar jmack

So this is great what you have done here. Looks very promising for a project that I am undertaking. One question though (and perhaps I am just spacing something in the code and documentation). The site that I would like to engineer this functionality to is a 'one-framer'. That is… I cannot use named keyframes to jump to on click events. I would love to use this but am curiouis how I would track the states when I have a movieClip that needs to be passed as a parameter to then kick off a transition into a previously visited section of the site when a user clicks the browser ffwd or back button. Also curious how one would bookmark something such as this. Is it even possible? Thanks for any information that you may have. Again… this looks like something that would be great and adaptable to my situation. Good work!

Gravatar Scot

Wow, so this is pretty rad. Like a few other people have posted my site is a single frame with a large movieclip that contains different sections with in it (nested movieclips) my code is written in a separate actionscript file and I use fuse to tween to different sections within the movieclip. On it's own the code works fine, when incorporating stateManager I put my fuse statements within a switch statement. I should note that I am not that great of a programmer and would appreciate any advice, perhaps someone could take a look at my file even. Hope you can help.
Cheers

So it looks something like this:

mcStage.nav_mc.home.onRelease = function():Void {
StateManager.setState(StateManager.defaultStateID);
}
background_mc.mainCanvas.newsHome.onRelease = function():Void {
StateManager.setState('news');
}

function stateChangeHandler(e:Object):Void
{
var val = StateManager.getValue();
switch (val) {

case 'StateManager.defaultStateID':
var f:Fuse = new Fuse();  
f.push({target:background_mc, scale:100, x:homeX, y:homeY, seconds:2, ease:"easeInOutQuint"});  
f.start();
break;
StateManager.setTitle('OkiDoki :: ' + e.id);
};
StateManager.addEventListener('stateChange', Delegate.create(this, stateChangeHandler));

I am getting a syntax error with my fuse statements but there is no problems when it looks like this:
background_mc.mainCanvas.newsHome.onRelease = function()
{
var f:Fuse = new Fuse();
f.push({target:background_mc, scale:100, x:newsHomeX, y:newsHomeY, seconds:1, ease:"easeInOutBack"});
f.start();
}

Gravatar Victor

Hi, this looks great!

Sigh. Im trying to wrap my head around as. Im a more visual person…

How do I use this with yugo pop navigation menu

http://laco.wz.cz/tween/?page=examples

my nav is on its own level calling in swfs to another level

is StateManager the right thing for me, or is swfaddress better. And are there any easy swfAddress tutorials. Your tutorial made alot of sense. Thanks for your hard work.

Gravatar Brett

I'M IN NEED OF GREAT HELP!!!

I'm in the process of making a new version of my company's website and im going 100% flash and I am wanting deep linking. So today I placed state manager into it and played around with it. So far I have a main swf with the navigation and the state manager action script. each state loads external swfs into the main one. I only have the main swf and the about one done so far, im just trying to get this navigation to work. I am needing help ASAP so I have included both just the main swf FLA file and a zipped up file of the whole folder.

Here are some things I found out or have problems with for:
1.I made my buttons with a movie clip and the rollovers and release animations worked great until I added the state manager actionscript – the release animation is messed up now.
2. Also when i was on the about page, if you click the action button twice, that page reloads. Is there some way to prevent this? So that when your on that particular page/state, the button for it is inactive?
3. I then uploaded everything to the server and i wasn't able to go to the about page at all. I really don't know what happened. I mean, no file locations are different.
4. Something I wondered. Say an external swf loads and has buttons that on release need to go to a state in the main swf's timeline. How would I go about that?

That's about it, hope it makes sense. I have aim too. My sn is brettbash and I'm on it most of the time. Any help is appreciated.

Here is the link to the main fla: bashperformance.com/Home%20Page/New/Home/main2.fla

url to the index.html on the server: bashperformance.com/Home%20Page/New/index.html

Link to the zip file of the folder and content: bashperformance.com/new.zip

Gravatar Mark Lawrence

Hi there,

This code is great – if only I could get it to work!

I have followed your well written instructions about 5 times now, and cant seem to get this to work – I was wondering if someone could take a look and help me out?

All the files im using are here:

http://www.marklawrencedesign.com/test_states/Archive.zip

Any help greatly appreciated – keep up the good work!

thanks

Gravatar Mark Lawrence

Would you believe it –

Just posted this, had one last try and got it to work – first line of code:

'import com.exanimo.managers.StateManager.as;'

deleted the .as extension

…Must have added it when having a fiddle with it (blushes)

Great stuff!!

Gravatar renderizer

Hey guys, what about the I.E.7 problmes? people already mentioned here a few post above__BUMP___ i'm also having it, if i type the link directly, it goes, but if i access from a button inside ithe Movie Clip doesn't do anything, just shows the address but doesn't refresh to the page. did anybody made it work on I.E.7??

great app

Gravatar SomeOne

The code is great…

But, when I updated the flash player, why i can only see "Download Flash!" on the page?
http://exanimo.com/examples/as2/StateManager/flash-1.html

Do i need to amend the "swfobject.js"?

Thanks.

Gravatar Jeff

Ran into one little issue. Just wondering if anyone else has had the same issue and know of a fix? Back and forward buttons work fine and deep linking works fine. But, if a user hits the browser's refresh button I lose all the states and my ajax page tabs, I have, do not work anymore, till I remove the # mark from the browser and click enter to load the page again.

Gravatar Dustin Brunson

Hey Matthew, Awesome work, this solution is so simple and works perfectly.

I have managed to make it work with my dynamic php flash site you can check it out here

http://stevedewart.com

I would like to be able to pas the url into php mostly I need the #pagetitle , is there a way to send this var to php on page load?

Thanks.

Gravatar matthew

@jmack:
The system for using the StateManager with a "one-framer" is exactly the same.. only instead of calling gotoAndPlay, you call your own navigation method.

@Scot:
Statemanager.defaultID is a variable, so you shouldn’t be quoting it.

@Brett:
I’m really sorry but I’m really busy and don’t have any time to delve into people’s projects.

@renderizer, et al.:
I haven’t seen any IE7 problems. Is the example not working for you? So far everybody’s problems seem to be unrelated to StateManager. The example works fine for me in IE7; is it not working for you?

@Dustin:
Sure is. If you’re using SWFObject, just call so.addVariable('url', "<?php echo $_SERVER['REQUEST_URI'] ?>") where so is your SWFObject instance. If not, append ?url=<?php echo $_SERVER['REQUEST_URI'] ?> to the swf source.

Gravatar nikon

hi, i'm trying to manipulate a flash movie with html links. it works well with firefox but in safari and IE the url changes but not the fash content. you have to reload the page manually.

here's an example
http://uptmoor.com/tmp/statemanager/

does anybody have an idea how i could solve this?

thanks for help
nikon

Gravatar matthew

@nikon:
It's really only due to an implementation detail that those links work in FireFox. If you want to do that, you'll have to add a callback from within your flash piece and call that when the links are clicked. Your ActionScript will look something like this:

import flash.external.ExternalInterface;
ExternalInterface.addCallback('navigate', navigate);
function navigate(stateID:String):void
{
    StateManager.setState(stateID);
}

And your JavaScript will look like this:

document.getElementById('aboutLink').onclick = function()
{
    document.getElementById('mySWF').navigate('about');
    return false;
}

This assumes that your HTML link has id "aboutLink" and your SWF has id "mySWF."

Gravatar nikon

@matthew: i've added the as code to your example flash-1.fla and the onclick event to my html file. but i didn't get it. could you please take a look at the source code?
-> http://uptmoor.com/tmp/statemanager2/
have i made an anything wrong?

greetings from berlin
-=nikon=-

Gravatar nathan

so sad to hear you have discontinued it.
swfaddress is so unfriendly to use.

Gravatar nikon

hi matthew, i still need some help with the callback. do i need a recource file for the ExternalInterface? or maybe i made a mistake. i've uploaded the modified flash-1.fla example file and the html example site.
http://uptmoor.com/tmp/test03.zip
could you please take a look at it?

thanks a lot
-=nikon=-

Gravatar matthew

Sorry, nikon. Don't use document.getElementById. Instead use a function like the getSWF function presented here.

Gravatar nikon

hi matthew, i now use the following code to call the actionscript function:
about

.. but it doesn't work:-( do i have to define the function getSWF() somewhere? i didn't find any information about that in the flex 3 reference.
it would be fantastic if you could modify the test03.zip file and send it to me. i'am sure i did forget anything really simple (because i didn't really understand this as3 stuff:)

thank you
-=nikon=-

Gravatar nikon

href="#about" onClick="javascript:getSWF("mySWF").navigate('about');return false;"

Gravatar Gavin B

Hi Mathew,

First off I would just like to thank you for StateManager. Too bad you have stopped it's development.

I have a quick question that hopefully you can answer. I am deeplinking and have a preloader in my flash page, unfortunately, when I deeplink to a page other than the default address, the preloader does not function.

I have initialized statemanager after the prelaoder. Do you have any suggestions?

Thanks again

Gavin

Gravatar gordianknot

so sad to hear you have discontinued it.
Although SWFAddress is more powerful but StateManager is more friendly and easy to use.

Gravatar Cadpax

Well, i'm using this code and try to make a more dynamicly framework for me, but got one big problem in the ie7.
I have to click 2 or three times, to jump him back to the last page. Deeplinking don't work too, but isn't necessary.

Bit of Code will be found: http://paste.bradleygill.com/index.php?paste_id=20317

In FF 2/3, Opera 9.6/10 everything works absolutely fine

Anyone ideas?!

Gravatar tcarrier

has anyone tried statemanager with xml based flash productions? i am working on a video archive player that is updated by xml. each button is dynamic and there are no labeled frames to work with. There is a build up to get to stage setting before the first video auto plays. i have set the initialize() right before that default video play. unfortunately, everything does not work when it comes to loading a specific deep link.

if i need to post assets, let me know.

thanks.

Gravatar matthew

@tcarrier Have you considered switching over to SWFAddress? StateManager isn't under active development anymore.

Gravatar tcarrier

hey matthew…..
yes, i tried swf address, but found it not as friendly to implement. i may try later for the next project that needs deeplinking and work with something that is current…but…
today, i figured it out. i stripped everything and started over. it was simply trying to find the right time to have statemanager initialize at the right time. ..also learned that i need to know more about actionscript.

Gravatar tcarrier

and thanks for checking in.

Gravatar han kila

how do i remove the state manager from my swf ?
I removed every reference to the statemanager from my action script but it keeps adding the #start to my url

i really need this removed :-s

Gravatar han kila

i meant "how do i remove it from my fla?"