I'm using the code bellow to change the color of button on rollover and rollout and clicked. I have following issues in this
1. The color did not changed when button is clicked.
2. Button wont work after once clicked.
pages.gotoAndStop("home");
// list of button instance names
var previousClicked:DisplayObject;
var buttonsss:Array = [home, menudown.about, menudown.portfolio, menudown.clients, menudown.pricing, menudown.contact];
for each ( var mc:MovieClip in buttonsss)
{
mc.buttonMode = true;
mc.mouseChildren = false;
mc.addEventListener(MouseEvent.MOUSE_UP, onClick);
mc.addEventListener(MouseEvent.ROLL_OVER, rolloverEffect);
mc.addEventListener(MouseEvent.ROLL_OUT, rolloutEffect);
}
function onClick(e:MouseEvent):void
{
pages.gotoAndStop(e.target.name);
e.currentTarget.mouseEnabled = false;
TweenLite.to(e.currentTarget,2,{tint:0x666666, ease:Strong.easeOut});
TweenLite.to(previousClicked,2,{tint:null , ease:Strong.easeOut});// set the previous clicked to null tint
previousClicked.addEventListener(MouseEvent.ROLL_OUT, rolloutEffect);// restore the Roll_Over effect
previousClicked = DisplayObject(e.target); // update the last clicked button
e.target.removeEventListener(MouseEvent.ROLL_OUT, rolloutEffect);
}
function rolloverEffect(e:MouseEvent):void{
TweenLite.to(e.currentTarget,2,{tint:0x666666, ease:Strong.easeOut});
}
function rolloutEffect(e:MouseEvent):void{
//should change tint to null just when its enabled, but its changing always (enabled or disabled)
TweenLite.to(e.currentTarget,2,{tint:null , ease:Strong.easeOut});
}
How I have always done this is with the built in buttons instead of doing it with code.
If you click window up in the top bar then click on components (near the bottom) it will bring up a little window then if you expand the user interface folder and drag and drop from the button item. Then with that button on the stage if you double click on it you will go into the edit symbol screen and it will have pictures of each state that the button and if you double click on the state you want then you can visually edit that version of the button.
Hope this helped.
Note: I first started with flash pro-cs5.5 and your tag says flash-cs5 I don't know for sure if that function is available or not in 5.
I am unfamiliar with Tweenlite, but I'm guessig that what it does in this case is simply change the color, am I right? If so, I'd suggest creating the color changes on your timeline and using framelabels combined with gotoAndStop to create the different effects. This should also solve your problem concerning the button not working after it has been clicked once.
Related
How can i make so that if i hover over a imagebutton another imagebutton appears over that imagebutton and when you move your mouse outside it returns back to the first imagebutton? I have tried a lot of combinations but nothing so far.
So far i have tried
ImageButton(Drawable imageUp,
Drawable imageDown,
Drawable imageChecked)
but the setChecked(boolean isChecked) hasn't worked for this method and when using focusListener it turns the ImageButton into another ImageButton when you hover over it but it doesn't return to its first stage when you go outside the ImageButton. Any help appriciated.
Instead of using imageDown use imageOver.
According to my understanding:
imageUpdefault button
imageOverwhen the mouse/focus is over the button
imageDownwhen the button is pressed (the mouse is clicked)
imageCheckedwhen the button has the status checked
imageCheckedOverwhen the button has the status checked and the mouse/focus is over the button
imageDisabledwhen the button has the status disabled
You can use the ImageButtonStyle for this. Pass it to the consructor of your button or use the appropriate setter.
ImageButtonStylestyle = new ImageButtonStyle();
style.imageUp = imageUp;
style.imageOver = imageDown;
style.imageChecked = imageChecked;
Ps.:
I assumed you do not really want to change the button, just the displayed image.
For the MOUSE_MOVE event, the documentation says there is a buttonDown property to indicate whether or not the left mouse button is currently down. But how can I determine if the right button is down?
There is not, but you can do this by setting a flag inbetween Right Mouse down and Right mouse up. If you listen on capture with a high priority, it will be available in all other mouse events.
In your document class or main timeline frame 1, add the following code:
var isRightMouseDown:Boolean = false;
stage.addEventListener(MouseEvent.RIGHT_MOUSE_DOWN, globalMouseDown,true,int.MAX_VALUE)
function globalMouseDown(e:MouseEvent):void {
isRightMouseDown = true;
}
stage.addEventListener(MouseEvent.RIGHT_MOUSE_UP,globalMouseUp,true,int.MAX_VALUE)
function globalMouseUp(e:MouseEvent):void {
isRightMouseUp = false;
}
Now you have a var you can access in your mouse move listeners. If using timeline code, access it outside the main timeline by doing MovieClip(root).isRightMouseDown. If using a document class, define it as static public static var isRightMouseDown:Boolean and access it like so from anywhere in your app: MyMainClassName.isRightMouseDown. (replace MyMainClassName with whatever you've called your document class)
When you add the listeners above, putting the third parameter as true and the fourth parameter as int.MAX_VALUE will ensure this listener will be processed before any others listening for the same event in your application.
For more information about how events work and their phases, see this:
http://www.adobe.com/devnet/actionscript/articles/event_handling_as3.html
I got a simple flash scene that contain movie clip that contain sliding button that changing every few seconds:
every layer contain a button and another movie clip.
If I want to add event-listener to a simple button on stage, i just write:
f4.addEventListener(MouseEvent.CLICK, f4Click);
function f4Click(event:MouseEvent):void
{
flash.external.ExternalInterface.call("dlHTCMD", "switchtogame?code=fnf50");
}
but when I'm trying to access the button inside the two movie clips, like
optContainer.optBeach.btnBeach.addEventListener(MouseEvent.CLICK, btnBeachClick);
and I'm adding a trace function to see if the event are triggered but nothing is happening.
looks like a simple problem but i didn't find a solution.
I thought about extending the button class and add a bind function with the value as the name of the button and set the Event Listener but I'm not an AS3 expert :(
Thanks.
Try this:
// Pass mouse events to children
optContainer.mouseChildren = true;
optContainer.optBeach.mouseChildren = true;
// Reset hit area
optContainer.hitArea = null;
optContainer.optBeach.hitArea = null;
// Reset masks
optContainer.mask= null;
optContainer.optBeach.mask= null;
Also check whether on each key frame button have name.
I'm trying to set a button to invisible in AS3 however when the I leave the frame and come back to it the button is visible again. This is for a jeopardy game I make making for comm tech class.
Here is what I currently have:
a1.addEventListener(MouseEvent.CLICK, a1mouseClick);
function a1mouseClick(mouse:MouseEvent) {
a1.visible = false;
gotoAndStop("A1");
trace("Going to A1");
}
however when it comes back to the frame with the a1 button it is visible again.
Here is my current animation: https://dl.dropbox.com/u/23938245/jeporady.fla
While moving through the timeline flash player can recreates sprites, movie clips and text fields, so your buttons appears visible again. To prevent recreation move all controls to separate level without key frames. If key frames are required try to set the same instance name for this button in all keyframes.
#fsbmain and #prototypical they are right.
While moving through the timeline flash player can recreates sprites, movie clips and text fields, so your buttons appears visible again. To prevent recreation move all controls to separate level without key frames. If key frames are required try to set the same instance name for this button in all keyframes.
I was looking at your project, and offer a quick fix, you need to do the following:
Create a new layer on top to manage a few of actions availables for all frames with the following actions:
import flash.display.DisplayObject;
// Manages the buttons visible state
var buttonsStates:Object = {
"a1":true, "b1":true, "c1":true, "d1":true, "e1":true,
"a2":true, "b2":true, "c2":true, "d2":true, "e2":true,
"a3":true, "b3":true, "c3":true, "d3":true, "e3":true,
"a4":true, "b4":true, "c4":true, "d4":true, "e4":true,
"a5":true, "b5":true, "c5":true, "d5":true, "e5":true
};
// Checks the buttons visibility
function checkVisibility () {
for (var buttonName:String in buttonsStates)
{
var child:DisplayObject = this.getChildByName(buttonName);
child.visible = buttonsStates[buttonName];
}
}
// Saves the visible satatus to false
function setVisibilityToFalse(target:*) {
buttonsStates[target.name] = false;
target.visible = false;
}
Every time you want to check the visibility of the buttons you must call the checkVisibility() function. For example, every time you return to the button list.
Finally the event handler for each button must be like this:
function a1mouseClick(mouse:MouseEvent) {
setVisibilityToFalse(mouse.currentTarget); // Saves the visible state to false
gotoAndStop("A1");
trace("Going to A1");
}
You can download the edited file here http://cl.ly/Lt6X
You are missing a fundamental aspect of how the flash timeline and keyframes function. Once you move away from that frame, the stage instance of the content of that frame and it's properties/states are gone. When you return to that frame, the instance is created again based on the keyframe contents.
I think the best solution given your current approach is to put the main board persistent throughout all the frames. You can do that by creating a layer for it, and have it's keyframe extend from frame 2 to frame 27. However, your next issue will be adjusting visibility of all the elements on that screen when you don't want them visible.
My suggestion would be to put all the elements of that screen into a movieclip symbol of it's own and add that movieclip, and all code for it's listeners, to this new layer you created. For example you might name that instance - main_board and therefore you could modify it's visibility with main_board.visible property. If you did choose that solution, you would need to modify all the code on that frame to use that instance name as well ie :
main_board.a1.visible = false;
Also, you'd need to modify all you addEventListener lines as well :
main_board.a1.addEventListener(MouseEvent.CLICK, a1mouseClick);
Your approach for this game could be greatly simplified, but even further beyond the scope of this question than I have already gone!
In my first AS3 project (not used Flash since AS1) I need to use a custom movie clip as a cursor and detect clicking on a button. Using the code below, the custom cursor works as expected, but I am unable to capture clicking on the button.
If I comment out the first line, the trace for clicking works as expected. I have tried changing the order of the event listeners, applying the follow to the button rather than the stage, but cannot get both to work together.
Any advice as to where I'm going wrong ould be appreciated.
stage.addEventListener(MouseEvent.MOUSE_MOVE,follow);
start_button.addEventListener(MouseEvent.MOUSE_UP, playPhrase);
function playPhrase(event:MouseEvent) {
trace("Click received");
};
function follow(event:MouseEvent) {
cursor.x = mouseX;
cursor.y = mouseY;
};
Looks like that's because you always click on the cursor object as it always positioned right under mouse cursor. Make it "transparent" for mouse clicks:
cursor.mouseEnabled = false;
And if it's a DisplayObjectContainer then also:
cursor.mouseChildren = false;