Anyone Know Any Image Carousel Tutorial?

Can't Find A Simple Image Rotator Tutorial (not Carousel)
Hi,

I need to make a simple movie that rotates through images/swfs, in order, and has a small navigation to select any of the images in the rotator. Probably will only contain 3 - 6 images/swfs at a time. I have come across many pre-made flash image rotators, but I need something a bit more open that I can customize to my liking. I'm not necessarily looking for ease of use or automated. I know enough AS that I understand it, I just need help writing it sometimes. Kinda like when you can read a language, but you're not fluent in writing it. Anyway, I'm not asking for someone to write AS for me, but if anyone has something already on hand that they don't mind sharing or if you know of a tutorial that may help, I would appreciate it. Thanks.

---

Carousel Tutorial
Hi

wheer can i find the best (video)tutortial on the internett for making spin carousel in flash with as3?
(ps. I'm newbee)

---

Carousel Tutorial AS3
Hi,

I've been trying to find / figure out how to make an AS3 carousel, but all I can find are snippets of code, files that don't work or files with classes that I can't figure out. Does anyone know of a AS3 tutorial that will show me how to build a carousel, like lee's from scratch?

Thanks

---

Carousel Tutorial
I would like to say thank you for the amazing tutorila was just about to buy a versionof it to get he code, (i know super lazy) when i came accross this which i must say has helped me a lot.

I have come accross one problem and i am sure its is my fault. I have just finished your 3rd tutorial all up until this point has been good but when i preview it now and click on an icon where it is suppose to make it become the one picture with the text box next too it i get this error(see attachment)

any ideas what this means.

---

Carousel Tutorial And XML
Is there anyway to include a link inside the text description of the xml file? What I'd like to do is describe the picture in the carousel and have a link that will link to another page with more information.

I'm not familiar with xml, so if anyone can help me I'll really appreciate it.

Thanks.

---

The Carousel Tutorial
hello, i a having trouble with the carousel tutorial, i have reviewed it over and over, but it isnt working.
so i downloaded the FLA, and it doesnt let me open in my version of flash
(Flash MX 2004)
please help me im desperate!
i understand the majority of the code and i dont understand why it wont work

---

AS3 Carousel Tutorial Help
Hi,

I have been doing the carousel tutorial, but have been trying to convert it to AS3.

I have gotten stuck and am hoping someone can help me out.

The problem is I'm trying to place four instances of the clip "item" onto the carousel, four of them are there but they are all in the same position.

you can see the swf and source fla here:
http://www.thelightdivided.co.uk/flash/index.html
http://www.thelightdivided.co.uk/flash/carousel.fla

The code I have so far is:

Code:

var numOfItems:Number = 4;
var radiusX:Number = 200;
var radiusY:Number = 50;
var centerX:Number = this.stage.stageWidth / 2;
var centerY:Number = this.stage.stageHeight / 2;
var speed:Number = 0.02;

var t:item;

// attach icons to the stage
for (var i = 0; i < numOfItems; i++) {
t = new item();
t.name = "item_"+i;

// place each item equally around the circle
t.angle = i * ((Math.PI*2) / numOfItems);
t.addEventListener(Event.ENTER_FRAME, mover);

// add to stage
addChild(t);
}

function mover(evt:Event):void {
this.x = Math.cos(evt.target.angle) * radiusX + centerX;
this.y = Math.sin(evt.target.angle) * radiusY + centerY;
var s:Number = this.y / (centerY + radiusY);
this.scaleY = this.scaleX = s;
evt.target.angle += this.speed;
trace(evt.target.name);
trace(this.x);
}
Code:

[code][/code]

Many thanks
Chris

---

Carousel Tutorial
I made a flash movie using Lee,s carousel totorial II , all works well on
the hard drive, But when i upload it to the server it will not work, I uploaded
the SWF plus the XML and the icon files. Anyone know what it could be ?
Is XML like PHP, where it has to be enabled on the server? My server is
a free service , and does not support PHP.Not sure if I am on the right track
or not, Can anyone HELP !

---

3D Carousel Tutorial
Hi,
Is there a way to make the icons show a bigger version of a graphic when selected?
Or show a different graphic when selected.
I am trying to create a photo gallery out of it.

Thank you.

---

Carousel Help? (but Not With The Tutorial)
btw.. i just saw the "Stop asking for carousel help" i will do further searchs to confirm that this problem has not been addressed, sorry! Forum Search seems to be bugged.

i am creating a Carousel effect (found on http://www.gotoandlearn.com), but am not implementing any mouse interaction with it, it is a straight forward rotating loop. i need help in two areas.

Code:
Code:

var numOfBalls:Number = 3;
var radiusX:Number = 375;
var radiusY:Number = 100;
var centerX:Number = 400;
var centerY:Number = 400;
var speed:Number = 0.005;

for(var i=0;i<numOfBalls;i++)
{
   var t = this.attachMovie("ball_3","b"+i,i+1);
   t.angle = i * ((Math.PI*2)/numOfBalls);
   t.onEnterFrame = mover;
}

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



Q1: How would i go about inserting 3 DIFFERENT library objects (ie ball_1, ball_2, ball_3)? (i do not want to use external or dynamic array/objects) answered see below

Q2: Is it possble to make the objects pause at the front for a short period of time and then continue on?

thanks for ANY help i can get on this. i am not a pro-actionscripter by any definition of the word, but i AM learning.

i can attach a sample file if you like.

---

[CS3] [AS2] 3D XML Carousel Using GotoAndLearn Tutorial
I am slowly building up a small carousel based on the gotoandLearn videos, but I've reached a point that I'm stumped. This is the tutorial itself:

http://www.gotoandlearn.com/play?id=33

This is my code so far, first is the AS2, second XML:


Code:
var numOfItems:Number;
var radiusX:Number = 320;
var radiusY:Number = 90;
var centerX:Number = Stage.width/2;
var centerY:Number = Stage.height/3.2;
var speed:Number = 0.03;
var home:MovieClip = this;

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("icon","icon"+i,i+1);
t.angle = i * ((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
t.icon.inner.loadMovie(nodes[i].attributes.images);

}
}

xml.load("icon.xml");

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

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

Code:
<icons>

<icon images="icon1.png" tooltip = "Knowledge"/>

<icon images="icon2.png" tooltip = "Logic"/>

<icon images="icon3.png" tooltip = "Focus"/>

<icon images="icon4.png" tooltip = "Speed"/>

</icons>
It so far seems to be recognizing the XML file, when it loads there are four rotating "inner" objects... however, the actual .png files are not loading into place like they should. I've followed the tutorial near-exactly, leaving out a few things such as the reflection effect and tooltip which will not be used in my own final version. The outer movie is named "item" with an instance name of "icon", while the inner movieclip is named "inner" with an instance name of "inner" What is going on?

---

Carousel 2 Tutorial Issue.
Hello everyone and Merry Christmas!(Yeah I know, I'm late)

Well. In order to train and familiarize myself to flash (Macromedia flash professionnal 8 version), I decided to follow and put in application the Carousel 2 tutorial.

Everything worked fine since my last carousel swf build. My main problem is that the text is not displayed in the tooltip box. And I don't know why. My code seems to be nearly the exact copy of the one's which is given in the tutorial, but the tooltip box remains empty. A notice: When I put the text to "static", it is shown, not the case when I check "dynamic". Here is my actionscript code:

Code:

import mx.utils.Delegate;

var numOfItems:Number;
var radiusX:Number = 280;
var radiusY:Number = 75;
var centerX:Number = Stage.width/2;
var centerY:Number = Stage.height/2;
var speed:Number = 0.05;
var perspective:Number = 100;
var home:MovieClip = this;


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

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

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;
   }
}

function over()
{
   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 moveTip()
{
   home.tooltip._x= this._parent._x;
   home.tooltip._y= this._parent._y - this._parent._height/2;
}

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;
   this.angle += this._parent.speed;
   this.swapDepths(Math.round(this._xscale) + 100);
}

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


Here is my xml code:

Code:

<icons>

<icon image="earth.png"   tooltip="Reseau" />
<icon image="add.png"     tooltip="Ajouter" />
<icon image="del.png"     tooltip="Supprimer" />
<icon image="members.png" tooltip="Membres" />
<icon image="seek.png"    tooltip="Rechercher" />
<icon image="help.png"    tooltip="Aide" />
<icon image="email.png"   tooltip="Email" />
<icon image="home.png"    tooltip="Accueil" />

</icons>


Can someone help me find the "bug" please? Thanks in advance and sorry if the problem have already been posed (I made a search but find nothing related to my issue...).

Edit: I searched more and I downloaded the carousel2 version of the tutorial. Seems that the issue was bound to my tooltip movie clip. The way I made it was obviously wrong. I need to train myself more. Sorry to have bothered.

P.S: M.Lee, Thank you very much for your effort. I know this is not so simple to make such tutorials. Hope there were more people like you on the net.

---

Converting Carousel Tutorial From 2 To 3.0. Help?
Hello,
I am trying to convert the great carousel tutorial on this site (carousel 1:simple found here http://www.gotoandlearn.com/player.php?id=32) from ActionScript 2 to ActionScript 3.0 using classes.

I am at the end of converting the first tutorial from as2 to classes in as3 and I am having one small problem with the individual items not seeing the angle.

Any help in advance would be appreciated, as I am somewhat new to as3.

Oval.as creates a ball and rotates it in an oval.
Ball.as is the ball class.

Ball code:
Code:

package {
   import flash.display.Sprite;
   
   public class Ball extends Sprite {
      private var radius:Number;
      private var color:uint;
      
      public function Ball(radius:Number = 40, color:uint=0xff0099) {
         this.radius = radius;
         this.color = color;
         init();
      }
      public function init():void {
         graphics.beginFill(color);
         graphics.drawCircle(0, 0, radius);
         graphics.endFill();
      }
   }
}

Oval code:
Code:

package {
   import flash.display.Sprite;
   import flash.events.Event;
   
   public class Oval extends Sprite {
      private var ball:Ball;
      private var carousel:Sprite;
      private var numOfItems:Number = 5;
      private var angle:Number = 0;
      private var centerX:Number = 200;
      private var centerY:Number = 200;
      private var radiusX:Number = 200;
      private var radiusY:Number = 100
      private var speed:Number = .1
      
      public function Oval () {
         init();
      }
      private function init():void {
         carousel = new Sprite;
         for (var i:Number = 0; i < numOfItems; i++) {
         ball = new Ball(40, 0xff6600);
         //addChild(ball);
         carousel.addChild(ball);
         //ball.name = (String("ball") + i);
         var angle:Number = i * ((Math.PI * 2) / numOfItems);
         addEventListener(Event.ENTER_FRAME, onLoop);
         }
         addChild(carousel);
         
         
      }
      
      public function onLoop(e:Event):void {
         e.currentTarget.x = centerX + Math.sin(angle) * radiusX;
         e.currentTarget.y = centerY + Math.cos(angle) * radiusY;
         e.currentTarget.angle += speed;
      }
   }
}

If anyone could help it would be greatly appreciated.

thanks!

---

Expanding The Carousel Tutorial
Hi,

how would I expand the Carousel tutorial to include a link, underneath each descriptive dynamic text box, to take the user to another page/site.
A unique link for each icon.

K

---

Beginner Carousel Tutorial?
newbie here i would like to find a tutorial to do a simple carousel. i know nothing! is this possible?i can follow directions!

[split by admin]

---

Button In Carousel Tutorial?
I have used the tutorials to create the carousel. This works great. There is only one thing that I really would like to accomplish but haven't been able to yet:

What happens now is that when you click on an item it moves to your left, and a text box becomes visible (as in the tut.). What I would like is to be able to click on a button there and go to a detailed php or html page on that subject.

So there must be a button, like 'more info' wich has an getUrl action, and that url will also be loaded in thru the xml.
It shouldn't be too hard, but i don't know how.....

any tips?

---

Carousel Tutorial 1 Question
First off, I must give props for the site; it is wonderful. It's really cool to learn how to do all these neat things with flash! Now, on to my question!

I was following the first carousel tutorial and came to a snag when it was time to start swapping depths. I am using ActionScript 3 and the swapDepths method has been removed. I know there is a swapChildren method now, but it only accepts display objects to swap around, not a specific target depth! I was wondering if anyone could show me a good way to keep the depths properly sorted using ActionScript 3.

I suppose one way would be to loop through all the items on stage and just compare scales and each time I find a new largest, swap it to the top (kind of like a bubble sort), but is there a better way to do it?

Update: well, i used the bubble sort technique and it seems to work pretty well, I just added another enter frame listener (this one to the mainTimeLine object (this)).

Code:

this.addEventListener(Event.ENTER_FRAME, sortItems);

function sortItems(evt:Event):void
{
   for( var i:int = 0; i < numOfItems - 1; i++)
   {
      for(var j:int = 1; j < numOfItems; j++)
      {
         var temp1:DisplayObject = this.getChildAt(j);
         var temp2:DisplayObject = this.getChildAt(j-1);
         if( temp1.scaleX < temp2.scaleX )
         {
            this.swapChildren(temp1, temp2);
         }
      }
   }
}

Adding another enter frame listener may not be the most efficient way of doing this, so I'm still open to any suggestions.

---

Carousel Tutorial Question
Hello all...

I have used the brilliant 'Carousel' tutorial to create a menu on frame 1 of my movie.

I have adapted it (as suggested on this forum) so that the carousel is populated by an array of 4 movie clips.

Code:

var items:Array = new Array();
items[0] = "option1_mc";
items[1] = "option2_mc";
items[2] = "option3_mc";
items[3] = "option4_mc";

The menu works perfectly and clicking on a different option takes you to a particular frame of my movie.

However, when the viewer returns to the main menu (frame 1) for a second time the carousel starts doing funny things and does not work properly.

Anyone know why? I was guessing that everytime the movie returns to frame 1, the movie clips in the carousel are given a slightly different name - but I'm just a beginner and could be completely wrong.

Here is the complete code on frame 1:

Code:

var items:Array = new Array();
items[0] = "option1_mc";
items[1] = "option2_mc";
items[2] = "option3_mc";
items[3] = "option4_mc";

var radiusX:Number = 250;
var radiusY:Number = 75;
var centerX:Number = Stage.width / 2;
var centerY:Number = Stage.height / 2;
var speed:Number = 0.05;

for (var i:Number = 0; i < items.length; i++)
{
    var t = this.attachMovie(items[i], "b"+i, i+1);

    t.angle = i * ((Math.PI*2)/items.length);
    t.onEnterFrame = mover;
}

function mover()
{
   this._x = Math.cos(this.angle) * radiusX + centerX;
   this._y = Math.sin(this.angle) * radiusY + centerY;

   var s = this._y /(centerY+radiusY);

   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)/1500;
}

Sorry for such a long question and thanks for any help you can give,

David

---

XML HYPERLINKS In The CAROUSEL 3 TUTORIAL
I want to be able to add a hyperlink to a website that would open in a new window as part of the "content". When you click on one of the icons that spins on the carousel, and you get the larger body of text, i want to be able to embed a hyperlink to a webpage, and if possible add some "bold" and "italic" text styles. Does anyone know how to do this. here is the original code cut a bit out for space:

Code:

<icons>

<icon image="icon1.png" tooltip="LimeWire" content="LimeWire is a peer-to-peer file sharing client for the Gnutella network." />

<icon image="icon2.png" tooltip="Rubik's Cube" content="Rubik's Cube is a mechanical puzzle invented in 1974 by the Hungarian sculptor and professor of architecture Erno Rubik." />

<icon image="icon3.png" tooltip="Widgets" content="A widget (or control) is an interface component that a computer user interacts with, such as a window or a text box." />

</icons>

---

Carousel Tutorial + Scrollbar
I'm trying to get a scrollbar to work with the carousel tutorial but I can't figure out a way to have the scrollbar work with the XML loaded script. I need help!

---

Question From Carousel Tutorial 2
Hello all,

after watching Carousel Tutorial 2 I realized i have no idea how to create the XML file Lee was using to import the graphics for the carousel. Can anyone assist me or point me to a good website or tutorial for explanation? Your help is much appreciated. Thanks.

---

Carousel Tutorial Question
I have the Carousel made up of 3D cubes made in a 3D program. There are 39 frames in the cube itself which reveal each side of the cube in the 39 frames. Now what I'm trying to do is when the Carousel spins it should play through those 39 frames showing each side depending on where it is on its y value. Just like how the scale does it with the s value.
I tried this line of code

Code:

   var s = this._y/(centerY+radiusY);
   this._xscale = this._yscale=s*100;
   var cubeSpin=Math.round(s*this._totalframes);
   trace(cubeSpin);


The problem is "s" does not go from 1 to 39 its numbers are high.
How can I get this to run through the 39 frames smoothly? Showing the correct side of the cube when it?s at the back or the front of the Carousel



Second question

In order for to get my Carousel to be on the correct plane I had to adjust my var radiusY:Number = 30; and my var centerY:Number = 400; numbers. now by doing this the s value now does not scale the cubes at the back. Here is the swf to see what is happening

VIEW SWF FILE

As you can see the back cubes are the same size as the front cubes.

Any help would be appreciated

---

Question About Carousel Tutorial On GotoAndLearn
there is a three part series tutorial on building a sleek carousel withdrawing icons from xml file (Creating 3D Carousels III - http://www.gotoandlearn.com/download.php )

If you are familiar with this, the tutorial only covers showing text information along with the picture icon. What would be very cool is to have is show a movie clip when you clicked on an icon. Then is would be a full flash site, and a really cool one.

Here I am attaching the full action script that I got from the tutorial, so if you have an idea how to show a movie clip on clicking an icon, it would be great. I am a newbie to actionscript, so any help would be appreciated.


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

var numOfItems:Number;
var radiusX:Number = 300;
var radiusY:Number = 60;
var centerX:Number = Stage.width/2;
var centerY:Number = Stage.height/2;
var speed:Number = 0.05;
var perspective:Number = 130;
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.ref.inner.loadMovie(nodes[i].attributes.image);
t.icon.onRollOver = over;
t.icon.onRollOut = out;
t.icon.onRelease = released;
}
}


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


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


