Don't know where to start

[LeadbitterGlass.com]

Hi all, on the page below I want to create a feature where users can click one of the two grey bevelled glass images and it moves to the centre of the white window frame, they can then click another image like one of the coloured borders and that sits in the window frame - on top of the other grey bevelled image. these images will all be transparent so the finished article will look like the image at the bottom of the page

http://www.leadbitterglass.com/design_your_own_stained_glass.htm

I have seen something like this before and when a user clicks the images they 'float' over to the window frame and jump into place.


Where do I start with something like this? I have built the site and all of the images myself but have very little or no coding knowledge

Any help is much appreciated

:confused:

[snickelfritz]

Download TweenGroup (http://blog.greensock.com/tweengroup/).
This includes a comprehensive and very high quality set of tweening classes.
The download will include a "gs" folder. All of the class files are inside this folder.
Copy the gs folder to the same folder as your FLA, so Flash can see the classes.

Attached to this post is a zipped folder containing an FLA, images folder, and SWF file. (open the SWF to see the result of the exercise in Flash Player 9)
Copy the gs folder into this folder, then open the FLA in Flash CS3 or CS4.
Actionscript 3.0 is the scripting language, and the target is Flash Player 9.0.
BTW, there are dozens of ways to do this.
This seems like the simplest to me, but you might have to do it differently (more advanced scripting) depending on how sophisticated and flexible you need the application to be.

Here's the commented script from the FLA:

// import the Greensock Tweening classes located in the "gs" folder
import gs.*;

// declare and datatype public variables to be used in this script.
var mouseTarget:MovieClip;
var frameTarget:MovieClip = MovieClip(fanlightGroup.fanlightFrame);

// we do not want the frame to respond to mouse events, so mouse events are disabled.
frameTarget.mouseEnabled = false;

// targetProps is an array of values equal to the intitial coordinates of the borders and bevels.
var targetProps:Array = new Array();

// call the setProps function and pass in an value that is equal to the number of child objects within fanlightGroup.
setProps(fanlightGroup.numChildren);

// this function has one parameter: an integer, represented by the variable n
function setProps(n:int):void
{
// the for loop will perform the enclosed actions on each of the child objects within fanlightGroup.
// n represents the number of children in fanlightGroup
for (var i:int = 0; i < n; i++)
{
// assign properties and listeners to the children within fanlightGroup
var b:MovieClip = MovieClip(fanlightGroup.getChildAt(i));
b.addEventListener(MouseEvent.CLICK, onClick);
b.buttonMode = true;
b.id = i;

// Create a Point that is equal to the coordinates of the current child being processed
var p:Point = new Point(b.x, b.y)
// push the point in to an array.
// its position, or index, in the array is equal to the id number assigned to the object.
targetProps.push(p);
}
}

function onClick(e:MouseEvent):void
{
// assign a value to mouseTarget that is a Movieclip that was clicked.
mouseTarget = MovieClip(e.currentTarget);

//the following two varibales are temporary; they will be cleared from memory when the fucntion completes.
var primary:MovieClip = mouseTarget;// the object that was clicked.
var secondary:MovieClip;// the alternate object. ie: for bevel1 the secondary is bevel2, and so forth.

// the purpose of the following switch statement is to prevent two bevels or two borders from existing in the frame at the same time.
// it compares the instance name of the event target (whatever was clicked) with a set of possible matches (cases)
// the value of variable "secondary" is set, based on which of the cases matches the event target instance name
switch (mouseTarget.name)
{
case "bevel1" :
secondary = MovieClip(fanlightGroup.bevel2);
break;

case "bevel2" :
secondary = MovieClip(fanlightGroup.bevel1);
break;

case "border1" :
secondary = MovieClip(fanlightGroup.border2);
break;

case "border2" :
secondary = MovieClip(fanlightGroup.border1);
break;
}

// the result of the switch statement is assigned to the tweening fucntions, which move the objects.
TweenLite.to(primary, 1, {x:frameTarget.x, y:frameTarget.y});// frameTarget is the window frame graphic; primary is sent to the those coordinates.

// this sends a border or bevel back to it's initial coordinates, in the event that an alternate border or bevel is chosen.
// here we ar using the id preperty set on the for loop, to access a value stored at a specific index in the targetProps Array.
// this value will always correspond to the secondary object's intitial coordinates.
TweenLite.to(secondary, 1, {x:targetProps[secondary.id].x, y:targetProps[secondary.id].y});
}