Home Tutorials Forums Articles Blogs Movies Library Employment Press

Go Back   ActionScript.org Forums > ActionScript Forums Group > ActionScript 3.0

Thread Tools Rate Thread Display Modes
Old 04-10-2012, 11:07 AM   #1
Registered User
Join Date: Apr 2012
Posts: 7
Default Layout Manager: Drag/Resize: AS3: Senocular, BaseUI: example code: mini-demo

Hi there,


Senocular.com has this Layout demo of pretty much what I need.

But where is the demo .as file that creates it using the Layout library?

I only see some .fla files with a bit of code nestled therein (which I saw when I had a license to the Flash IDE) in the examples directory and a bare example of how to derive from MovieClip and potentially use the library, I suppose.

This leaves something to be desired.


Help requested:

Can someone please post a snippet or working example code that constructs something similar to that in the demo, or anything working with this cool library?


1) I began writing a library for draggable Layout Management which even allows saving/resetting, but I have a deadline and should probably use one of the, you'd think, many tools out there for this typical fairly layout stuff.

2) BaseUI is another layout manager google told me about, but it doesn't illustrate ability to drag/resize with mouse. If it allows that, it does a poor job of illustrating it : )


lifechamp is offline   Reply With Quote
Old 04-10-2012, 04:39 PM   #2
Senior Member
Join Date: Aug 2008
Location: Helsinki, Finland
Posts: 1,182

Basic principle is just to calculate positions and sizes inside of the stage or area proportionally to the size of the stage or the area.

Here's a quick Flash IDE code for the scalable "area" (draws just orange outlines and grey box for drag to scale outline)

