dcsimg
A Flash Developer Resource Site

Results 1 to 15 of 15

Thread: ActionScript button in MX2004

  1. #1
    Junior Member
    Join Date
    Jul 2009
    Posts
    8

    ActionScript button in MX2004

    Hi Forum. I am a newbie, but I'm learning a heck of a lot!

    I have created a series of thumbnail buttons that load their full-sized images. Everything is working quite nicely, but at the moment, I don't know of a way to make the thumbnail button stay highlighted once it is clicked. I am using ActionScript and this is the code I use to make the thumbnail go from its 50% opacity (alpha) state to 100% (alpha) when the mouse rolls over, and then return to 50% when the mouse rolls out.

    Code:
    thumb01.onRollOver=function(){
    	this._alpha=100;
    }
    thumb01.onRollOut=function(){
    	this._alpha=50;
    }
    thumb02.onRollOver=function(){
    	this._alpha=100;
    }
    thumb02.onRollOut=function(){
    	this._alpha=50;
    }
    There must be a simple way to have the button remain at 100% opacity (alpha) once it has been clicked until another button is clicked. Could somebody help please?

    Many thanks.

  2. #2
    Pixel Artéést chriso20's Avatar
    Join Date
    Apr 2003
    Location
    Notts, UK
    Posts
    325

    resolved

    thumb01.onRelease = function() {
    delete thumb01.onRollOver;
    delete thumb01.onRollOut;
    }

    i think!

  3. #3
    Junior Member
    Join Date
    Jul 2009
    Posts
    8
    Thanks Chris. That helps a little.

    Now when I click on 'thumb01', it remains lit, but then when I click on another thumbnail button, 'thumb02' for instance, thumb01 and thumb02stay lit!

    For clarity, this is the code I now have:
    Code:
    thumb01.onRollOver=function(){
    	this._alpha=100;
    }
    thumb01.onRollOut=function(){
    	this._alpha=50;
    }
    thumb01.onRelease = function() {
    	delete thumb01.onRollOver; 
    	delete thumb01.onRollOut;
    }
    thumb02.onRollOver=function(){
    	this._alpha=100;
    }
    thumb02.onRollOut=function(){
    	this._alpha=50;
    }
    thumb02.onRelease = function() {
    	delete thumb02.onRollOver; 
    	delete thumb02.onRollOut;
    }

  4. #4
    Pixel Artéést chriso20's Avatar
    Join Date
    Apr 2003
    Location
    Notts, UK
    Posts
    325
    So you want the button to stay lit when clicked, but then when another button is rolled over it fades out again?

    If so

    Code:
    thumb02.onRollOver = function() {
    thumb01.onRollOver=function(){
    	thumb01._alpha=100;
    }
    thumb01.onRollOut=function(){
    	thumb01._alpha=50;
    }
    thumb01._alpha=50;
    this._alpha = 100;
    }
    You have to redefine the rollOver / rollOut states because they were deleted.

    Depending on why you want it to stay lit, you might be better off NOT deleting the rollOver/rollOut states and having a quick if statement to check if it should stay lit or not. e.g.

    Code:
    thumb01.rollOver = function() {
    this._alpha = 100;
    thumb02._alpha = 50;
    thumb02.highlight = false;
    }
    thumb01.rollOut = function() {
    this._alpha = 50;
    }
    thumb01.onRelease = function() {
    this.highlight = true;
    }
    thumb02.rollOver = function() {
    this._alpha = 100;
    thumb01._alpha = 50;
    thumb01.highlight = false;
    }
    thumb02.rollOut = function() {
    if(!this.highlight){
    this._alpha = 50;
    }
    }
    thumb02.onRelease = function() {
    this.highlight = true;
    }
    The code above, should do the normal rollOver/out 'highlighting' but then once clicked the button should stay lit until you roll over the OTHER button.


    Hope that's ok,
    Chris

  5. #5
    Junior Member
    Join Date
    Jul 2009
    Posts
    8
    Thanks again Chris. You are really helping me out here. However, I don't think this will do quite what I want.

    Basically, I have 21 of these thumbnail buttons ('thumb01' through to 'thumb21'), and the code I gave you is only for 'thumb01' and 'thumb02'.

    When one button is clicked, I want it to stay highlighted (ie alpha at 100). When another button is clicked, I want the new button to be highlighted, but all the other buttons to drop back to 50% alpha. At the same time, I still want the RollOver and RollOut actions to work, so rolling your cursor over all the other buttons will make them highlight so that the user knows they are buttons and can be clicked.

    Does that make sense?

  6. #6
    Junior Member
    Join Date
    Jul 2009
    Posts
    8
    Here's a screengrab which will probably help:-

  7. #7
    Pixel Artéést chriso20's Avatar
    Join Date
    Apr 2003
    Location
    Notts, UK
    Posts
    325
    Here's a file in CS3 format, guessing you have that at least.

    You should be able to use it.

    The code is commented. Hope it helps

    Cheers,
    Chris
    Attached Files Attached Files

  8. #8
    Junior Member
    Join Date
    Jul 2009
    Posts
    8
    Thanks again Chris. I only have MX2004. Nightmare! I'll have a hunt around for a flash file reader...

  9. #9
    Pixel Artéést chriso20's Avatar
    Join Date
    Apr 2003
    Location
    Notts, UK
    Posts
    325
    Here's the code, just post it into layer1 of a new file.

    Code:
    // my quick way of making 84 buttons
    for (i=1; i<=84; i++) {
    	// create new movieClips called thumb1, thumb2, thumb3 etc...
    	_root.createEmptyMovieClip("thumb"+i,i);
    	// short reference for the new movieClip
    	mc = _root["thumb"+i];
    	// make a red box to represent the button graphic
    	mc.beginFill(0xFF0000,100);
    	mc.lineTo(60,0);
    	mc.lineTo(60,20);
    	mc.lineTo(0,20);
    	mc.endFill();
    	// some code to space out the buttons, you can skip this
    	k = i-1;
    	j = Math.floor(k/7);
    	mc._y = j*30;
    	mc._x = (k-(7*j))*70;
    	mc._x += 20;
    	mc._y += 20;
    	// set buttons to 50 alpha by default
    	mc._alpha = 50;
    	// rollOver rollOut and release states
    	mc.onRollOver = function() {
    		// make its alpha 100
    		this._alpha = 100;
    	};
    	mc.onRollOut = function() {
    		// when rolling out, only change its alpha if it's
    		// not the currently clicked button
    		if (currentClicked != this) {
    			// change alpha back to normal (50)
    			this._alpha = 50;
    		}
    	};
    	mc.onRelease = function() {
    		// if this isn't the currently clicked button..
    		if (currentClicked != this) {
    			// reset it's alpha
    			currentClicked._alpha = 50;
    		}
    		// set the currentlyClicked button to this one
    		currentClicked = this;
    	};
    }
    Should have just posted it instead of providing a file lol
    Last edited by chriso20; 07-13-2009 at 11:22 AM.

  10. #10
    Junior Member
    Join Date
    Jul 2009
    Posts
    8
    Blimey, this is going to take some thought to work all this out. Thanks for your time: I will try and work out how to extract elements of your code for use in my project.

  11. #11
    Junior Member
    Join Date
    Jul 2009
    Posts
    8
    Hi Chris.
    I've been spending some time on trying to work through your code, but I just can't get it to work in my scene. Id I were to save my file and send it to you, would you be able to take a quick look?
    Cheers in advance.

  12. #12
    Senior Member
    Join Date
    Jun 2009
    Posts
    171
    Sometimes it easier to just make the button invisible [_visible=0;] when clicked and make another instance of the button visible [_visible=1;], which isn't clickable and is lit.

    Then just do the opposite of that if you click on any other buttons so it goes back to its "off" state. This has always works perfectly for me and is a lot easier with little code.

    If you'd like a more detailed explanation (tutorial) of this, let me know.

  13. #13
    Junior Member
    Join Date
    Jul 2009
    Posts
    8
    Thanks for your reply. It sounds like an interesting idea, but I really am coming unstuck with the coding. I am very new to AS. There is probably a more optimised way of doing what I am after, but essentially, I have a set of 21 thumbnail buttons appear one by one as in the graphic I uploaded above. I then have two other layers: one is to have all the fade/highlight functionality, and includes the following AS:

    Code:
    thumb01.onRollOver=function(){
    	this._alpha=100;
    }
    thumb01.onRollOut=function(){
    	this._alpha=50;
    }
    thumb02.onRollOver=function(){
    	this._alpha=100;
    }
    thumb02.onRollOut=function(){
    	this._alpha=50;
    }
    thumb03.onRollOver=function(){
    	this._alpha=100;
    }
    thumb03.onRollOut=function(){
    	this._alpha=50;
    }
    thumb04.onRollOver=function(){
    	this._alpha=100;
    }
    thumb04.onRollOut=function(){
    	this._alpha=50;
    }
    thumb05.onRollOver=function(){
    	this._alpha=100;
    }
    thumb05.onRollOut=function(){
    	this._alpha=50;
    }
    thumb06.onRollOver=function(){
    	this._alpha=100;
    }
    thumb06.onRollOut=function(){
    	this._alpha=50;
    }
    thumb07.onRollOver=function(){
    	this._alpha=100;
    }
    thumb07.onRollOut=function(){
    	this._alpha=50;
    }
    thumb08.onRollOver=function(){
    	this._alpha=100;
    }
    thumb08.onRollOut=function(){
    	this._alpha=50;
    }
    thumb09.onRollOver=function(){
    	this._alpha=100;
    }
    thumb09.onRollOut=function(){
    	this._alpha=50;
    }
    thumb10.onRollOver=function(){
    	this._alpha=100;
    }
    thumb10.onRollOut=function(){
    	this._alpha=50;
    }
    thumb11.onRollOver=function(){
    	this._alpha=100;
    }
    thumb11.onRollOut=function(){
    	this._alpha=50;
    }
    thumb12.onRollOver=function(){
    	this._alpha=100;
    }
    thumb12.onRollOut=function(){
    	this._alpha=50;
    }
    thumb13.onRollOver=function(){
    	this._alpha=100;
    }
    thumb13.onRollOut=function(){
    	this._alpha=50;
    }
    thumb14.onRollOver=function(){
    	this._alpha=100;
    }
    thumb14.onRollOut=function(){
    	this._alpha=50;
    }
    thumb15.onRollOver=function(){
    	this._alpha=100;
    }
    thumb15.onRollOut=function(){
    	this._alpha=50;
    }
    thumb16.onRollOver=function(){
    	this._alpha=100;
    }
    thumb16.onRollOut=function(){
    	this._alpha=50;
    }
    thumb17.onRollOver=function(){
    	this._alpha=100;
    }
    thumb17.onRollOut=function(){
    	this._alpha=50;
    }
    thumb18.onRollOver=function(){
    	this._alpha=100;
    }
    thumb18.onRollOut=function(){
    	this._alpha=50;
    }
    thumb19.onRollOver=function(){
    	this._alpha=100;
    }
    thumb19.onRollOut=function(){
    	this._alpha=50;
    }
    thumb20.onRollOver=function(){
    	this._alpha=100;
    }
    thumb20.onRollOut=function(){
    	this._alpha=50;
    }
    thumb21.onRollOver=function(){
    	this._alpha=100;
    }
    thumb21.onRollOut=function(){
    	this._alpha=50;
    }
    ...and the other controls the jpeg images that the buttons will load. Here is the code:-

    Code:
    bar._visible = false;
    border._visible = false;
    this.createEmptyMovieClip("container", "400");
    container._x = -39.5;
    container._y = -139;
    my_mc = new MovieClipLoader();
    preload = new Object();
    my_mc.addListener(preload);
    preload.onLoadStart = function(targetMC) {
    	trace("started loading "+targetMC);
    	container._visible = false;
    	bar._visible = true;
    	border._visible = true;
    	pText._visible = true;
    };
    preload.onLoadProgress = function(targetMC, lBytes, tBytes) {
    	bar._width = (lBytes/tBytes)*740;
    	pText.text = Math.round((lBytes/tBytes)*100) + "%";
    };
    preload.onLoadComplete = function(targetMC) {
    	container._visible = true;
    	border._visible = false;
    	bar._visible = false;
    	pText._visible = false;
    	trace(targetMC+" finished");
    };
    //default image 
    my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_01.jpg", "container");
    //buttons 
    thumb01.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_01.jpg", "container");
    };
    thumb02.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_02.jpg", "container");
    };
    thumb03.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_03.jpg", "container");
    };
    thumb04.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_04.jpg", "container");
    };
    thumb05.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_05.jpg", "container");
    };
    thumb06.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_06.jpg", "container");
    };
    thumb07.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_07.jpg", "container");
    };
    thumb08.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_08.jpg", "container");
    };
    thumb09.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_09.jpg", "container");
    };
    thumb10.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_10.jpg", "container");
    };
    thumb11.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_11.jpg", "container");
    };
    thumb12.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_12.jpg", "container");
    };
    thumb13.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_13.jpg", "container");
    };
    thumb14.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_14.jpg", "container");
    };
    thumb15.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_15.jpg", "container");
    };
    thumb16.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_16.jpg", "container");
    };
    thumb17.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_17.jpg", "container");
    };
    thumb18.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_18.jpg", "container");
    };
    thumb19.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_19.jpg", "container");
    };
    thumb20.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_20.jpg", "container");
    };
    thumb21.onPress = function() {
    	my_mc.loadClip("http://www.blinkimage.com/blinkimage2009/images/gallery/commercial/com_21.jpg", "container");
    };
    Thanks for your patience with me. I am sure this is very straightforward.

  14. #14
    FK'n_dog a_modified_dog's Avatar
    Join Date
    Apr 2003
    Location
    "aaarf"
    Posts
    9,176
    this approach might help
    it uses movieclips rather than buttons as movieclip timelines are controllable
    with actionscript, button timelines are primitive and are not controllable.

    http://www.jackleaman.co.uk/test/but...downstate.html

  15. #15
    Pixel Artéést chriso20's Avatar
    Join Date
    Apr 2003
    Location
    Notts, UK
    Posts
    325
    Feel free to send me your FLA

    I will take a look when and if i have a bit of free time!

    Chris

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center