Icon carousel in AS2 with tooltip
I created a carousel a long time ago from Lee Brimelow’s videotutorial at gotoAndLearn.com, but the interest among friends made me post it. It’s a simple example, but very effective. Lee Brimelow was the one showing me how to do it at gotoAndLearn.com where he also has many other very cutting edge examples. Lee Brimelow is my flash mentor, and I love everything he creates. His actions have made Flash where it is today so go and check out his tutorials.
Download the example or learn it yourself with the code placed below. Hope you figure it out, but if not, don´t hesitate to contact me.
//#include "Carousel.as"
import mx.utils.Delegate;
var numOfItems:Number;
var radiusX:Number = 300;
var radiusY:Number = 40;
var centerX:Number = 325;
var centerY:Number = 180;
var speed:Number = 0.02;
var perspective:Number = 3;
var home:MovieClip = this;
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.icon.inner.loadMovie(nodes[i].attributes.image);
t.ref.inner.loadMovie(nodes[i].attributes.image);
t.icon.onRollOver = over;
t.icon.onRollOut = out;
t.icon.onRelease = down;
}
}
function down(){
nc = new NetConnection();
nc.connect( null ); // Create a local streaming connection
ns = new NetStream(nc);
home.itemVideo.attachVideo(ns);
home.itemVideo._x = centerX - (itemVideo._width / 2 );
home.itemVideo._y = (Stage.height/2) - (itemVideo._height / 2) -80;
home.itemVideo.swapDepths(this);
}
function over() {
//this._parent._width = this._parent._width + 50;
//this._parent._height = this._parent._height + 50;
//this._parent._x -= 25;
//this._parent._y -= 25;
home.tooltip.tipText.text = this._parent.toolText;
var tmp:String = this._parent.toolText;
home.tooltip._width = tmp.length * 11;
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() {
//this._parent._width = this._parent._width - 50;
//this._parent._height = this._parent._height - 50;
//this._parent._x += 25;
//this._parent._y += 25;
delete home.tooptip.onEnterFrame;
home.tooltip.tipText.text = "";
home.tooltip._alpha = 0;
}
function moveTip(){
home.tooltip._x = this._parent._x;
home.tooltip._y = this._parent._y - this._parent._height / 2;
}
xml.load("icons.xml");
//Foundation ActionScript Animation
function mover()
{
this._x = Math.cos(this.angle) * radiusX + centerX;
this._y = Math.sin(this.angle) * radiusY + centerY;
var s:Number = (this._y - perspective) / (centerY + radiusY - perspective);
this._xscale = this._yscale = s * 100;
if(this.mouseOver)
trace(this.mouseOver + "bullshit");
this.angle +=this._parent.speed;
this.swapDepths(Math.round(this._xscale) + 150);
}
this.onMouseMove = function()
{
speed = (this._xmouse - centerX) / 10000;
if(this.mouseOver)
trace(this.mouseOver + "bullshit");
}
Sorry, folks! I created it in as2, and not as3 as I earlier posted, but if you want I´ll create one in as3 as well. Post me a message if you want this
Fet karusell kompis
Ser skikkelig porno ut. Er det mulig å få ikonene til å bli større når man har musepekeren over?
Hey dude,
Love your carousel… would you mind mailing me the codes orthe flas together…
Cheers and god bless…
hey lillegutt
this carousel is awesome!!! but I have a question on how to make the flv player to work, because the sample you gave us the player doesnt work and if you can mail me the code on how to make it work that would be awesome
thanks
Hi Lillegutt,
very nice file! One question: How can I load SWF instead of images?
Thanx in advance
Hi Lillegutt,
Awesome script.
Can you tell me how I can alter the size of the icons and add a link to the icons in the movie?
Thanx in advance.
I would like the carousel to be stationary and when you click on a picture or mc that it comes to the front (if mc play that mc). Than when you click on it a second time it will do what the carousel would normally do when you click on the picture now (go to the holder) and move to the side like in the carousel tutorials. I do not want the carousel to move based on the movement of the mouse. Kind of like this one at Adobe http://www.adobe.com/products/photoshop/family/?promoid=BPDEK thanks for any help that anyone can provide.
Hey shaolinprince,
What you should do is to create a function that stops the carousel when your selected item has the angle furthest down. I don’t remember which angle that is, but I guess you’ll figure it out. When you stop it, make a transparent squared button over the selected item and create a onPress-function that lets you play a content. When you stop the carousel you can add the video on top of the carousel.
Hope you figure it out. If you want me to have a look at your code, let me know
hey bud this is a great carousel, but it is pretty much a copy of Lee’s and gotoandlearn.com, but I dont see any mention of credit here, just wondering…
Oh… I am so sorry. I thought that i had credites on the post, but clearly i didn’t. It has been taken care of. Thank you for notising, and there is credit for you now. If you want, go and check out my AS3-version of your carousel
Regards lillegutt
Looks cool but my Flash (MX 2004) crashes everytime i try to open the .fla file…
Great file, but I can’t seem to get a video to play with the buttons clicked… I added a vid attribute to the XML file, and the node function assign it to the items but I am doing something wrong…
Variable _level0.item0.toolText = “3D Studio Max”
Variable _level0.item0.itemVideo = “flv/Mike.flv”
Should I be putting the video path into some other variable? I don’t usually use NS video so I am a little confused.
HI.
Great code – thanks. I’m not savvy when it comes to programming but can decipher code relatively well.
I’ve managed to manipulate the carousel to my needs and when I test the movie, it works fine, however when I embed the .swf into my website, it doesn’t work.
Any advice please?
Hi, how to put a link on the image? I tried by putting href into the xml but that does not work. Great stuff by the way