[r1card0]

Hello All,

This is my first question since joining D.I.C. recently.

I think it might help if I give background to my problem.

I designed/coded a site for my aunt who is a fused glass artist. www.janicebradshaw.co.uk
The site is PHP MySQL based.

she makes items out of fused glass such as bowls, platters, wall art, lamps, tables etc. in different colours.
I'm now attempting a flash application of the dynamic product gallery variety.

We have all her pieces in mysql database categorised by type and colour along with descriptionText, image URL, etc.
Theres about 9 types of items and 12 colours..
the goal is that user can query DB by TYPE and COLOUR via 2 banks of toggle buttons on the UI.
on pressing a "view" button , SelectedColour and SelectedType arrays are sent to PHP MySQL (using remoting) and return a data set. That data set can then be unpacked into objects with a while loop and displayed accordingly.

eg
red, yellow, black buttons :: ON
bowls, tables :: ON

would result in a dataset of (bowls or tables) that contain (red or yellow or black as one of the colours).

I'm ok with the PHP MySQL bit. And even the remoting ive got working on simpler cases no problem.

I've made the toggleButton movieclips which have 4 frames representing the states on,on_over,off,off_over

heres my code which is on frame1 of script layer on main timeline...
it creates the myColourSelection array and does the business for the black button.

var myColourSelection:Array = new Array("empty apart from this element");

black_btn.addEventListener(MouseEvent.MOUSE_OVER, togRollover);
black_btn.addEventListener(MouseEvent.MOUSE_OUT, togRollout);
black_btn.addEventListener(MouseEvent.CLICK, togClick);
black_btn.state="off";
black_btn.value="black";

function togRollover(event:MouseEvent){
	black_btn.gotoAndStop(black_btn.state+" over");
}

function togRollout(event:MouseEvent){
	black_btn.gotoAndStop(black_btn.state);
}

function togClick(event:MouseEvent){
	if (black_btn.state=="off"){
		//add element
		myColourSelection.push(black_btn.value);
		trace(myColourSelection);
		black_btn.state="on";
	} else {
		//remove element
		myColourSelection.splice(myColourSelection.indexOf(black_btn.value),1);
		trace(myColourSelection);
		black_btn.state="off";
	}
	black_btn.gotoAndStop(black_btn.state+" over");
}

now i could do that another 11 times for each of the colours...
but to me that seems "not very elegant" shall we say.
Every button has the same behaviour so to speak
but the red button is a different mc (displayObject) and adds "red" to the array
and the blue button is a different mc and adds blue to array etc etc

i can see its a job for classes...

I know my toggle button class must extend movieClip and also import from flash.events.Event...

if i take the "black_btn" code and try and generalise it to a class along with those other bits ive picked up so far I now have...

package {

	import flash.events.*;
	import flash.display.MovieClip;
	public class toggleButton extends MovieClip {

		private var myState:Boolean;
		private var myValue:String;
		private var myColourSelection:Array;

		this.addEventListener(MouseEvent.MOUSE_OVER, togRollover);
		this.addEventListener(MouseEvent.MOUSE_OUT, togRollout);
		this.addEventListener(MouseEvent.CLICK, togClick);


		function togRollover(event:MouseEvent) {
			this.gotoAndStop(this.myState+" over");
		}

		function togRollout(event:MouseEvent) {
			this.gotoAndStop(this.myState);
		}

		function togClick(event:MouseEvent) {
			if (this.myState==false) {
				//switch on
				this.myState=true;
				//add element to array
				myColourSelection.push(this.myValue);
				//view the array to test
				trace(myColourSelection);
			} else {
				//switch off
				this.myState=false;
				//remove element from array
				myColourSelection.splice(myColourSelection.indexOf(this.myValue),1);
				//view the array to test
				trace(myColourSelection);
			}
			this.gotoAndStop(this.myState+" over");
		}
	}
}

the questions going round and round in my mind are ::

am i close?
if i am and thats the way to do it.. how do i then say link the green toggle button movieclip with that class where the myValue="green" and initial value is off (boolean false)...

ive been studying (wileys) AS3 bible, (friends of ed's) Object Oriented AS3, and (O'reilly) Essential AS3 till my brain hurts. i just cant quite seem to pull it all together hence this post. I dont want the thing writing for me im hoping just for a bit of enlightened input or steering or maybe a pointer to a good example or tutorial...

Thanks for your time.
Ricardo.

[r1card0]

SOLVED IT : Here's my solution that will make toggle buttons for different coloured button lookking movieClips.
same can be applied to my situation for type of item just by adding or removing from a mySelectedType array.

var myColourSelection:Array=new Array();

function makeToggle(theButton:MovieClip, theColour:String) {
	theButton.addEventListener(MouseEvent.MOUSE_OVER, togRollover);
	theButton.addEventListener(MouseEvent.MOUSE_OUT, togRollout);
	theButton.addEventListener(MouseEvent.CLICK, togClick);
	theButton.myState="off";
	theButton.myColour=theColour;

	function togRollover(event:MouseEvent) {
		theButton.gotoAndStop(theButton.myState+" over");
	}

	function togRollout(event:MouseEvent) {
		theButton.gotoAndStop(theButton.myState);
	}

	function togClick(event:MouseEvent) {
		if (theButton.myState=="off") {
			//turn on
			theButton.myState="on";
			//add element to array
			myColourSelection.push(theButton.myColour);
			//view array to test
			trace(myColourSelection);
			
		} else {
			//turn off
			theButton.myState="off";
			//remove element
			myColourSelection.splice(myColourSelection.indexOf(theButton.myColour),1);
			//view array to test
			trace(myColourSelection);
		}
		theButton.gotoAndStop(theButton.myState+" over");
	}
}

//now attach the toggle function to the movieclips
makeToggle(blackButton_mc, "black");
makeToggle(greenButton_mc, "green");
makeToggle(yellowButton_mc, "yellow");
makeToggle(blueButton_mc, "blue");