Help me re-learn please

Ok, so pretty much I have been self taught since day one. But have come to realize that I have picked up some bad habits along the way.
When it comes to creating buttons, I usally make an MC with the animation that I want. Then I create an invisible button over the MC. And this AS.

code:

---

myButton.onRelease = function() {

	thisbutton.enabled = false;

	otherbuttons.enabled = true;

	if (otherButtonMC._currentFrame == 5) {

		otherButtonMC.gotoAndPlay(6);

	}

};

---

So on and so on. Which is fine if you have say only 6 buttons for a main menu.
But I just rescently created an image gallery of sorts that had 56 buttons.
Well, my little bit of code turned into 12000 lines of code. It wasn't a big deal, just a lot of copying and pasting, but there has to an easier way.
Please help me re-think my logic about this concept.

:(

It sounds like you are saying that you are repeating the 'other button' code for all those other buttons.

I'm assuming that typically only one button is enabled at a time.

You can keep track of the 'enabled' button in a _root or _global variable, and then only disable that button.

You can use a single set of functions for handling the disabling and enabling.

For example, you could have two functions, in a frame script that look like this:

code:

---

MovieClip.prototype.disableButton()

{

 // do whatever a disabled button needs to do

 if (this._currentFrame == 5) {

             this.gotoAndPlay(6);

 }

 this.enabled = false;

}



MovieClip.prototype.enableButton()

{

  // disable the active button

  if (_root.activeButton != this)

  {

    _root.activeButton.disableButton();

  }

  // do whatever the active button needs to do here...

  _root.activeButton = this;

  this.enabled = true;

}

---

Then all your button code reduces to:

code:

---

myButton.onRelease = function() {

  this.enableButton();



}

---

I'm assuming that typically only one button is enabled at a time.



Actually no. Of the 56 buttons, only one is disabled at a time. The other 55 are enabled.
Under the buttons is an MC that plays a rollOver effect from frame 1-5. With a stop on frame 5. Then frames 6-10 have the rollOut effect.

If the button is clicked and becomes disabled, the MC will just naturally stop on frame 5. Thats why I was putting the if statements on the other buttons to check to see if the MC's were on frame 5. If so, then play out animation.
That make any since?


edit: after re-reading your code, I think you meant disabled instead of enabled.
Would you mind a short explanination of the !=
The ! confuses me.
My brain hurts. Im going to bed. :p
I'll catch up on this thread when I wake up :)
Thanks again jbum. Gonna have to splurge for another bottle if you keep this up :p

!= means "not equal to" - it is the opposite of ==

The purpose of that line with the != is to help handle the situation where you click on the same button twice (to make sure we don't trigger the 'unclick' animation).

What I meant is that one button is "pressed" at a time, so each time you press a button, you need to "unpress" only 1 button (and not every other button).

In my code, the variable _root.activeButton is used to keep track of the last button that was pressed, so that it can be unpressed, when another button is pressed.

Sweet. You just reduced 12000 lines code to 220 :)

While I got you here, mind if I ask another question?

Im using this code that I found on Ultra shock that preloads the jpg's in the gallery. Which works "ok". But the preloader is kinda sketchy.

code:

---

myIdentifier = Math.round(Math.random()*100000);



MovieClip.prototype.preload = function(p_img) {

	preloader._visible = false;

	preloader.bar._width = 0;

	this.createEmptyMovieClip("imagecon", 101);

        this.createEmptyMovieClip("pload", 100);

	this.imagecon.loadMovie(p_img);

	this.imagecon._x = -376;

	this.imagecon._y = 4;

	this.imagecon._visible = false;

	this.pload.onEnterFrame = function() {

		preloader._visible = true;

		var l = this._parent.imagecon.getBytesLoaded();

		var t = this._parent.imagecon.getBytesTotal();

		var getPercent = l/t;

		preloader.bar._width = getPercent*190;

		if (l>0 && l>=t) {

			this.imagecon._visible = 1;

			delete this.onEnterFrame;

			this.removeMovieClip();

		}

		if (getPercent == 1) {

			preloader._visible = false;

		}

	};

};



// button AS

on (release){

preload("myPicture.jpg?uniq="+myIdentifier);

};

---

What I have been trying to add to it for the last 2 days is an if statement somewhere that will show a dynamic text field that says "No Image Availible" if there is no pic to load. But I have had absolutely no success.

Thanks agian for showing me the light with the buttons :)
Josh

p.s. I have had a lot of people asking me about the resize script that you wrote for my site. And I tell them I am the village Flash idiot and didn't write it and credited you. Any of them contact you?

If you're using Flash MX 2004, then I would suggest reading the docs in the actionscript dictionary on the MovieClipLoader class.

It enables you to implement callback functions for when a movieclip fails to load.

