Hiding/Showing buttons?

  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

Hey,

I was just wondering if anyone knew a good way to hide/show buttons with a function?

I tried this:
Code: [ Select ]
function hide(inst)
{
   _root.inst._alpha = 0;
}
function show(inst2)
{
   _root.inst2._alpha = 100;
}
  1. function hide(inst)
  2. {
  3.    _root.inst._alpha = 0;
  4. }
  5. function show(inst2)
  6. {
  7.    _root.inst2._alpha = 100;
  8. }


then in the button I put:

Code: [ Select ]
on(release)
{
   hide(brobut)
}
  1. on(release)
  2. {
  3.    hide(brobut)
  4. }


And nothing happens when I click it, any ideas? Also would it be easier to call this a show function after a tween, or after an actionscript animation? I basically need this:

You click a button
button fades away //note I would like to fade over just zap and gone
pannel moves
new stuff fades in // ditto

So if you guys know how to make this work, whether with or without fading ability I would be very very happy :)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

First and foremost... what version of Flash are you using?

Flash 5 and Flash MX would have 2 different method of doing this.


As for the fade, in MX you would use what are called dynamic event handler to create your fade, and you could make it easier by using what are called prototype functions, which are object specific functions so you can use "this" within them.

Ok, as for fading. There are 2 methods. I would highly recommend using a MovieClip symbol as a button rather than a Button symbol as this will be much more easier to accomplish that way.

Something like this should suffice. The actions go on a frame...

Code: [ Select ]
//define prototype function for movie clip symbol
//minFade parameter is of course how low the _alpha will fade to
//the speed is how fast it fades there
MovieClip.prototype.makeFade = function(minFade, speed) {
    //define onEnterFrame dynamic event handler for clip
    this.onEnterFrame = function() {
        //decrement the alpha setting according to the speed
        this._alpha -= speed;
        //if the current alpha setting is less than or equal to the minFade value
        if (this._alpha<=minFade) {
            //set the alpha to be the minFade value
            this._alpha = minFade;
            //delete the onEnterFrame so this will stop running
            delete this.onEnterFrame;
        }
    };
};
//when the movie clip _root.inst is pressed
_root.inst.onPress = function() {
    //fade it out to zero at the speed of 10
    this.makeFade(0, 10);
};
  1. //define prototype function for movie clip symbol
  2. //minFade parameter is of course how low the _alpha will fade to
  3. //the speed is how fast it fades there
  4. MovieClip.prototype.makeFade = function(minFade, speed) {
  5.     //define onEnterFrame dynamic event handler for clip
  6.     this.onEnterFrame = function() {
  7.         //decrement the alpha setting according to the speed
  8.         this._alpha -= speed;
  9.         //if the current alpha setting is less than or equal to the minFade value
  10.         if (this._alpha<=minFade) {
  11.             //set the alpha to be the minFade value
  12.             this._alpha = minFade;
  13.             //delete the onEnterFrame so this will stop running
  14.             delete this.onEnterFrame;
  15.         }
  16.     };
  17. };
  18. //when the movie clip _root.inst is pressed
  19. _root.inst.onPress = function() {
  20.     //fade it out to zero at the speed of 10
  21.     this.makeFade(0, 10);
  22. };
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Ok, if you still want to use a button symbol over a movie clip symbol you can use the setInterval method to mimic the onEnterFrame dynamic event handler.