function released()
{
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,true);
var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,0,1,true);
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,true);
var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,100,1,true);
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,100,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()
{
delete this.onRelease;
var tw:Tween = new Tween(theText,"_alpha",Strong.easeOut,100,0,0.5,true);
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,true);
var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,0,t.theScale,1,true);
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.5;
}


xml.load("icons.xml");


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;
this.angle += this._parent.speed;
this.swapDepths(Math.round(this._xscale) + 100);
}

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

---

Building A 3D Carousel Using A Tutorial As Base
I am building the 3D carousels in the gotoandLearn.com video tutorials, however at the moment I'm utterly stuck. The code is AS2:

Code:
var numOfItems:Number;
var radiusX:Number = 320;
var radiusY:Number = 90;
var centerX:Number = Stage.width/2;
var centerY:Number = Stage.height/3.2;
var speed:Number = 0.03;
var home:MovieClip = this;

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("icon","icon"+i,i+1);
t.angle = i * ((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
t.icon.inner.loadMovie(nodes[i].attributes.image);

}
}

xml.load("icon.xml");

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

this.onMouseMove = function()
{
speed = (this._xmouse-centerX)/9500;
}
In tests, this works except for a problem - it sees the XML file, but does not load the actual .png graphics. The graphics are located in the same directory, and all the linkage properties are set correctly. I get four floating basic images in the carousel (there are four nodes)..nothing else, however.