Thanks for the kind words.

Okie dokie. I did some reading.
I think I am close. I got it where the text will show up if it doesnt load and go away if it does. But now I can't get the preloader to show up and the bar_mc inside the preloader to scale up to 100. When I ctrl+enter twice to test it, the preloader flashes for a second then goes away while the pic loads.
Here is what I have so far. Let me know if I am on the right track
:)
Also, what would I use on a button call the next pic?

code:

---

var mclListener:Object = new Object();

mclListener.onLoadInit = function(image_mc:MovieClip) {

	image_mc._x = 0;

	image_mc._y = 0;

	noper = "";

};

mclListener.onLoadStart = function(image_mc:MovieClip) {

	noper = "";

	preloader.visible = true;

	preloader.bar._xscale = 0;

};

mclListener.onLoadProgress = function(image_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {

	preloader.visible = true;

	preloader.bar._xscale = 0;

	preloader.bar._xscale = Math.round(bytesLoaded/bytesTotal*100);

};

mclListener.onLoadComplete = function(image_mc:MovieClip) {

	preloader._visible = false;

};

mclListener.onLoadError = function(image_mc:MovieClip, errorCode:String) {

	noper = "No Image Availible";

	preloader._visible = false;

};

this.createEmptyMovieClip("image_mc", 100);

var image_mc1:MovieClipLoader = new MovieClipLoader();

image_mc1.addListener(mclListener);

image_mc1.loadClip("pictures/4X10.jpg", image_mc);

---

Nevermind about the button, got that. Still can't get the preloader to show up though :mad:

I would insert some trace() commands to see if you're getting any onLoadProgress events - if the load happens quickly, you may not get them. You can also poll
image_mc1 (using MovieClipLoader.getProgress() ) from an onEnterClip handler, as you were doing before, to provide more frequent updates.

K, I added some traces to see what going on.

code:

---

var mclListener:Object = new Object();

mclListener.onLoadInit = function(image_mc:MovieClip) {

	trace ('initialized')

	image_mc._x = 100;

	image_mc._y = 100;

	noper = "";

};



mclListener.onLoadStart = function(image_mc:MovieClip) {

	trace('started')

	noper = "";

	_root.preloader.visible = true;

	_root.preloader.bar._width = 100;

};

mclListener.onLoadProgress = function(image_mc:MovieClip) {

	trace ('progress')

	var w = image_mc.getBytesLoaded();

	var t = image_mc.getBytesTotal();

	var getPercent = w/t;

	preloader.bar._width = getPercent*100;

};

mclListener.onLoadComplete = function(image_mc:MovieClip) {

	trace ("loaded")

	preloader._visible = false;

	

};

mclListener.onLoadError = function(image_mc:MovieClip, errorCode:String) {

	noper = "No Image Availible";

	preloader._visible = false;

	trace('not loaded')

};

this.createEmptyMovieClip("image_mc", 100);

var image_mc1:MovieClipLoader = new MovieClipLoader();

image_mc1.addListener(mclListener);

image_mc1.loadClip("pictures/4X10.jpg", image_mc);

---

In the output window I get
started, loaded, initialized (in that order) but no progress?
:confused:
And if I try to load a jpg that is not there, I only get not loaded, so that works. I don't understand the poll concept. Sorry.

Yeah, looks like you're not getting progress. If the picture is taking a long time to load, then something fishy is happening, and we should investigate...

Here's what a polling function would like, similar to what you were doing before - see the docs on MovieClipLoader.getProgress.

code:

---

// A polling function...



preloader.onEnterFrame = function()

{

  var prog = image_mc1.getProgress();

  var w = prog.bytesLoaded;

  var t = prog.bytesTotal;

  var getPercent = w/t;

  this.bar._width = getPercent*100;

}

---

When you get the loadComplete (or loadError) you can disable the polling function using

delete preloader.onEnterFrame;

Ugg. I tried that and still did not work.
I looked at the docs on MovieClipLoader.getProgress even before I posted the previous post. But all that did was sow the end result. It did not show the progress during load.

How long (in seconds) is it taking the image to load?

Well. I tested it on the server and the above code with out the poll sorta works. The swf will load. The preloader will show up for a split second, the disapear and then it shows up agian starting to scale to 100% So it "kinda" works. But then when I try to call the function again to load another pic via a button, preloader no shows.
Here it is on the server. http://www.solidtorch.com/teststuff/
Here is the .fla zipped if you don't mind. I'm stumped. :(

Quote:

---

Originally posted by jbum
How long (in seconds) is it taking the image to load?

---

Just with a normal test, maybe 1/10th of a second.
But hitting the ctrl + enter agian to test the bandwith, a pic that was 52kb tested at 56k took about 6 seconds.
I tried it with many different sizes of jpg. Even one that was 12mb. I could see the % in the profiler counting up, but the preloader was not showing up.
Then I tested it on the server and what I said above happened.

Thanks, I'll investigate more thoroughly later tonight.

You've got a few commands to set the visibility in which you are using the property visible instead of _visible. This is particularly a problem in onLoadStart().

Also, I changed your button code to:

code:

---

on (release) {

	// image_mc1.addListener(mclListener);

  // don't need to add listener here, but

  // might want to unload the previous clip

  image_mc1.unloadClip(image_mc);

  image_mc1.loadClip(

"name of jpeg", image_mc);

}

---

I think changing the _xscale of progress.bar is probably more flexible than changing the _width - it will enable you to resize the bar without modifying your code - just make sure the registration within the bar symbol is on the left of the bar, so it expands to the right.

code:

---

mclListener.onLoadProgress = function(mc, w, t) {

	trace('progress: ' + w + ", " + t);

	preloader._visible = true;

	preloader.bar._xscale = (w/t)*100;

};

---

Sorry. I had to finish watching the Red Sox kik the Yankee's butt. (barely) :rolleyes:

Ok, So the visible thing I fixed, slight typo on my part, sorry.
I added your code for the onLoadPreogress,and it works. :)
But, just to make sure,

mclListener.onLoadProgress = function(mc, w, t)
should be
mclListener.onLoadProgress = function(image_mc, w, t)
correct?


Also, it seems that making the preloader _visible=true on Start, Init, and Progress seems redundant.
I tried leaving it in only one and tested it three times. It works for all, but which one is it better to leave it in? I would guess Start, correct?

When testing it through Flash using the bandwith profiler, the preloader doesnt show up at all. But on the server it does. Which doesnt make any since to me one bit.

And last, the trace for the progress still doesnt show up.
Still outputs just Start, Loaded, Initialized.
Any idea why?

Thanks again jbum :)

