Reload this Page Horizontal Scroll Class for Picture With Fade In and Fade Out

[reversehalo]

I located the following Actionscript 3.0 Class which performs the task of horizontally scrolling a picture in a continuous loop. Once it reaches the end of the picture, it then immediately starts over from the beginning of the picture. I am interested in making it so the picture fades in, scroll horizontally and then when it reachs the end of the picture, it fades out... It would then fade back in after a period of time and begin the process again of scrolling horizontally... Continuous loop. Can you please help me with adding those features to this Actionscript 3.0 Class? I would greatly appreciate it if you could directly augment the following code to in order to achieve this objective. I thank you very, very much.




//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// CORE FUNCTIONS
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

public function init():void {
panorama.graphics.beginFill(0x000000); // you can set background color per example if you work with transparent png or swf
panorama.graphics.drawRect(0, 0, 600, 500); // you set the width and height of the final panorama clip, the height should be the same as your image, and the width should be < than your full image
panorama.graphics.endFill(); // we're done with creating our panorama mc holder
panoramask.graphics.beginFill(0x000000); // we create a mask so that our panorama won't scroll outside of the screen
panoramask.graphics.drawRect(0, 0, panorama.width, panorama.height); // we give it the same dimensions than our panorama MC
panoramask.graphics.endFill(); // and we're done too
addChild(panorama); // we display the panorama image container
addChild(panoramask); // and above it, we display the mask
panorama.mask = panoramask; // we apply our mask to the panorama MC
}


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// PANORAMA ELEMENTS LOADING
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

public function createPanorama():void {
var url:String = "images/panoramic_img.jpg"; // here you set the path of the panorama img or swf you want to load
var urlReq:URLRequest = new URLRequest(url);
ldr1.x = -295;
ldr1.y = -150;
ldr1.load(urlReq); // we load our panorama file in the first loader
ldr2.load(urlReq); // we load it again in another one to create the infinite loop effect
ldr2.x = ldr1.width; // we set our second loader (ldr2) at the right of our first loader (ldr1)
ldr2.y = ldr1.y; // and we align it at the same y position
panorama.addChild(ldr1); // we add them one after one in our panorama MC
panorama.addChild(ldr2);
addEventListener(Event.ENTER_FRAME, scrolling); // we call the enterframe function depending on the frameRate defined in .fla
}


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ENTER FRAME SCROLLING FUNCTION
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

public function scrolling(ev:Event):void {

ldr1.x -= speed; // as the scroll is automatic at a constant speed, simply increase the speed var above in the script it to fasten the scroll.
// this function will be executed x times per second depending on the frameRate of your project

if (ldr1.x > panoramask.x) { //if ldr1 start to scroll from left to right, we must add our ldr2 at the left of ldr1 to give an endless look
ldr2.x = ldr1.x-ldr2.width; // so we stick it to the ldr1.x position minus it's own size, otherwise they would be one over another
}
else {
ldr2.x = ldr1.x+ldr2.width; // otherwise the ldr2 can stay at the right of our ldr1 panorama loader
}

if (ldr1.x < panoramask.x-ldr1.width) { // if ldr1 is too far at left to be seen in our panorama mask zone, then
ldr1.x = ldr2.x+ldr1.width; // it's time to add it at the right of our ldr2
}

if (ldr1.x > panoramask.width) { // if ldr1 reached the end of our mask's width, then we stick it again at the left of our ldr2 that is currently seen
ldr1.x = ldr2.x-ldr1.width;
}
}

}
}

[reversehalo]

So I've been able to get ldr1 to Fade In but I can't figure out how to make it Fade Out. I also need ldr2 to do the same:

package classes {

import flash.display.*; // we import all the flash internal classes we need for this script to work
import flash.events.*;
import flash.geom.Matrix;
import flash.net.URLRequest;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.geom.ColorTransform;
import flash.geom.Matrix;

//////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////
// DEFINITION
//////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////

public class virtualtour extends MovieClip {

public var speed:Number = 6; // you define the speed of the scroll. Higher values = higher speed

public var panorama:MovieClip = new MovieClip(); // we create a MC that will hold our panorama images

public var panoramask:MovieClip = new MovieClip(); // we create a mask MC that will avoid our wider panorama to be seen outside of the desired zone
public var ldr1:Loader = new Loader(); // we initiate the loader of our images, two loaders of the same image
public var ldr2:Loader = new Loader(); // because we will need to put them side by side to give this continuous looping effect

public function virtualtour() {
init(); // we launch the function that handles the panorama holder mc and the mask mc creation, and we add listeners for the mouse
createPanorama(); // once it's done we load the panorama image and start to scroll it
}

//////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////
// CORE FUNCTIONS
//////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////

public function init():void {
panorama.graphics.beginFill(0x000000); // you can set background color per example if you work with transparent png or swf
panorama.graphics.drawRect(0, 0, 800, 600); // you set the width and height of the final panorama clip, the height should be the same as your image, and the width should be < than your full image
panorama.graphics.endFill(); // we're done with creating our panorama mc holder
panoramask.graphics.beginFill(0x000000); // we create a mask so that our panorama won't scroll outside of the screen
panoramask.graphics.drawRect(0, 0, panorama.width, panorama.height); // we give it the same dimensions than our panorama MC
panoramask.graphics.endFill(); // and we're done too
addChild(panorama); // we display the panorama image container
addChild(panoramask); // and above it, we display the mask
panorama.mask = panoramask; // we apply our mask to the panorama MC
}


//////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////
// PANORAMA ELEMENTS LOADING
//////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////

public function createPanorama():void {
var url:String = "images/virtualtour.jpg"; // here you set the path of the panorama img or swf you want to load
var urlReq:URLRequest = new URLRequest(url);
ldr1.x = 0;
ldr1.y = 0;
ldr1.alpha = 0;

ldr1.load(urlReq); // we load our panorama file in the first loader
ldr2.load(urlReq); // we load it again in another one to create the infinite loop effect

ldr2.x = ldr1.width; // we set our second loader (ldr2) at the right of our first loader (ldr1)
ldr2.y = ldr1.y; // and we align it at the same y position

panorama.addChild(ldr1); // we add them one after one in our panorama MC
panorama.addChild(ldr2);

addEventListener(Event.ENTER_FRAME, scrolling); // we call the enterframe function depending on the frameRate defined in .fla
}

//////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////
// ENTER FRAME SCROLLING FUNCTION
//////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////

public function scrolling(ev:Event):void {

ldr1.alpha += .02;
// ldr1.width is the width of the picture

var ldr1end = (ldr1.width*.95)
// trace(ldr1end)

ldr1.x -= speed;

// trace (ldr1.x)

if (ldr1.x > panoramask.x) {
ldr2.x = ldr1.x-ldr2.width;
ldr1.alpha += .02;
// fades in ldr1
}
else {
ldr2.x = ldr1.x+ldr2.width;
}

if (ldr1.x < panoramask.x-ldr1.width) {
ldr1.x = ldr2.x+ldr1.width;
}

if (ldr1.x > panoramask.width) {
ldr1.x = ldr2.x-ldr1.width;
ldr1.alpha = 0;
// scrolls again
// we set ldr1.alpha to 0 in preparation for the fade in of ldr1
// step1 does not kick in until we have reached the end of ldr2
}
}

}
}