---

Where Can I Find A Tutorial To Build A 3D Carousel In AS 3.0?
Anyone know where I can find good a tutorial to help me build a 3d flash carousel in AS 3.0?
Or anywhere I can download a flash file or anything I can play around with to figure it out?
I would prefer it to be XML driven.

I would like to build a carousel like this:

Carousel in 2.0

Only I would like to learn to build it in action script 3.0.

I appreciate it.

---

Carousel/Panning Camera Tutorial
Had fun doing the Carousel Tutorial in flash 8,
Was wonder:
1-How do I make it show Many different images
2-When mouse runs over images as buttons it does funky things

Can anyone help or does anyone know of a more commercial use of that tutorial?

Thanks
Osiyo

---

Lee Brimelow's Carousel Actionscript Tutorial
I am trying to get the full actionscript for Lee Brimelow's carousel tutorial parts 1-3. Does anyone know how to get this so that I can check my actionscript against his?
His tutorials are only on flv and not in a format that I can paste from. Many Thanks

---

Adding URL Link To XML File Of Carousel Tutorial
I am using the Carousel application as designed in the 3 part tutorial. My question that i can't find an answer to online is how to add a URL link in the description text that shows when an icon is clicked. Can anyone advise? Thanks.

Josh Henry

---

Animating Dynamically Loaded Mcs/lee Brimlows Carousel Tutorial/calling The Pros
hiya,

