Solved

Fadeout effects in Button Movies DEADLINE HELP NEEDED

Posted on 2004-10-29
241 Views
Last Modified: 2010-04-03
I have a flash file at http://128.122.240.221/administration . I have set the images to fade in when you mouseover, but those are in the button. How do I put an image in the main scene and have it fade out when you mouseover the button and come back when you roll off the button?
0
Question by:bjv211
    28 Comments
     
    LVL 7

    Accepted Solution

    by:
    Ok here is a file that i created to show you.

    http://theyac.org/experts/fading.fla

    What you have to do is create two movieclips one with the fading stuff in it just to the visble point you don't have to do the way back.  Then create another movie clip and put your button inside here with out the fading movie clip inside it.  Then Place the movie clip with the fading stuff on the screen then go down to properties at the bottom of the screen and where it says instance type fading in there.  Then add your button movie clip to the stage and  then add this code to the movie clip

    onClipEvent (enterFrame) {
          if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
                _root.fading.nextFrame();
          } else {
                _root.fading.prevFrame();
          }
    }

    That should do it.

    all it does is test to see if your mouse is over the button movie clip then if it is it tells the fading movie clip to go to the next frame then once it hits the end it stays there untill you roll your mouse off then it goes to the previous frame untill it gets to the begining.

    Fixitben
    0
     
    LVL 7

    Expert Comment

    by:fixitben
    actually you will have 4 movie clips i forgot about the other fading part So basically 2 sets.  So repeat the process and then give it this instance name  fading2  then use this code on the other one

    onClipEvent (enterFrame) {
         if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
              _root.fading2.nextFrame();
         } else {
              _root.fading2.prevFrame();
         }
    }


    Fixitben
    0
     

    Expert Comment

    by:subhailc
    ben's solution is valid and i certainly don't mean to imply otherwise, but onClipEvent (enterFrame) - especially compounded with manipulation of alpha channels - is extraordinarily processor intensive; so much so i'd have to say there's never a circumstance i'd say it's ok to use; fortunately a very viable alternative exists in more oop-minded frame actions.

    instead of attaching the code to the movie clips, give them instance names (i'll use "mc1" etc. as examples).  then in the first frame of the timeline containing the clips, add this code.

    function fadein(target) {
    target.onEnterFrame=function(){
    this._alpha > 0 ? this._alpha -= 6 : delete this.onEnterFrame;
    }
    }
    function fadeout(target) {
    target.onEnterFrame=function(){
    this._alpha < 100 ? this._alpha += 6 : delete this.onEnterFrame;
    }
    }
    this.mc1.onRollOver=function() {
    fadein(this);
    this.onRollOut=functino() {
    fadeout(this);
    }
    }

    hth, gl
    0
     
    LVL 7

    Expert Comment

    by:fixitben
    You aren't going to believe this but I get higher or equal to CPU with your code. Go figure.

    Fixitben
    0
     

    Expert Comment

    by:subhailc
    but mine kills itself, so the cpu load is only while the animation is going.

    when you use clipEvents, it's going all the time, potentially hours or days if the user doesnt close the window.

    :)
    0
     

    Expert Comment

    by:subhailc
    (i also noticed i typo'ed the second "function" - it reads "functino" incorrectly...

    and the cpu bit isn't really my opinion - it's kind of an accepted standard - if your movie's running 30FPS (again, pretty standard) and you have say a dozen animation effects via onClipEvent, you're calling 21,600 actions every minute that are totally unnecessary.
    0
     
    LVL 7

    Expert Comment

    by:fixitben
    Well I get a reading of zero with mine when it is not doing any animation.  So I really don't see the problem.  

    Fixitben
    0
     
    LVL 7

    Expert Comment

    by:fixitben
    Isn't a rollover essientially a hit test anyway?  

    Fixitben
    0
     

    Expert Comment

    by:subhailc
    "Well I get a reading of zero with mine when it is not doing any animation.  So I really don't see the problem."

    ok :)


    "Isn't a rollover essientially a hit test anyway?"

    no.  a hittest is - again - less desirable than a rollover - the rationale is that the plugin has to constantly check mouse location with hittest, while onRollOver is an "event" which has it's own class of instructions and does nothing until activated - also the hittest reads true every frame the mouse is over it - while the rollover "occurs"; one correspondence to the processor.

    to be honest i hadn't even mentioned the hittest portion of it, i was only addressing the clipEvent(enterFrame) - so now we have the 3 biggest resource hogs all working together, hittest alpha and onClipEvent(enterFrame), lol.  one mc running the code won't show much of a difference, but when worked into a site it probably will, especially when the processors trying to build the page, load every jpeg and import, and redraw the screen 30 times a second.

    last thing: until this reply, i thought you were the original poster replying - i didnt mean to sound patronizing or condescending by explaining the basics; my bad.
    0
     

    Expert Comment

    by:subhailc
    for the record, this would remedy the processor thing if frame actions weren't possible

    onClipEvent (load) {
          this.onRollOver = function() {
                this.onEnterFrame = function() {
                      this._alpha>0 ? this._alpha -= 10 : delete this.onEnterFrame;
                };
                this.onRollOut = function() {
                      this.onEnterFrame = function() {
                            this._alpha<100 ? this._alpha += 10 : delete this.onEnterFrame;
                      };
                };
          };
    }
    0
     
    LVL 7

    Expert Comment

    by:fixitben
    Well that is cool but I still get about the same Cpu usage as mine.  But I see where you are coming from if we where doing more then it would be an issue.  

    Also do you have resources that I could read on how a hit test and roll over are different.   I am not doubting you I just would like to read this cause my thought on them was that you would have to have a hit test as the background code of the roll over.  Because it would have to test each frame to see if your mouse was over the object and that would be a onClipEvent(Enterfame)  with a hit test.  So I always thought they would be about equal. Just one is easier to implement.  

    Can you imagine when this guy checks his email he is going to have a ton of replys.  LOL.

    <last thing: until this reply, i thought you were the original poster replying - i didnt mean to sound patronizing or condescending by explaining the basics; my bad.>

    That is cool.  

    This is why we are here to put our knowledge out there so we can all learn.  I love this place I learn something new everyday.


    Fixitben
    0
     

    Expert Comment

    by:subhailc
    "my thought on them was that you would have to have a hit test as the background code of the roll over. "

    as far as i know, you're right with one small addendum - it's using the same principal as my suicidal onEnterFrame action...  rollover is basically "if hittest proves true, then do these statements and quit checking"

    as far as resources, i don't have anything formal - macromedia's published docs are pretty bare (not to mention full of mistakes - i personally have found no less than 5 errors in their help files) - but a search on fk's board will pull up plenty of informal stuff - but it all boils down to "if it aint broke..." i think...  i consider myself pretty tight as far as deleting unnecessary objects and function calls and general garbage collection, but the guy that taught me thinks i'm extremely loose - he'd have a freakin coronary at the thought of using some of this stuff and not immediately deleting it - and he'd never allow more than one OEF to be running at once under any circumstances.  i agree with him for the most part, and appreciate that we sometimes need to be that tight, but if some guy wants a page for his warcraft clan that has 6 flaming buttons and is paying $250 for it, i'm gonna do whatever's easy and fast - without worrying for a second about garbage collection.  he's not gonna notice with the minimal amount of scripting involved on the page, and i'll finish the job in an hour instead of three weeks...

    there's a place for everything :)

    "Can you imagine when this guy checks his email he is going to have a ton of replys.  LOL."
    hehe, no doubt :)  but at least he'll have some damn good answers ;)



    anyhow, nice to meet ya and i'll try not to jump on any more threads you've already started on :)
    0
     
    LVL 1

    Author Comment

    by:bjv211
    WOW guys, got a little side tracked but atleast i've got possiblities...i'll try em all out haha
    0
     
    LVL 1

    Author Comment

    by:bjv211
    alright guys, I'm a little lost, maybe it would help to see how I have it setup in Flash.  http://128.122.240.221/administration/administration.fla   hopefully this will help out
    0
     
    LVL 7

    Expert Comment

    by:fixitben
    Http://theyac.org/experts/administration.fla     Here is the file What I did was take every thing out of the button and place it on one movie clip then gave it a instance name and then applied the code from above to it.  If you have any questions just ask.

    Also "subhailc">  Feel free to post on any thread that I have already posted on.  I just like to know why something isn't right.  That is all and I like to hear it from just one person so that way I don't learn something that maybe or may not be correct.  And then I pass that info on and then they learn that too and it just goes on and on.  
    And Please post your Example for bjv211 so he can see yours too.

    Hope this Helps
    Fixitben
    0
     
    LVL 1

    Author Comment

    by:bjv211
    this definitely helps, although i'm pretty confused on how it works.  I am used to setting up buttons with UP DOWN OVER HIT...just different i guess. the SPSS link does not functions any more so I am going to try to figure it out so I know how it works...thanks fixitben
    0
     
    LVL 7

    Expert Comment

    by:fixitben
    Ok I corrected the file above with the buttons in it now.  All I did was convert the images on the last frame of the tween to buttons.  But Basically all this does is it has 2 movie clips  one with all of the inventory stuff in it and the other with the SPSS stuff in it.  Then both have the code from above applied to it which is is a test to see if the mouse is over the Movie clip and if it is it will play forward frames and then if the mouse isn't over it is plays the frames in reverse.  

    When you use the up down and over it is easier but it limits you to just those things and then if you try to do it other ways with that it gets glitchy and it will get stuck on the over position and then when you are over it will be up.  So I try to stay away from using the rollover on stuff like this.



    Fixitben
    0
     
    LVL 1

    Author Comment

    by:bjv211
    thanks so much...i'm going to have some fun with this
    0
     
    LVL 1

    Author Comment

    by:bjv211
    could you post the new file to your site again so I can have it...thanks
    0
     
    LVL 7

    Expert Comment

    by:fixitben
    It is the link above.

    Fixitben
    0
     

    Expert Comment

    by:subhailc
    http://qfiles.iamyourhost.com/fkstest/administration_revised.zip

    you'll notice that things are a lot different. no buttons, much smaller library and most notably - no animations.  all the effects are scripted.  to use them on other things, go to the bottom of the frame where the actions are defined and put

    //change "y" to the instance name of the movie clip you want to use to trigger the effect
    y.onPress=function() {
    //change "x" to (the instance name of the movie clip you want the effect to happen on).
    fadein(x);
    }

    that's it.  use the fadeout and colorchange functions in the same way.

    good luck.
    0
     
    LVL 1

    Author Comment

    by:bjv211
    Ok so I like you solution subhailc because it allows me to see everything in scene 1 and work the scripting logically.  As far as that goes, is there any type of program that will help with writing scripts since i am not experienced in scripting?
    0
     
    LVL 7

    Expert Comment

    by:fixitben
    Very nice subhailc.  Very cleanly writen.  I was wondering why it took you a little while to reply. Now I know You where coming up with a good example.  I didn't really have alot of time for mine.  If you want me too bjv211   I can redo my example a little better tommorow, but from what it seems you are going to go with subhailc's.  But If you need any more help with mine just let me know.

    Fixitben
    0
     
    LVL 1

    Author Comment

    by:bjv211
    it would help to see both examples, but don't go to lengths for it :)  Maybe you could answer as well...how do I learn scripting / action scripting?
    0
     
    LVL 7

    Expert Comment

    by:fixitben
    Books will teach you the basics which is really what you need to learn that way you can get a good grip on some key points in flash.
    Also some books can teach you the more advanced stuff, but if you don't have a grasp on the basics then it gets confusing quick.

    Also Tutorials Teach you alot if you do tutorials and look at the script they use and try to break it down then see how can I use that to my advantage.

    Then once you learn some of the basics and then just use your imagination on how you can do that the coolest and easist way.

    Tomorrow I will post some links to some websites that I use for tutorials and to get Ideas and stuff.

    Also if you are having trouble with something  you can always post it here and we can either explain where the problem is or tell you how to do something.

    I will post an example tomorrow.

    Fixitben
    0
     
    LVL 1

    Author Comment

    by:bjv211
    preciate the continued efforts...flash fun tomorrow!!
    0
     

    Expert Comment

    by:subhailc
    hey fellas,

    ben: actually i was working :/  but yeah i put some time into it (about an 45 mins to an hour i'd say) - i don't normally like giving away an hour for free and wouldn't have written it except that you asked and we had a good exchange going yesterday and i wasn't sure i was explaining myself well.  i didn't look at yours but i'm betting you (like any sane person) wouldnt have spent as long as i did :)

    bjv211: boards.  i've learned everything i know from boards.  tried books, tried classes, no good - and 99% of tutorials online are crap.  the key is live interaction - if there are 100 things to know about setTimeout, for example, and you know 99 of them - you're just wasting your time going over new tuts or articles that rehash the stuff you already do know, whereas with a person you can just say "hey, explain #100 please" (plus the fact that plain english is a lot easier to understand than geekspeak).  i only started using flash about 4 months ago; the first 2 months were a total waste of time until i finally got exasperated and paid a guy to teach me.  he wasn't cheap ($55 an hour) and at first i was unsure, but when he could reply within minutes to one of my emailed questions with a 3-line script that saved me (literally) several days of frustration (and lost work time), it became obvious that was the way to go.  i just saved up my questions every few days and send them all at once; i doubt i spent more than 800 or 900, which for me was a bargain (i do this full-time, so every hour lost is money out of my pocket).  only thing i'd do differently was hire that guy from day 1 instead of waiting.  but, assuming youre a hobbyist - boards, newsgroups and mailing lists.

    best board to learn actionscript (imho) - http://www.flashkit.com/boards

    good luck
    0
     
    LVL 7

    Expert Comment

    by:fixitben
    Ok I haven't had time to do the new example.  But will as soon as I can cause work has been crazy and I am going out of town today and won't be back untill friday.  

    Here are some places that are good to find tutorials.
    http://flashkit.com/index.shtml
    http://kirupa.com/
    http://actionscript.org/
    And I know there are more but can't remeber them all right now.

    Also I have been doing flash for about a 7 months and I have learned everything from tutorials and stuff on the internet.  I did purchase some books but only read the parts that I wanted clarification on.  Yes subhailc is right on if you can afford to pay someone to teach you then do it cause it is worth it and saves a ton of time.  But personally this is the only board that I use and only use it when I get stuck on something that I just can't figure out.  I was self taught but wish I knew someone around me that had enough experience to pay them to teach me.  I just want to warn you that Flash is addicting and are you sure you want to start this addiction, cause once you start you are hooked and can't stop.  LOL  :)  

    So have fun with flash it is a blast.  Also if you get comfortable with flash and want to start answering questions on here that helped me alot cause you learn alot just helping people and talking to the other "EXPERTS".  

    I will try to get that example up as soon as I can.

    Fixitben
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

    Lean Six Sigma Project Manager Certification

    There are many schools of thought around successful project management, but few as highly regarded as the Six Sigma and Lean methods. With 37 hours of learning, this training will explain concrete processes for increasing efficiency and limiting wasted time and effort.

    This is intended to introduce all collision detection principles in flash, their strengths, weaknesses and workarounds. The main method for Collision Detection in flash is using hitTestObject. But unless you'll be pushing rectangular shapes without …
    There are times in your Flash CS4 application when you want more than a simple pointer or a hand, and it's hard to find an ideal walk-through to tell you what to do.  I spent a few days recently learning my way around making custom cursors in Flash,…
    The goal of the tutorial is to teach the user how to live broadcast using Flash Media Live Encoder and connecting it to YouTube to broadcast. Log into your Youtube account, choose live stream settings, start live stream from Flash Media Live Enc…
    The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.

    877 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now