-
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.
-
.
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.CLICK, doFadeIn);
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_FINISH, fadeInFinished);
}
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.
-
Very helpful! Thanks a lot!
-
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.
-
.
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.
-
Originally Posted by fruitbeard
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.");
}
-
.
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 = 0; i < circles.length; i++)
{
thisCircle = circles[i];
thisCircle.buttonMode = true;
thisCircle.id = i;
thisCircle.addEventListener(MouseEvent.CLICK, doFadeIn);
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.");
};
}
-
Originally Posted by fruitbeard
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 = 0; i < circles.length; i++)
{
thisCircle = circles[i];
thisCircle.buttonMode = true;
thisCircle.id = i;
thisCircle.addEventListener(MouseEvent.CLICK, doFadeIn);
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.
-
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
-
.
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.
-
Originally Posted by fruitbeard
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.
-
.
-
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.
-
.
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.
-
Originally Posted by fruitbeard
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
-
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.
-
.
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
-
Originally Posted by fruitbeard
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?
-
.
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 (i = 0; i < buttonArray.length; i++)
{
var colourButton:Object = buttonArray[i];
colourButton.buttonMode = true;
colourButton.value = colourArray[i];
colourButton.addEventListener(MouseEvent.CLICK, doColours);
}
function doColours(e:MouseEvent):void
{
newColour.color = e.currentTarget.value;
circle.transform.colorTransform = newColour;
}
-
Originally Posted by fruitbeard
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 (i = 0; i < buttonArray.length; i++)
{
var colourButton:Object = buttonArray[i];
colourButton.buttonMode = true;
colourButton.value = colourArray[i];
colourButton.addEventListener(MouseEvent.CLICK, doColours);
}
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|