Trouble with TIMER_EVENTS

[joegardner]

Hi everyone,

can anyone please help me with this problem I've been having for the past few months, that's right months!

I'll briefly outline what I want my application to do and then explain the problem.

Idea - I'm trying to create a portfolio site where users can change the era. When they click on 1923 for example the current era should move out and then the new era should move in.

Problem - Now I have all my images in seperate folders and all called the same thing. I have a different as file for each image and it's tween in and out.

I have a few problems with this.

1. Sometimes not all the images load.
2. I can't use my navigation more than once.
3. The loading is sometimes all over the place.

Here's the code for the main.as

// Main.as - Joe Gardner
package {

import flash.display.*;
import flash.events.*;

import flash.display.MovieClip;
import flash.display.Stage;
import flash.display.*;
import flash.events.*;
import flash.events.EventDispatcher;
import flash.utils.*;
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.media.*;
import flash.net.*;
import flash.net.URLRequest;

public class Main extends Sprite {

public var folder;
public var back;
public var artwork;
public var cigs;
public var eras;
public var era1952;
public var era1967;

public var timer:Timer;

public var then;
public var now;

public function Main():void {

defaultEra();
era1952.addEventListener(MouseEvent.CLICK, fifties);
era1967.addEventListener(MouseEvent.CLICK, sixties);
}
function defaultEra():void {
folder = "sixties";
era1952 = new Era1952(folder);
addChildAt(era1952, 0);
era1967 = new Era1967(folder);
addChildAt(era1967, 0);
cigs = new Cigs(folder);
addChildAt(cigs, 0);
artwork = new Artwork(folder);
addChildAt(artwork, 0);
back = new AddBack(folder);
addChildAt(back, 0);
}
function fifties(evt:MouseEvent):void {
folder = "fifties";
everythingOut();
everythingIn();
}
function sixties(evt:MouseEvent):void {
folder = "sixties";
everythingOut();
everythingIn();
}
function everythingOut():void {

timer = new Timer(2000, 1);
timer.start();

timer.addEventListener(TimerEvent.TIMER, timerHandler);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, completeHandler);

function timerHandler(e:TimerEvent):void {
era1952.era1952Out();
era1967.era1967Out();
back.backOut();
cigs.cigsOut();
artwork.artworkOut();
}
function completeHandler(e:TimerEvent):void {
removeChild(era1952);
removeChild(era1967);
removeChild(back);
removeChild(cigs);
removeChild(artwork);
}

}
function everythingIn():void {
timer = new Timer(4000, 1);
timer.start();

timer.addEventListener(TimerEvent.TIMER, timerHandler);

function timerHandler(e:TimerEvent):void {
era1952 = new Era1952(folder);
addChildAt(era1952, 0);
era1967 = new Era1967(folder);
addChildAt(era1967, 0);
cigs = new Cigs(folder);
addChildAt(cigs, 0);
artwork = new Artwork(folder);
addChildAt(artwork, 0);
back = new AddBack(folder);
addChildAt(back, 0);
}

}
}
}


and here's an example .as file, this one being Artwork..

package {

// import all the necessary packages
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;

import flash.events.*;
import flash.events.TimerEvent;

import flash.utils.Timer;
import flash.net.URLRequest;

import fl.transitions.*;
import fl.transitions.easing.*;

public class Artwork extends Sprite {

public var yBottom=1280;
public var timer:Timer=new Timer(500,1);
public var loader:Loader=new Loader;
public var bitMap;

public function Artwork(folderName:String):void {
loader.contentLoaderInfo.addEventListener(Event.CO MPLETE,done);
loader.load(new URLRequest(folderName + "/artwork.png"));

function done(e:Event):void {
bitMap = Bitmap(loader.content);//get the loaders content as a bitmap
bitMap.smoothing = true;//turn on smoothing

addChild(loader);
loader.alpha=0;
loader.y=200;
loader.x=1280;
loader.rotation += 2;
artworkIn();
}
}
public function artworkIn():void {
var artworkInMoveTween:Tween=new Tween(loader,"x",Regular.easeOut,900,650,2,true);
var artworkInAlphaTween:Tween=new Tween(loader,"alpha",Regular.easeOut,0,1,2,true);
trace ("this is the artwork in");
}

public function artworkOut():void {
var artworkOutMoveTween:Tween=new Tween(loader,"x",Regular.easeOut,650,900,2,true);
var artworkOutAlphaTween:Tween=new Tween(loader,"alpha",Regular.easeOut,1,0,2,true);
trace ("this is the artwork out");
}
}
}

