Soulwire » Interface

Simple Flash GUI Tool

Soulwire — Wed, 19 Jan 2011 17:32:24 +0000

Update: Keith himself has been working on a similar idea and has released MinimalConfigurator.

Keith Peter’s Minimal Components are an excellent tool for any Flash developer when it comes to adding realtime configuration to a SWF. I find myself using them a lot in my demos and prototypes but for sketches with many editable parameters it’s still a hassle writing boilerplate code to set up and arrange the components, as well as adding the appropriate event handlers.

Inspired by GUI tools for OpenFrameworks such as ofxSimpleGuiToo and ofxTweakbar, and ControlP5 for Processing; I thought it was time to have an equally fast and easy to use GUI tool for Flash AS3 projects.

Introducing SimpleGUI

SimpleGUI is a single Class utility designed for AS3 projects where a developer needs to quickly add UI controls for variables or functions to a sketch. Properties can be controlled with just one line of code using a variety of components from the fantastic Minimal Comps set, as well as custom components written for SimpleGUI such as the FileChooser.

SimpleGUI Currently exposes the following methods, as well as an open addControl method where any Class definition can be passed:

addColumn: Starts a new column of components
addGroup: Starts a new group of components
addLabel: Adds a TextField for labels or instructions
addToggle: Adds a CheckBox for Boolean values
addButton: Adds a PushButton for triggering callbacks
addSlider: Creates a slider for numerical values
addRange: Creates a range slider for two numerical values
addStepper: An alternative component to the slider for numbers
addColour: Adds a colour picker for integers
addComboBox: Adds a ComboBox box for any object
addFileChooser: Allow the user to load in data
addSaveButton: This triggers the save method for generating code

Other features include:

HotKey: Assign a hot key for showing / hiding the GUI
Context Menu: Toggle the GUI from a context menu item
Message: Pulse a message to the user in the toolbar
Show Toggle: Display a toggle when the GUI is hidden
Save Settings: Generate AS3 code to commit your current values

Using SimpleGUI

Each method takes an optional parameter called options, which is simply a dynamic Object from which you can pass values for any parameter the corresponding component has, as well as callback and callbackParams properties for triggering methods each time the component changes.

For example, to create a Slider for controlling a Number, set it’s width, execute a callback and display a custom label, you would write:

_gui.addSlider("myNumber", 0, 100, {label:"My Number", width:200, callback:onNumberChanged});

Although you can pass custom labels to each component, omitting this parameter will simply cause the variable name to be parsed and used as the label. For example, a variable called ‘myNumber’ will generate the label ‘My Number’.

SimpleGUI also supports nested properties, to any depth, using normal dot syntax. So you could control a particle’s position by writing:

_gui.addSlider("myParticle.position.x", 0, 1000);

Here is the code for the demo above. Only 27 lines of code to control the whole sketch.

_gui = new SimpleGUI(this, "Example GUI", "C");

_gui.addGroup("General Settings");
_gui.addColour("backgroundColour");
_gui.addButton("Randomise Circle Position", {callback:positionCircle, width:160});
_gui.addSaveButton();

_gui.addColumn("Noise Options");
_gui.addSlider("noiseBase.x", 10, 200);
_gui.addSlider("noiseBase.y", 10, 200);
_gui.addSlider("noiseSeed", 1, 1000);
_gui.addSlider("noiseOctaves", 1, 4);
_gui.addSlider("turbulence.x", -10, 10);
_gui.addSlider("turbulence.y", -10, 10);

_gui.addGroup("Wave Options");
_gui.addStepper("waveCount", 1, 20);
_gui.addStepper("waveSteps", 2, MAX_WAVE_STEPS);
_gui.addSlider("amplitude", 0, 200);
_gui.addColour("waveColour");

_gui.addColumn("Circle Options");
_gui.addRange("minCircleSize", "maxCircleSize", 10, 120, {label:"Circle Size Range"});
_gui.addSlider("rotationSpeed", -10, 10);
_gui.addComboBox("circle.blendMode", [

	{label:"Normal",	data:BlendMode.NORMAL},
	{label:"Darken",	data:BlendMode.DARKEN},
	{label:"Overlay",	data:BlendMode.OVERLAY},
	{label:"Difference",	data:BlendMode.DIFFERENCE},

]);

