I am following the tutorials on gotoLearn.com and I need some help loading a large image and transitioning. In the last tutorial I followed I got the small thumb nail image in the carousel to slide off to the left and some text to appear. But now when the thumb nail image slides over I need a larger image to appear. Has anyone worked on this tutorial and might be able to help?
Ok, here is my code. Maybe I’ll get a better responce to my query. I set up a movieClip called bigImage and inside of that is a clip called bigI. The image isn’t loading. I have checked my xml for any spelling and path issues and don’t have any. I am not sure why the image is not showing up. Maybe this thread belongs in the Actionscript 2.0 forum.
import mx.utils.Delegate;
import mx.transitions.Tween;
import mx.transitions.easing.*;
var numOfItems:Number;
// set carousel radius
var radiusX:Number = 250;
var radiusY:Number = 75;
// set carousel center point
var centerX:Number = Stage.width/2;
var centerY:Number = Stage.height/2;
// set carousel turning speed lower number slower; higher number faster
var speed:Number = 0.02;
var perspective:Number = 10;
// set home to root time line
var home:MovieClip = this;
theText._alpha = 0;
var tooltip:MovieClip = this.attachMovie("tooltip", "tooltip", 10000);
tooltip._alpha = 0;
var bigImage:MovieClip = this.attachMovie("bigImage", "bigImage", 20000);
bigImage._alpha = 100;
bigImage._x =120;
bigImage._y =50
// set up xml file
var xml:XML = new XML();
xml.ignoreWhite = true;
// dynamically attach images from xml file
xml.onLoad = function() {
var nodes = this.firstChild.childNodes;
numOfItems = nodes.length;
//attach items to stage
for (var i = 0; i<numOfItems; i++) {
var t = home.attachMovie("item", "item"+i, i+1);
//equally space items around carousel
t.angle = i*((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
// set tooltip text to xml file
t.toolText = nodes*.attributes.tooltip;
t.content = nodes*.attributes.content;
//set big image to xml file
t.bigImage.bigI.loadMovie(nodes*.attributes.bigImage);
// load images from xml file
t.icon.inner.loadMovie(nodes*.attributes.image);
// load image into reflection
t.ref.inner.loadMovie(nodes*.attributes.image);
// set onRollover event
t.icon.onRollOver = over;
t.icon.onRollOut = out;
t.icon.onRelease = released;
}
};
function over() {
home.tooltip.tipText.text = this._parent.toolText;
// set tool tip location
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() {
home.tooltip._alpha = 0;
for (var i = 0; i<numOfItems; i++) {
var t:MovieClip = home["item"+i];
// get current location of icon
t.xPos = t._x;
t.yPos = t._y;
t.theScale = t._xscale;
// delete onRollover functions from firing
delete t.icon.onRollOver;
delete t.icon.onRollOut;
delete t.icon.onRelease;
// delete carousel mover so the carousel doesn't move
delete t.onEnterFrame;
// check which icon was clicked
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, 60, 1, true);
var tw4:Tween = new Tween(t, "_y", Strong.easeOut, t._y, 110, 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];
// check which icon was clicked
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() {
// set x and y positions of the items
this._x = Math.cos(this.angle)*radiusX+centerX;
this._y = Math.sin(this.angle)*radiusY+centerY;
// set scale for item in background
var s:Number = (this._y-perspective)/(centerY+radiusY-perspective);
// scale properties go from 0 to 100
this._xscale = this._yscale=s*100;
// add speed to angle
this.angle += this._parent.speed;
// set depth of items
this.swapDepths(Math.round(this._xscale)+100);
}
// set mouse control
this.onMouseMove = function() {
speed = (this._xmouse-centerX)/10000;
};
I have worked with this example, I’m working atm
where are you loading in the big image? it should be easy to achieve
THanks
I think I am loading it here but this might not be the correct place.
//set big image to xml file
t.bigImage.bigI.loadMovie(nodes*.attributes.bigImage);
