contact

Simple Flash Actionscript 2 XML Navigation Concept

 

This is a small navigation concept I did using Flash and XML. Its about a hundred lines of code but shows really well how easy it is to use xml data in flash. The code is free to download.

Download: Fla

This is the xml syntax the app uses… it took me less than an hour to write the whole thing plus one evening in be where i could not sleep an thought the whole thing through, so please if there are any mistakes its simply because i did not spend enough time with this.



	
	
	
		
		
		
			 
			 	
			
			
		
	
	

this is the actionscript class i wrote to get the whole thing going. it looks really simple now but if you change the animations you will notice that the big fashion sites often don’t use anything better.

class node {
	var p:XMLNode
	var p_id:Number
	var id:Number
	var open_stat:Boolean
	var level:Number
	var mc:MovieClip
	var p_mc:MovieClip
	var label:String
	var xml:XMLNode
	var i:Number
	var default_color
	function node(n:XMLNode,it:Number){
		xml=n
		i=it
		id=_root.id_num
		xml.attributes.id=id
		level=xml.parentNode.attributes.level
		p=xml.parentNode
		p_id=xml.parentNode.attributes.id
		_root.id_num++
		label=xml.attributes.label
		_root.attachMovie("node_mc","node"+id,id)
		mc=_root['node'+id]
		p_mc=_root['node'+p_id]
		set_label(label)
		default_color=0x333333
		color_label(default_color)
		mc._x=p_mc._x+100
		mc._y=+i*20
		line(default_color)
		mc.node=this
		mc._alpha=0
		mc.onRelease=function(){
			this.node.open_node()
		}
		mc.onRollOver=function(){
			if(this.node.open_stat!=true){
			this.node.color_label(0x0099ff)
			this.node.line(0x0099ff)
			}
		}
		mc.onRollOut=function(){
			if(this.node.open_stat!=true){
			this.node.color_label(0x333333)
			this.node.line(0x333333)
			}
		}
		fade_in()
	}
	function line(c:Number){
		mc.clear()
		mc.moveTo(0,mc._height/2+3)
		mc.lineStyle(1/100,c,100)
		var px:Number=(p_mc._x+p_mc.label_txt._width)-mc._x
		var py:Number=(p_mc._y+10)-(mc._y)
		mc.lineTo(px,py)

	}
	function set_label(l:String){
		mc.label_txt.autoSize=true
		if(l!=undefined or l!=""){
		xml.attributes.label=l
		label=l
		mc.label_txt.text=l
		}else{
			mc.label_txt.text=label
		}
	}
	function color_label(c:Number){
		if(c!=undefined and c!=""){
			mc.label_txt.textColor=c
		}
	}
	function open_node(){
		if(open_stat!=true){
			open_stat=true
			color_label(0x0066cc)
			line(0x0066cc)
			close_siblings()
		if(xml.hasChildNodes()==true){
			for(var i:Number=0;i

Tags: , , , , , ,