_gui.addFileChooser("Circle Texture", textureFileRef, textureLoaded, [
	new FileFilter("Image Files", "*.jpg;*.jpeg;*.png")
]);

_gui.addToggle("animateCircle");

_gui.addColumn("Instructions:");
_gui.addLabel("Press 'C' to toggle GUI");
_gui.addLabel("Press 'S' to copy setup code to clipboard");

_gui.show();

So, SimpelGUI is really just a timesaver for developers looking to quickly prototype something in Flash, or for releasing demos with controls. The actual hard work has been done by Keith in building and maintaining his deservedly popular Minimal Comps.

You can browse the source code or download the SimpleGUI class below. SimpleGUI is part of the Soulwire AS3 Framework.

Download: SimpleGUI

AS3 Shuffle Grid Class

Soulwire — Wed, 04 Mar 2009 00:50:47 +0000

Drag & Drop the images to shuffle them around…

A friend of mine, Dale Sattler over at No Ponies recently posted a grid sorting class. He said it was based on my old dynamic stacking menu; but that was pure modesty as his script is based on a 2D grid and much more sophisticated.

Anyway – it inspired me to create a grid sorting / shuffling algorithm of my own. It behaves differently to Dales but I think it works pretty well.

The basic logic of the algorithm works by determining how far a dragged item travels along the grid (rows and columns) and then shuffling the surrounding items in the opposite direction by these values, therefore creating space for the dragged item to slot into when released.

It currently only works for grids which are fully populated, but adding more flexibility for incomplete grids will only be a matter of adding a few conditions – functionality which I’ll add when I get a moment.

You can extend the ShuffleGridItem class to add the functionality you need. In the demo I’ve made a simple image class which grabs a photo from Flickr.

Creating a ShuffleGrid is very simple, and can be done like so:

var grid:ShuffleGrid = new ShuffleGrid(4,7,40,40,1);

for (var i : int = 0; i < grid.numCells; i++)
{
	grid.addItem (new ShuffleGridItem());
}

addChild (grid);

The constructor takes the following arguments:

new ShuffleGrid(rows, cols, cellWidth, cellHeight, spacing);

Feel free to download the class and a simple demo and have a play around. I can imagine many uses for it, so hopefully it will come in handy.

Download: Shuffle Grid Class & Demo

AS3 G94 Circular Menu

Soulwire — Thu, 06 Nov 2008 16:29:40 +0000

I’ve received quite a few requests to update my circular group94 style menu to AS3 (I’m not really sure why I’m still calling it a “Group94 menu”, but it’s a tribute to them that this style of scrolling navigation is often referred to as a “group94 menu” and not an “offset scrolling menu” or something of that nature).

Anyway, I have been thinking for some time that I should revisit this script and build a more complete version, where horizontal, vertical or circular are simply parameters for the menu, but for now, this is both an update and a massive enhancement of the AS2 G94 circular menu.

If you play with the demo, you’ll notice I’ve added some new features, such as the ability to easily change (at runtime of desired) aspects of the menu like the inner radius, item spacing, visible items and much more.

The other big enhancement is that the CircularMenu class actually overrides the addChild, addChildAt, setChildIndex, removeChild (etc) methods, so if you treat it as a regular DisplayObjectContainer and add children to it, these items will be treated as menu items and automatically scroll -cool! This also means that you can easily change an items index, or insert and remove items dynamically, all using the standard DisplayObjectContainer API. The benefit of this is that you can use any DisplayObject as a menu item; Bitmaps, Sprites and Movieclips, so there is no limit to what you can put into the menu – you can even mix it up and add custom classes or library items.

There are also some easy methods for scrolling the menu. For example:

// Will scroll the menu to item 4
myCircleMenu.currentIndex = 4;

// Similar to above, scrolls the menu to a given index
myCircleMenu.scrollToIndex(  10  );

// Scrolls the menu to any given child DisplayObject
myCircleMenu.scrollToItem(  someDisplayObject  );

// Scrolls the menu to the next available item
myCircleMenu.next();

// Scrolls the menu to the previous item
myCircleMenu.prev();

Additionally, there are getters and setters for the properties I mentioned earlier, such as innerRadius, itemSpacing, visibleItems etc, which will dynamically tween the menu to whatever you set one of these properties to.

Download: Group94 Style Circular Menu

Enjoy!

AS3 Group94 Menu

Soulwire — Wed, 24 Oct 2007 13:46:03 +0000