Code: [ Select ]
//define function to fade button out
//the targetButton paramter is self explanitory
//the minFade and speed parameters are the same as my last script
function fadeButton(targetButton, minFade, speed) {
    //decrement he alpha of the button according to the speed
    targetButton._alpha -= speed;
    //if the alpha of the target clip is less than the minFade value
    if (targetButton._alpha<=minFade) {
        //keep it at that value
        targetButton._alpha = minFade;
        //clear the interval to make it stop running this function
        clearInterval(fadeInterval);
    }
}
//when _root.inst is pressed
_root.inst.onPress = function() {
    //call setInterval
    //fadeButton is the function it calls
    //80 is the amount of milliseconds between each time the function is called
    //_root.inst is the targetButton parameter value
    //0 is the minFade parameter value
    //10 is the speed parameter value
    var fadeInterval = setInterval(fadeButton, 80, _root.inst, 0, 10);
};
  1. //define function to fade button out
  2. //the targetButton paramter is self explanitory
  3. //the minFade and speed parameters are the same as my last script
  4. function fadeButton(targetButton, minFade, speed) {
  5.     //decrement he alpha of the button according to the speed
  6.     targetButton._alpha -= speed;
  7.     //if the alpha of the target clip is less than the minFade value
  8.     if (targetButton._alpha<=minFade) {
  9.         //keep it at that value
  10.         targetButton._alpha = minFade;
  11.         //clear the interval to make it stop running this function
  12.         clearInterval(fadeInterval);
  13.     }
  14. }
  15. //when _root.inst is pressed
  16. _root.inst.onPress = function() {
  17.     //call setInterval
  18.     //fadeButton is the function it calls
  19.     //80 is the amount of milliseconds between each time the function is called
  20.     //_root.inst is the targetButton parameter value
  21.     //0 is the minFade parameter value
  22.     //10 is the speed parameter value
  23.     var fadeInterval = setInterval(fadeButton, 80, _root.inst, 0, 10);
  24. };
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Ok, well I see you can't have attachments here, so I uploaded an example file with both a movie clip symbol as a button and button symbol as a button...

http://www.lostinbeta.com/kirupa/faders.fla
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

That works great :-D

How could I achieve the inverse of that? I would like to be able to fade in aswell... This is what I have, but it only fades to 10 or 20...
Code: [ Select ]
function unfadeButton(targetButton2, maxFade, speed2) {
  //increment the alpha of the button according to the speed
  targetButton2._alpha += speed2;
  //if the alpha of the target clip is greater than the maxFade value
  if (targetButton2._alpha>=maxFade) {
   //keep it at that value
   targetButton2._alpha = maxFade;
   //clear the interval to make it stop running this function
   clearInterval(unfadeInterval);
  }
}


_root.circlenine.onRollOut = function() {
  //call setInterval
  //fadeButton is the function it calls
  //80 is the amount of milliseconds between each time the function is called
  //_root.inst is the targetButton parameter value
  //0 is the minFade parameter value
  //10 is the speed parameter value
  var unfadeInterval = setInterval(unfadeButton, 80, _root.circlenine, 100, 10);
};
  1. function unfadeButton(targetButton2, maxFade, speed2) {
  2.   //increment the alpha of the button according to the speed
  3.   targetButton2._alpha += speed2;
  4.   //if the alpha of the target clip is greater than the maxFade value
  5.   if (targetButton2._alpha>=maxFade) {
  6.    //keep it at that value
  7.    targetButton2._alpha = maxFade;
  8.    //clear the interval to make it stop running this function
  9.    clearInterval(unfadeInterval);
  10.   }
  11. }
  12. _root.circlenine.onRollOut = function() {
  13.   //call setInterval
  14.   //fadeButton is the function it calls
  15.   //80 is the amount of milliseconds between each time the function is called
  16.   //_root.inst is the targetButton parameter value
  17.   //0 is the minFade parameter value
  18.   //10 is the speed parameter value
  19.   var unfadeInterval = setInterval(unfadeButton, 80, _root.circlenine, 100, 10);
  20. };


Also (you will be my hero) if you could somehow explain how I could achieve a partial fade/struggling with unfading kind of like a half dead light bulb, a flicker? Once I get my page done, I'll be sure to give you some credit for this :-D
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

It does seem to work if I do the on action twice, like roll out of the button twice, and it fades in.... The first time it fades out fine, but after I fade it back in I hav eto press twice.
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Ok, before I attempt to solve this (which to be smug, I can 8) ), I need to know exactly what you are going for.


For the fade in and fade out thing... Is this a rollover and rollout fade? Are you using movie clips or button symbols? (easier to do the fade with movie clips :wink: )

And as for this flicker thing.... is it like a flicker flicker... or kind of a fading glow?
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

Hate to be bothering you again and again, however, for some reason, this isn't working for me:

