Tuesday, March 30, 2010

Time To Scroll That Thing!

Hello everybody. I've been working on an event scroll using XML and AS 3.0 and everything works fine now except I cannot get it to scroll vertically the way I want it to. I gave it a try based on a horizontal scroll tutorial but it didn't work for some reason... anyway, here's the code maybe someone could fix it, the code that is supposed to scroll the events is at the bottom...

var myXML:XML;

var req:URLRequest=new URLRequest(''events.xml'');
var ldr:URLLoader = new URLLoader();
ldr.addEventListener(Event.COMPLETE, processXML);
ldr.load(req);

function processXML(e:Event):void {
myXML=new XML(e.target.data);
buildEvents(myXML.EVENT);
}

var eventScroll:MovieClip = new MovieClip();
var padding:Number=30;
var speed:Number;
this.addChild(eventScroll);
eventScroll.x=eventScroll.y=padding;

function buildEvents(evnts:XMLList):void {
for (var i:uint = 0; i %26lt;evnts.length(); i++) {
?var eventData:MovieClip = new MovieClip();
?// in eventData.y, 200 is the height of the image
?eventData.y = (200 + padding) * i;
?eventData.itemNum=i;
?eventData.title=evnts[i].TITLE;
?eventData.date=evnts[i].DATE;
?eventData.thumb=evnts[i].THUMB;
?eventData.info=evnts[i].INFO;

?// thumb container
?var thisThumb:Sprite = new Sprite();
?var ldr:Loader = new Loader();
?var req:URLRequest=new URLRequest(eventData.thumb);
?ldr.load(req);
?thisThumb.addChild(ldr);
?eventData.addChild(thisThumb);
?eventScroll.addChild(eventData);

?//light grey background
?var backF:Shape = new Shape();
?backF.graphics.beginFill(0xCCCCCC);
?backF.graphics.drawRect(thisThumb.x, eventData.y, 470, 200);
?eventScroll.addChildAt(backF, 0);

?// Creating and loading the text fields
?var titleF:TextField = new TextField();
?titleF.text=eventData.title;
?titleF.x=250;
?titleF.y = padding + (200 + padding) * i;
?addChild(titleF);
?eventScroll.addChild(titleF);

?var dateF:TextField = new TextField();
?dateF.text=eventData.date;
?dateF.x=250;
?dateF.y=titleF.y+padding;
?addChild(dateF);
?eventScroll.addChild(dateF);

?var infoF:TextField = new TextField();
?infoF.text=eventData.info;
?infoF.x=250;
?infoF.y=dateF.y+padding;
?infoF.multiline=true;
?infoF.wordWrap = true;
?infoF.width=200;
?infoF.height=100;
?addChild(infoF);
?eventScroll.addChild(infoF);
}
}

// Scrolling the whole thing
eventScroll.addEventListener(Event.ENTER_FRAME, moveScrollerEvents);

function moveScrollerEvents(e:Event):void {
if (mouseX%26gt;eventScroll.x %26amp;%26amp; mouseX%26lt;eventScroll.x+eventScroll.width) {
?if (mouseY%26lt;stage.stageHeight/2-padding*2 %26amp;%26amp; mouseY%26gt;0) {
speed = -(mouseY - (stage.stageHeight/2 - padding*2)) / 8;
?} else if (mouseY %26gt; stage.stageHeight/2 + padding*2 %26amp;%26amp; mouseY %26lt; stage.stageHeight) {
speed = -(mouseY - (stage.stageHeight/2 + padding*2)) / 8;
?} else {
speed=0;
?}
?eventScroll.y+=speed;

?//scroller limits
?if (eventScroll.y%26gt;- eventScroll.height+stage.stageHeight-padding) {
eventScroll.y=- eventScroll.height+stage.stageHeight-padding;
?} else if (eventScroll.y %26lt; padding) {
eventScroll.y = padding;
?}
}
}


Time To Scroll That Thing!

Ok I detected the problem and it was in the scroller limits... now it's working fine... anyone who wants to reuse/edit this application feel free to do it, it is working fine now... you only need to customize it to your liking (I suggest decreasing the size of the thumb images and formatting the text, which I will do now). here's the final code:

Actionscript 3.0 Code:

var myXML:XML;

var req:URLRequest=new URLRequest(''events.xml'');

var ldr:URLLoader = new URLLoader();

ldr.addEventListener(Event.COMPLETE, processXML);

ldr.load(req);

function processXML(e:Event):void {

myXML=new XML(e.target.data);

buildEvents(myXML.EVENT);

}

var eventScroll:MovieClip = new MovieClip();

var padding:Number=30;

var speed:Number;

this.addChild(eventScroll);

eventScroll.x=eventScroll.y=padding;

function buildEvents(evnts:XMLList):void {

for (var i:uint = 0; i %26lt;evnts.length(); i++) {

var eventData:MovieClip = new MovieClip();

// in eventData.y, 200 is the height of the image

eventData.y = (200 + padding) * i;

eventData.itemNum=i;

eventData.title=evnts[i].TITLE;

eventData.date=evnts[i].DATE;

eventData.thumb=evnts[i].THUMB;

eventData.info=evnts[i].INFO;

// thumb container

var thisThumb:Sprite = new Sprite();

var ldr:Loader = new Loader();

var req:URLRequest=new URLRequest(eventData.thumb);

ldr.load(req);

thisThumb.addChild(ldr);

eventData.addChild(thisThumb);

eventScroll.addChild(eventData);

//light grey background

var backF:Shape = new Shape();

backF.graphics.beginFill(0xCCCCCC);

backF.graphics.drawRect(thisThumb.x, eventData.y, 470, 200);

eventScroll.addChildAt(backF, 0);

// Creating and loading the text fields

var titleF:TextField = new TextField();

titleF.text=eventData.title;

titleF.x=250;

titleF.y = padding + (200 + padding) * i;

addChild(titleF);

eventScroll.addChild(titleF);

var dateF:TextField = new TextField();

dateF.text=eventData.date;

dateF.x=250;

dateF.y=titleF.y+padding;

addChild(dateF);

eventScroll.addChild(dateF);

var infoF:TextField = new TextField();

infoF.text=eventData.info;

infoF.x=250;

infoF.y=dateF.y+padding;

infoF.multiline=true;

infoF.wordWrap = true;

infoF.width=200;

infoF.height=100;

addChild(infoF);

eventScroll.addChild(infoF);

}

eventScroll.addEventListener(Event.ENTER_FRAME, moveScrollerEvents);

}

// Scrolling the whole thing

function moveScrollerEvents(e:Event):void {

if (mouseX%26gt;eventScroll.x%26amp;%26amp;mouseX%26lt;eventScroll.x+eventScroll.width) {

if (mouseY%26lt;stage.stageHeight/2-padding*2%26amp;%26amp;mouseY%26gt;0) {

%26amp;n bsp; speed = -(mouseY - (stage.stageHeight/2 - padding*2)) / 2.5;

} else if (mouseY %26gt; stage.stageHeight/2 + padding*2 %26amp;%26amp; mouseY %26lt; stage.stageHeight) {

%26amp;n bsp; speed = -(mouseY - (stage.stageHeight/2 + padding*2)) / 2.5;

} else {

%26amp;n bsp; speed=0;

}

eventScroll.y+=speed;

//scroller limits

if (eventScroll.y%26lt; -eventScroll.height+stage.stageHeight-padding) {

%26amp;n bsp; eventScroll.y= -eventScroll.height+stage.stageHeight-padding;

} else if (eventScroll.y %26gt; padding) {

%26amp;n bsp; eventScroll.y=padding;

}

}

}

No comments:

Post a Comment