[reversehalo]

The following Actionscript loads an XML file. Using the XML file, it loads an image - fades in the image - pans the image - and then fades out. I have then attempted to make a loop which loads the next image from the XML file and perform the same series of tweens. It would then load the next image, infinite loop. It appears that instead of loading each image one at a time, it is overlapping the mask with all images in the XML file. I then only see the last image in the XML file being tweened on the stage/mask. I do not believe that I can use a Timer to time the loading of each image. This is because the width of each image will be different so the duration of the pan from one loaded image to the next will be different. I believe that I need to use onMotionFinish in some manner after the image Fades Out in order to move to load the next image - but I can't seem to identify how to integrate that within the loop. Most likely my loop is not written correctly. If you could please help me, I would greatly appreciate it. Thank you very much.


import flash.display.*;
import flash.events.*;
import flash.utils.*;
import flash.net.*;
import fl.transitions.*;
import fl.transitions.easing.*;

var fadeInDur:Number = 2;
var panDur:Number = 30; // the higher the number, the slower the pan
var fadeOutDur:Number = 2;
var pauseDur:Number = 0;
var fadeInTween:Tween;
var panTween:Tween;
var fadeOutTween:Tween;
var pauseTimer:Timer = new Timer( pauseDur * 1000 );
var loader:Loader = new Loader();

var myLoader:URLLoader = new URLLoader();
var xmlList:XMLList;
var totalThumbs:Number;
var i:int

var myXML:XML;

// pass the path to the xml, and the function to execute once it's loaded
function loadXML (path:String, nextFunc:Function):void
{
var loader:URLLoader = new URLLoader();
loader.addEventListener (Event.COMPLETE, nextFunc);
loader.load (new URLRequest(path));
}

// the COMPLETE function that executes when the file is laoded
function myXMLLoaded (evt:Event):void{
myXML = new XML(evt.target.data);
xmlList = myXML.children();
var i = 0;

while (i < xmlList.length()){
FadePanFade()
trace(i)
i++; // same as i = i + 1
}
}

// call the file to load and the COMPLETE function for when its done
loadXML ("test.xml", myXMLLoaded);

function FadePanFade():void {

loader.contentLoaderInfo.addEventListener( Event.COMPLETE, onLoaderComplete );
loader.load( new URLRequest(xmlList[i].filename) );
addChild( loader );

// fades in picture
fadeInTween = new Tween( loader, "alpha", Regular.easeInOut, 0, 1, fadeInDur, true );
fadeInTween.stop();
fadeInTween.addEventListener( TweenEvent.MOTION_FINISH, onFadeInFinish );

// pans picture
panTween = new Tween( loader, "x", Regular.easeInOut, 0, panMask.x, panDur, true );
panTween.stop();
panTween.addEventListener( TweenEvent.MOTION_FINISH, onPanFinish );

// fades out picture
fadeOutTween = new Tween( loader, "alpha", Regular.easeInOut, 1, 0, fadeOutDur, true );
fadeOutTween.stop();
fadeOutTween.addEventListener( TweenEvent.MOTION_FINISH, onFadeOutFinish );

// pauses for a moment
pauseTimer.addEventListener( TimerEvent.TIMER, onPauseTimer );

}

function onLoaderComplete( e:Event ):void {
panTween.finish = panMask.width + panMask.x - loader.width;
onPlay();
}

function onPlay():void {
loader.x = panTween.begin;
fadeInTween.start();
}

function onFadeInFinish( e:Event ):void {
panTween.start();
}

function onPanFinish( e:Event ):void {
fadeOutTween.start();
}

function onFadeOutFinish( e:Event ):void {
pauseTimer.start();
}

function onPauseTimer( e:Event ):void {
pauseTimer.reset();
onPlay();
}

[reversehalo]

Any help here?