# Flash Challenge #1 - A rectangle

• (2 Pages)
• 1
• 2

## 23 Replies - 5754 Views - Last Post: 02 February 2009 - 05:00 PM

### #1 pioSko

• still.dreaming

Reputation: 23
• Posts: 1,888
• Joined: 06-June 03

# Flash Challenge #1 - A rectangle

Posted 19 May 2006 - 11:13 AM

Discuss and post solutions to Challenge #1
Is This A Good Question/Topic? 0

## Replies To: Flash Challenge #1 - A rectangle

### #2 1lacca

• code.rascal

Reputation: 44
• Posts: 3,822
• Joined: 11-August 05

## Re: Flash Challenge #1 - A rectangle

Posted 20 May 2006 - 12:16 PM

Nice!
I have only one question: how big (dimensions) the flash object is supposed to be?

### #3 1lacca

• code.rascal

Reputation: 44
• Posts: 3,822
• Joined: 11-August 05

## Re: Flash Challenge #1 - A rectangle

Posted 20 May 2006 - 12:23 PM

Ah ok, two more:
- positioned at: does it mean the position of the upper left corner, or the center of the rectangle?
- rectangle: is this the border of the rectangle, or a filled one? - although looking at the more advanced questions I think you mean the border only.

### #4 1lacca

• code.rascal

Reputation: 44
• Posts: 3,822
• Joined: 11-August 05

## Re: Flash Challenge #1 - A rectangle

Posted 20 May 2006 - 03:08 PM

Haha, looks-like I'm hijacking this thread
So another question:
In #4 and #5 you write "When pressed and dragged, the side should move and follow the mouse along one axis." Is that the parallel, or the perpendicular axis relative to the dragged side?

### #5 pioSko

• still.dreaming

Reputation: 23
• Posts: 1,888
• Joined: 06-June 03

## Re: Flash Challenge #1 - A rectangle

Posted 21 May 2006 - 07:40 AM

The dimentions aren't as important as the technique used to create the rectangle if not mentioned just improvise

Position of top left corner.

Resizing: If you move the right edge of the rectangle, it may only move along the x axis... altering the rectangle's width

### #6 pioSko

• still.dreaming

Reputation: 23
• Posts: 1,888
• Joined: 06-June 03

## Re: Flash Challenge #1 - A rectangle

Posted 22 May 2006 - 01:58 PM

1lacca's solutions in OpenLaszlo

Good work, dude.

Now lets see some Flash answers

### #7 red01

Reputation: 12
• Posts: 204
• Joined: 08-May 06

## Re: Flash Challenge #1 - A rectangle

Posted 23 May 2006 - 09:11 PM

Part I

```var mcSquare:MovieClip = this.createEmptyMovieClip("square_mc",100);

var nStartXPos:Number = 200
var nStartYPos:Number = 200
var nSqHeight:Number = 100;
var nSqWidth:Number = 200;

var nLeft = 0
var nTop:Number = 0
var nRight:Number = nSqWidth
var nBottom:Number = nSqHeight
var nLeft:Number = 0

function buildSquare(){
mcSquare._x = nStartXPos
mcSquare._y = nStartYPos
mcSquare.lineStyle(2,0x000000,100)
mcSquare.beginFill(0xeeeeee,100)
mcSquare.moveTo(nLeft,nTop)
mcSquare.lineTo(nRight,nTop)
mcSquare.lineTo(nRight,nBottom)
mcSquare.lineTo(nLeft,nBottom)
mcSquare.lineTo(nLeft,nTop)
mcSquare.endFill()
}
buildSquare()

```

### #8 red01

Reputation: 12
• Posts: 204
• Joined: 08-May 06

## Re: Flash Challenge #1 - A rectangle

Posted 23 May 2006 - 09:18 PM

Part 3

I could have done this a bit smarter, but eh.......

also this is centered, just copy and paste into actionscript

