Is there a way to have a movie clip in your flash game and when something happens (such as a mouse hovering over it) for it to become lighter or darker?
MovieClip.addEventListener(MouseEvent.MOUSE_OVER, onContact);
public function onContact(event:MouseEvent):void
{
//Not Sure What To Put Here
}
Is there a way to do this?
Thanks in advance,
Jason
Every object that has a colorTransform has the ability to manipulate it's colour.
For example try this:
public function onContact(contact:MouseEvent):void
{
var displayObject:DisplayObject = contact.currentTarget as DisplayObject;
displayObject.transform.colorTransform = new ColorTransform( .3, .3, .3); // makes object darker
}
Also, it's common to use tweening engines like TweenLite/TweenMax (http://www.greensock.com/tweenmax/) to tween the colorTransform. If you'll navigate to the provided link there is a plug-in explorer that allows you to test and experiment with different tweening plug-ins including Color Transform.
Related
I've a problem with ROLL_OVER event listener. When I enter the empty area withing the movieclip with mouse cursor, ROLL_OVER event triggers. But I want that event trigger only when mouse cursor is on the colored area.
To Make it more clear: Think about " O " letter, when mouse cursor is between the empty area of O letter (inside of O) , event shouldn't trigger. It should trigger only when mouse curser is on the black area.
How can I implement this?
Thanks
-Ozan
PROBLEM IS SOLVED THANKS TO #Ethan Kennerly
I just want to add a few things to help people have problem same as me. In my situation I tried to make continents glow when my mouse is over them. I used the ROLL_OVER/MOUSE_OVER eventlistener to check if my mouse is over them or not. But with the data given by Ethan Kennerly I produced another way.
In Ethan Kennerly's solution, if your mouse enters the area of continent from a transparent area , it doesn't get blur effect because ROLL_OVER and MOUSE_OVER event listeners only trigger once per enters so I used MOUSE_MOVE event listener on each continent movieclips.
And for this statement:
if (isPixelTransparent(DisplayObject(event.currentTarget), new Point(stage.mouseX, stage.mouseY)) {
return;
}
add whatever is in the "ROLL_OUT or MOUSE_OUT" eventlistener function, add all of them inside this statement. But don't remove ROLL_OUT or MOUSE_OUT functions.
It sounds like the movie clip contains a shape that has transparent pixels. Transparent pixels respond to mouse over and roll over. If you could draw vector graphics that have no shapes with transparent pixels, the mouse would ignore the empty space in the movie clip's bounding box.
Yet it sounds like you need to use transparent pixels and you want the mouse to ignore them, so you could guard, like this:
private function onRollOver(event:MouseEvent):void
{
if (isPixelTransparent(DisplayObject(event.currentTarget), new Point(stage.mouseX, stage.mouseY)) {
return;
}
// respond to roll over.
}
To detect transparency, Miguel Santirso rendered the pixels and translated the coordinate space here: http://sourcecookbook.com/en/recipes/97/check-if-a-pixel-is-transparent-in-a-displayobject (Except line 38 looks on my computer like "rect" got rendered as "ct"). You could optimize that code by only drawing the pixel in question, instead of the whole image, and checking if that pixel value (getPixel32) is 0, instead of calling a hitTest. I would optimize Miguel's code like this:
public static function isPixelTransparent(objectOnStage:DisplayObject, globalPoint:Point):Boolean
{
var local:Point = objectOnStage.globalToLocal(globalPoint);
var matrix:Matrix = new Matrix();
matrix.translate(-local.x, -local.y);
var data:BitmapData = new BitmapData(1, 1, true, 0x00000000);
data.draw(object, matrix);
return 0x00000000 == data.getPixel32(0, 0);
}
By the way, if all your movie clips would have the same hit test shape, you could create a separate transparent shape that listens to the roll over. I use a transparent shape to define a custom hit test shape that is a consistent and simple shape (like a circle) when the image is a more complicate shape (like an X or an O with nothing in the middle). The custom hit test shape is a Sprite with a transparent shape. The sprite listens to the roll over. A separate mouse listener shape is also useful if your movie clip, on later frames, creates new shapes that alter the silhouette of the movie clip.
The easiest solution would be using the Interactive PNG class by Moses.
http://blog.mosessupposes.com/?p=40
Normally the clear areas of a PNG are treated as solid, which can be especially frustrating when dealing with a lot of images that overlap each other because they tend to block mouse interactions on the clips below them.
This utility fixes that so that mouse events don't occur until you
bump against a solid pixel, or a pixel of any transparency value
besides totally clear. InteractivePNG lets you set an alphaTolerance
level to determine what transparency level will register as a hit.
I am new to AS3 scripting. I have a wide image (movie clip "preform_mc") that I am masking and would like for right button ("right_mc") to dynamically move the image.
The code below moves the image to the right, but its not a dynamic movement (would like an animation effect) and I cant control when the image should stop moving, basically a max amount for the x coordinate.
any help is greatly appreciated!
right_mc.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);
function fl_MouseClickHandler_2(event:MouseEvent):void
{
preform_mc.x += -100;
}
Take a look at Greensock Tweening Library. Using that library you'll be able to easily make a smooth animation of a moving image. For the control of max X you should write an if statement to check whether preform_mc.x is more than the max amount you want.
Code will look something like this:
var min_x:int = -500;
function fl_MouseClickHandler_2(event:MouseEvent):void
{
if(min_x < preform_mc.x)
TweenLite.to(preform_mc, 0.5, {x:preform_mc.x - 100}); // using the library I provided a link to
}
Last time I touched flash was 10 years ago, or so... In other words, I'm quite rusty. I am going to make a interactive map of Europe. I want the strongly green circles to have a mouseover/-out effect (First I was thinking some size-change, but I think maybe I'll go for opacityfading). I have a couple problems. The code under is working, but Is there a good way to either force the fadingout(...) to finish, before fadingin(...) is called? If not, is there a smart way to get the current opacityvalue when fadingin(...) and make that the start value. If the user moves the mouse outside quickly, the effect is not looking very nice. Also, what is the best way to get these functions to work with every circle in the map? If the user drags the mouse around, I want this to create a tracing effect.
import fl.transitions.Tween;
import fl.transitions.easing.*;
var outTween:Tween;
myButton.addEventListener(MouseEvent.MOUSE_OVER, fadingout);
myButton.addEventListener(MouseEvent.MOUSE_OUT, fadingin);
function fadingout(event:MouseEvent): void {
outTween = new Tween(myButton, "alpha", None.easeNone, 1, 0, 1, true);
}
function fadingin(event:MouseEvent): void {
outTween = new Tween(myButton, "alpha", None.easeNone, 0, 1, 1, true);
}
What I would probably do is create a class for the circle. In there I would create the eventlisteners for mouseover and mouseout to change the opacity and/or size.
On a second note, I recommend that you use TweenLite or TweenMax from greensock http://www.greensock.com/tweenlite/
TweenLite should probably suffice for you. Look into it's properties especially the "overwrite"-property which controls the tween overriding you mentioned
overwrite : int Controls how (and if)
other tweens of the same target are
overwritten by this tween. There are
several modes to choose from, but only
the first two are available in
TweenLite unless
OverwriteManager.init() has been
called
You could very well create a class for the green circles, and contain all listeners and tweened reaction features within it. A very solid method.
You may also leverage event propagation on a movie clip / sprite containing all mouseable elements to achieve the same thing with a single listener set:
var myContainer:Sprite = new Sprite();
//add all elements
myContainer.addEventListener(MouseEvent.MOUSE_OVER, over, true, 0, false);
myContainer.addEventListener(MouseEvent.MOUSE_OUT, out, true, 0, false);
private function over(e:MouseEvent):void
{
TweenLite.to(e.target, .5, { alpha:1.0 });
}
private function out(e:MouseEvent):void
{
TweenLite.to(e.target, .5, { alpha:0.5});
}
Basically, you add the listener to the containing object, and events are passed down to the children, who then receive the event instructions. The ".target" of the propagating object, received in the MouseEvent argument is the key here.
I'm using the fantastic TweenLite framework here, as mentioned by others, and you should too.
cheers and good luck!
I would like to tween between a short rounded rectangle and a tall rounded rectangle. (I only want deal with the height - no other parameters). I am programming with actionscript 3. My tweening engine is TweenLite.
I have been tweening a sprite that contains a rounded rectangle. The tweened sprite produces distortion. I suppose that I have been scaling the original image, rather than the height of the rounded rectangle?
Here is a simple example of my code:
-
Draw the rounded rectangle:
roundRect = new Sprite();
roundRect.graphics.beginFill(0x000000);
roundRect.graphics.drawRoundRect(0,0,50,15,4,4); //Original Height: 15
roundRect.graphics.endFill();
addChild(roundRect);
Then I listen for a mouse click event on the rounded rectangle.
The mouse event triggers a function with the following code:
TweenLite.to(this.roundRect, 1, {height:120}); //Final Height: 120
-
I would like to tween the height of the rounded rectangle itself. I would hope that this would not produce the unwanted distortion. Is there any way to achieve this?
Thank you.
This can be achieved with "9-slice scaling".
Below are two tutorials on how to setup a Movieclip to use the 9-slice guides, one is done through the IDE (using the guidelines) and the other through code (by defining a rectangle called grid and assigning this to the movieclip's scale9Grid property).
http://www.sephiroth.it/tutorials/flashPHP/scale9/
http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001003.html
Once the scale9Grid property has been correctly assigned you can scale (and Tween) the movieclip as intended without any distortion.
It might also be worth reading: http://www.ovidiudiac.ro/blog/2009/05/scale9grid-work-and-fail/ which describes various scenarios when scale9grid does and doesn't work. (mainly to do with having nested children and non-vector graphics inside of the grid).
Hope this helps.
As an alternative, and since its only a rounded rectangle, you could also do something like this:
var rectHeight = 15;
var roundRect = new Sprite();
addChild(roundRect);
updateRect();
function updateRect() {
roundRect.graphics.clear();
roundRect.graphics.beginFill(0x000000);
roundRect.graphics.drawRoundRect(0,0,50,rectHeight,4,4);
roundRect.graphics.endFill();
}
roundRect.addEventListener("click", click);
function click(e) {
TweenLite.to(this, 1, {rectHeight:120, onUpdate:updateRect});
}
Pretty basic question here, but its still got me a little confused..
I have an object(navigation menu bar) that I want to change the colors on with code, so in an updateColor function, I get the bounds of the object (which is a drawing shape contained in a movieclip) and redraw a new shape on top of it with the new color, but I've noticed that the last shape still exists behind this redraw.
I tried using obj.graphics.clear(); before the redraw but that didn't get rid of the original shape. Is there another command that I'm overlooking?
Unless you drew the object you wish to remove within the same graphics object, clearing won't work. You need to remove the DisplayObject.
Depending on the number of children you can do:
obj.removeChildAt(0);
This also removes movieclips / buttons you placed on the stage manually.
If you have a reference to the DisplayObject you wish to remove you can simply do
obj.removeChild(backgroundClip);
Note that you can also change the color of a DisplayObject directly:
import flash.geom.ColorTransform;
...
public var test:MovieClip; //instance on stage
...
var cf:ColorTransform = test.transform.colorTransform;
cf.color = 0xff0000;
test.transform.colorTransform = cf;
while(this.numChildren)
{
this.removeChildAt(0);
}
Will clear child object on this MovieClip,
if it's clearing too much, then put the shape drawing in a subclip, and clear the subclip.