Quote:

---

But, just to make sure,

mclListener.onLoadProgress = function(mc, w, t)

should be

mclListener.onLoadProgress = function(image_mc, w, t)

correct?

---

No, not correct, it doesn't matter, and I actually personally prefer to use mc (that is a name which doesn't match the actual name of the movie clip you're passing. I'll try to explain why:

Consider a simple function which operates on a movieclip:

code:

---

myFunction = function(mc:MovieClip, xOffset:Number)

{

  mc._x += xOffset;

}

---

The function operates on whatever movieclip is passed to the function. This makes the function reuseable. So I can use it on Harry:

myFunction(harry_mc);

and I can use it on George:

myFunction(george_mc);

If I use it on harry_mc, than mc refers to harry_mc, and if I use it on george_mc, than mc refers to george_mc. mc corresponds to whatever movieclip is passed to the function when it is invoked.

Since the purpose of the function is to be reuseable, I prefer to make it crystal clear that I am referring to a parameter that was passed to that function, and not to a particular external movieclip. And one way to make that clear is not to use a name which happens to be identical to an external clip (even though that clip is likely to be the one passed to the function). Within the scope of the function, mc does not refer to any external mc, but only to the thing that was passed to the function.


On the other hand, if I am going to write a function that modifies one and only one movieclip external to the function, then I won't pass that movieclip as a parameter to the function:

code:

---

// Function with a side effect

myFunction = function(xOffset:Number)

{

  george_mc._x += xOffset;

}

---

This is a bad habit though, because the code is less reusable. When a function modifies something that wasn't passed to it, it's called a side effect and it's considered bad programming practice (because it'll bite you in the ass when you forget about it).

Finally, in my own code, I tend to leave off that :MovieClip and :Number stuff, since it just means more typing. Instead I try to use variable names that show me what the thing is:

code:

---

myFunction = function(mc, xOffset)

{

  mc._x += xOffset;

}

---

I know, in my own code, that mc will always be a movieclip (typically used as a function parameter or temporary placeholder) and xOffset will always be a Number.

>> Redudancy with _visible

That's right. The only place where you need to set _visible to true is the onLoadStart() function, as that is the first of the 3 functions that will be called.

onLoadProgress doesn't need it, and onLoadInit() is called after the movie is loaded.


>> Bandwidth profiler.

Yes, I noticed the same thing - the bandwidth profile is crap.

I'm getting traces for progress, but only on large images, and not very many of them... Once an image has been loaded, I stop getting them, due to caching.

This thread has officially been bookmarked. You really need to get a job teaching. I probably browse through 100's of thread to find an answer on something before I ever post. And when I do search, the author's name is always yours. The reason why is because your explinations are always the easiest to comprehend, (well, at least for me) :)
jbum, I can't thank you enough for taking the time out in helping me, (again). Soon as my next project is done, expect a PM from me. ;)
mainly because I'm broke right now

Josh