If anyone could give me either specific help on this or just some general advice on how to achieve what I'm after then I would appreciate it very much.

If you would like to look at the file online then please go to http://www.joegardner.co.uk/newsite/main.html

and if you'd like to download any of the files then please do so.


Thanks in advance guys!

[theCodeBot]

A different as file for every single image's tweens? Scary. I'd have one XML file in each era's folder that a class can load up and separate each element into an instance of a class that has the loader info about each image, the code would be less bulky and save a good deal of load time / download time. This will also help to solve your "loading is all over the place" issue.

Perhaps, in the main class, set a variable for the start tween and one for the end tween that are auto-replaced depending on what distance needs to be traveled between the images. That way you won't need to have separate tweens per image, saving still more code. Then it would need only execute the auto-generated tweens.

All in all, doing that should make fixing your current errors just kind of happen on it's own :)

[joegardner]

Hey thanks for getting back to me.

I'm sorry I'm so thick (just a beginner you see) but I don't really understand your feedback.

If it wouldn't be too much trouble would you mind posting a little example code please?

I haven't actually dealt with XML yet.

Also, do you think your suggestions will solve the problem of things not displaying at all?


Thanks again and sorry to be so dumb,

Joe.


A different as file for every single image's tweens? Scary. I'd have one XML file in each era's folder that a class can load up and separate each element into an instance of a class that has the loader info about each image, the code would be less bulky and save a good deal of load time / download time. This will also help to solve your "loading is all over the place" issue.

Perhaps, in the main class, set a variable for the start tween and one for the end tween that are auto-replaced depending on what distance needs to be traveled between the images. That way you won't need to have separate tweens per image, saving still more code. Then it would need only execute the auto-generated tweens.

All in all, doing that should make fixing your current errors just kind of happen on it's own :)

[joegardner]

oh hang on..do you mean have one tween class for example and then have seperate XML files for each image that has the tween start point and alpha qualities for example? I would then make variables in that tween class that took the values from the XML file?

Am I close?


A different as file for every single image's tweens? Scary. I'd have one XML file in each era's folder that a class can load up and separate each element into an instance of a class that has the loader info about each image, the code would be less bulky and save a good deal of load time / download time. This will also help to solve your "loading is all over the place" issue.

Perhaps, in the main class, set a variable for the start tween and one for the end tween that are auto-replaced depending on what distance needs to be traveled between the images. That way you won't need to have separate tweens per image, saving still more code. Then it would need only execute the auto-generated tweens.

All in all, doing that should make fixing your current errors just kind of happen on it's own :)

[joegardner]

Well if anyone's interested. I tried what theCodeBot said with XML files and although it admittedly gets rid of lots of repeated code I still have the same problems.

Put simply I am trying to remove the movie clips added to the stage and then upload new ones in their place.

If anyone can help at all I'd really appreciate it. Here's my newer code.


package
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.*;
import flash.net.*;
import flash.utils.*;

public class Main extends Sprite
{

public var image;
public var back;
public var loader;
public var cigs;
public var era1952;
public var era1967;
public var folder:String;
public var timer:Timer;
public var movie:MovieClip = new MovieClip;

public function Main()
{

defaultEra();

function defaultEra():void
{
folder = "sixties";
everythingIn();
}

function sixties(evt:MouseEvent):void
{
folder = "sixties";
everythingOut();
everythingIn();
}

function fifties(evt:MouseEvent):void
{
folder = "fifties";
everythingOut();
everythingIn();
}

function everythingIn():void
{
image = folder+"/era1967";
era1967 = new Image(image);
addChildAt(era1967,0);

image = folder+"/era1952";
era1952 = new Image(image);
addChildAt(era1952,0);

image = folder+"/cigs";
cigs = new Image(image);
addChildAt(cigs,0);

image = folder+"/background";
back = new Image(image);
addChildAt(back,0);
}

era1952.addEventListener(MouseEvent.CLICK, fifties);
era1967.addEventListener(MouseEvent.CLICK, sixties);

function everythingOut():void
{
removeChild(back);
removeChild(era1952);
removeChild(era1967);
removeChild(cigs);

}
}

}
}