Welcome to the latest instalment of the Group 94 style scrolling menu tutorial! (With downloadable source files of course)

I have been very busy lately, and haven’t had a chance to share much code. I have been learning AS3 and have to say that I love it! It is much easier to adhere to OOP principles and building class based applications has many advantages.

Anyway, I received an email today from Adriaan, who was wondering how to convert the Group94 scrolling list into a menu system, with rollovers and click functions. I hacked the old source to do this, but thought it would be a good opportunity to revisit the ‘offset scroll’ idea within the contexts of a fully functional scrolling menu.

So here it is. I have built it into a simple class, which means you need to do very little to get it working :)

The class is very flexible, and you can assign functions and parameters to each menu item that you add. This can mean calling the same function with different parameters, or entirely different functions for each item.

Adding menu items is as brilliantly simple as newMenuItem(label, function, parameters)

You can download the source code and pick it apart all you like. However, here is a quick explanation of how to use the G94Menu class.

Firstly we import the classes:

import com.soulwire.g94menu.G94Menu;
import com.soulwire.g94menu.MenuItem;

MenuItem is linked to a movieClip in you library, so you can use any style of menu item you like.

Now, we create a new instance of the G94Menu class and add it to the stage.

exampleMenu = new G94Menu(3, 1, 25);
addChild(exampleMenu);

The parameters the class constructor requires are:

Visible items: The amount of items visible at one time
Item spacing: The gap between each item
Item offset: How far the items scroll up or down as they fly off to the top or bottom

Then we simply add as many items as we want using the new MenuItem constructor, for example:

myMenu.addItem(new MenuItem('Text', func, { params } ))

Here is a breakdown of the parameters you pass to the MenuItem constructor inside the addItem method:

Item label: A text string which will be the visible label of the item
Function: This is optional, but if present will make the item a clickable button, executing this function when clicked.
Parameters: This is an object containing as many parameters as you need. Again, this parameter is optional, and only needed if you have passed a function and it requires parameters.

Now we create a function that will be called when a menu item is clicked:

function someFunction (e:MouseEvent)
{
	if(e.currentTarget.params != null)
	{
		var info:Object = e.currentTarget.params;
		trace(info.page);
	}
}

In this example, we check that the parameters are not null, then access the parameters object using e.currentTarget.params. If your function will open a link (for example), and you pass a URL identified in the parameters object as pageLink, then you can use this by calling e.currentTarget.params.pageLink.

Lastly, to listen for mouse clicks on the scroll arrows, and to enable the mouse wheel, both of which will scroll our menu up or down, we add some event listeners:

function enableScrolling():void
{
	btnUp.buttonMode = btnDown.buttonMode = true;
	btnUp.addEventListener(MouseEvent.CLICK, exampleMenu.scrollUp);
	btnDown.addEventListener(MouseEvent.CLICK, exampleMenu.scrollDown);
	stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel);
}

function onMouseWheel(e:MouseEvent):void
{
	e.delta <0 ? exampleMenu.scrollDown() : exampleMenu.scrollUp();
}

The scrollUp and scrollDown methods can be called whenever you like (i.e. remotely) on any instance of the G94Menu class.

Once again, I really hope this is useful, even if it is just a simple introduction to Actionscript 3 and writing classes.

Thanks to Adriaan and all of you who have been commenting for inspiring me to update this example.

If anyone wants to use this in older projects, and needs an AS2 version, please let me know and I’ll convert it when I get the time.

Download: AS3 Group94 Menu

G94 Circular Menu

Soulwire — Tue, 07 Aug 2007 12:54:16 +0000

Download: AS2 Group94 Circular Menu

I built this circular version of the group94 style scrolling menu for a flash website awards showcase I was asked to work on. The original design was based around circles, but we ended up redesigning as parts of the interface (not this menu!) were too processor intensive.

Ok, so part two of my tribute to Group 94’s menu system! This is again inspired by the Group 94 (at least they are most famous for it) shuffle menu in Flash, which pushes items off the top and bottom as the menu shuffles into place.

This version is circular though, and each menu item rotates around a pivot. Initiating the prototype with particular variables will define the spacing between items, the radius of the Group 94 circular menu and the amount of items visible at one time.

Please note, this is in no way a rip of the Group 94 menu. In fact, I haven’t even seen a circular version which is why I made it. I have no idea how Group 94’s actionscript looks, or how they would have approached this style of menu. I do know however, that they have produced many innovative navigation systems, and so this is a simple tribute to their talent and innovation.