```
var nSquareWidth:Number = 200;
var nSquareHeight:Number = 100;
var nStageHeight:Number = 400;
var nStageWidth:Number = 550;

var nTop:Number = 0 - (nSquareHeight/2)
var nRight:Number = nSquareWidth/2
var nBottom:Number = nSquareHeight/2
var nLeft:Number = 0 -(nSquareHeight/2)

var sColUp:String ="000099"
var sColOver:String ="990000"
var sColDown:String = "009900"

var nDepth:Number =100;

var mcSquare:MovieClip = this.createEmptyMovieClip("square_mc",100);

function buildSquare(){
mcSquare._x = nStageWidth / 2
mcSquare._y = nStageHeight / 2

//mcSquare.lineStyle(2,0x000000,100)
mcSquare.beginFill(0xeeeeee,100)
mcSquare.moveTo(nLeft,nTop)
mcSquare.lineTo(nRight,nTop)
mcSquare.lineTo(nRight,nBottom)
mcSquare.lineTo(nLeft,nBottom)
mcSquare.lineTo(nLeft,nTop)
mcSquare.endFill()

setBtns()

}
buildSquare()

function drawBtnLine(sBrush:Number, sColor:String, mcDrawIn:MovieClip, startPos:Array, endPos:Array){
mcDrawIn.line_mc.removeMovieClip();
var mcLine:MovieClip = mcDrawIn.createEmptyMovieClip("line_mc",100);
mcLine.lineStyle(sBrush,parseInt(sColor,16),100)
mcLine.moveTo(startPos[0],startPos[1])
mcLine.lineTo(endPos[0],endPos[1])
}

function render(){
drawBtnLine(2, sColUp, mcSquare.top_btn, [nLeft,nTop], [nRight,nTop])
drawBtnLine(2, sColUp, mcSquare.right_btn,[nRight,nTop], [nRight,nBottom])
drawBtnLine(2, sColUp, mcSquare.bottom_btn,[nRight,nBottom], [nLeft,nBottom])
drawBtnLine(2, sColUp, mcSquare.left_btn, [nLeft,nBottom], [nLeft,nTop])
}

function setBtns(){

var mcTopBtn:MovieClip = mcSquare.createEmptyMovieClip("top_btn",nDepth)
mcTopBtn.arrStartPos = arrStartPos
mcTopBtn.arrEndPos = arrEndPos
nDepth++
mcTopBtn.onRollOver = function(){
drawBtnLine(2,sColOver,this,[nLeft,nTop],[nRight,nTop])
}
mcTopBtn.onRollOut = function(){
drawBtnLine(2,sColUp,this,[nLeft,nTop],[nRight,nTop])
}
mcTopBtn.onPress = function(){
drawBtnLine(3,sColDown,this,[nLeft,nTop],[nRight,nTop])
}
mcTopBtn.onReleaseOutside = function(){
drawBtnLine(2,sColUp,this,[nLeft,nTop],[nRight,nTop])
}
mcTopBtn.onRelease = function(){
drawBtnLine(2,sColUp,this,[nLeft,nTop],[nRight,nTop])
}

var mcBottomBtn:MovieClip = mcSquare.createEmptyMovieClip("bottom_btn",nDepth)
nDepth++
mcBottomBtn.onRollOver = function(){
drawBtnLine(2,sColOver,this,[nRight,nBottom],[nLeft,nBottom])
}
mcBottomBtn.onRollOut = function(){
drawBtnLine(2,sColUp,this,[nRight,nBottom],[nLeft,nBottom])
}
mcBottomBtn.onPress = function(){
drawBtnLine(3,sColDown,this,[nRight,nBottom],[nLeft,nBottom])
}
mcBottomBtn.onReleaseOutside = function(){
drawBtnLine(2,sColUp,this,[nRight,nBottom],[nLeft,nBottom])
}
mcBottomBtn.onRelease = function(){
drawBtnLine(2,sColUp,this,[nRight,nBottom],[nLeft,nBottom])
}

var mcLeftBtn:MovieClip = mcSquare.createEmptyMovieClip("left_btn",nDepth)
nDepth++
mcLeftBtn.onRollOver = function(){
drawBtnLine(2,sColOver,this,[nLeft,nBottom],[nLeft,nTop])
}
mcLeftBtn.onRollOut = function(){
drawBtnLine(2,sColUp,this,[nLeft,nBottom],[nLeft,nTop])
}
mcLeftBtn.onPress = function(){
drawBtnLine(3,sColDown,this,[nLeft,nBottom],[nLeft,nTop])
}
mcLeftBtn.onReleaseOutside = function(){
drawBtnLine(2,sColUp,this,[nLeft,nBottom],[nLeft,nTop])
}
mcLeftBtn.onRelease = function(){
drawBtnLine(2,sColUp,this,[nLeft,nBottom],[nLeft,nTop])
}

var mcRightBtn:MovieClip = mcSquare.createEmptyMovieClip("right_btn",nDepth)
nDepth++
mcRightBtn.onRollOver = function(){
drawBtnLine(2,sColOver,this,[nRight,nTop],[nRight,nBottom])
}
mcRightBtn.onRollOut = function(){
drawBtnLine(2,sColUp,this,[nRight,nTop],[nRight,nBottom])
}
mcRightBtn.onPress = function(){
drawBtnLine(3,sColDown,this,[nRight,nTop],[nRight,nBottom])
}
mcRightBtn.onReleaseOutside = function(){
drawBtnLine(2,sColUp,this,[nRight,nTop],[nRight,nBottom])
}
mcRightBtn.onRelease = function(){
drawBtnLine(2,sColUp,this,[nRight,nTop],[nRight,nBottom])
}

render()

}

```