i followed lee brimlows excellent carousel tutorial and i am wondering how to animate dynamically loaded mcs in that tutorial before the main animation, which is basically a carousel of dynamically loaded icons that rotate in a circle depending on where the mouse is, starts.

what i am aiming at is to have a sort of fountain-like animation before the main thing starts; in that way that the icons not just 'appear' on the stage, but are animated from 0, 0 to their position on the carousel.
i have the proper classes for the curved fountainlike animation (MCTween classes), but i don't know where to put the code in the actionscript, for i am not that good at actionscript to grasp what is going on.

i know that this:

Code:
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;
}
}
is the part of the code where the icons are dynamically created and the functions are called, and i guess i have to squeeze this code (created by myself; probably wrong), which i think could be the correct one to achieve what i am looking for, into:


Code:

function fountain()
{
this.xposition = Math.cos(this.angle) * radiusX + centerX;
this.yposition = Math.sin(this.angle) * radiusY + centerY;
this.bezierSlideTo(0, 200, this.xposition, this.yposition, 1, "easeInOutQuint", 1, undefined, undefined, undefined);
}
the problem is i don't know where to put it in.

though i don't have a problem with the tween class, i thought i might give reference to it:
the bezierSlideTo is a MCTween class. the syntax is:
<MovieClip|TextField>.bezierSlideTo(control point x, control point y, x, y [, seconds, animation type, delay, callback, extra1, extra2]);
http://hosted.zeh.com.br/mctween/