and the image file which links to an XML file:


package
{
import flash.display.Sprite;
import flash.events.*;
import flash.net.*;
import flash.display.MovieClip;
import flash.display.Stage;
import flash.display.*;
import flash.events.*;
import flash.events.EventDispatcher;
import flash.utils.*;
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.media.*;
import flash.net.*;
import flash.net.URLRequest;

public class Image extends Sprite
{
public var alphaStart:Number;
public var alphaEnd:Number;
public var xStart:Number;
public var yStart:Number;
public var xEnd:Number;
public var yEnd:Number;
public var bitMap;

public function Image(image:String)
{
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onLoaded);

var xml:XML;
function onLoaded(e:Event):void
{
xml = new XML(e.target.data);

// make variables from the data in the xml file
var imageName = xml.image;

xStart = xml.xStart;
yStart = xml.yStart;
xEnd = xml.xEnd;
yEnd = xml.yEnd;
alphaEnd = xml.alphaEnd;
alphaStart = xml.alphaStart;
}

loader.load(new URLRequest(image+".xml"));

var loaderImage:Loader=new Loader;

loaderImage.contentLoaderInfo.addEventListener(Eve nt.COMPLETE, done);
loaderImage.load(new URLRequest(image+".png"));


function done(e:Event):void {
bitMap = Bitmap(loaderImage.content);//get the loaders content as a bitmap
bitMap.smoothing = true;//turn on smoothing

addChild(loaderImage);
imageIn();
loaderImage.x = xStart;
loaderImage.y = yStart;

}

function imageIn() {
var imageInMoveTween:Tween=new Tween(loaderImage,"y",Regular.easeOut,yStart,yEnd,2,true);
var imageInAlphaTween:Tween = new Tween(loaderImage, "alpha", Regular.easeOut, alphaStart, alphaEnd, 2, true);
}

function imageOut() {
var imageInMoveTween:Tween=new Tween(loaderImage,"y",Regular.easeOut,yEnd,yStart,2,true);
var imageOutAlphaTween:Tween = new Tween(loaderImage, "alpha", Regular.easeOut,alphaEnd,0,2, true);
removeChild(loaderImage);
}

}


}
}

[theCodeBot]

You won't need to keep any information about the tweens aside from that which your code will figure out automatically. To make it a little easier to understand for someone who's newer to actionscript, let's pretend your file hierarchy looks like this:


<directory>ProjectFolder
-<file>YourMovie.swf
-<directory>Era1900
-<file>filesInThisDirectory.xml
-<file>1901_some_Date.jpg
-<file>1902_some_Date.jpg
-<file>1994_some_Date.jpg
-<directory>Era2000
-<file>filesInThisDirectory.xml
-<file>2001_September.jpg
etc...

Let's just pretend that your project's folder looks something like that. Now, the filesInThisDirectory.xml file in the Era1900 folder would look like this:


<images>
<image date="Some Day, 1901" description="Some event">1901_some_Date.jpg</image>
<image date="Some Day, 1902" description="Some event">1902_some_Date.jpg</image>
<image date="Some Day, 1994" description="Some event">1994_some_Date.jpg</image>
</images>

Obviously, you'll be choosing how you want to organize that, but I'd go with something like that.

Then, in flash, you can load up the xml file:


