A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 22

Thread: Show image when button is clicked

  1. #1
    Member
    Join Date
    Nov 2014
    Posts
    34

    Show image when button is clicked

    Hello guys. I was wondering how this can be made. http://www.bakedbymelissa.com/checko...erCreator.aspx
    I kinda posted on a wrong thread before but thanks to that dude I'll try my luck here.

    Basically when that circle is clicked, the image shows up with a nice fade in(?) transition. never mind the sparkling effect i don't really need it right now. How can I achieve these? I haven't stumbled upon a similar thread to what I'm looking for. I will appreciate your ideas.

  2. #2
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    Hi,

    OK then,

    1: open a new as3 document.
    2: create two movieclips (anything basic for now), put them on the stage and give them names of "circle" and "square".
    3: paste the code below into the actionscript panel and test it
    PHP Code:
    import flash.events.Event;
    import flash.events.MouseEvent;

    import fl.transitions.Tween;
    import fl.transitions.TweenEvent;
    import fl.transitions.easing.*;

    circle.buttonMode true;
    circle.addEventListener(MouseEvent.CLICKdoFadeIn);

    square.alpha 0;

    var 
    fadeIn:Tween;

    function 
    doFadeIn(e:MouseEvent):void
    {
        
    fadeIn = new Tween(square,"alpha",None.easeNone,0,1,2.5,true);
        
    fadeIn.addEventListener(TweenEvent.MOTION_FINISHfadeInFinished);
    }

    function 
    fadeInFinished(e:TweenEvent):void
    {
        
    trace("Clip finished fading in.");

    4: that should get you started, I think the code is self explanatory and there are hundresd of basic actionscripting tutorials out there.

  3. #3
    Member
    Join Date
    Nov 2014
    Posts
    34
    Very helpful! Thanks a lot!

  4. #4
    Member
    Join Date
    Nov 2014
    Posts
    34
    Tried the code above but I'm having trouble when multiple movie clips are involved. I just made 3 more circles and squares with different names.It kinda worked but when the same circle is clicked again, it doesn't work anymore. Like i clicked circle then the corresponding square appeared.then clicked circle2 and square2 appeared.clicked circle again and nothing happens.

  5. #5
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    Hi,

    Attach your *.fla lets see what you have so far.
    Or at very least post some code and a quick guide as to how you have set it up.

  6. #6
    Member
    Join Date
    Nov 2014
    Posts
    34
    Quote Originally Posted by fruitbeard View Post
    Hi,

    Attach your *.fla lets see what you have so far.
    Or at very least post some code and a quick guide as to how you have set it up.

    Here. I basically added more circles and squares. it doesn't work after each circle gets clicked once.
    Code:
    import flash.events.Event; 
    import flash.events.MouseEvent; 
    
    import fl.transitions.Tween; 
    import fl.transitions.TweenEvent; 
    import fl.transitions.easing.*; 
    
    circle.buttonMode = true; 
    circle.addEventListener(MouseEvent.CLICK, doFadeIn); 
    
    circle2.buttonMode = true; 
    circle2.addEventListener(MouseEvent.CLICK, doFadeIn2); 
    
    
    circle3.buttonMode = true; 
    circle3.addEventListener(MouseEvent.CLICK, doFadeIn3); 
    
    circle4.buttonMode = true; 
    circle4.addEventListener(MouseEvent.CLICK, doFadeIn4); 
    
    square.alpha = 0; 
    square2.alpha = 0;
    square3.alpha = 0;
    square4.alpha = 0;
    
    var fadeIn:Tween; 
    var fadeIn2:Tween; 
    var fadeIn3:Tween; 
    var fadeIn4:Tween; 
    
    function doFadeIn(e:MouseEvent):void 
    { 
        fadeIn = new Tween(square,"alpha",None.easeNone,0,1,2.5,true); 
        fadeIn.addEventListener(TweenEvent.MOTION_FINISH, fadeInFinished); 
    } 
    
    function fadeInFinished(e:TweenEvent):void 
    { 
        trace("Clip finished fading in."); 
    }  
    ///-------------
    
    function doFadeIn2(e:MouseEvent):void 
    { 
        fadeIn2 = new Tween(square2,"alpha",None.easeNone,0,1,2.5,true); 
        fadeIn2.addEventListener(TweenEvent.MOTION_FINISH, fadeIn2Finished); 
    } 
    
    function fadeIn2Finished(e:TweenEvent):void 
    { 
        trace("Clip finished fading in."); 
    }  
    //-------------
    function doFadeIn3(e:MouseEvent):void 
    { 
        fadeIn3 = new Tween(square3,"alpha",None.easeNone,0,1,2.5,true); 
        fadeIn3.addEventListener(TweenEvent.MOTION_FINISH, fadeIn3Finished); 
    } 
    
    function fadeIn3Finished(e:TweenEvent):void 
    { 
        trace("Clip finished fading in."); 
    }  
    //-------------------
    function doFadeIn4(e:MouseEvent):void 
    { 
        fadeIn4 = new Tween(square4,"alpha",None.easeNone,0,1,2.5,true); 
        fadeIn4.addEventListener(TweenEvent.MOTION_FINISH, fadeIn4Finished); 
    } 
    
    function fadeIn4Finished(e:TweenEvent):void 
    { 
        trace("Clip finished fading in."); 
    }

  7. #7
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    Hi,

    Slightly more advanced here, but I'm sure you can figure the code out if you study it.

    Also slightly different from before as it has all circles and squares inside of one function/ loop.
    So with 4 circles on stage, circle1,circle2,circle3,cirlce4
    and 4 squares onstage square1 ... etc
    PHP Code:
    import flash.display.MovieClip;
    import flash.events.Event
    import flash.events.MouseEvent

    import fl.transitions.Tween
    import fl.transitions.TweenEvent
    import fl.transitions.easing.*; 

    var 
    fadeIn:Tween;

    var 
    thisCircle:MovieClip;
    var 
    thisSquare:MovieClip;

    var 
    circles:Array = new Array(circle1,circle2,circle3,circle4);
    var 
    squares:Array = new Array(square1,square2,square3,square4);

    for(var 
    i:Number 0circles.lengthi++)
    {
        
    thisCircle circles[i];
        
    thisCircle.buttonMode true;
        
    thisCircle.id i;
        
    thisCircle.addEventListener(MouseEvent.CLICKdoFadeIn);
        
        
    thisSquare squares[i];
        
    thisSquare.alpha 0;
    }

    function 
    doFadeIn(e:MouseEvent):void 
    {
        
    e.currentTarget.mouseEnabled false;
        
    trace(e.currentTarget.name " is disabled while " squares[e.currentTarget.id].name " tweens in.");
        
    fadeIn = new Tween(squares[e.currentTarget.id],"alpha",None.easeNone,0,1,2.5,true); 
        
    fadeIn.addEventListener(TweenEvent.MOTION_FINISH,enableButton(e.currentTarget)); 


    function 
    enableButton(thisButton:Object):Function
    {
        return function(
    e:TweenEvent):void
        
    {
            
    thisButton.mouseEnabled true;
            
    trace(e.target.obj.name " has finished fading in, "thisButton.name " is now enabled again.");
        };


  8. #8
    Member
    Join Date
    Nov 2014
    Posts
    34
    Quote Originally Posted by fruitbeard View Post
    Hi,

    Slightly more advanced here, but I'm sure you can figure the code out if you study it.

    Also slightly different from before as it has all circles and squares inside of one function/ loop.
    So with 4 circles on stage, circle1,circle2,circle3,cirlce4
    and 4 squares onstage square1 ... etc
    PHP Code:
    import flash.display.MovieClip;
    import flash.events.Event
    import flash.events.MouseEvent

    import fl.transitions.Tween
    import fl.transitions.TweenEvent
    import fl.transitions.easing.*; 

    var 
    fadeIn:Tween;

    var 
    thisCircle:MovieClip;
    var 
    thisSquare:MovieClip;

    var 
    circles:Array = new Array(circle1,circle2,circle3,circle4);
    var 
    squares:Array = new Array(square1,square2,square3,square4);

    for(var 
    i:Number 0circles.lengthi++)
    {
        
    thisCircle circles[i];
        
    thisCircle.buttonMode true;
        
    thisCircle.id i;
        
    thisCircle.addEventListener(MouseEvent.CLICKdoFadeIn);
        
        
    thisSquare squares[i];
        
    thisSquare.alpha 0;
    }

    function 
    doFadeIn(e:MouseEvent):void 
    {
        
    e.currentTarget.mouseEnabled false;
        
    trace(e.currentTarget.name " is disabled while " squares[e.currentTarget.id].name " tweens in.");
        
    fadeIn = new Tween(squares[e.currentTarget.id],"alpha",None.easeNone,0,1,2.5,true); 
        
    fadeIn.addEventListener(TweenEvent.MOTION_FINISH,enableButton(e.currentTarget)); 


    function 
    enableButton(thisButton:Object):Function
    {
        return function(
    e:TweenEvent):void
        
    {
            
    thisButton.mouseEnabled true;
            
    trace(e.target.obj.name " has finished fading in, "thisButton.name " is now enabled again.");
        };


    Ok i'll try this out. I appreciate your effort.

  9. #9
    Member
    Join Date
    Nov 2014
    Posts
    34
    Hi, sorry it's been a while.

    It works but may i know how I should layer the squares and circles? I tried placing the squares and circles on 1 layer. and the AS on another layer. both on a single keyframe. the squares are "layered" on top of each other. so what happens is, when i click a circle, the square shows up but i don't really "see" it cuz it's under another square. I arranged them in different places in the stage and with that your code is proven to work fine. i don't know if i should put the shapes in different layers or what.

    here's the image on how i layered them.hope i explained my problem properly.

    stage.png

  10. #10
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    Hi,
    It's entirely your choice.

    I think both methods have their advantages, if you are going to have lots and lots of graphics and movieclips in your file then it's possible you can end up with a 90 (or more) layer file if you keep everything apart, which makes keeping track of everything more tricky, then you need to name the layers etc etc.

    It can also be very tricky when using just one or two layers as you can forget that something is there or never find something.

    You would be best experimenting and seeing which method suits you best.

    I would say its a good idea to keep all code together for ease of access though, save having to skip from layer to layer or frame to frame to find things again.

    Purely personal choice I think though, but a good filing and naming system is always a good idea.

  11. #11
    Member
    Join Date
    Nov 2014
    Posts
    34
    Quote Originally Posted by fruitbeard View Post
    Hi,
    It's entirely your choice.

    I think both methods have their advantages, if you are going to have lots and lots of graphics and movieclips in your file then it's possible you can end up with a 90 (or more) layer file if you keep everything apart, which makes keeping track of everything more tricky, then you need to name the layers etc etc.

    It can also be very tricky when using just one or two layers as you can forget that something is there or never find something.

    You would be best experimenting and seeing which method suits you best.

    I would say its a good idea to keep all code together for ease of access though, save having to skip from layer to layer or frame to frame to find things again.

    Purely personal choice I think though, but a good filing and naming system is always a good idea.

    yeah i was experimenting but my problem is the squares appear beneath the square/s above it so it really can't be seen. i'm aiming for something like this . the squares should be in the same position like the cupcake. Sir, how would you layer them so that when a circle is clicked, the square appears,like it's on top or the other squares aren't visible so that it would show. i really hope i'm explaining my problem right.

  12. #12
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    Hi,

    Look into addChild();

    or setChildIndex(); http://stackoverflow.com/questions/8...-setchildindex

  13. #13
    Member
    Join Date
    Nov 2014
    Posts
    34
    got it working,thanks!...may I ask how I can integrate this with a database? like,after customizing a cupcake, how am i gonna save the info of what's been made?like for instance,the circle represents the flavor. this is maybe out of topic but can you suggest what i can do? Much appreciated.

  14. #14
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    Hi,

    Glad you got it working, unfortunately the database integration has slightly more involved, you will need Php, mySql and Flash, there are afew threads within this forum explaing the basics at least and plenty over the internet, although I am able to do this it is beyond my capabilities to try and teach you.

    Good hunting.

  15. #15
    Member
    Join Date
    Nov 2014
    Posts
    34
    Quote Originally Posted by fruitbeard View Post
    Hi,

    Glad you got it working, unfortunately the database integration has slightly more involved, you will need Php, mySql and Flash, there are afew threads within this forum explaing the basics at least and plenty over the internet, although I am able to do this it is beyond my capabilities to try and teach you.

    Good hunting.
    I see. ok then...Thank you

  16. #16
    Member
    Join Date
    Nov 2014
    Posts
    34
    Hi again. I'm close to my goal and I was wondering if you know the answer.

    Based on the code you provided above, how do you make the circle look like it's selected. Like a radio button or a simple change of color just to indicate that that circle is the one currently selected.

  17. #17
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    Hi,

    You could always use a movieclip behind each button and make it visible or a higher alpha when it is selected or you could even use the radiobuttons as you say.

    If your buttons are buttons then you will need the first answer, if they are movieclips acting as butons then you could simply make it goto frame 2 or something

  18. #18
    Member
    Join Date
    Nov 2014
    Posts
    34
    Quote Originally Posted by fruitbeard View Post
    Hi,

    You could always use a movieclip behind each button and make it visible or a higher alpha when it is selected or you could even use the radiobuttons as you say.

    If your buttons are buttons then you will need the first answer, if they are movieclips acting as butons then you could simply make it goto frame 2 or something
    I have movieclips as buttons. I have a lot of it right now so how about changing its color when clicked? Could you give an example please?

  19. #19
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    Hi,

    Here is some code, but you might need the fla too or maybe you can emulate it.
    CS6

    PHP Code:
    import flash.geom.ColorTransform;
    import flash.events.MouseEvent;

    var 
    newColour:ColorTransform = new ColorTransform();

    var 
    buttonArray:Array = new Array(redButton,blueButton,yellowButton,blackButton);
    var 
    colourArray:Array = new Array("0x0000ff","0xff0000","0xffff00","0x000000");

    var 
    i:Number;

    for (
    0buttonArray.lengthi++)
    {
        var 
    colourButton:Object buttonArray[i];
        
    colourButton.buttonMode true;
        
    colourButton.value colourArray[i];
        
    colourButton.addEventListener(MouseEvent.CLICKdoColours);
    }

    function 
    doColours(e:MouseEvent):void
    {
        
    newColour.color e.currentTarget.value;
        
    circle.transform.colorTransform newColour;


  20. #20
    Member
    Join Date
    Nov 2014
    Posts
    34
    Quote Originally Posted by fruitbeard View Post
    Hi,

    Here is some code, but you might need the fla too or maybe you can emulate it.
    CS6

    PHP Code:
    import flash.geom.ColorTransform;
    import flash.events.MouseEvent;

    var 
    newColour:ColorTransform = new ColorTransform();

    var 
    buttonArray:Array = new Array(redButton,blueButton,yellowButton,blackButton);
    var 
    colourArray:Array = new Array("0x0000ff","0xff0000","0xffff00","0x000000");

    var 
    i:Number;

    for (
    0buttonArray.lengthi++)
    {
        var 
    colourButton:Object buttonArray[i];
        
    colourButton.buttonMode true;
        
    colourButton.value colourArray[i];
        
    colourButton.addEventListener(MouseEvent.CLICKdoColours);
    }

    function 
    doColours(e:MouseEvent):void
    {
        
    newColour.color e.currentTarget.value;
        
    circle.transform.colorTransform newColour;


    Hi.

    That's great but how do you change the color of 'itself?' Like click circle1 and that changes color.then if circle2 is clicked,circle2 changes color and circle1 goes back to normal. Is it possible?

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