i attached the original tutorial files from gotoandlearn.com. due to filesize limitations, i split the folder in three. just put everything in one folder and you'll be shiny.


this is the link to the video tutorial:
http://www.gotoandlearn.com


i am not letting you do the work; this is just a desperate call for help. i tried everything i know to get this idea to work, but due to my limited knowledge can't come up with the solution (which is probably pretty easy); and i decided to ask for help before pulling any more hair out...

the guys at the gotoandlearn forum couldn't help, by the way.

any help is greatly appreciated!
cheers,
dual


this is the actionscript used in the tutorial:

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

var numOfItems:Number;
var radiusX:Number = 300;
var radiusY:Number = 75;
var centerX:Number = Stage.width / 2;
var centerY:Number = Stage.height / 2;
var speed:Number = 0.05;
var perspective:Number = 130;
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,true);
var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,0,1,true);
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,true);
var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,100,1,true);
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,true);
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,true);
var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,0,t.theScale,1,true);
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)/2500;
}

---

AS3 Image Carousel
Hi I am trying to replicate the an image carousel like the one on nissanusa.com.

I have created a movie(image1) with five layers containing the images.

and given them instance names ClipA, ClipB, etc.

I then moved ClipA from the top layer to below ClipB but then the listeners dont catch any mose roll over.