ActionScript Code:
import flash.display.Sprite; import flash.events.MouseEvent; import flash.geom.Point; var area:Sprite; var areaDpObjects:Array = []; var objectProperties:Array = []; var mouseOffset:Point = new Point(); var mousePos:Point = new Point(); function init():void {     setBeginProperties();     createContent();     area.x = 50;     area.y = 50;     resize(); } /*---- RESIZE AND REDRAW CONTENT ------------  @resize iterates through display objects in areaDpObjects array.  Initializes their properties (exp. x, y, width, height) seter  function and send objects to redraw  @redraw just clears the content, draws it with properties and  position the content -------------------------------------------*/ function resize():void {     for (var i:uint = 0; i < areaDpObjects.length; i++)     {         var dbObj:Sprite = areaDpObjects[i];         var props:Object = setObjectProperties(dbObj.name, i);         redraw(dbObj, props);     } } function redraw(obj:Sprite, props:Object):void {     obj.graphics.clear();     if (props.useFill)     {         obj.graphics.beginFill(props.fillColor);     }     if (props.useLine)     {         obj.graphics.lineStyle(props.lineTickness, props.lineColor, 1, false, LineScaleMode.NORMAL, null, JointStyle.MITER);     }     obj.graphics.drawRect(props.x, props.y, props.width, props.height);     if (props.useFill)     {         obj.graphics.endFill();     }     obj.x = props.xOffset;     obj.y = props.yOffset; } /*---- OBJECT PROPERTIES --------------------  @setObjectProperties is responsible about all graphic  values of displayobjects in area  @setBeginProperties will set the area width and height  for the beginning -------------------------------------------*/ function setObjectProperties(name:String, index:uint):Object {     var offset:Point = new Point(0,0);     var pos:Point = new Point(0,0);     var width:Number = 0;     var height:Number = 0;     var useFill = false;     var fillColor = 0;     var useLine = false;     var lineTickness = 0;     var lineColor = 0;         var resizeBtnWidth:Number = 14;     var resizeBtnHeight:Number = 14;     var outlineTickness:uint = 7;         switch (name)     {         case "resizeBtn" :             width = resizeBtnWidth;             height = resizeBtnHeight;             offset.x = mouseOffset.x + mousePos.x - width;             offset.y = mouseOffset.y + mousePos.y - height;             useLine = true;             lineTickness = 1;             lineColor = 0x777777;             useFill = true;             fillColor = 0xDEDEDE;             break;         case "outLines" :             lineTickness = outlineTickness;             width = mouseOffset.x + mousePos.x - lineTickness - (resizeBtnWidth - lineTickness);             height = mouseOffset.y + mousePos.y - lineTickness - (resizeBtnHeight - lineTickness);             pos.x = lineTickness / 2;             pos.y = lineTickness / 2;             useLine = true;             lineColor = 0xFF6600;             break;         default :             break;     }         var properties:Object = {         name : name,         xOffset : offset.x,         yOffset : offset.y,         x : pos.x,         y : pos.y,         width : width,         height : height,         useFill : useFill,         fillColor : fillColor,         useLine : useLine,         lineTickness : lineTickness,         lineColor : lineColor     };         objectProperties[index] = properties;     return properties; } function setBeginProperties():void {     mousePos.x = 200;     mousePos.y = 200; } /*---- CONTENT CREATION --------------------- -------------------------------------------*/ function createContent():void {     area = new Sprite();     publish(area, "area");         var outLines:Sprite = new Sprite();     publish(outLines, "outLines");         var resizeBtn:Sprite = new Sprite();     toggleListenerExistence( resizeBtn, "mouseDown" );     publish(resizeBtn, "resizeBtn"); } function publish(obj:Sprite, name:String):void {     if (name == "area")     {         addChild(obj);     }     else     {         obj.name = name;         area.addChild(obj);         areaDpObjects.push(obj);     } } /*---- EVENT HANDLERS AND EVENTLISTENERS ---- -------------------------------------------*/ function onMouseDown(e:MouseEvent):void {     if (e.target.name == "resizeBtn")     {         var obj:Sprite = e.target as Sprite;         obj.startDrag(false);         mouseOffset.x = obj.width - e.localX;         mouseOffset.y = obj.height - e.localY;         toggleListenerExistence( stage, "mouseMove" );         toggleListenerExistence( stage, "mouseUp" );     } } function onMouseMove(e:MouseEvent):void {     mousePos.x = area.mouseX;     mousePos.y = area.mouseY;     resize(); } function onMouseUp(e:MouseEvent):void {     stopDrag();     toggleListenerExistence( stage, "mouseMove" );     toggleListenerExistence( stage, "mouseUp" ); } function toggleListenerExistence(dpObj:*, listenerType:String):void {     switch (listenerType)     {         case "mouseDown" :             if (! dpObj.hasEventListener(MouseEvent.MOUSE_DOWN))             {                 dpObj.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown, false, 0, true);             }             else             {                 dpObj.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDown, false);             }             break;         case "mouseMove" :             if (! dpObj.hasEventListener(MouseEvent.MOUSE_MOVE))             {                 dpObj.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove, false, 0, true);             }             else             {                 dpObj.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove, false);             }             break;         case "mouseUp" :             if (! dpObj.hasEventListener(MouseEvent.MOUSE_UP))             {                 dpObj.addEventListener(MouseEvent.MOUSE_UP, onMouseUp, false, 0, true);             }             else             {                 dpObj.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp, false);             }             break;         default :             break;     } } init();
Attached Files
File Type: zip liquidLayout.zip (2.6 KB, 129 views)

Last edited by -:)lauri; 04-10-2012 at 04:48 PM.
-:)lauri is offline   Reply With Quote
Old 04-10-2012, 07:46 PM   #3
Registered User
Join Date: Apr 2012
Posts: 7

Extremely cool of you to share this!

Ya, I had some things working fairly well along the lines of what you've said, but unfortunately better with UIComponent than with MovieClip, because of some differences in the laziness of the rendering strategy and the ability to setSize more effectively on UIComponent when, I suppose, the width has not yet been updated completely etc.

One of the things I didn't realize at first was that, in my obsession to be very flexible, and not start with some default absolute size, has been the following catch-22 for setting children based on parent size: the width/height properties of the parent will not change just upon setting them explicitly in Sprite/MovieClip; the change will more likely occur after the children are placed inside.

So, one solution I came up with is to maintain a "requested" size in percentage terms that can be used to size the children, rather than relying on the width/height property.

I can see the resizable rectangle in your code! Nice! At a glance, I wasn't 100% sure how to drag it around (x,y) by its components. If there were a few components placed inside getting moved and resized/repositioned, and maybe 1-2 levels of hierarchy involving additional colored rectangle layout with their own components inside, also resizable/draggable, that would be prettttty slick : ) That's what I'm trying to finish up here as well, but maybe you can do it in 1/10 the time I can : )

Last edited by lifechamp; 04-10-2012 at 09:47 PM.
lifechamp is offline   Reply With Quote

Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 07:03 PM.

Follow actionscriptorg on Twitter


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.