As with the regular group 94 scrolling menu, you will need Fuse installed, though all it does is handle tweening so you could use tweener or the inbuilt Flash tweening functions. I just prefer Fuse!

How it is done.

First import Fuse for tweening, then setup the array we will use for the menu:

import com.mosesSupposes.fuse.*;
ZigoEngine.simpleSetup (Shortcuts,PennerEasing);

var planets:Array = new Array ();
planets.push ("Mercury");
planets.push ("Venus");
planets.push ("Earth");
planets.push ("Mars");
planets.push ("Jupiter");
planets.push ("Saturn");
planets.push ("Uranus");
planets.push ("Neptune");
planets.push ("Pluto");

Then some very basic functionality for each menu button. I have ommited rollOvers for the demo…

MovieClip.prototype.circNavBtn = function (id:Number, par:MovieClip, name:String)
{
	this.pos = this.id = id;
	this.par = par;
	this.btn.txt.text = name.toUpperCase ();

	this._rotation = 90;
	this._alpha = 0;

	this.onPress = function ()
	{
		this.par.circNavRot (this.pos);
		this.activeBtn ();
	};
};

Then two small prototypes to handle the activation and de-activation of the buttons when the scroll function is called:

MovieClip.prototype.activeBtn = function ()
{
	activeNavBtn.inactiveBtn ();
	activeNavBtn = this;

	this.btn.scaleTo (200,0.5);

	this.enabled = false;
};

MovieClip.prototype.inactiveBtn = function ()
{
	this.btn.scaleTo (100,0.5);
};

Then the main shuffle or rotation function, which designates tweens to all visible movieClips and hides those outside of the visible items range.

MovieClip.prototype.circNavRot = function (num:Number)
{
	var diff:Number = num;

	for (var i:Number = 0; i < this.btns.length; i++)
	{
		var btn:MovieClip = this["navBtn" + i];

		btn.pos -= diff;

		if (Math.abs (btn.pos) < this.visItems)
		{
			var offset:Number;
			btn.pos != 0 ? (offset = btn.pos > 0 ? 15 : -15) : offset = 0;

			var rot:Number = offset + (this.spacing * btn.pos);
			var alph:Number = 100 - ((100 / this.visItems) * Math.abs (btn.pos));
			var scl:Number = 100 - (5 * Math.abs (btn.pos));

			btn.rotateTo (rot,0.5,"easeOutExpo");
			btn.alphaTo (alph,0.5);
			btn.btn.scaleTo (scl,0.5);
		}
		else
		{
			btn.stopTween ("_alpha");
			btn.stopTween ("_rotation");
			btn._rotation = btn.pos > 0 ? 90 : -90;
			btn._alpha = 0;
		}

		btn.enabled = Math.abs (btn.pos) < this.visItems;
	}
	this["navBtn" + num].activeBtn ();
};

Now we setup the circular scrolling menu on a movieClip:

MovieClip.prototype.circNav = function (array:Array, radius:Number, spacing:Number, visItems:Number)
{
	this.btns = new Array ();
	this.spacing = spacing;
	this.visItems = visItems;

	for (var i:Number = 0; i < array.length; i++)
	{
		var navBtn:MovieClip = this.createEmptyMovieClip ("navBtn" + i, i);
		var btnTxt:MovieClip = navBtn.attachMovie ("btn", "btn", 0);
		btnTxt._x = radius;

		navBtn.circNavBtn (i,this,array[i]);
		this.btns.push (navBtn);
	}
	this.circNavRot (0);
};

Here we dynamically create a movieClip, position it, then call our prototype to create the lovely Group94 style menu…

var testMenu:MovieClip = this.createEmptyMovieClip ("nav", 0);
testMenu._x = 20;
testMenu._y = 112;

testMenu.circNav (planets, 60, 15, 4);

And finally we add the ability to use the mouse wheel to scroll the menu. otherwise we just click the menu items:

var mouseListener:Object = new Object ();
mouseListener.onMouseWheel = function (delta)
{
	var navIndex:Number = activeNavBtn.id;
	if (delta < 0 && activeNavBtn.id < planets.length - 1)
	{

		testMenu.circNavRot (1);
		testMenu["navBtn" + (navIndex + 1)].activeBtn ();
	}
	else if (delta > 0 && activeNavBtn.id > 0)
	{
		testMenu.circNavRot (-1);
		testMenu["navBtn" + (navIndex - 1)].activeBtn ();
	}
};
Mouse.addListener (mouseListener);

