Post Edited: April – 16, 2009.

Hi, im Joisiney Leandro, new author of the DES84 Blog, and now i will talk something about the navigation structure that i created. This can manage all the navigation of your project, for small sites, more easily and speedily of you create your structure from zero.

What this structure do?

• Send click events for the Google Analytics.
• Create a protection block for the user cannot click in the same button more one time or click and two buttons when load the first. The final user may wait the transition to interact again with the menu links.
• Enable the forward and backward browser buttons.
• Change the page title and the URL address depending the link called.
• Return the progress event, percent loaded, when you load external data.
• Return the complete event and make the simple transition, fade in and fade out, and you can do your own transition when load external animations.
• You can create custom forward and backward buttons to use inside the Flash, this feature work only inside the browser, its good to full screen sites.

All the documentation of the classe is included in a implement document, the class used in this example is the NavegateAdressAnalitics, you can read the documentation into the ImplementsNavegateAdressAnalitics on the same folder of the class (only in portuguese ).

Well, go code. Here is the API’s that you need to use the navigation structure work fine. [SWFAdress, TweenLite, GAForFlash]

See the working sample clicking here: http://blog.des84.com/projects/navigation/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

package
{
	import JrsAs.events.Events;
	import JrsAs.events.ProgressEvents;
	import JrsAs.pub.core.NavegateAdressAnalitics;
	import JrsAs.pub.shap.Rectangle;
	import JrsAs.str.core.SWFAddress;
 
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.text.TextField;
 
	public class Acesso extends MovieClip
	{
		public var mcDoc_group:MovieClip;
		public var mcDoc_Um:MovieClip;
		public var mcDoc_Dois:MovieClip;
		public var mcDoc_Tres:MovieClip;
		public var mcDoc_Quatro:MovieClip;
		public var mcDoc_Avancar:MovieClip;
		public var mcDoc_Voltar:MovieClip;
		//------------------------------
		private var cot_transition:NavegateAdressAnalitics;
		private var mc_block:Rectangle;
 
		public function Acesso():void
		{
			mc_block = new Rectangle();
			mc_block.jrs_Height = 300;
			mc_block.jrs_Width = 700;
			mc_block.jrs_ColorBG = 0xff0000;
			this.stage.addChild(mc_block);
 
			cot_transition = new NavegateAdressAnalitics();
			cot_transition.jrs_SetDomain = "http://www.domeujeito.com.br";
			cot_transition.jrs_SetUA = "UA-5351680-2";
			cot_transition.jrs_SetMCBlockTransition = mc_block;
			cot_transition.jrs_SetArgsPag = {id:0, onLoad:Empresa, setTitle:"Empresa"};
			cot_transition.jrs_SetArgsPag = {id:1, onLoad:Historia, setTitle:"História"};
			cot_transition.jrs_SetArgsPag = {id:2, onLoad:"produtos.swf", setTitle:"Produtos", onLoadFunction:"jrs_TextParams", onLoadParams:["joice","rocha"]};
			cot_transition.jrs_SetArgsPag = {id:3, onLoad:Contato, setTitle:"Contato", onLoadParams:["joice","rocha"]};
 
			cot_transition.jrs_SetEditArgsPag = {id:3, setTitle:"Fale Conosco", onLoadParams:["joice 3","rocha 3"]};
 
			cot_transition.addEventListener(Events.COMPLETE, jrs_complete);
			cot_transition.addEventListener(ProgressEvents.PROGRESSO, jrs_progress);
 
			mcDoc_group.addChild(cot_transition);
 
			SWFAddress.setInit("/0/Empresa");
 
			mcDoc_Um.id = "/0/Empresa";
			mcDoc_Dois.id = "/1/História";
			mcDoc_Tres.id = "/2/Produtos"
			mcDoc_Quatro.id = "/3/Fale Conosco";
 
			mcDoc_Um.addEventListener(MouseEvent.CLICK, click);
			mcDoc_Dois.addEventListener(MouseEvent.CLICK, click);
			mcDoc_Tres.addEventListener(MouseEvent.CLICK, click);
			mcDoc_Quatro.addEventListener(MouseEvent.CLICK, click);
 
			mcDoc_Avancar.addEventListener(MouseEvent.CLICK, avancar);
			mcDoc_Voltar.addEventListener(MouseEvent.CLICK, voltar);
		}
		private function click(event:MouseEvent):void
		{
			if(cot_transition.jrs_GetProximaPagina)SWFAddress.setValue(String(event.currentTarget.id));
		}
		private function voltar(event:MouseEvent):void
		{
			if(cot_transition.jrs_GetProximaPagina)SWFAddress.back();
		}
		private function avancar(event:MouseEvent):void
		{
			if(cot_transition.jrs_GetProximaPagina)SWFAddress.forward();
		}
		private function jrs_complete(event:Events):void
		{
			//trace("event.info");
		}
		private function jrs_progress(event:ProgressEvents):void
		{
			//trace(event.info.bytesLoaded);
		}
	}
}

