Welcome to Dream.In.Code
Getting Help is Easy!

Join 95,475 Programmers for FREE!. Ask your question and get quick answers from Dream.In.Code experts. There are 978 online right now! We're the #1 programming help community on the internet! Registration is fast and FREE... Join Now!

Chat LIVE With a Expert

Register to Make This Box Go Away!


Flash Challenge #1 - A rectangle

2 Pages V  1 2 >  
Reply to this topicStart new topic

Flash Challenge #1 - A rectangle, Discussion

pioSko
post 19 May, 2006 - 11:13 AM
Post #1


still.dreaming

Group Icon
Joined: 6 Jun, 2003
Posts: 1,888



Dream Kudos: 225
My Contributions


Discuss and post solutions to Challenge #1


--------------------
http://www.piosko.hostings.pl
I'm starting a company. Need a good name.
Keywords: Graphic designer, programmer, websites, australia, poland... Go! ;)
User is offlineProfile CardPM

Go to the top of the page


1lacca
post 20 May, 2006 - 12:16 PM
Post #2


code.rascal

Group Icon
Joined: 11 Aug, 2005
Posts: 3,500



Thanked 6 times
My Contributions


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


--------------------
Silence is golden. Duct tape is silver.
User is offlineProfile CardPM

Go to the top of the page

1lacca
post 20 May, 2006 - 12:23 PM
Post #3


code.rascal

Group Icon
Joined: 11 Aug, 2005
Posts: 3,500



Thanked 6 times
My Contributions


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.


--------------------
Silence is golden. Duct tape is silver.
User is offlineProfile CardPM

Go to the top of the page

1lacca
post 20 May, 2006 - 03:08 PM
Post #4


code.rascal

Group Icon
Joined: 11 Aug, 2005
Posts: 3,500



Thanked 6 times
My Contributions


Haha, looks-like I'm hijacking this thread smile.gif
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?


--------------------
Silence is golden. Duct tape is silver.
User is offlineProfile CardPM

Go to the top of the page

pioSko
post 21 May, 2006 - 07:40 AM
Post #5


still.dreaming

Group Icon
Joined: 6 Jun, 2003
Posts: 1,888



Dream Kudos: 225
My Contributions


The dimentions aren't as important as the technique used to create the rectangle smile.gif 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


--------------------
http://www.piosko.hostings.pl
I'm starting a company. Need a good name.
Keywords: Graphic designer, programmer, websites, australia, poland... Go! ;)
User is offlineProfile CardPM

Go to the top of the page

pioSko
post 22 May, 2006 - 01:58 PM
Post #6


still.dreaming

Group Icon
Joined: 6 Jun, 2003
Posts: 1,888



Dream Kudos: 225
My Contributions


1lacca's solutions in OpenLaszlo

Good work, dude.

Now lets see some Flash answers smile.gif


--------------------
http://www.piosko.hostings.pl
I'm starting a company. Need a good name.
Keywords: Graphic designer, programmer, websites, australia, poland... Go! ;)
User is offlineProfile CardPM

Go to the top of the page

red01
post 23 May, 2006 - 09:11 PM
Post #7


D.I.C Head

Group Icon
Joined: 8 May, 2006
Posts: 156



Dream Kudos: 25
My Contributions


Part I

CODE

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()


--------------------
User is offlineProfile CardPM

Go to the top of the page

red01
post 23 May, 2006 - 09:18 PM
Post #8


D.I.C Head

Group Icon
Joined: 8 May, 2006
Posts: 156



Dream Kudos: 25
My Contributions


Part 3

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

also this is centered, just copy and paste into actionscript

CODE


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()
    
}



smile.gif

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


--------------------
User is offlineProfile CardPM

Go to the top of the page

pioSko
post 23 May, 2006 - 11:40 PM
Post #9


still.dreaming

Group Icon
Joined: 6 Jun, 2003
Posts: 1,888



Dream Kudos: 225
My Contributions


Good one... smile.gif 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...
CODE
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 wink2.gif

(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?


--------------------
http://www.piosko.hostings.pl
I'm starting a company. Need a good name.
Keywords: Graphic designer, programmer, websites, australia, poland... Go! ;)
User is offlineProfile CardPM

Go to the top of the page

red01
post 24 May, 2006 - 05:12 PM
Post #10


D.I.C Head

Group Icon
Joined: 8 May, 2006
Posts: 156



Dream Kudos: 25
My Contributions


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

CODE
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


--------------------
User is offlineProfile CardPM

Go to the top of the page

pioSko
post 25 May, 2006 - 12:05 AM
Post #11


still.dreaming

Group Icon
Joined: 6 Jun, 2003
Posts: 1,888



Dream Kudos: 225
My Contributions


I have two corrections for you smile.gif

#1 - You can't have negative lengths wink2.gif 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 wink2.gif

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


--------------------
http://www.piosko.hostings.pl
I'm starting a company. Need a good name.
Keywords: Graphic designer, programmer, websites, australia, poland... Go! ;)
User is offlineProfile CardPM

Go to the top of the page

red01
post 25 May, 2006 - 02:48 AM
Post #12


D.I.C Head

Group Icon
Joined: 8 May, 2006
Posts: 156



Dream Kudos: 25
My Contributions


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


Stay tuned for simplified version.


--------------------
User is offlineProfile CardPM

Go to the top of the page

2 Pages V  1 2 >
Fast ReplyReply to this topicStart new topic
Time is now: 7/5/08 03:44AM