I hope this is useful to someone! If you find a home for it, please let me know.

Download: AS2 Group94 Circular Menu

Dynamic Stacking

Soulwire — Fri, 13 Apr 2007 01:22:09 +0000

Update: AS3 Version using TweenLite is available here

In this experiment, you can drag the boxes; when you release them the stack will shuffle to accommodate the dropped box.

I have recently been working on building an application in which I wanted to use Photoshop style ‘layers’ which the user could create, drag onto different depths and delete.

The basic idea was for the user to click and drag ‘layers’, and drop them in between others. This would cause the other layers to reposition to accommodate the new layer and to fill the gap which it had left in it’s old position. Get it?

Perhaps I’m just a bit dim, but I was surprised at how many difficulties I encountered when trying to sort the boxes or ‘layers’. I began taking the approach of calculating whether the surrounding layers were above or below, and moving them up or down accordingly; but with this approach I found that deleting layers or adding new ones caused the system to go a bit crazy.

As usual, it was the simple and elegant approach which eventually yielded the solution. I basically handled all of the movement from a single, straightforward array. The array was shuffled based on a nifty little prototype I wrote for extracting and reinserting elements (essentially shuffling without randomness), from which all movement calculations (i.e. the eventual positions of the shuffling boxes) could be made.

Array.prototype.shuffle = function (x, y)
{
	var i:Number = this.slice (x, x + 1);
	this.splice (x,1);
	this.splice (y,0,i);
};

The shuffle prototype itself could be very useful, as it pulls items out of the array, and by reinserting them; muscles the other elements outwards around it – no complicated calculations needed for determining where the elements go thanks to some really basic build in Flash Actionscript features. Also, by omitting one line of code, the prototype could be used to simply insert items into an array at a particular position (insertAt(value, index) or something along those lines).

I have attached a bare bones example for you, though I assure you, you can do great things with this script. The menu I was working on will probably make an appearance on Soulwire once the program is finished. One example of its usage would be to associate each box with a layer elsewhere; for example a Stack of photos which are depth ‘shuffled’ through the easy manipulation of their affiliated boxes.

Download: Dynamic Stacking Menu (AS2) Download: Dynamic Stacking Menu (AS3)

You can download the FLA here above, but here is the basic commented code. It is simple but works quite well.

// Include the Zigo tweening prototypes to make life easier
#include "lmc_tween.as"

// Create the main holder for the boxes
var menu:MovieClip = this.createEmptyMovieClip ("menu", 0);
menu._x = menu._y = 20;

// Set up our Arrays and counters
var boxes:Array = new Array ();
var boxCount:Number = 0;
var boxGap:Number = 37;

/*
The core 'SHUFFLE' function
This pulls out an array item at a given index and inserts it back into the array
at another index. The other array items are consiquently 'pushed' outwards from
the element, so our new array reflects the visual appearance we want for the
shuffled menu. We can now 'sort' our menu based on this modified array...
*/
Array.prototype.shuffle = function (x, y)
{
	var i:Number = this.slice (x, x + 1);
	this.splice (x,1);
	this.splice (y,0,i);
};

// Our sort function
function sort ()
{
	var count:Number = boxes.length;
	for (var i = 0; i < count; i++)
	{
		// Check which ID is at this point in the array
		var id:Number = boxes[i];
		// Find the corrosponding box
		var box:MovieClip = eval ("menu.box" + id);
		// Calculate the position the box should be at
		var y:Number = i * boxGap;
		// Alter it's id to it's new position
		box.id = i;
		// Tween it there (or just use box._y = y)
		box.tween ("_y",y,0.8,"easeInOut");
	}
}

// Creating new boxes
function addBox ()
{
/*
We use getNextHighestDepth() because of the swapDepths() function used
when the buttons are pressed. This creates new levels and so could
cause problems if we just create boxes at depths based on the length
of the boxes array.
*/
	var d:Number = menu.getNextHighestDepth ();
	var i:Number = boxCount;
	// We could use Push(), but I want the boxes stacked, with newest on top
	boxes.unshift (i);
	// Attach the box
	var box:MovieClip = menu.attachMovie ("box", "box" + i, d);
	// Initiate the box
	box.initBox (i);
	// Increase the counter
	boxCount++;
	// Sort the boxes
	sort ();
}