Code: [ Select ]
_root.brobut.onPress = function() {
  var fadeInterval = setInterval(fadeButton, 80, _root.brobut, 0, 10);
  gotoAndPlay(114);
};
  1. _root.brobut.onPress = function() {
  2.   var fadeInterval = setInterval(fadeButton, 80, _root.brobut, 0, 10);
  3.   gotoAndPlay(114);
  4. };


if it's easier for you to see the .fla file itself just let me know your email, and I will send it your way.
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Your not bothering me :)

gotoAndPlay(114);

Since your action is within a dynamic event handler (instanceName.onPress), this action is assuming you are going to and playing frame 114 within the clip you pressed.

Try using _parent.gotoAndPlay(114), and if that doesn't work try this._parent(gotoAndPlay(114) one of those SHOULD work :)

If need be you can send it to me at lost at lostinbeta dot com (avoiding spam bots, sorry)
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

You posted that while I was typing the previous one, so here are your answers.

This is basically the effect I want (which by the way your function is a godsend for something else I want in conjunction with this, and the flicker):

Ok so my page loads, and you click the title like, it fades out, the background gives a "moving" effect and it stops, then buttons fade in. rolling over a button will fade the rest to about alpha of 20, then red flickering text will show describing the link. You click on it and all the buttons fade out, and the moving process is repeated to the new page.

Right now I am using buttons, but I could convert all them to movie clips if it makes things easier.

I would imagine for text a steady fade in fade out from 40-70 or so would be better then a flicker, but flicker was just kind of the word that popped into my head.

Finally I am using MX

Thanks in advance
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Ok, here is a glowing function..

Code: [ Select ]
//create glowing function
//parameters are self explanitory
MovieClip.prototype.setGlow = function(minAlpha, maxAlpha, speed) {
    //set trigger variable to false by default
    this.triggered = false;
    //set alpha of clip to maxAlpha value
    this._alpha = maxAlpha;
    //create onEnterFrame dynamic event handler
    this.onEnterFrame = function() {
        //if triggered variable is set to false
        if (!this.triggered) {
            //decrement the alpha
            this._alpha -= speed;
            //if the alpha value is less than the minAlpha value
            if (this._alpha<=minAlpha) {
                //keep it there
                this._alpha = minAlpha;
                //set the trigger to true so it will fade back in
                this.triggered = true;
            }
            //if the trigger variable is set to true
        } else if (this.triggered) {
            //increment the alpha
            this._alpha += speed;
            //if the alpha value is greater than the maxAlpha value
            if (this._alpha>=maxAlpha) {
                //keep i there
                this._alpha = maxAlpha;
                //set the trigger to false so it will fade back out
                this.triggered = false;
            }
        }
    };
};
//target your movieclip symbol for the fade and call the setGlow function
//40 is the minAlpha parameter
//70 is the maxAlpha parameter
//3 is the speed of the fade
targetClip.setGlow(40, 70, 3);
  1. //create glowing function
  2. //parameters are self explanitory
  3. MovieClip.prototype.setGlow = function(minAlpha, maxAlpha, speed) {
  4.     //set trigger variable to false by default
  5.     this.triggered = false;
  6.     //set alpha of clip to maxAlpha value
  7.     this._alpha = maxAlpha;
  8.     //create onEnterFrame dynamic event handler
  9.     this.onEnterFrame = function() {
  10.         //if triggered variable is set to false
  11.         if (!this.triggered) {
  12.             //decrement the alpha
  13.             this._alpha -= speed;
  14.             //if the alpha value is less than the minAlpha value
  15.             if (this._alpha<=minAlpha) {
  16.                 //keep it there
  17.                 this._alpha = minAlpha;
  18.                 //set the trigger to true so it will fade back in
  19.                 this.triggered = true;
  20.             }
  21.             //if the trigger variable is set to true
  22.         } else if (this.triggered) {
  23.             //increment the alpha
  24.             this._alpha += speed;
  25.             //if the alpha value is greater than the maxAlpha value
  26.             if (this._alpha>=maxAlpha) {
  27.                 //keep i there
  28.                 this._alpha = maxAlpha;
  29.                 //set the trigger to false so it will fade back out
  30.                 this.triggered = false;
  31.             }
  32.         }
  33.     };
  34. };
  35. //target your movieclip symbol for the fade and call the setGlow function
  36. //40 is the minAlpha parameter
  37. //70 is the maxAlpha parameter
  38. //3 is the speed of the fade
  39. targetClip.setGlow(40, 70, 3);