//You want to load The Era of the 1900's
var UrlReq:URLRequest = new URLRequest("./Era1900/filesInThisDirectory.xml");
//That is a reference to the XML file I just put above.
var uload:URLLoader = new URLLoader();
//This will load the contents of the XML file.
uload.addEventListener(ProgressEvent.PROGRESS,upda teProgress);
//This sets it up to call the function "updateProgress" that will update the user with how much of the XML file is loaded up every time more of it is loaded.
uload.addEventListener(Event.COMPLETE,finishXMLLoa d);
//This sets it up to play around with the XML data once it's all nice and loaded up.
uload.load(UrlReq);
//start loading the XML file
function updateProgress(e:ProgressEvent) {
trace(uload.bytesLoaded/uload.bytesTotal);
//Traces percent loaded of the XML file.
}
function finishXMLLoad {
//In this function we'll play with the XML data.
}

If that makes sense.
the finishXMLLoad function will, then, read the contents of that XML file, and for every Image element is sees in the XML file, It'll store, basically, a variable, that holds a file Loader like the one that loaded the XML file, as well as the date and description of the event.

Then you will have some separate functionality that will read in the date and place a shrunken-down version of each image on the timeline, where it belongs.

When you click on any thumbnail, like you say, you want it to first zoom out of the current image you're viewing, and then zoom into the new. So, calculate out what tween you need to make to go back to the center of the timeline from where you are, then after that is done, figure out where it needs to go to get to the new one. I'm not going to paste code here, because your project is a little on the specific side of things, but that'd be a good way to do it.

[joegardner]

Thanks so much for your help.

I don't understand all of it so I'll pour over it in more detail a few times.

I was trying to keep everything off the timeline and specifically to external classes but I may have to give up that idea.

Thanks again,

Joe.

[theCodeBot]

No, no! Do NOT give up that idea! I only posted that as something basic (haha), putting it all in external, reusable, and frankly, easier to maintain, classes is the way to go whenever you can. I only use the timeline when It's a simple project (which you actually could consider this one to be, believe it or not...)

[joegardner]

Yeah? Ok thanks, I'll stick with the external classes then.

I'm a student you see and when I finish I'm desperately trying to get back to San Diego (where I spent my Intern year) so I figured as stunning portfolio would do the trick that proves I can handle AS3, trouble is I can't.

I know what you're saying about this being a simple project, I mean it should be shouldn't it? All I have are some images which I have loading fine and then I want to move them to the centre of the screen and then upon a mouse click move them out, then delete and new ones move in. That really is it. The problem seems to be that at times some images wont show or tweening will stop before it's supposed to. Now I read about issues with runtime and thought this may be the problem, or could it be something to do with deleting the clips at the same time as they are added.

Sorry to be so vague but this is killing me, I mean it should be simple right?

[joegardner]

Oh and considering there are four different eras all with different images pertaining to that era, would you still use the timeline?

[theCodeBot]

Oh and considering there are four different eras all with different images pertaining to that era, would you still use the timeline?
Well, at the very least, your image loading/thumbnail handling/xml management will definitely be external, but if you have artwork pertaining to the project, like the background of the timeline, then you would have your Document Class (or the timeline, both really will work in your case) do all the specifics, like "addEras('./eras/1800s','./eras/1900s','./eras/2000s');" and so forth.

In terms of the tweens flipping out on you, try to avoid the flash tween class. Either a.) (Sekasi will kill me if i don't mention this one) use Tweenlite, or b.) create a simple class designed to tween size and alpha and delete them at the end of the tween, etc., using Timers and listeners to tween it.

[joegardner]

Thanks,

I may try that actually (not using the tween class), that way I could use velocity etc to assure the objects move a certain distance over a certain time.

Thanks again. I'd say I'll let you know if it works but you must be sick of me by now,

Thanks again dude.

Joe.



Well, at the very least, your image loading/thumbnail handling/xml management will definitely be external, but if you have artwork pertaining to the project, like the background of the timeline, then you would have your Document Class (or the timeline, both really will work in your case) do all the specifics, like "addEras('./eras/1800s','./eras/1900s','./eras/2000s');" and so forth.

In terms of the tweens flipping out on you, try to avoid the flash tween class. Either a.) (Sekasi will kill me if i don't mention this one) use Tweenlite, or b.) create a simple class designed to tween size and alpha and delete them at the end of the tween, etc., using Timers and listeners to tween it.