/*
This is a simple function which can be called to remove boxes. It splices the array and
resorts the stack accordingly.
*/
function deleteLayer (id)
{
	var box:MovieClip = eval ("menu.box" + boxes[id]);
	box.removeMovieClip ();
	boxes.splice (id,1);
	sort ();
}

// The box actions
MovieClip.prototype.initBox = function (num)
{
	this.id = num;
	this.name.text = "Box " + num;

	this.onPress = function ()
	{
		var top:Number = boxCount + 1;

		this.swapDepths (top);
		this.startDrag ();
	};

	this.onRelease = this.onReleaseOutside = function ()
	{
		this.stopDrag ();
		// Slide back to the edge
		this.tween ("_x",0,0.8,"easeInOut");
	/*
	Find the original position, and the new position, based on the
	location of the draged box in relation to the other boxes.
	*/
		var x:Number = this.id;
		var y:Number = Math.round (this._y / boxGap);
		// Call our shuffle function based on these calculations
		boxes.shuffle (x,y);
		// Sort the boxes based on our shuffled array
		sort ();
	};
};

// Add some boxes to test it!
for (var i = 0; i < 5; i++)
{
	addBox ();
}

Group94 Style Menu

Soulwire — Wed, 07 Mar 2007 20:42:15 +0000

I have always liked the neat and compact menu system Group94 often use in their projects. It is really useful for lists or menus and is also of course very elegant.

I don’t know how Group94 do it, but here is my attempt. I have created two prototypes to make it easy to use multiple times within a project.

Download: Group94 Style Scrolling List

This example just uses a simple list, but the actionscript can easily be modified to make the items clickable to use as a menu system, or you could even use images. Your call!

The first prototype is used to create a vertical list from an array. The second is used to scroll the list depending on clicks or mouse wheel scrolling.

This is bare bones, so it is nice and simple and easy to build upon.

/*
I have used the old Zigo tweening prorotypes here, it will also work with Fuse.
Links are always good if you use it :)
*/
#include "lmc_tween.as"

MovieClip.prototype.createList = function (array, clip, visibleItems, xPos, yPos, spacing, offset)
{
	this.listItems = new Array ();

	this.total = array.length;
	this.vis = visibleItems;
	this.spacing = spacing;
	this.offset = offset;
	this._x = xPos;
	this._y = yPos;
	this.num = 1;

	for (var i = 1; i <= this.total; i++)
	{
		var listItem:MovieClip = this.attachMovie (clip, "listItem" + i, i);
		listItem.yPos = i * this.spacing;
		if (i <= this.vis)
		{
			listItem._y = listItem.yPos;
		}
		else
		{
			listItem._y = this.offset + (i * this.spacing);
			listItem._alpha = 0;
		}
		listItem.id = i;
		listItem.txt.text = i + ". " + array[i - 1];
		listMc.listItems[i - 1] = listItem;
	}
};

MovieClip.prototype.shuffleList = function (n)
{
	this.num += n;
	if (this.num > 0 && this.num <= ((this.total + 1) - this.vis))
	{
		var min:Number = this.num;
		var max:Number = this.num + this.vis;
		for (var i = 1; i <= this.total; i++)
		{
			var mc = this.listItems[i - 1];
			if (i < min)
			{
				var Y:Number = mc.yPos - this.offset - (this.num * this.spacing);
				var alpha:Number = 0;
			}
			else if (i >= max)
			{
				var Y:Number = mc.yPos + this.offset - (this.num * this.spacing);
				var alpha:Number = 0;
			}
			else
			{
				var Y:Number = mc.yPos - (this.num * this.spacing);
				var scale:Number = 100;
				var alpha:Number = 100;
			}
			mc.tween ("_y",Y,.7);
			mc.alphaTo (alpha,.7);
		}
	}
	else
	{
		this.num -= n;
	}
};

var fruits:Array = new Array ("Cornelian cherry ", "Date palm", "Fig", "Grape", "Jujube", "Black mulberry", "Olive", "Pomegranate", "Pomelo", "Grapefruit", "Lemon", "Lime", "Mandarin", "Clementine", "Tangerine", "Orange", "Avocado", "Feijoa", "Guava", "Kumquat", "Longan", "Lúcuma", "Lychee", "Passion fruit", "Pond-apple", "Strawberry guava", "Tamarillo", "Yangmei");