Description of the Acesso.as

28
29
30
31
32

mc_block = new Rectangle();
mc_block.jrs_Height = 300;
mc_block.jrs_Width = 700;
mc_block.jrs_ColorBG = 0xff0000;
this.stage.addChild(mc_block);

Creating the Movieclip that will block the access for the multiple clicks, for this the movieclip may added to stage.

34
35
36

cot_transition = new NavegateAdressAnalitics();
cot_transition.jrs_SetDomain = "http://www.domeujeito.com.br";
cot_transition.jrs_SetUA = "UA-5351680-2";

The line 34 initialize the class and create the main objects, the line 35 and 36 create the Google Analytics object, you need put your site URL and your Google Analytics ID for this site, always use these two setter functions to GA for Flash work right.

37

cot_transition.jrs_SetMCBlockTransition = mc_block;

This setter function is not necessary but it will resolve some probably navigation problems, it set the object that will block the stage when have the transition.

39
40
41
42

cot_transition.jrs_SetArgsPag = {id:0, onLoad:Empresa, setTitle:"Empresa"};
cot_transition.jrs_SetArgsPag = {id:1, onLoad:Historia, setTitle:"História"};
cot_transition.jrs_SetArgsPag = {id:2, onLoad:"produtos.swf", setTitle:"Produtos", onLoadFunction:"jrs_TextParams", onLoadParams:["joice","rocha"]};
cot_transition.jrs_SetArgsPag = {id:3, onLoad:Contato, setTitle:"Contato", onLoadParams:["joice","rocha"]};

These lines, 39 to 42, create the pages of your project. The setter function send an object with all data using two ways:

Loading an external SWF and use this parameters:
id:uint = id of the page, case have two links with the same name.
onLoad:* = the address of the external SWF file.
setTitle:String = set the Title of the page called.
onLoadFunction:String = this set the function name into the loaded file that will called when the file load is complete.
onLoadParams:Array = you can send here the parameters to onLoadFunction.

Importing class from the library
id:uint = id of the page, case have two links with the same name.
onLoad:* = classe/MovieClip name.
setTitle:String = set the Title of the page called.
onLoadFunction:String = in this case, attaching a class, you can choose if you call a function or not, if not use it but you send the parameters, these parameters will be send direct to constructor of the class.
onLoadParams:Array = you can send here the parameters to onLoadFunction or to constructor.

44

cot_transition.jrs_SetEditArgsPag = {id:3, setTitle:"Fale Conosco", onLoadParams:["joice 3","rocha 3"]};

Using the jrs_SetEditArgsPag is possible change the data of the parameters of the pages created. If you create a product page and you want change the Title of the page when click in one or other product you can. Its easy like show the line 40.

51

SWFAddress.setInit("/0/Empresa");

Here th API SWFAdress come and set the initial page, the first page that will be opened.

The format of the URL is: http://….com.br/index.html#/id/Titulo/ when id is the responsible for the navigation, change the id and you will change the page.

72

if(cot_transition.jrs_GetProximaPagina)SWFAddress.back();

The Setter SWFAddress.back() only work right into the browser, and this make you go to the backward page.

76

if(cot_transition.jrs_GetProximaPagina)SWFAddress.forward();

The Getter jrs_GetProximaPagina verify if you can go to the next page, case you go to a page and click in backward button, if possible, return true, and the setter SWFAddress.forward will make you go to the next page too.

You can download the sample here: Navigation Structure (231)

PS: into the SWF file that you will download, contain all class that you need to make the structure work fine, including GA for Flash, Tweenlite and SWFAddress. Other thing is, the post dont talk about the possible that remove the backward and forward button if is no necessary but this is possible.