Any Ideas?

Is there a way to dynamically move them up or down layers?


image1.clipA.addEventListener(MouseEvent.ROLL_OVER,overFunction1);
image1.clipA.addEventListener(MouseEvent.ROLL_OUT,outFunction1);

image1.clipB.addEventListener(MouseEvent.ROLL_OVER,overFunction2);
image1.clipB.addEventListener(MouseEvent.ROLL_OUT,outFunction1);


function overFunction1(obj:Object) {
trace ("on roll called");
display_txt.text = "CLIP A";
bgdark.visible = true;
image1.stop();
image1.clipA.gotoAndStop(10);
image1.clipB.gotoAndStop(20);
image1.clipC.gotoAndStop(20);
image1.clipD.gotoAndStop(20);
image1.clipE.gotoAndStop(20);
}


Thanks

Chris

---

Carousel Image Gallery
i am interested to know how this IMAGE GALLERY was created and worked out.

i searched on FK and found THIS Carousel sorta thing but i was not successful implementing images within it.

anyhelp is greatly appreciated.

---

I Need An Image Carousel, Scroller Like This One...
Hi there,

Im looking to build a scrolling image carousel like the one shown here

http://www.nikoleramsay.com/

The requirements are:
The images must be loaded in individually to reduce preload time.
For it to be scrolling.
To have a dragable bar
To remain 100% width in any browser.

Does any know of a script, a site, a tutorial that might help me complete this? Doesn’t have to be a free script, i don’t mind paying for this.

To be honest, any help in the right direction would be fantastically helpful here.

Tim

---

I Need An Image Carousel, Scroller Like This One...
Hi there,

Im looking to build a scrolling image carousel like the one shown here

http://www.nikoleramsay.com/

