I'm trying to make just a simple square movieclip show up on my stage, and it seems like nothing I've tried works...nothing appears on the stage! My code:
var mc:MovieClip = new MovieClip();
mc.x = 0;
mc.y = 0;
mc.width = 200;
mc.height = 200;
mc.opaqueBackground = 0xCCCCCC;
// new ColorTransform object
var obj_color:ColorTransform = new ColorTransform();
// setting the new color we want (in this case, blue)
obj_color.color = 0x0000ff;
// applying the transform to our movieclip (this will affect the whole object including strokes)
mc.transform.colorTransform = obj_color;
this.stage.addChild(mc);
mc.x = 0;
mc.y = 0;
Why isn't my movieclip appearing on the stage?
Your MovieClip contains nothing, so nothing is displayed. You are trying to cause the MovieClip to display a gray box by setting width and height and opaqueBackground, but unfortunately this doesn't work. width and height will only resize a clip that already has some content. If width and height are 0, then changing them has no effect, because trying to scale 0 results in 0. You can notice this by doing trace(width) after you set it to 200.
If you want to display a rectangle, use the drawing API to draw it in the clip:
var mc:MovieClip = new MovieClip();
mc.x = 0;
mc.y = 0;
mc.graphics.beginFill(0xCCCCCC);
mc.graphics.drawRect(0, 0, 200, 200);
mc.graphics.endFill();
addChild(mc);
Related
I have a stage that is 1920 in width, the space I am trying to center my MovieClip on is 1520. My MovieClip changes based of user selections, so it could be 1023.9 or 396.8 I am trying to center this movie clip in my 1520 place. How would I do this?
I have tried the following:
floorplanMCAG.x = 1520 - floorplanMCAG.width;
But my 1023.9 MovieClip is too much to the left and my 396.8 MovieClip is a little to the right
Here is how my MovieClip is created:
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadFloorplanAG);
loader.load(new URLRequest("images/" + modelAG.floorplan));
var floorplanMCAG:MovieClip = new MovieClip();
function loadFloorplanAG(e:Event):void
{
floorplanMCAG.addChild(loader);
floorplanMCAG.height = 468;
floorplanMCAG.y = 570;
floorplanMCAG.scaleX = floorplanMCAG.scaleY;
floorplanMCAG.x = stage.stageWidth / 2;
trace(floorplanMCAG.width);
map_boundsFLRPLSAG = new Rectangle(520,570,floorplanMCAG.width,floorplanMCAG.height) // this defines the area in which the map should fit
min_zoomFLRPLSAG = floorplanMCAG.scaleX;
//Zoom and Drag Event Listeners
stage.addEventListener(TouchEvent.TOUCH_BEGIN, touchBeginFLRPLSAG)
stage.addEventListener(TouchEvent.TOUCH_MOVE, touchMovedFLRPLSAG)
stage.addEventListener(TouchEvent.TOUCH_END, touchEndFLRPLSAG)
modelInformationAG.addChild(floorplanMCAG);
modelInformationAG.setChildIndex(floorplanMCAG, 0);
}
Here is modelInformationAG
var modelInformationAG:MovieClip = new MovieClip();
modelInformationAG.graphics.drawRect(0, 0, 1920, 1080);
the formula for centering your movieclip depends on where the moviclip has its registration point set. theoratically the registration point could be anywhere, but here for the 2 most common situations:
if it's set in top left corner of the mc:
floorplanMCAG.x = (stage.stageWidth - floorplanMCAG.width) / 2;
if the registration point is in the center:
floorplanMCAG.x = stage.stageWidth / 2;
EDIT:
ok, I guess this should center your movieClip:
floorplanMCAG.x = (modelInformationAG.width - floorplanMCAG.width) / 2;
I have dynamically created a bunch of textfields, the number of which depends on xml input. The textfields need to be button-enabled, so I thought the easiest solution is to put them in a movieclip and buttonMode that movieclip.
The hierarchy looks like this: main (extends MovieClip) -> klankoefening (a MovieClip) -> Textfieldparent (a MovieClip) -> Textfield
I have a variable maxw which contains the biggest textfield's width and I want all my Textfieldparents to have this width.
I'm trying to do it like this:
//generate textfields
keuzes = new XMLList(lijstOpties.categorie.(#cat == catname));
var nrs:int = keuzes.keuze.length(); //aantal keuzemogelijkheden
var maxw:int = 0; //grootste breedte tf, nodig voor bepalen breedte knoppen
for (var nr:int = 0; nr < nrs; nr++) {
var tf:TextField = createTextfield(werkfmt);
tf.text = keuzes.keuze[nr].toString();
tf.autoSize = "center";
tf.background = true;
tf.backgroundColor = 0xffcc33;
tf.border = true;
tf.borderColor = 0x000000;
tf.name = "keuzetf";
tf.selectable = false;
tf.x = 0;
tf.y = 0;
if (tf.width > maxw) {maxw = tf.width;}
var tfcontainer:MovieClip = new MovieClip();
tfcontainer.buttonMode = true;
tfcontainer.name = keuzes.keuze[nr].toString();
tfcontainer.addChild(tf);
klankoefening.addChildAt(tfcontainer,nr);
}
for (var an:int = 0; an < 3; an++) {
var mcs:MovieClip = klankoefening.getChildAt(an) as MovieClip;
mcs.width = maxw;
trace ("mcs " + mcs.width);
var mtf:TextField = mcs.getChildAt(0) as TextField;
trace ("mtf " + mtf.text);
}
the trace results are
mcs 32.05
mcs 33
mcs 21.25
Which I find odd, because I stated in my second loop that the width for all Textfieldparents should be set to maxw. What is happening?
Consider drawing an underlaying Rectangle of desired width and height. You can use mcs.graphics to do that. The trick is, width of a DisplayObjectContainer is a calculated property, and changing it will likely result in changing scale. Say, a MC has two shapes as chilren, one at (1000,0) and another at (0,0), and both have width of 10 - the resultant width of that MC will be 1010. So, instead of changing width, simulate its change by drawing a rectangle on the MC.
mcs.graphics.clear();
mcs.graphics.lineStyle(0,0,0);
mcs.graphics.beginFill(0x808080,0); // bogus filled rect, to capture events
mcs.graphics.drawRect(0,0,maxw,maxh); // height is needed too
mcs.graphics.endFill();
After thinking a bit more about your problem, I think your issue is that the buttons you're adding the text to have a width entirely defined by the TextField, and because you're set the text to autoSize, it's snapping back to it's original width.
What you will need to do to make the width more indicative of what you need, and allow for easy clicking on the buttons is to create a transparent rectangle in the tfContainer mc, set the width of the tfContainer, and then add the text to the button.
Can anyone tell me how to dynamically adjust the width of a TextField so that it's always a little less than the width of the stage? For example, this is what I've tried, but it raises an error:
var myText:TextField = new TextField();
myText.x = 20;
myText.width = stage.stageWidth - 40; //does not work, what
stage.addEventListener(Event.RESIZE, adjustTextField);
function adjustTextField():void
{
myText.x = 20;
myText.width = stage.stageWidth - 40;
}
In theory this code should ensure that myText is always adjusting to the full width of the stage with a 20 pixel border on both sides. But, this raises an error.
Does anyone know a way to get fluid widths on TextFields in Actionscript 3?
Try to do something with stage when myText is added to stage
var myText:TextField = new TextField();
myText.x = 20;
this.addChild(myText);//add myText to some parent
myText.addEventListener(Event.ADDED_TO_STAGE, onAddToStage);
private function onAddToStage(event:Event):void {
stage.addEventListener(Event.RESIZE, adjustTextField);
}
I am trying to load an image from an url in as3, as follows:
var myImageLoader:Loader = new Loader();
private var mcImage: MovieClip = new MovieClip();
var myImageLocation:URLRequest = new URLRequest("http://example.com/xyz.jpg");
myImageLoader.load(myImageLocation);
mcImage.addChild(myImageLoader);
mcImage.x = 100;
mcImage.y = 100;
//mcImage.width = 50;
//mcImage.height = 50;
addChild(mcImage);
The code above works fine, but since my desire image has a different size comparing to the original image, changing its size is necessary here. So after using the lines, which are commented in the code above, the mcImage disappear.
I tried to use mcImage.scaleX =myImageLoader.width/50 , but since myImageLoader is not loaded at the beginning, we cannot get the width of myImageLoader which is null.
It's the often error with setting sizes, you can't set size of empty display object (object that width and height are zero). To set size of display object you need first to draw something on it's graphics (for example 1*1 px rectangle), but you should understand that after it you will just scale your display object relatively to it's original size, for example if you draw 1*1 px rectangle and set with=height=50, scaleX and scaleY for it will be 50, so your loaded image if we say about loader will be giant size :) It's all about sizing in flash.
What about your task: there is one common rule - don't resize loader, resize loaded image. As I said above resizing of loader will only scale your image rather than set it sizes. Add complete handler and resize loader.content as you want.
Example:
public function astest()
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplte);
addChild(loader);
loader.load(new URLRequest("https://www.google.ru/images/srpr/logo3w.png"));
}
protected function onComplte(event:Event):void
{
EventDispatcher(event.target).removeEventListener(event.type, arguments.callee);
var image:DisplayObject = (event.target as LoaderInfo).content;
image.width = 50;
image.height = 50;
}
You need to get loadComplete event on your loader before playing with your MC
var myImageLoader:Loader = new Loader();
private var mcImage: MovieClip = new MovieClip();
var myImageLocation:URLRequest = new URLRequest("http://example.com/xyz.jpg");
myImageLoader.addEventListener(Event.COMPLETE, completeHandler);
myImageLoader.load(myImageLocation);
function completeHandler(e:Event){
mcImage.x = 100;
mcImage.y = 100;
mcImage.width = 50;
mcImage.height = 50;
addChild(mcImage);
mcImage.addChild(myImageLoader);
}
try this:
var myImageLoader:Loader = new Loader();
//hide until loaded
myImageLoader.visible = false;
//listen for load completed
myImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
//...rest of your code (without setting width/height)
Then add this to resize and make visible when loaded:
function completeHandler(event:Event):void
{
myImageLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, completeHandler);
myImageLoader.content.width = 50;
myImageLoader.content.height = 50;
myImageLoader.visible = true;
}
What is easiest way to do this:
on stage 400x400 I have rect 200x200, inside rect are few mc objects. I can drag & drop StartDrag and add 200x200 as limits for this movement, but how I can do that when drag obejct they can be "visible" just near the border of rect, in other words if I drag circle into 200x200 rectangle how to make "disappear" part of that circle when it touch the border of 200x200 rect?
You need to add a mask to the circle. Here would be an example for the above scenario:
var squareBG:Shape = new Shape();
squareBG.graphics.beginFill(0);
squareBG.graphics.drawRect(0,0,200,200);
squareBG.graphics.endFill();
addChild(squareBG);
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0xFF0000);
circle.graphics.drawCircle(0,0,100);
circle.graphics.endFill();
circle.y = 125;
addChild(circle);
var circle2:Sprite = new Sprite();
circle2.graphics.beginFill(0xFFFF00);
circle2.graphics.drawCircle(0,0,100);
circle2.graphics.endFill();
addChild(circle2);
circle2.x = 150;
var myMask:Shape = new Shape();
myMask.graphics.copyFrom(squareBG.graphics);
addChild(myMask);
var myMask2:Shape = new Shape();
myMask2.graphics.copyFrom(squareBG.graphics);
addChild(myMask2);
circle.mask = myMask;
circle2.mask = myMask2;