I've an image added on stage while setting smoothing property to true.
Everything is fine until I'm changing the Z property - it will make my image blury as hell, although the smoothing property is equal to true.
Is there anything I can do?
Not really. When you apply any 3d transformation to a display object (z, rotationX, etc) it will be rendered with the 3d projection renderer which, disappointingly, introduces some blurring. If your object is back to z=0 and you wish to remove the 3d projection completely, set the transform.matrix, which removes the transform.matrix3D and removes any projection rendering blurring.
For example, the following will make a 3d display object become a 2d display object, removing any 3d projection it had:
function remove3D(object:DisplayObject):void {
object.transform.matrix = new Matrix(object.scaleX, 0, 0, object.scaleY, object.x, object.y);
}
Related
I am working on a flash sound mixer application with multiple sound channels, and I am having trouble with the lights beside the volume knob.
Is there a way to hide just a part of an image?
On the image below, image-2 is on top of image-1 to create some kind of volume level indicator effect, and how much of image-2 is shown depends on the value of the volume.
image-url: http://s30.postimg.org/r3ow1g5bl/volume_lights_level.png
I've tried by just reducing the height of image-2, but it looks awful and distorted.
Is there something in flash that works closely the same as CSS's behavior.
example: I'll just make image-2 a background of a shape, and when I reduce the shape's height, the image-background does not get distorted or changes it's height as well.
By searching for solutions, I have come across the mask property, but I don't quite understand how it works, and most of the examples shown are images placed inside circles.
Is the mask property applicable in this situation?
I'm quite new to flash so I don't know a lot of things yet.
You can indeed use a mask.
How to programmatically create your mask
Put an occurrence of your image named myImage on the stage, and put over this occurrence a mask named myMask with the same dimensions. You can apply myMask mask to myImage using it's mask property like below:
Main Timeline
myImage.mask = myMask;
function mouseMoveHandler(e:MouseEvent):void {
myMask.height = myImage.y - e.stageY;
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
You have just to adapt this code to your animation, in the function where you click your button.
I got it working now, many THANKS #VC.One. heres how I did it.
Imported img-2 to stage, converted it into symbol(type:Movie Clip), assigned instance name: img2_mc.
I created a new layer for the mask, drawn a rectangle using rectangle tool, converted it also to symbol(type:Movie Clip), assigned instance name: mask_mc.
Then applied the mask to img2_mc.
/* the code */
img2_mc.mask = mask_mc;
function onEnterFrame(event:Event):void{
var volumeKnob_y = volSliderKnobOn.y + 12; // adjust it to the center of the knob
mask_mc.height = volumeKnob_y;
}
I've included a zoom functionality similar to the one explained at this website:
http://www.flashandmath.com/howtos/zoom/
This works perfectly on my background image(a map, that is), but I want to keep the symbols on my map the same size while zooming in.
I probably could work this out by changing all the children's size when calling the zoom-function, but I am hoping there is some kind of easy code adapt in my children class to make the size of the instances unchangable. Is there?
Thanks!
One crude way, so you don't have to calculate the symbols scale, would be to remove the symbols from the mapDisplayObject so they're no longer a child and instead put symbol placeholders. Then match each symbol's x and y to each place holder, using localToGlobal...
If your children are not scaled or skewed or rotated you can iterate all of them and set transformation matrix to 1/parentScale. Something like:
for each (var child:DisplayObject in parent) {
var matrix:Matrix = child.transform.matrix;
matrix.a = 1/parentScale;
matrix.d = 1/parentScale;
child.transform.matrix = marix;
}
To get the global screen position (in pixels!) of some DisplayObject I'm calling DisplayObject::localToGlobal like
var o: DisplayObject = ...;
var topLeft: Point = o.localToGlobal( new Point( 0, 0 ) );
I noticed that every now and then I'm getting double values for topLeft.y, even though I expected some integer value. Is there some scaling or coordinate system I have to take into account?
This could be due to transformations applied to the parents of your DisplayObject.
You can find out all the transformations affecting a DisplayObject using:
myDisplayObject.transform.concatenatedMatrix;
This is the results of all transformations applied to your target and its parents up to the root of the display list.
More info.
x/y coordinates and width/height are floating point values in Flash. It is perfectly legal to size/position objects with sub-pixel values (ie: non-integer values).
With respect to scaling, you can query the objects scaleX and scaleY properties to see if they are being scaled, or force these values to 1.
Is there a way to change the style of the white squares that are used as vertex handles by default when a polyline is set to editable:true?
I can see that changing the stroke of the polyline affects those handle squares, but I'd like to either change the shape of handle (e.g. to a circle), or substitute an image.
The only way I've managed to found is a direct manipulation of DOM elements corresponding to those markers. For instance, they may be selected using
$('div').filter(function() {
return $(this).css('width') == '11px';
})
Probably, more reliable approach is a DOM tree traverse starting from $('.gm-style') element.
I'm working with about 20 objects that are moving around in 3D space. Adobe recommends "Using Matrix3D objects for reordering display":
Use the getRelativeMatrix3D() method of the Transform object to get the relative z-axes of the child 3D display objects.
Use the removeChild() method to remove the objects from the display list.
Sort the display objects based on their relative z-axis values.
Use the addChild() method to add the children back to the display list in reverse order.
Great. That's fine if the objects aren't moving. But what if there are animations happening and one object comes in front of another in z-space? The objects are displayed accoring to the position in the display list, not according to their z-order. How can you make objects respect z-order while animating (make object A appear in front of object B if object A's z-value becomes smaller than object B)? Obviously you can't clear the display list during an animation.
It's practically the same as adobe's docs says... and it works perfectly for moving objects.
The simplest way, so you have some code reference, and given you have all of your 3d objects in an array, would go something like this:
function zSort(objects:Array) {
objects.sortOn("z", Array.DESCENDING | Array.NUMERIC); // sort the array on the "z" property
for each(var clip:DisplayObject in objects) { //loop the array and add the childs in the corrected order...
addChild(clip);
}
}