The requirements are:
The images must be loaded in individually to reduce preload time.
For it to be scrolling.
To have a dragable bar
To remain 100% width in any browser.

Does any know of a script, a site, a tutorial that might help me complete this? Doesn’t have to be a free script, i don’t mind paying for this.

To be honest, any help in the right direction would be fantastically helpful here.

Tim

---

Carousel Image Quality
Trying to figure out how to make the images in my carousel not jump around so much. Does anybody know of an effect, file type, flash setting or anything else that can help smoooth this out?

Thanks fo the help.

if you want to see what im talking about go here
http://www.symbioticmeg.com

---

A Static Image To 3D Carousel
I did the fantastic 3D carousel tutorial and got it working properly. I'd like to put a statis picture in the middle of the carousel though, something that the items revolve around, so I'd need the items to go behind the image somehow. I imagine this can be accomplished by a mask but I have no idea how to mask the dynamically created items and now they just move on top of the middle image. Can someone help me with this?

---

Carousel Tut. Image Instead Of Text
Hi
I am trying to work with the carousel tutorial. It is possible to display text on the right when an icon is clicked. Is it possible to display an image instead of the text (reading from the Xml)?

Henk

---

Carousel - Foreground Image
What would be the best way to overlay an image on the carousel script. I'm trying to make the icons in the rear pass behind the overlayed image.

Here's an example of what's happening now when I simply place the image on it's own layer.

http://pmgroup.com/ready2go/_caro2/caro ... enter.html

---

Bug In The Attached Carousel Image Gallery
I need to fix the bug in a carousel based image gallery. I tried to figure it out but I couldn't.
Can anybody help me in this. I would be glad if somebody can explain what's going on in the action script

---

Carousel Image Gallery Scale
I finished my first design in flsh 8 using autoscript. It is a carousel gallery of 14 images rotating around.
I am very new to this area but i hava a knowledge on programming language.
What i want is when an image comes in the center of the monitor to scale
automatically, stay at the max scale for around 2 secs then scale back to its original size.
when an image is in the proccess of scaling, the other images should stop and wait until the image gets its original size.
actually the proccess goes like that:
1st image in screen center - scale for 2 secs - remain at max size for 2 sec - scale back to original size - carousel rotation -
2nd image - scale.....and so on
Actually what i am lookin for is in url http://www.greekmilitary.net/
I would be very gratefull if anyone can supply me with an appropriate actionscript code or any reference tutorials on this

---

Best Practices - Flash Image Carousel
When creating an image Carousel in flash for a web page, what are the best practices for loading quickly and changing images?

So for instance, on an ecommerce site, the home page often has a block created in flash in which 4-6 images are included with arrows or image numbers are displayed at the bottom as buttons. The images automatically change to the next ever x seconds unless the user selects an image number or the forward/back arrows.

Obviously, smaller the image the better. But how about best practices for things like:

Do you include one image in the block and then load dynamically the other images? Should all images be dynamically loaded if you want to change them on a daily/weekly basis? Any suggestions for making sure the images, especially the first one is loaded quickly?

Anyone have sample ~gpl code that demonstrates a block like this?

Two examples - kohls.com, jcrew.com

---

Image In Center Of Carousel Menu?
Hi, I recently built myself a carousel menu that works well, and was just wondering if it was possible to place a movieclip at it's center? the problem i've been having is that the icons at the back still seem to display overtop of the central movie clip, is there perhaps some way to set the depth of the movie clip I want in the center, so that the icons in front pass in front of the movie clip while the ones in back pass behind?


sorry if this is a bit confusing, i've been up all night trying to figure this out =/

thx in adv.

-wraith

---

3D Carousel Weird Image At Loading?
Hello

The 3d carousel is fantastic but i seem to have encountered an issue


when it loads it has a very odd royal blue blue box about 2 inches tall by half inch wide appear on the screen briefly. this appears in the upper left portion of the screen


any ideas what this might be? would like to make it go away! since it is all loading dynamically i have no idea where this little gremlin is coming from


thanks

justin

---

Carousel - Image Instead Of Text Upon ROLLOVER
I watched all 3 Carousel tutorials but can not figure out how to use an image instead of dynamic text for the rollover bubble that appears above each icon. I found a few threads on this forum with similar questions but none were answered.

Thanks in advance for your help.

---