var listMc:MovieClip = this.createEmptyMovieClip ("listMc", 0);
listMc.createList (fruits,"listItem",5,150,40,30,20);
listMc.shuffleList (0);

prevBtn.onPress = function ()
{
	listMc.shuffleList (-1);
};
nextBtn.onPress = function ()
{
	listMc.shuffleList (+1);
};

var mouseListener:Object = new Object ();
mouseListener.onMouseWheel = function (delta)
{
	if (delta < 0)
	{
		listMc.shuffleList (+1);
	}
	else
	{
		listMc.shuffleList (-1);
	}
};
Mouse.addListener (mouseListener);

Dynamic Positioning

Soulwire — Wed, 27 Sep 2006 15:43:04 +0000

Since fullscreen flash websites have become so popular; this little trick (a necessity really) has been used to make sure that no matter what screen resolution a user has, they can experience the site in the way in which the designer intended.

I realise that listeners are common knowledge, but I have had a lot of emails asking about dynamic positioning so I have written this brief tutorial on how to get all the elements in your Flash movie to position themselves automatically when the user’s browser window resizes, or if they are using a different screen resolution to you and you hate the idea of letting the movie scale!

The principal is simple, like in CSS with fluid layouts, you effectivelly position everything relitively, and write some simple formulas for maintaining their relitivity no matter what size stage they are on.

You can also apply this to the height and width of, for example, the background of a banner, so that your pixel font still looks crisp and nicely aligned as the bar behind is stretching to fit the window. The permutations are endless, and evidently, this is a really useful and basic tool to have when putting together a Flash site. I have even used it for CD Business Card presentations, to make sure text areas and graphics sit nicely in harmony with each other, even if it found its way into the grubbly hands of an 800 x 600 user.

Anyway, the code – Just paste this into the Actionscript panel, render and enjoy. Drag the movie’s resize handles around for some orgasmic repositioning pleasure:

// Setup the Stage properties
Stage.scaleMode = "noScale";
Stage.align = "TL";

// Create some dummy boxes
// This is only for the demonstration

var margin:Number = 10;
var boxSize:Number = 100;

var boxes = [
		["top", "0x9933cc"],
		["right", "0x00ff00"],
		["bottom", "0xff0000"],
		["left", "0x0099ff"],
		["center", "0xff3399"]];

for (var i = 0; i < boxes.length; i++)
{
	var newBox:MovieClip = createEmptyMovieClip (boxes[i][0], getNextHighestDepth ());

	var nameBadge = newBox.createTextField ("test_txt", 1, 0, (boxSize / 2) - 10, boxSize, 10);
	nameBadge.autoSize = "center";
	nameBadge.text = boxes[i][0];
	nameBadge.textColor = 0xffffff;

	with (newBox)
	{
		beginFill (boxes[i][1],100);
		moveTo (0,0);
		lineTo (boxSize,0);
		lineTo (boxSize,boxSize);
		lineTo (0,boxSize);
		lineTo (0,0);
		endFill ();
	}
}

/*
	The core function...
	I keep this separate from the 'onResize'
	handler so that I can call it at the start
	to position all of my elements if the screen
	size has remained the same
*/

function setStage ()
{
	var sw:Number = Stage.width;
	var sh:Number = Stage.height;
/*
Rule for Top / Center alignment
*/
	top._x = sw / 2 - top._width / 2;
	top._y = margin;
/*
Rule for Right / Middle alignment
*/
	right._x = sw - (right._width + margin);
	right._y = sh / 2 - right._height / 2;
/*
Rule for Bottom / Center alignment
*/
	bottom._x = sw / 2 - bottom._width / 2;
	bottom._y = sh - (bottom._height + margin);
/*
Rule for Left / Middle alignment
*/
	left._x = margin;
	left._y = sh / 2 - left._height / 2;
/*
Rule for Center / Middle alignment
*/
	center._x = sw / 2 - center._width / 2;
	center._y = sh / 2 - center._height / 2;
}

// Add a listener
var stageListener:Object = new Object ();
Stage.addListener (stageListener);

// When the Stage dimensions change...
stageListener.onResize = setStage;

// Call our function to set it all up right!
setStage ();

Have fun!