just started a simple drawing tool in Flex to get used to the graphics coding in Flex. Got a problem in the beginning itself.
Here I am using Border Container as a drawing area (Flex 4) instead of Canvas and I am drawing simple dot on Mousemove event. Yep very simple basic thing. But I don't see the drawn dots in the border container area. But I see the Mouse Event getting fired. No Idea what am missing.
Below is my code,
<?xml version="1.0" encoding="utf-8"?>
<fx:Script>
<![CDATA[
import mx.containers.Canvas;
import mx.skins.Border;
import spark.components.BorderContainer;
protected function init():void
{
var whiteboard:BorderContainer = new BorderContainer();
whiteboard.width = 1000;
whiteboard.height = 600;
whiteboard.addEventListener
(MouseEvent.MOUSE_MOVE,whiteboard_mouseMoveHandler);
this.addElement(whiteboard);
}
protected function whiteboard_mouseMoveHandler(event:MouseEvent):void
{
var graph:Graphics =
(event.currentTarget as BorderContainer).graphics;
graph.beginFill(0x000000);
graph.drawCircle(event.localX,event.localY,3);
trace("x:"+event.localX+":y:"+event.localY);
}
]]>
</fx:Script>
The BorderContainer is most likely not expecting you to draw on it's graphics object. I haven't looked at the code for BorderContainer lately, but I recall someone else having a similar problem.
Since a BorderContainer draws a border around it's contents, it's most likely using it's graphicsobject to draw that border. So you shouldn't try to use the graphics property of the border container to draw on.
Instead, add a UIComponent or some other Flex object to the border container, and then draw your graphics on that object.
Use a skin and draw in the skin. That's the whole behaviour/skin separation is for.
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;
}
How to add Sprite to BorderContainer (UIComponent)?
var sprite:Sprite = new Sprite();
sprite.graphics.lineStyle(10,0);
sprite.graphics.moveTo(40,40);
sprite.graphics.lineTo(60,60);
mybordercontainer.addChild(sprite);
//mybrodercontainer is id of BorderContainer created in mxml
This code doesnt work. I cant see Sprite on my BorderContainer. How can I add Sprites on UIComponents, so I can see them? I tried this and it kinda worked:
var comp:UIComponent = new UIComponent();
comp.addChild(sprite);
myborderconteiner.addElement(comp);
But I dont think, that this is a right way to add Sprites to UIComponents. Is there another method to do that?
Second problem:
When I have few Sprites added to my UIComponent (lines/circles/images or others) how can I receive an object Sprite from that UIComponent, which is containing all Sprites added before to that UIComponent?
I need to create Bitmap from that Sprite and do some things.
I hope I make myself clear
Use the SpriteVisualElement as container. That should serve nicely as a container or Sprite substitute. You could also draw in the UIComponent itself.
Is there a way to prevent the automatic change of the height property of a DisplayObject? It automatically resizes to match content, though my swf file is 32 pixels height. The code below can show prove of this, first frame enemy.height is 32 but later is 27.5, and this messes up my script.
getRect() and getBounds() return exactly the same. Also, I want to know why in the first frame it shows the correct height and in the second it changes, it should show 27.5 from the beginning.
package {
import flash.display.Sprite;
import flash.events.Event;
public class Main extends Sprite {
private var enemy:Sprite;
[Embed(source = '../lib/enemy.swf')] private var swf:Class;
public function Main():void {
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function update(e:Event):void {
trace(enemy.height);
}
private function init(e:Event = null):void {
removeEventListener(Event.ADDED_TO_STAGE, init);
enemy = new swf();
addChild(enemy);
addEventListener(Event.ENTER_FRAME, update);
}
}
}
This has to do with the fact that you're instantiating a whole SWF, and 1 frame has to pass for it to be synced to the Main swf. What I would do is export the symbol in the .fla, then use the "embed symbol" syntax in Flex:
[Embed(source='enemy.swf#Symbol1')]
private var swf:Class;
In this case, the height will be consistent even in the first ENTER_FRAME. If it's not the height you want, you can use the invisible shape to set the bounds.
A "hacky" solution might be to add a shape to the enemy that has the max size you want, then set it to be invisible. I have created hit boxes for objects that way and it worked quite well.
One way would be to add it when creating the object in the Flash IDE. Just draw it and position it as you want the shape to be, then give it an instance name, like "sizeHolder". After you create the enemy you would then call
enemy.sizeHolder.visible = false;
In the Flash IDE you could place it on another timeline, then make that timeline invisible and lock it, so it wouldn't get in your way when editing the actual object.
The other way would be to add it by code. Draw the object in another DisplayObject, set it to invisible and then addChild it to enemy.
The enemy sprite animation sequence
will vary in height.This is part of
the animation process. Hence the
actual height per frame will vary
based on bounding box of the sprite.
As you very well observed this is the
default behavior.
The ways:
The One you are presently following storing height and using for calculations.(better)
As EyeSeeEm suggested if i understood him correctly having an invisible height sprite background with proper centering of the movie clip center point and centering of the sprite in each frame to be contained in the invisible height sprite bounds.
You will often find that you will come across features in action script not working the way you want it to.Whats important is that you adapt the coding to facilitate the solution . It is not hack y or inefficient when and coding/method allows for easily making further changes/extensions.
P.S:
This would depend on situation but personally i would rather the height be dynamic according to the sprite animation instance so any hits to the enemy just nearly over its head by projectiles doesn't actually kill the enemy.
Try
import flash.display.StageAlign;
import flash.display.StageScaleMode;
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
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.