How Can I Load An External Image Using This Carousel Code
I found this beautiful carousel ported to actionscript 3.0.
http://board.flashkit.com/board/atta...7&d=1188450564

How can I change the code so I can click one of the carousel images and have it load the companion large image located in a different folder into a movieclip on stage.

I am a newbie to AS3 and struggling to learn how to do things.

Hopefully, someday I will be smart enough to contribute to the forum with intelligent submissions.

---

Photo Gallery Tutorial Turned Into Photo Carousel
i've taken the tutorial on this site on how to create an flash photo gallery that loads the content from an xml file. i'd like to alter the output of this fine tutorial and would appreciate any help in doing so.

i would like to create gallery, but instead of only showing one picture at a time, i would like to have a carousel effect where more than one picture is shown at a time, and the buttons control the turn of the carousel. i'm thinking in order to do this i'll need to have the as create a movie clip for each picture (maybe during the for loop). each mc instance would have to have a unique name, and then the buttons could play with the properties of each created mc instance.

here's the code from the tutorial on this. any help would be much appreciated....

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}

---

Xml Slideshow Tutorial - Fade From Image To Image?
I am building a slideshow for a client based on Kirupa's fantastic tutorial http://www.kirupa.com/developer/mx2004/xml_slideshow.htm

I want to change it so that instead of new images fading in from the background color, they fade from image to image. To that end, I have created another instance of the image mc the same as "picture" but called "bg_picture". I have placed it in the same layer as picture, but sent it to the back so it would lie behind the main picture.

My thought was to load the current picture as a background picture before p got incremented (or decremented) and the new image fades in. That way, the fade will be from one image directly to the next. I have edited the code as follows:


Code:
function nextImage() {
if (p<(total-1)) {
bg_picture.loadMovie(image[p], 1); //added this line
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
}
}
}
When I test the flash file, the slideshow performs as expected except that when the new line is called, the image showing blinks out to the background color momentarily, then reappears before the new image fades in.

I thought it might be a question of the background image not being preloaded, so I tried the following code to force the background image to load before the transition starts. Unfortunately, there was no discernable difference in the display.


Code:
function nextImage() {
if (p<(total-1)) {
bg_picture._alpha = 0; //added code starts here
bg_picture.loadMovie(image[p], 1);
bg_filesize = bg_picture.getBytesTotal();
bg_loaded = bg_picture.getBytesLoaded();
if (bg_loaded == bg_filesize) {
bg_picture._alpha = 100; //added code ends here
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
}
} //added code
}
}
Does anyone have any idea what I can do to have this transition smoothly?

---

Help On "creating 3d Carousel" Tutorial
Hey guys!

This site is awesome! I am no AS expert, so I am learning (or at least trying to learn) a lot!

I´ve got some problems regarding the "creating a 3d carousel" tutorial. I would like it to be vertical, and I´ve managed it to do so. However, when I´ve rotated it, the balls are upscalling when they are through the middle-right section of the orbit. I can´t make it upscale when they are on the middle-left section of the orbit...

can you guys give me a hand?

Here is the code so far.

Code:

var numOfBalls:Number = 10;
var radiusX:Number = 150;
var radiusY:Number = 250;
var centerX:Number = Stage.width / 4;
var centerY:Number = Stage.height / 2;
var speed:Number = 0.05;

for(var i=0;i<numOfBalls;i++)
{
   var t = this.attachMovie("ball","b"+i,i+1);
   t.angle = i * ((Math.PI*2)/numOfBalls);
   t.onEnterFrame = mover;
}

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

this.onMouseMove = function()
{
   speed = (this._ymouse-centerY)/1500;
}


Thanks in advance!!!

---

Tutorial For Image Gallery
Hi,

Anyone knows a good tutorial of how I can achieve a gallery looking like this:
http://www.jorgealcaide.com/
http://www.jorgealcaide.com/

I guess is based on XML. I tried really hard to work it out and I can't figure how the images grow and then when you click them they dissapear back to the menu.

Thank you very much
Nicolae

---

Looking For An Image Scrolling Tutorial...
Hi Guys,

I'm looking for an image scrolling tutorial controllable by buttons. What I need is a scroller where I can put a bunch of images and be able to scroll down or across by hitting a button. Should be everywhere but I can't seem to find one on the web.

Thank you,

yoshy357

---