This post has been edited by red01: 23 May 2006 - 09:22 PM

### #9 pioSko

• still.dreaming

Reputation: 23
• Posts: 1,888
• Joined: 06-June 03

## Re: Flash Challenge #1 - A rectangle

Posted 23 May 2006 - 11:40 PM

Good one... Code works great... and you're right, it can still be simplified. But, a good example of thinking ahead.
Part I can be done simply by doing...
```this.lineStyle(2, 0x000000, 100);
this.moveTo(200, 200);
this.lineTo(400, 200);
this.lineTo(400, 300);
this.lineTo(200, 300);
this.lineTo(200, 200);

```

.. but you did something I was hoping someone would do and that was to prepare for the next Parts right at the beginning. It may take more time somtimes, but creating "modules" like yours increases productivity and function of the overall project.

Your way is one of two main ways of doing small "modules". There is another way, very similar to a function, but is a bit more flexible

(there are three actually, but the third is a bit more advanced and requires external files and Flash preferences modification.. won't go into it just yet)

Are you attempting parts IV and V?

### #10 red01

Reputation: 12
• Posts: 204
• Joined: 08-May 06

## Re: Flash Challenge #1 - A rectangle

Posted 24 May 2006 - 05:12 PM

Part IV

Yea I could have made some classes to handle this but oh well........

im using nDepth to control the depth of the mc's on the stage... this gets around the getNextHighestDepth bug in flash 6

This is very long winded, again could have streamlined alot but here it is.....

Just copy and paste in to actionscript

Note: this also centers the box in the stage

```stop();

var isDown:Boolean = false;
var isDragging:Boolean = false;
var nSquareWidth:Number = 200;
var nSquareHeight:Number = 200;
var nStageHeight:Number = 400;
var nStageWidth:Number = 550;

var isTop:Boolean = false
var isRight:Boolean = false
var isBottom:Boolean = false
var isLeft:Boolean = false

var nTextFeildLength:Number = 50
var nTextFeildHeight:Number = 20
var nTextFeildSpace:Number = 20

var nTop:Number = 0 - (nSquareHeight/2)
var nRight:Number = nSquareWidth/2
var nBottom:Number = nSquareHeight/2
var nLeft:Number = 0 -(nSquareHeight/2)

var sColUp:String ="000099"
var sColOver:String ="990000"
var sColDown:String = "009900"

var nDepth:Number =100;

var mcSquare:MovieClip = this.createEmptyMovieClip("square_mc",100);

onmousedown = function(){
isDown = true;
}

onmouseup = function(){
isDown = false;
isTop = false;
isRight = false;
isBottom = false;
isLeft = false;
render()
}

function buildSquare(){
mcSquare._x = nStageWidth / 2
mcSquare._y = nStageHeight / 2
setBtns()

}
buildSquare()

onmousemove = function(){
if(isDown && isDragging){
nTop = mcSquare.top_btn._y
nRight = mcSquare.right_btn._x
nBottom =  mcSquare.bottom_btn._y
nLeft = mcSquare.left_btn._x

nSquareHeight = mcSquare.bottom_btn._y - mcSquare.top_btn._y
//trace(nSquareHeight)
nSquareWidth = mcSquare.right_btn._x - mcSquare.left_btn._x
trace(nSquareWidth)
render();
}
}

function drawBtnLine(sBrush:Number, sColor:String, mcDrawIn:MovieClip, startPos:Array, endPos:Array){
mcDrawIn.line_mc.removeMovieClip();
var mcLine:MovieClip = mcDrawIn.createEmptyMovieClip("line_mc",100);
mcLine.lineStyle(sBrush,parseInt(sColor,16),100)
mcLine.moveTo(startPos[0],startPos[1])
mcLine.lineTo(endPos[0],endPos[1])
}

function render(){
drawBtnLine(2, sColUp, mcSquare.top_btn, [nLeft,0], [nRight,0])
drawBtnLine(2, sColUp, mcSquare.right_btn,[0,nTop], [0,nBottom])
drawBtnLine(2, sColUp, mcSquare.bottom_btn,[nRight,0], [nLeft,0])
drawBtnLine(2, sColUp, mcSquare.left_btn, [0,nBottom], [0,nTop])

// turn Colour back if mouse down mouse down
if(isTop){
drawBtnLine(3, sColDown, mcSquare.top_btn, [nLeft,0], [nRight,0])
}else if(isBottom){
drawBtnLine(3, sColDown, mcSquare.bottom_btn,[nRight,0], [nLeft,0])
}else if(isRight){
drawBtnLine(3, sColDown, mcSquare.right_btn,[0,nTop], [0,nBottom])
}else if(isLeft){
drawBtnLine(3, sColDown, mcSquare.left_btn, [0,nBottom], [0,nTop])
}

//TOP Di
mcSquare.topWidth_txt.text = nSquareWidth.toString();
mcSquare.topWidth_txt._x =  (nLeft + (nSquareWidth/2)) - (nTextFeildLength/2)
mcSquare.topWidth_txt._y = mcSquare.top_btn._y - nTextFeildSpace
mcSquare.topWidth_txt.selectable = false
//BOTTOM Di
mcSquare.bottomWidth_txt.text = nSquareWidth.toString();
mcSquare.bottomWidth_txt._x =  (nLeft + (nSquareWidth/2)) - (nTextFeildLength/2)
mcSquare.bottomWidth_txt._y = mcSquare.bottom_btn._y
mcSquare.bottomWidth_txt.selectable = false

mcSquare.leftHeight_txt.text = nSquareHeight.toString();
mcSquare.leftHeight_txt._x =  mcSquare.left_btn._x - nTextFeildLength - nTextFeildSpace
mcSquare.leftHeight_txt._y =  (nTop + (nSquareHeight/2)) - (nTextFeildHeight/2)
mcSquare.leftHeight_txt.selectable = false

mcSquare.rightHeight_txt.text = nSquareHeight.toString();
mcSquare.rightHeight_txt._x =  mcSquare.right_btn._x + nTextFeildSpace
mcSquare.rightHeight_txt._y =  (nTop + (nSquareHeight/2)) - (nTextFeildHeight/2)
mcSquare.rightHeight_txt.selectable = false

var txtFmt:TextFormat = new TextFormat();
txtFmt.align = "center"
mcSquare.topWidth_txt.setTextFormat(txtFmt);
mcSquare.bottomWidth_txt.setTextFormat(txtFmt);

txtFmt.align = "right"
mcSquare.leftHeight_txt.setTextFormat(txtFmt)

txtFmt.align = "left"
mcSquare.rightHeight_txt.setTextFormat(txtFmt)
}

function setBtns(){
var mcTopBtn:MovieClip = mcSquare.createEmptyMovieClip("top_btn",nDepth)
mcTopBtn._y = 0 - (nSquareHeight/2)
mcTopBtn.arrStartPos = arrStartPos
mcTopBtn.arrEndPos = arrEndPos
nDepth++

mcTopBtn.onRollOver = function(){
drawBtnLine(2,sColOver,this,[nLeft,0],[nRight,0])
}
mcTopBtn.onRollOut = function(){
drawBtnLine(2,sColUp,this,[nLeft,0],[nRight,0])
}
mcTopBtn.onPress = function(){
drawBtnLine(3,sColDown,this,[nLeft,0],[nRight,0])
this.startDrag(false,this._x,0-(nStageHeight / 2),this._x,500)
isDragging = true;
isTop = true;
}
mcTopBtn.onReleaseOutside = function(){
drawBtnLine(2,sColUp,this,[nLeft,0],[nRight,0])
this.stopDrag();
isDragging = false;
}
mcTopBtn.onRelease = function(){
drawBtnLine(2,sColUp,this,[nLeft,nTop],[nRight,nTop])
this.stopDrag();
isDragging = false;
}

var mcBottomBtn:MovieClip = mcSquare.createEmptyMovieClip("bottom_btn",nDepth)
nDepth++
mcBottomBtn._y = 0 + (nSquareHeight/2)

mcBottomBtn.onRollOver = function(){
drawBtnLine(2,sColOver,this,[nRight,0],[nLeft,0])
}
mcBottomBtn.onRollOut = function(){
drawBtnLine(2,sColUp,this,[nRight,0],[nLeft,0])
}
mcBottomBtn.onPress = function(){
isDragging = true;
drawBtnLine(3,sColDown,this,[nRight,0],[nLeft,0])
this.startDrag(false,this._x,0-(nStageHeight / 2),this._x,500)
isBottom = true
}
mcBottomBtn.onReleaseOutside = function(){
drawBtnLine(2,sColUp,this,[nRight,0],[nLeft,0])
this.stopDrag();
isDragging = false;
}
mcBottomBtn.onRelease = function(){
drawBtnLine(2,sColUp,this,[nRight,0],[nLeft,0])
this.stopDrag();
isDragging = false;
}

var mcLeftBtn:MovieClip = mcSquare.createEmptyMovieClip("left_btn",nDepth)
nDepth++
mcLeftBtn._x = 0 - (nSquareWidth/2)
mcLeftBtn.onRollOver = function(){
drawBtnLine(2,sColOver,this,[0,nBottom],[0,nTop])
}
mcLeftBtn.onRollOut = function(){
drawBtnLine(2,sColUp,this,[0,nBottom],[0,nTop])
}
mcLeftBtn.onPress = function(){
isDragging = true;
drawBtnLine(3,sColDown,this,[0,nBottom],[0,nTop])
this.startDrag(false,0-(nStageWidth / 2),this._y,500,this._y)
isLeft=true
}
mcLeftBtn.onReleaseOutside = function(){
drawBtnLine(2,sColUp,this,[0,nBottom],[0,nTop])
this.stopDrag();
}
mcLeftBtn.onRelease = function(){
drawBtnLine(2,sColUp,this,[0,nBottom],[0,nTop])
this.stopDrag();
}

var mcRightBtn:MovieClip = mcSquare.createEmptyMovieClip("right_btn",nDepth)
nDepth++
mcRightBtn._x = 0 + (nSquareWidth/2)

mcRightBtn.onRollOver = function(){
drawBtnLine(2,sColOver,this,[0,nTop],[0,nBottom])
}
mcRightBtn.onRollOut = function(){
drawBtnLine(2,sColUp,this,[0,nTop],[0,nBottom])
}
mcRightBtn.onPress = function(){
isDragging = true;
drawBtnLine(3,sColDown,this,[0,nTop],[0,nBottom])
this.startDrag(false,0-(nStageWidth / 2),this._y,500,this._y)
isRight = true
}
mcRightBtn.onReleaseOutside = function(){
drawBtnLine(2,sColUp,this,[0,nTop],[0,nBottom])
this.stopDrag();
isDragging = false;
}
mcRightBtn.onRelease = function(){
drawBtnLine(2,sColUp,this,[0,nTop],[0,nBottom])
this.stopDrag();
isDragging = false;
}

mcSquare.createTextField("topWidth_txt", nDepth,mcTopBtn._x, mcTopBtn._y, nTextFeildLength, nTextFeildHeight);
nDepth++
mcSquare.createTextField("bottomWidth_txt", nDepth,mcBottomBtn._x, mcBottomBtn._y, nTextFeildLength, nTextFeildHeight);
nDepth++
mcSquare.createTextField("leftHeight_txt", nDepth,mcLeftBtn._x - nTextFeildSpace, mcLeftBtn._y, nTextFeildLength, nTextFeildHeight);
nDepth++
mcSquare.createTextField("rightHeight_txt", nDepth,mcRightBtn._x - nTextFeildSpace, mcRightBtn._y, nTextFeildLength, nTextFeildHeight);
nDepth++
render();

}

```

Peace Out.........

This post has been edited by red01: 24 May 2006 - 05:16 PM

### #11 pioSko

• still.dreaming

Reputation: 23
• Posts: 1,888
• Joined: 06-June 03

## Re: Flash Challenge #1 - A rectangle

Posted 25 May 2006 - 12:05 AM

I have two corrections for you

#1 - You can't have negative lengths This is simple to fix. Just but a Math.abs() around your values.

#2 - There is a significant delay in redrawing the rectangle when moving a side. The sides that are being resized aren't catching up with the moving side. It may be detail but clients/editors don't accept it and 99% of the time will tell you to fix it.

If you want, fix it.. or move on to Part V and leave it for somebody else to try and fix/simplify your code

Overall, great job.. especially for not using library objects. Two thumbs up.

### #12 red01

Reputation: 12
• Posts: 204
• Joined: 08-May 06

## Re: Flash Challenge #1 - A rectangle

Posted 25 May 2006 - 02:48 AM

Yea i think im going to re-code (that is some nasty code ), i just chucked it together with little or no thought......

Stay tuned for simplified version.

### #13 bigdawg24

• D.I.C Regular

Reputation: 2
• Posts: 290
• Joined: 18-August 07

## Re: Flash Challenge #1 - A rectangle

Posted 25 August 2007 - 08:12 PM

The problem I would have with #1 would go along with the problem I am having attempting to develop a flash website. I have a question thread in the FLASH & ACTIONSCRIPT forumn but its just been ignored.

### #14 DilutedImage

Reputation: 14
• Posts: 646
• Joined: 20-November 06

## Re: Flash Challenge #1 - A rectangle

Posted 26 August 2007 - 01:27 AM

I'm reminded of the song "Cry Me a River" .. . Nobody is ignoring you. The people in this forum are not paid to answer your questions. We're just fellow coders who hop online and help when we can. So forgive us all if we didn't get to your question fast enough – a question that could have been answered by simply reading Section 1 of the Help Documentation.

### #15 bigdawg24

• D.I.C Regular

Reputation: 2
• Posts: 290
• Joined: 18-August 07

## Re: Flash Challenge #1 - A rectangle

Posted 26 August 2007 - 08:19 AM

I suppose I should justify myself here just a second. I havent been on forums a great detail; although I have been on newsgroups of old quite a bit and its of course not to much different (in its own way). I didn't realize that my determination to get a quick answer that I knew should have been an easy solution would be considered hijacking. Frankly...its my bad (my apologies). I know people take these forums seriously, which is why I am here. Individuals give solid answers and give their time which is great.

So, if anyone took my antics as hijacking then I apologize; BUT, the challenge question had a lot to do with a step in my own project I was attempting thus I resourced it as well.