As for the rest, I may need to see your .fla. Check my last post for my e-mail and for the gotoAndPlay problem :)


I have to go now, but I will be back tonight.
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

Ok thanks, I sent it to you, so have a look when you get a chance. I am going to take a break from flash as well....head hurts...
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Ok, unfortunately this is where I fail at flash. I can't get my head around this file, the tweens and stuff are throwing me off. As well as what the actions on your buttons are supposed to do.

None of your buttons do anything for me, including fade.

SO.... I took the liberty myself to create some extra ideas I had in my head. Now these are slighly different fromt he setup you have right now, but it is AS generated so it should be much more easily updateable (seperate section clips).

Keep in mind this is a small example file of how the sections can move, not how things will look altogether. Let me know what you think...

Easing to location...
http://www.lostinbeta.com/kirupa/easingNavigation.html


Spring to location via elasticity....
http://www.lostinbeta.com/kirupa/elasticNavigation.html
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

If I was willing to recreate it from the begining would you be willing to help me with some of the actionscripting? I don't know if you have AOL instant messanger, but if you do my name is Yx nameunknown xY.
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

I don't know if I am comfortable giving out my AIM name.

I used to have an AIM name I used to go on to help people, but I ended up getting too many ignorant people and now I don't use that anymore. So my only other name is my personal IM name. :?

So I will have to think about that.


If you are interested in the files I posted in my last post, you can change .html to .fla to download the source files. Here is an explanation of how it works if you were wondering....


[explanation]

There is a movie clip symbol on the main stage with the instance name "sectionContainer" (no quotes)

Within the sectionContainer clip there are 9 seperate movie clip symbols, each with an instance name of "section" with a number at the end (section1, section2, section3, section4). Now in my example I reused the same clip over and over and just changed the tint property, but if you are going to have content in each section you are going to need to create a seperate movie clip symbol for each section (try and keep them each clip the same dimensions so you they can fit under a mask).

PLEASE NOTE: The sectionContainer registration point is set to the upper left, and the individual section clips registration points are set to the center. Although I doubt it would make a difference if you change it, I recommend doing it this way for use of use.

Ok, that is all you need to know about the setup of the sections.

After that clip was created, I created a layer above that movie clip and drew a rectangle that would act as my "window" so that you would only see 1 section at a time. I set this layer to be a mask to the layer under it (which contains the sectionContainer clip).

Now for actions...

You will see the first 3 lines of my script are..
Code: [ Select ]
this.createEmptyMovieClip("centerPoint", depth++);
centerPoint._x = sectionContainer.section1._x;
centerPoint._y = sectionContainer.section1._y;
  1. this.createEmptyMovieClip("centerPoint", depth++);
  2. centerPoint._x = sectionContainer.section1._x;
  3. centerPoint._y = sectionContainer.section1._y;
This will dynamically create an empty movie clip symbol and position it to the _x and _y position of the first section in the sectionContainer clip. So this will act as the centerpoint of your window, it is the point that all your individual sections will be moving to.

This line here...
Code: [ Select ]
var padding = sectionContainer._x;
is to offset the scrolling according to the amount of space between the sectionContainer and the edge of the movie. HOWEVER, this also assumes your padding will be the same on the x axis as it will on the y axis. I really should have set it up by default to have a paddingX and paddingY variable, and used that correctly in the script... but I wasn't smart enough to think of that at the time :roll:

These actions here
Code: [ Select ]
for (var i = 1; i<=9; i++) {
    this["button"+i].goSection = "section"+i;
    this["button"+i].onRelease = function() {
        easeTo(this.goSection);
    };
}
  1. for (var i = 1; i<=9; i++) {
  2.     this["button"+i].goSection = "section"+i;
  3.     this["button"+i].onRelease = function() {
  4.         easeTo(this.goSection);
  5.     };
  6. }


Go through your buttons on the stage (which will have the instance names button1, button2, button3, button4, etc) and assign the onRelease handler that will call the easeTo() function to move your sectioncontainer to the correct section.

