Flash Carousel

[alex_gomy]

I'm using a flash carousel on a friends website. But what i would like to know is when someone clicks on one of the images, on the click through bit, how do i make the image bigger?? At the minute its the same size as image on the carousel. Heres a link to look at http://www.thecocktailfactory.co.uk/cocktails.php

And here is the actionscript from flash:

import mx.utils.Delegate;
import mx.transitions.Tween;
import mx.transitions.easing.*;

var numOfItems:Number;
var radiusX:Number = 350;
var radiusY:Number = 60;
var centerX:Number = Stage.width / 2;
var centerY:Number = Stage.height / 2;
var speed:Number = 0.05;
var perspective:Number = 160;
var home:MovieClip = this;
theText._alpha = 0;

var tooltip:MovieClip = this.attachMovie("tooltip","tooltip",10000);
tooltip._alpha = 0;

var xml:XML = new XML();
xml.ignoreWhite = true;

xml.onLoad = function()
{
var nodes = this.firstChild.childNodes;
numOfItems = nodes.length;
for(var i=0;i<numOfItems;i++)
{
var t = home.attachMovie("item","item"+i,i+1);
t.angle = i * ((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
t.toolText = nodes[i].attributes.tooltip;
t.content = nodes[i].attributes.content;
t.icon.inner.loadMovie(nodes[i].attributes.image);
t.r.inner.loadMovie(nodes[i].attributes.image);
t.icon.onRollOver = over;
t.icon.onRollOut = out;
t.icon.onRelease = released;
}
}

function over()
{
//BONUS Section
var sou:Sound = new Sound();
sou.attachSound("sover");
sou.start();

home.tooltip.tipText.text = this._parent.toolText;
home.tooltip._x = this._parent._x;
home.tooltip._y = this._parent._y - this._parent._height/2;
home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
home.tooltip._alpha = 100;
}

function out()
{
delete home.tooltip.onEnterFrame;
home.tooltip._alpha = 0;
}

function released()
{
//BONUS Section
var sou:Sound = new Sound();
sou.attachSound("sdown");
sou.start();

home.tooltip._alpha = 0;
for(var i=0;i<numOfItems;i++)
{
var t:MovieClip = home["item"+i];
t.xPos = t._x;
t.yPos = t._y;
t.theScale = t._xscale;
delete t.icon.onRollOver;
delete t.icon.onRollOut;
delete t.icon.onRelease;
delete t.onEnterFrame;
if(t != this._parent)
{
var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,t._xscale,0,1,tru e);
var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,0,1,tru e);
var tw3:Tween = new Tween(t,"_alpha",Strong.easeOut,100,0,1,true);
}
else
{
var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,t._xscale,100,1,t rue);
var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,100,1,t rue);
var tw3:Tween = new Tween(t,"_x",Strong.easeOut,t._x,200,1,true);
var tw4:Tween = new Tween(t,"_y",Strong.easeOut,t._y,320,1,true);
var tw5:Tween = new Tween(theText,"_alpha",Strong.easeOut,0,100,1,true );
theText.text = t.content;
var s:Object = this;
tw.onMotionStopped = function()
{
s.onRelease = unReleased;
}
}
}
}

function unReleased()
{
//BONUS Section
var sou:Sound = new Sound();
sou.attachSound("sdown");
sou.start();

delete this.onRelease;
var tw:Tween = new Tween(theText,"_alpha",Strong.easeOut,100,0,0.5,tr ue);
for(var i=0;i<numOfItems;i++)
{
var t:MovieClip = home["item"+i];
if(t != this._parent)
{
var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,0,t.theScale,1,tr ue);
var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,0,t.theScale,1,tr ue);
var tw3:Tween = new Tween(t,"_alpha",Strong.easeOut,0,100,1,true);
}
else
{
var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,100,t.theScale,1, true);
var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,100,t.theScale,1, true);
var tw3:Tween = new Tween(t,"_x",Strong.easeOut,t._x,t.xPos,1,true);
var tw4:Tween = new Tween(t,"_y",Strong.easeOut,t._y,t.yPos,1,true);
tw.onMotionStopped = function()
{
for(var i=0;i<numOfItems;i++)
{
var t:MovieClip = home["item"+i];
t.icon.onRollOver = Delegate.create(t.icon,over);
t.icon.onRollOut = Delegate.create(t.icon,out);
t.icon.onRelease = Delegate.create(t.icon,released);
t.onEnterFrame = mover;
}
}
}
}
}


function moveTip()
{
home.tooltip._x = this._parent._x;
home.tooltip._y = this._parent._y - this._parent._height/2;
}

xml.load("icons.xml");

function mover()
{
this._x = Math.cos(this.angle) * radiusX + centerX;
this._y = Math.sin(this.angle) * radiusY + centerY;
var s = (this._y - perspective) /(centerY+radiusY-perspective);
this._xscale = this._yscale = s*100;
this.angle += this._parent.speed;
this.swapDepths(Math.round(this._xscale) + 100);
}

this.onMouseMove = function()
{
speed = (this._xmouse-centerX)/36000;
}

Thanks in advance.

[Mack]

add a larger image to your xml, set a variable for your larger image and load that one when the item is clicked. use the same method you are currently for loading of the smaller image, and just call the new variable when the item is clicked.

[gospastic]

Or could you put the image in a movieclip (if it isn't already) and scale it by changing the width and height?

if (myMovieClip._width < targetwidth){
myMovieClip._width++;
}

You would need to place this code in a setinterval() function.

There would be other problems too like clearing the setinterval and constraining the ratio of the image by adjusting the height too.

Nothing is ever easy!

[alex_gomy]

Thanks for the replies, i'll give them a try... Cheers

[Mack]

i wouldn't resize the image, as your dealing with non-vector assets they will distort...

[alex_gomy]

I'll keep that in mind cheers. I'll probably dup the images at a larger size.