Hi guys,
I have a simple slideshow which loads images and text from xml. When you click the arrows the thumbnails scroll to the left or right accordingly.
I have also added some small round images to the stage depending on the xmlList.length. In this case four.
What I want to do is highlight which ‘page’ the user is viewing by making the corresponding round icon glow.
I have a count which records the current page and I have managed to give the round icons individual names however I cannot seem to affect these individually. Is there a way I can call the sprites by name instead, then affect them?
I’ll include the code here below.
Thanks,
Joe Gardner
/* Commercepromote.com - Index.as - Index Gardner 2009 /
package
{
import flash.display.Sprite;
import flash.display.Loader;
import flash.display.DisplayObjectContainer;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import fl.transitions.Tween;
import fl.transitions.easing.;
import flash.filters.DropShadowFilter;
import flash.filters.GlowFilter;
import flash.utils.Timer;
// import custom classes
import Loading.LoadImage;
import Text.SimpleText;
import Text.XMLText;
import Text.XMLTitleText;
import Text.XMLSubTitleText;
// import tweenmax class
import gs.*;
import gs.easing.*;
public class Index extends Sprite
{
// define variables
private var dropShadow:DropShadowFilter = new DropShadowFilter();
private var dropShadow2:DropShadowFilter = new DropShadowFilter();
private var origY:Number;
private var origX:Number;
private var yEnd:Number;
private var mainTxt:Sprite;
private var titleTxt:Sprite;
private var subTitleTxt:Sprite;
private var imgName:String;
private var xmlFile:String = "XML/Features.xml";
private var section:String = "index";
private var blackBar:Sprite = new BlackBarMc();
private var maskMc:Sprite = new MaskMc();
private var leftArrow:Sprite = new LeftArrowMc();
private var rightArrow:Sprite = new RightArrowMc();
var count:Number = 1;
public function Index()
{
// load all the images
loadImages();
// load the main text
loadMainText("Feature1");
// Load the title text
loadTitleText();
// Load the sub title text
loadSubTitleText("Feature1");
function loadImages():void
{
// load the xml file
var xmlRequest:URLRequest=new URLRequest(xmlFile);
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(xmlRequest);
// listen for when xml file is loaded
xmlLoader.addEventListener(Event.COMPLETE, onComplete);
// when xml file is loaded
function onComplete(e:Event):void
{
// declare new xml variable containing the loaded xml data
var xml:XML=XML(e.target.data);
// declare new xml list variable
var xmlList:XMLList=new XMLList(xml.section.(@title==section).feature);
// declare empty sprite to hold the buttons and position
var container:Sprite = new Sprite();
addChildAt(container,0);
container.y=0;
container.x=0;
//add the black bar over the images
addChildAt(blackBar,1);
blackBar.mouseChildren = false;
blackBar.mouseEnabled = false;
blackBar.buttonMode = false;
// add a mask to round the edges of the content
addChildAt(maskMc,3);
container.mask = maskMc;
// add the arrows to the stage
addChild(leftArrow);
leftArrow.buttonMode = true;
leftArrow.y=120;
leftArrow.name = "left";
addChild(rightArrow);
rightArrow.buttonMode = true;
rightArrow.x=865;
rightArrow.y=120;
rightArrow.name = "right";
// run through the xml list creating thumbnails based on the data pulled from the xml
for (var i:uint = 0; i<xmlList.length(); i++)
{
// declare variables based on xml data
var imgName:String = (xmlList*.image.@name);
var thumb:String = (xmlList*.image);
// create new thumbnail using the LoadImage custom class and pass in the variables from above
var img=new LoadImage(thumb,imgName);
container.addChild(img);
// position the thumbnails
img.x+=i*900;
img.y=0;
origX=img.x;
origY=img.y;
img.rotationY= 0;
img.rotationZ= 0;
img.rotationX= 0;
var buttons = new Sprite();
addChild(buttons);
buttons.x = 855;
var round:Sprite = new RoundBtnMc();
buttons.addChild(round);
round.x-=i*22;
round.y = 25;
round.name = "round"+i;
round.buttonMode = true;
// add event listeners to the round buttons
round.addEventListener(Event.ENTER_FRAME, onEnter);
function onEnter(e:Event)
{
}
}
// add event listeners to the thumbnails
container.addEventListener(MouseEvent.MOUSE_OUT, onOut);
container.addEventListener(MouseEvent.CLICK, onClick);
// on thumnail out
function onOut(e:MouseEvent):void
{
// remove the glow on the thumbnail
e.target.filters=null;
yEnd=-20;
// move the thumbnail back down
TweenMax.to(e.target, 0.3, {y:container.y, ease:Regular.easeOut});
}
// on thumnail click
function onClick(e:MouseEvent):void
{
// remove the current text and replace with the new one
removeChild(mainTxt);
loadMainText(e.target.name);// load new text according to the feature name
}
// add event listeners to the arrows
leftArrow.addEventListener(MouseEvent.MOUSE_OVER, onArrowOver);
leftArrow.addEventListener(MouseEvent.MOUSE_OUT, onArrowOut);
leftArrow.addEventListener(MouseEvent.CLICK, onArrowClick);
rightArrow.addEventListener(MouseEvent.MOUSE_OVER, onArrowOver);
rightArrow.addEventListener(MouseEvent.MOUSE_OUT, onArrowOut);
rightArrow.addEventListener(MouseEvent.CLICK, onArrowClick);
// on button over
function onArrowOver(e:MouseEvent):void
{
e.target.alpha = 0.5;
}
// on button out
function onArrowOut(e:MouseEvent):void
{
e.target.alpha = 1;
}
// on button click
function onArrowClick(e:MouseEvent):void
{
if (e.target.name == "left")
{
inActive();
if (count<2)
{
count=1;
}
if (count>=2)
{
count--;
}
if (container.x < 0)
{
// bring the thumbnails in from the right
var containerTween1:Tween=new Tween(container,"x",Regular.easeOut,container.x,container.x+900,1,true);
var timer1:Timer = new Timer(1,500);
timer1.start();
timer1.addEventListener(TimerEvent.TIMER_COMPLETE, onTimer1);
function onTimer1(evt:TimerEvent):void
{
active();
timer1.stop();
}
}
if (container.x == 0)
{
active();
}
}
if (e.target.name == "right")
{
inActive();
if (count>3)
{
count=4;
}
if (count<=3)
{
count++;
}
if (container.x > -2700)
{
// bring the thumbnails in from the right
var containerTween2:Tween=new Tween(container,"x",Regular.easeOut,container.x,container.x-900,1,true);
var timer2:Timer = new Timer(1,500);
timer2.start();
timer2.addEventListener(TimerEvent.TIMER_COMPLETE, onTimer2);
function onTimer2(evt:TimerEvent):void
{
active();
timer2.stop();
}
}
if (container.x == -2700)
{
active();
}
}
function active():void
{
leftArrow.mouseEnabled = true;
rightArrow.mouseEnabled = true;
}
function inActive():void
{
leftArrow.mouseEnabled = false;
rightArrow.mouseEnabled = false;
}
// remove the current text and replace with the new one
removeChild(mainTxt);
// remove the current sub title text and replace with the new one
removeChild(subTitleTxt);
var current = "Feature"+count;
loadMainText(current);// load new text according to the feature name
loadSubTitleText(current);// load new text according to the feature name
}
}
}
function loadMainText(feature:String):void
{
// add some text using the custom class XMLText passing in the feature and the path to the xml file
mainTxt=new XMLText(section,feature,xmlFile,false);// false = regular, true = bold
addChild(mainTxt);
}
function loadTitleText():void
{
// add some text using the custom class XMLText passing in the feature and the path to the xml file
titleTxt=new XMLTitleText(section,xmlFile,false);// false = regular, true = bold
addChild(titleTxt);
}
function loadSubTitleText(feature:String):void
{
// add some text using the custom class XMLText passing in the feature and the path to the xml file
subTitleTxt=new XMLSubTitleText(section,feature,xmlFile,true);// false = regular, true = bold
addChild(subTitleTxt);
}
}
}
}