The easeTo() function is different for each .fla file, so I won't go over that, but it is essentially what makes the sectionContainer clip move so you can view your section.


[/explanation]



I hope that helps you out.
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

Ok I am sure I'll be able to use it somehow, if anything it will help me out with how to move my plates around.

I'll just post any questions I have here then, I can understand where your coming from :)

I am going to give it a clean start now and see if I can control everything through actionscript, instead of tweens.
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Well I hope my stuff helps you out :D

I was planning on doing navigations like that for a while (seen them around, thought they were cool), but never had motivation. So thank you for giving me the motivation to get my arse in gear and make them 8)
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

Heheheh glad I could be of service in some way :-D

I think I wil lrevert to you mc fading clips because I really dont need to buttons as long as I can still click on the mc and make it move or what not :) Thanks for all the scripts, but expect some function creation problems, never was to good at functions :roll:
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

b_heyer wrote:
but expect some function creation problems, never was to good at functions :roll:


I hear ya, functions were never easy for me to get my head around. When learning Javascript I got used to basic functions, but then I got into AS and I started getting into different uses of functions, and then the object oriented prototype functions, and in the beginning it was too much for me to handle, but I started slowing down and taking things in piece by piece and researching what each command did until I eventually understood each part individually. Once you understand the individual parts it gets easier to piece it together and understand how it works as a whole. After that you are home free (usually).

Now I do everything with functions, they are so useful for reusable coding :D
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

Well, I got it to work...no I didn't but it kind of works. It move the panel, the right direction, but to far and without any animation, I am sure one glance at this and you will have my answer...I hope :-D

Code: [ Select ]
function moveX (ammount)
{
    if (ammount > 0) {
        var isPos = 1;
    } else {
        var isPos = 0;
    }
    absAmmount = Math.abs(ammount);
    var counter = 0;
    var maxX = 470;
        var minX = -470;
    panels.onEnterFrame = function() {
        if (_parent.isPos == 1) {
                if (_parent.counter < _parent.maxX) {
                    this._x += 47;
                    _parent.counter += 47;
                } else {
                    this._x = -585;
                    _parent.counter = 0;
                }
        } else {
            if (_parent.counter > _parent.minX) {
                    this._x -= 47;
                    _parent.counter -= 47;
                } else {
                    this._x = -585;
                    _parent.counter = 0;
                }        }
}
}

but.onRelease = function() {
    moveX(1);
}
  1. function moveX (ammount)
  2. {
  3.     if (ammount > 0) {
  4.         var isPos = 1;
  5.     } else {
  6.         var isPos = 0;
  7.     }
  8.     absAmmount = Math.abs(ammount);
  9.     var counter = 0;
  10.     var maxX = 470;
  11.         var minX = -470;
  12.     panels.onEnterFrame = function() {
  13.         if (_parent.isPos == 1) {
  14.                 if (_parent.counter < _parent.maxX) {
  15.                     this._x += 47;
  16.                     _parent.counter += 47;
  17.                 } else {
  18.                     this._x = -585;
  19.                     _parent.counter = 0;
  20.                 }
  21.         } else {
  22.             if (_parent.counter > _parent.minX) {
  23.                     this._x -= 47;
  24.                     _parent.counter -= 47;
  25.                 } else {
  26.                     this._x = -585;
  27.                     _parent.counter = 0;
  28.                 }        }
  29. }
  30. }
  31. but.onRelease = function() {
  32.     moveX(1);
  33. }
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

No I was wrong, it just happened to move it the direction I wanted it to move...

By the way what I was hoping to have happen with this function is:
Click a button, which initiates the function. The movement glides the panel over once, then resets it to the middle (everything is identicle so it should not be too visible) then it continues for "ammount" number of times.
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Hey, sorry for disappearing, I haven't been around much for the past few days.

I am confused though, did you solve your problem?
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

the problem has been curbed for a while thanks to color scheme inspiration from Geekette, I decided that a much simplar but more content rich page was better.

Post Information

  • Total Posts in this topic: 23 posts
  • Users browsing this forum: No registered users and 18 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.