Flash :: How Do I Draw/tween A Rectangle Outline With AS?

Draw Box Outline
I wanted to create a very simple quick animation.

A box outline will draw, then starting from the middle fill the box with the colour vertically (to top and bottom). A white box then draws at the top for the header and the logo fades in.

Then a few text effects with our products and services to be listed.

Does anyone know of a good tutorial to do something similar to this or broken up into it's areas? I have searched this site and googled but not had any luck finding something along the lines of what I need.

To draw the box I tried startng with a 1px x 1px line and stretching it then tween, but this doesn`t seem to tween.

Thanks folks

View Replies ! View Related

Draw Outline
I have searched and searched and have not found "This is how it is done".

I want to draw an outline of a bitmap before the bitmap appears and then fill in the bitmap.

Example site - http://www.spcan.com/main.html

I have seen to possible ways of doing this but now one really knows.

1. draw the line and then reveal it via a mask

2. draw it via the drawing API.

A tutorial would be nice.

Thanks in advance.

View Replies ! View Related

Draw Outline ( ? )
hi there !

just wondering... how can i draw a shape outline, as with a layer guide but more complex, i.e. a human body

thanx !

View Replies ! View Related

Animated Draw Outline...
Hi All,

I want to be able to animate the drawing of an outline of a plant (the image then fades in after the outline has been drawn).

I have seen this technique used a few times previously, but I haven't got the first clue how to reproduce this effect.

For an example, visit:

Flash Loaded Example

If you look at the the street lights at the top they draw the outline and then the image fades in.

Cheers

Carl

View Replies ! View Related

Draw A Rectangle ...
I've been learning ActionScript 3 and finally decided to try and do some drawing with it. There's something basic that I'm not understanding about .graphics

I have this code in Frame 1 of my timeline:

Code:
graphics.lineStyle(1);

graphics.moveTo(50,50);
graphics.lineTo(200,200); // this line appears on stage OK

var myGraphicsTester:GraphicsTester = new GraphicsTester();
And this is my GraphicsTester class:
Code:
package
{
import flash.display.*;

public class GraphicsTester extends MovieClip
{

public function GraphicsTester() // constructor
{
// the following code works fine if I put it in the Actions
// panel of frame 1 on the .fla timeline
// but not if I put it in this constructor

var mySprite:Sprite = new Sprite();
mySprite.graphics.lineStyle(1);
mySprite.graphics.beginFill(0xFF0000); // bright red
mySprite.graphics.drawRect(0,0,50,70);
addChild(mySprite);

} // end constructor

}// end class

} // end package
There's obviously something basic that I'm not understanding about the way graphics are used within a class instance.

If anybody can help, I'd really appreciate it.
Thanks for reading this.

DD

View Replies ! View Related

How I Draw A Rectangle
How I draw a rectangle that has the registration point in the middle of the movie clip NOT in the upper left corner using Drawing API.

View Replies ! View Related

Draw A Rectangle?
Hi all

Hi all,

I want to be able to draw a rectangle within my flash movie by clicking one point and dragging the cursor to another.

Can anybody tell me how I can do this?

Cheers.

View Replies ! View Related

Dynamically Draw Out An Outline Of A Shape
drawing out line that will serve as a mask
im tryin to animate a drawing out of a line, but the line wont be an animation itself, itll be used as a mask that will reveal outline of a rectangle

i'm starting right now and im on this stage so far, the problem is i dont understand why this line is not drawing out horizontally, while it should

variables xpos and ypos are coordinates of the position i want to start drawing it from, xcor and ycor are the cooridnates that will be used to stop drawing once it reaches this point, then jump is how fast i want the line to draw(amount of pixels)
ps:the type is there because i will also make another case for vertical line

i know its not the most efficient way to do this, if anyone has better idea that will make the drawing out nicer and more dynamic i would be grateful. What im tryin to acheive is this simple effect you can see on some of the sites, where durin intro the outline of the rectangle is being drawn out. I cant point to any site at this time though, hope my explanation helps and thanks i advance to all of you that can help me

Code:
lineDraw = function(type, xpos, ypos, xcor, ycor, jump){
this.createEmptyMovieClip("temp", this.getNextHighestDepth());
this.temp.lineStyle(5, 0x003300,100);
if(type=="horizontal"){
temp.onEnterFrame=function(){
temp.moveTo(xpos, ypos);
this.x+=jump;
this.y+=0;
this.lineTo(this.x, this.y);
if(this.x==xpos && this.y==ypos){
delete(temp.onEnterFrame);
}

};
}
};

this.lineDraw("horizontal", 0, 100, 800, 100, 10);

View Replies ! View Related

Auto Draw A Rectangle
hi, i don't know if i'm posting at the right topic but i would like to know if anyone can tell me how to auto draw a rectangle around an image? for example, the image loads and is static then a rectangle is drawn around the image starting from the top left corner and goes around the rectangle back to the start of the image.

View Replies ! View Related

Draw A Shape (rectangle) Using As?
I haven't managed to find a command to do this? Is it even possible or must I load a mc with the box in?

View Replies ! View Related

How To Draw A Rounded Rectangle
Hi,

Is there any simple method for drawing a rectangle with rounded corners? I've tried graphics.drawRoundRect(), but it seems to essentially ignore the ellipseWidth/Height parameters. Whether I set them as 1 or 1000, it draws an ellipse. I'm using the Flex 3 SDK on Linux. Could this be a bug, or is drawRoundRect suppose to only draw ellipses?

View Replies ! View Related

Auto Draw A Rectangle [FMX]
hi, i don't know if i'm posting at the right topic but i would like to know if anyone can tell me how to auto draw a rectangle around an image? for example, the image loads and is static then a rectangle is drawn around the image starting from the top left corner and goes around the rectangle back to the start of the image.

thanks!
kathy

View Replies ! View Related

Draw Outline Of Object Or Get Bezier Points
Hello people, I am struggling with an issue where I want to create a function that draws an outline of any object and I want to use this outline as curve path so I can animate objects on this path using Tweener.

Like that:

Code:
var path = new Array();
path.push({x:300, y:0});
path.push({x:200, y:400});

Tweener.addTween(plane, {x:100, y:200, _bezier: path, time:3, transition: 'easeInOutSine', onUpdate: update});
But I want the control curve points to be dynamically taken by any display object's outline.. I tried drawing the object to a bitmap data and then use its pixels to draw the curve but I got no success..

So do you have any tips or ideas or even solutions how this thing can be made? Thank you in advance.

View Replies ! View Related

Draw Outline Of Object Or Get Bezier Points
Hello people, I am struggling with an issue where I want to create a function that draws an outline of any object and I want to use this outline as curve path so I can animate objects on this path using Tweener.

Like that:
Code:

var path = new Array();
path.push({x:300, y:0});
path.push({x:200, y:400});

Tweener.addTween(plane, {x:100, y:200, _bezier: path, time:3, transition: 'easeInOutSine', onUpdate: update});

But I want the control curve points to be dynamically taken by any display object's outline.. I tried drawing the object to a bitmap data and then use its pixels to draw the curve but I got no success..

So do you have any tips or ideas or even solutions how this thing can be made? Thank you in advance.

View Replies ! View Related

How Do I Draw A Rectangle With Rounded Corners?
Can't believe I cant figure this out but, how do I draw a rectangle with rounded corners???

Thanks!

View Replies ! View Related

Draw Rounded-Edge Rectangle In AS?
Anyone know if there is a way/how to draw a rectangle with rounded edges in actionscript? thanks

View Replies ! View Related

Creating A Draw Rectangle Tool
Hi,

I want to get flash to draw a rectangle when you click and then drag, the dragging will resize the rectangle (like in flash itself) and when you let go, the rectangle will be drawn and placed on the stage, with a fill and edges.

Regards,

View Replies ! View Related

How To Draw A Rectangle That Only One Corner Is Round?
hi,dear all:
i want to draw a rectangle that only one corner is round, but it seems Graphics class has only drawRect and drawRoundRect method, no idea to draw a rectangle whati wanted.

any suggestion? such as some open source Graphic library, or i must draw this rectangle with lineTo() and fill?

View Replies ! View Related

Draw Rectangle With Mouse Drag
I Created an action script code when the mouse Down and Drag I taks the X,Y postion in the first
and when the mouse is Up it take the Final X, Final Y and Draw Rectangle

I need to Show the User the Rectangle with the mouse Motion (like when you draw in photoshop )
But in my Code the the Rectangle appears when the mouse up

I attached The Code to the msg

Please Advice me what to do ?

thanks

Attach Code

stage.addEventListener(MouseEvent.MOUSE_DOWN,handleMouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP,handleMouseUp);
clear_btn.addEventListener(MouseEvent.CLICK,deleteStage);
var myX:Number ;
var Myy:Number ;
function handleMouseDown(event:MouseEvent):void
{
var lineThickness:uint = 1;
var lineColor:uint = 0xffffff;
graphics.lineStyle(lineThickness,lineColor);
//graphics.moveTo(mouseX,mouseY);
myX=mouseX ;
Myy=mouseY ;
//stage.addEventListener(MouseEvent.MOUSE_MOVE,startDrawing);
stage.addEventListener(MouseEvent.MOUSE_UP,startDrawing);

}
function handleMouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE,startDrawing);
}
function startDrawing(event:MouseEvent):void {
//graphics.lineTo(mouseX,mouseY);
//trace(mouseX) ;
graphics.drawRect(myX,Myy,mouseX,mouseY) ;

}
function deleteStage(event:MouseEvent):void {
graphics.clear();
}

View Replies ! View Related

How To Draw This Rectangle And Load Something In The Middle Of It.
Hi!
I am trying to make a web site (1024 x 768) and I want to make a rectangle that will fit part of the window and this rectangle has to have a dropshadow. I want to load an image centered inside this rectangle.

Look what I am doing so far and please tell me what is wrong with it.

Code:
package
{
import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.net.URLRequest;

public class FNR extends MovieClip
{
var imgLoader : Loader;
var url : URLRequest;
var BackMC : MovieClip = new MovieClip();

public function FNR()
{
init();
}

private function init():void
{
drawBackGround();
loadFlyer();
}

private function drawBackGround():void
{
BackMC.graphics.lineStyle(1, 0x000000, 1);
BackMC.graphics.drawRect(0,0,550,400);
BackMC.graphics.endFill();
addChild(BackMC);
}

private function loadFlyer():void
{
imgLoader = new Loader();
url = new URLRequest("flyer.jpg");

imgLoader.x = 0;
imgLoader.y = 0;
imgLoader.load(url);
imgLoader.contentLoaderInfo.addEventListener(Event.OPEN, onFlyerOPEN);
imgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onFlyerPROGRESS);
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onFlyerCOMPLETE);

imgLoader.load(url);
addChild(imgLoader);
}

private function onFlyerOPEN(event:Event):void
{
trace("opened");
}

private function onFlyerPROGRESS(event:ProgressEvent):void
{
trace("Loading...");
}

private function onFlyerCOMPLETE(event:Event):void
{
trace("Closed");
}
}
}
but the rectangle is not being drawn correctly and it is getting bigger than my resolution which is set to 1024x768.

What am I doing wrong?

I also need to put a dropshadow in this rectangle.

View Replies ! View Related

Drawing API - Draw Rectangle By Dragging Mouse On Canvas
I need to to incorporate a functionality where the user can use his mouse to draw a rectangle by dragging his mouse over the canvas - much like the Rectangle Drawing Tool in the Flash Authoring environment. The requirement is something like a rubberband tool where the user can define a portion of a map by drawing a rectangle over it. The coordinates needs to be captured. Can anyone help me with the actionscript.

View Replies ! View Related

Outline/box Tween?
Can someone give me some pointers on when I try to "Tween" a WHITE box with a black outline....the outline always gets thicker?....I have tried just using an outline?...but the same thing happens?. DO I need to convert to a fill or something? Thanks.
--whispers--

View Replies ! View Related

Please Please Help With Outline Tween...
Hello and thanks for your time.
I need to edit an outline tween to accommodate some words, however each time I try to do this the tween plays up.
Can anyone tell me how to edit the outline tween in the following file, when you open the file you will see that I have changed the wording and now the outline does not fit?
Any help or guidance would be greatly appreciated.

http://www.spikeydog.net/public/outline_tween.zip

View Replies ! View Related

How Do You Tween An Outline?
This is kind of difficult to explain what i need to to do, so hopefully you'll understand.

I have a picture of a human body, and using the oinion skin i want to trace around it so i end up with a drawing of the body.

How do i make it so that the animation starts at the feet draws up the leg, around the body, down then up the arms, around the head etc and then all the way back to where where the line started.

When i try and draw around the body and use a shape tween it morphs from a little dot to a body, i would prefer it to look as it its drawing the body, not morphing into it.

Any ideas?
Thanks

View Replies ! View Related

Motion Tween Outline Problem
Hi, I'm having a strange problem with a shape tween.

It's very simple, a small circle which I drew with Flash will tween into a triangular shape. The triangular shape was created in Illustrator, so I used "break apart" in order to get the tween to work.

The problem I'm having is that during the tween a dark outline appears on the shape. The beginning is perfect, the end is perfect, but in the middle the shape looks strange beause it is outlined.

The outline is a darker shade of the color I'm using...I haven't got any outlines set on either of the shapes.

Anyone run into this? Any suggestions?

Thanks!

View Replies ! View Related

Tween Drawing API Rectangle
I thought this was going to be easy, but...

I'm trying to create a rectangular mask - located at x:0, y:173 (1 pixel high ) - that will be stretched (_yscale) to the bottom of the image using the Flash Tween Class. Trouble is, the entire rectangle moves as if if were using "_y" instead of "_yscale". Tweening "_height" doesn't work any better. Can someone spot the problem with this file? If you comment out this line

var mask_tween:Object = new Tween(maskClip, "_yscale", Strong.easeOut, 0, 100, 1, true);

then you will see the correct placement of the mask rectangle. It just doesn't tween/scale properly.

View Replies ! View Related

Use AS3 To Simply Tween The Width Of A Rectangle And Have It Where It Is
Who would have thought it would be so hard to animate a line being drawn using Action Script!

So I can do this on the stage quite simply by drawing a line of a the length I want the line to be and thickness etc. Converting it into a graphic (gr_myline).

Then on a new layer I can create a small square at one end of the line making sure it is wide enough to cover the line (when drawn over). This I can turn into a graphic too and then mask it over the line I have previously drawn.

Then in the mask layer I can go to a frame in the time-line I want to animate it to. Create a keyframe. Scale the size of the rectangle to cover the line. Then tween it! It works beautifully. So what cant this be replicated in code I ask?

Because when I try to tween the width of the rectangle - the rectangle decides to march down the screen for some unknown reason? This has me baffled - I assume it is something to do with the registration point of the rectangle but how on earth would I correct it? Any ideas - please - this is really doing my head in!!!!!

Here is my code to try and scale up the width of a rectangle without it moving across the bloody screen like some mad possessed sprite!:

Code:
import flash.display.MovieClip;
import fl.transitions.*;
import fl.transitions.easing.*;

stage.frameRate = 31;

var box:Sprite = new Sprite();
box.graphics.beginFill(Math.random() * 0xFFFFFF);
box.graphics.drawRect(50, 50, 15, 15);
box.graphics.endFill();
addChild(box);

var myTweenWidth:Tween = new Tween(box, "x", None.easeNone, box.width, box.width + 20, 3, true);
Please help me, please...

View Replies ! View Related

Shape Tween A Line To A Rectangle In One Step
Cant figure out how to do this, Somebody know how many shape hints to use and where to put them?

View Replies ! View Related

Making An Unfilled Box Bigger Using A Shape Tween, But Keeping Outline Same Size?
Hi all, been a while since I have been around here.

I have a problem that pertains to a box that I have. I create a simple box in Flash but keep it unfilled as I only want the outline. What I want to do is have a tween on that box that makes it expand, but I want to make sure that the outline is not expanded...

Basically what happens at teh moment is when you try and put a tween on the box it turns it into a symbol (as you'd expect). So when you try and enlarge that symbol for the tween it makes what should be a 1point line into what looks like a 6point line. Do you see what I mean?

The effect I am going for is an interface where the box that contains the text starts small and then enlarges to the right size, but it's important to keep the line size the same or else the effect won't work. It's a fairly straightforward thing that I wnat to do, it's just a pain because I don't know how to do it.

Any help is appreciated.

Cheers,

Seth

View Replies ! View Related

Geom.Rectangle ... Can A Rectangle Be Added As A Child
I'm thinking no because I can't get

Code:
var rect1:Rectangle = new Rectangle(rx, ry, rwidth, rheight);
this.mcParent.addChild(rect1);
or

Code:
mcParent.rect1 = new Rectangle(rx, ry, rwidth, rheight);
to work. Maybe I'm doing it wrong though.

(I'd just like rect1 to scale with mcParent, and it'd be so much easier if one was inside the other.)

View Replies ! View Related

Using GetBounds On A Rotated Rectangle To Get Rectangle Size
Hi!

I'm not really much of a trig guy, so I need some assistance from the pros out there. My issue is that we're dragging rectangles to the stage and resizing them on the fly. I don't want to have to manually input any code, so I'm trying to automate putting the rectangles into a physics engine. APE requires width, height, rotation, etc for the rectangles.

My issue is getting the real size of the rectangle and not just the bounds. I can detect the rotation (Sprite.rotation), and I can detect the bounds using getBounds, but how can I translate this into the real width and height of the rotated rectangle?

I really appreciate the help!

Thanks!

Norm

View Replies ! View Related

Can't Turn Off "rectangle Corner Radius" When Using Rectangle Tool
At first I thought having a "rectangle corner radius" option in Flash CS3 was cool, until I couldn't turn it off.

It doesn't matter if I
1) Reset to 0
2) Click the Lock Button
3) Turn Scale to none

When I drag to create a rectangle, Flash automatically creates a corner radias in the minus's such as -51 -51 -51 -51 as you can see below. It was set to 0 0 0 0 and locked but as soon as I drag the corner radias will continue until its maxed out.

Please Help

View Replies ! View Related

How To Draw Premieter Of MC? (using Draw Api)
Hi im trying to work out the perimeter of my mc visually, so I want to be able to draw the perimeter of the mc. I gathere there is use of getBOunds and the lineTo and moveTo methods, but how to use them to draw the boundary im not sure. Can any one help?

View Replies ! View Related

Outline
Draw Outline - I think there is a way to have AS draw an outline around your stage... does anyone know how this is done?

thanks
nads

View Replies ! View Related

Outline
need some help...very new to this, trying to outline an image, the image is a png. want to outline what is inside, not the transparent box. using mx??

View Replies ! View Related

Outline
how do you create the look like you are viewing outlines?

View Replies ! View Related

Outline
i purchased a template and now i am having trouble. not only am i having trouble editing it, i cannot get support from the people i purchased it from.

here is my trouble....

upon loading the .fla, there is an image of a girl that pops up and an electric outline runs around her profile. i am able to import a new image (i replaced the old pic of the girl w/ a new one) i am just not able to change the profile outline.

i thought it would be easy but i am having trouble.

anyone familar w/ this or any suggestions?

this forum has been a blessing to me! thanks!

View Replies ! View Related

Outline
Is there an easy way to create an outline around an object, normal shaped or non? Thanks

View Replies ! View Related

Odd Outline
ok, so I made a flash banner for my forum and I put it up. The problem is that the flash shows a black outline around it, I don't want that. I have never had this problem before, I am not sure what I did wrong. Any ideas?

View Replies ! View Related

Can't Get Rid Of Outline
Anytime I draw a square, circle or even bring a .jpeg to the stage it only gives me the outline of the object. I don't have the outline button selected in the time line nor do I have any type of onion skinning selected. If I open previous projects this is not a problem but for some reason every time I create a new document this happens. I am using "flash cs".

If anyone can help that would be great

Thanks

View Replies ! View Related

Help With AS Outline
I could use some help figuring out how to do the following.

I want to have a rounded corner rectangular white box with drop shadow that will have a minimum width of 700px and a maximum width of 900px and contain a left hand aligned area 200px wide that slides in and out if you rollover the edge on the left. Can anyone help me with this or point me in the right direction?

View Replies ! View Related

I Want Just The Outline
Hi, I am using big lettering, but I just want the outline of the lettering, how would i go about doing this?

View Replies ! View Related

Outline
hey, if you look at the intro for http://www.geneticshoes.com/geneticSite.html you will see a skateboarder ollie and grind. My question is how do I take a part of a video and give it that effect of just the persons outline? Thanks for your help!

View Replies ! View Related

Tween Class: Can One Tween More Than One Property Using The Same Tween
I want to scale both the _xscale and the _yscale properties of a clip, using a single execution of the Tween Class. See example below:

Code:
import mx.transitions.Tween;
var myTween:Tween = new Tween(myMovieClip_mc, "_xscale", Strong.easeOut, myMovieClip_mc._xscale, 300, 5, false);

Since one property at a time must be passed as a string to the constructor, I tried the following code, but it does not work quite as flawless as I expected:

Code:
myTween.onMotionChanged = function() {
//trace( this.position );
myMovieClip_mc._yscale += (300 - myMovieClip_mc._yscale)/12;
};
Any suggestions?

View Replies ! View Related

Following Outline Of Button
I cant get the job done,
i have a horizontal bar of buttons, when you rollover one of them his outlines wil change, BUT
when you go left with mouse the outline of the button must jump to ne next button

I tryed it with a drag action of a movieclip, and constrain to rectangle, it worked but the only problem then was that i cant stop the command to drag, from the moment you leave the bar with buttons, the mouse must show again and the movieclip that dragged must stop at the same place you leave the bar,

anybody know how to do the trick, or a site or a tutorial that looks like it or uses this effect

Thanks

View Replies ! View Related