views:

332

answers:

1

I have a two frame Flash CS3 animation. On the first frame, I am (successfully) loading four images onto the frame, and rotating through them (successfully) using TweenLite. When the user clicks on a button, a variable (resumeVideoOn) is set to indicate the current image that the user was looking at, and they are taken to frame2 which plays a corresponding video. When the video is done playing, the user has the option to click either a button to replay the video, or a button to take them back to frame1 (through a simple gotoAndPlay(1) call). When the user returns to frame1, I detect the value of 'resumeVideoOn' to determine which function to resume the animation loop on. It loads the initial image correctly. However, while it continues running through the series of functions (I can tell due to traces and the fact that other tweens being called in these functions are working properly), only the original image that you return to is displaying (the other three images being called by TweenLite don't appear). I've gone in circles on this for a while now. Below is some of the code, although there is a lot, so I tried to only put the necessary stuff:

// pull in images and video properties thru XML
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("flash.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void {
    var myXML:XML = new XML(e.target.data);
    my_videos = myXML.VIDEO;
    my_total = my_videos.length();
    if(my_total > 0) {
        makeContainers();
        callImgs();
    } else {
        trace("put alternate case here in case nothing is loaded");        
    }
}

function makeContainers():void {
    main_container = new Sprite();
    addChild(main_container);

    main_container.addChild(image1);
    main_container.addChild(image2);
    main_container.addChild(image3);
    main_container.addChild(image4);

    setChildIndex(DisplayObjectContainer(main_container),0);
}

function callImgs():void {
    var img_loader1 = new Loader();
    img_loader1.load(new URLRequest(my_videos[0].@IMG));
    image1.addChild(img_loader1);
    wtv1 = my_videos[0].@WTVPOS;
    video1 = my_videos[0].@VIDURL;

    var img_loader2 = new Loader();
    img_loader2.load(new URLRequest(my_videos[1].@IMG));
    image2.addChild(img_loader2);
    wtv2 = my_videos[1].@WTVPOS;
    video2 = my_videos[1].@VIDURL;

    var img_loader3 = new Loader();
    img_loader3.load(new URLRequest(my_videos[2].@IMG));
    image3.addChild(img_loader3);
    video3 = my_videos[2].@VIDURL;
    wtv3 = my_videos[2].@WTVPOS;

    var img_loader4 = new Loader();
    img_loader4.load(new URLRequest(my_videos[3].@IMG));
    image4.addChild(img_loader4);
    wtv4 = my_videos[3].@WTVPOS;
    video4 = my_videos[3].@VIDURL;
}

function imgLoaded(e:Event):void {
    var my_img:Loader = Loader(e.target.loader);
    image1.addChild(my_img);
}


//tween and go to video on frame 2 if clicked on myFrame1()
function myFrame1():void {
    //image 1
    image1.alpha = 100;// start faded down

    TweenLite.to(selectedFrame, 1, {x:501.6, overwrite:1});
    TweenLite.to(image1, 1, {alpha:0, delay:3, overwrite:0});
    TweenLite.to(image2, 1, {alpha:1, delay:3, overwrite:0});
    //wtv1
    if(wtv1 == "right") {
        TweenLite.to(watchthevideo_right_mc, 1, {alpha:1});
        watchthevideo_right_mc.addEventListener(MouseEvent.CLICK, playVideo1);
        TweenLite.to(watchthevideo_right_mc, 1, {alpha:0, delay:3, overwrite:0, onComplete:myFrame2});
    } else {
        TweenLite.to(watchthevideo_left_mc, 1, {alpha:1});
        watchthevideo_left_mc.addEventListener(MouseEvent.CLICK, playVideo1);
        TweenLite.to(watchthevideo_left_mc, 1, {alpha:0, delay:3, overwrite:0, onComplete:myFrame2});
    }
}

function playVideo1(e:MouseEvent):void {
    //kill all tweens
    TweenLite.killTweensOf(watchthevideo_right_mc);
    TweenLite.killTweensOf(watchthevideo_left_mc);
    TweenLite.killTweensOf(image1);
    TweenLite.killTweensOf(image2);
    TweenLite.killTweensOf(image3);
    TweenLite.killTweensOf(image4);
    videoFile = video1;
    resumeVideoOn = 1;
    gotoAndPlay(2);
}

// on frame 2
// after video is played
function returnShow(e:MouseEvent):void {
    TweenLite.to(_replayButton, 1, {alpha:0, overwrite:0});
    TweenLite.to(_returnButton, 1, {alpha:0, overwrite:0});
    _replayButton.visible = false;
    _returnButton.visible = false;
    TweenLite.to(rectangle, 1, {alpha:0, overwrite:0});

    //reset all video data
    removeChild(video);
    removeChild(pause_mc);
    removeChild(play_mc);
    removeChild(volslide_mc);
    removeChild(controls_mc);
    removeChild(controlBacker_mc);
    removeChild(_replayButton);
    removeChild(_returnButton);

    gotoAndPlay(1);
}

// when the user returns to frame 1, the variable 'resumeVideoOn' is checked 
// in an if statement to determine where to resume.  the if statement is run, 
// then goes to function myFrame2 (or whatever the next frame is), but the image
// is not changing

also, my xml file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<MYLIST>
<VIDEO VIDURL="videos/video1.flv" WTVPOS="right" IMG="imgs/image1.jpg" />
<VIDEO VIDURL="videos/video2.flv" WTVPOS="left" IMG="imgs/image2.jpg" />
<VIDEO VIDURL="videos/video3.flv" WTVPOS="right" IMG="imgs/image3.jpg" />
<VIDEO VIDURL="videos/video4.flv" WTVPOS="left" IMG="imgs/image4.jpg" />
</PHHLIST>
A: 

Just figured it out, for anyone that cares... I needed to add a

removeChild(main_container);

to the function sending the user to frame 2. When I dragged the display window larger than the video window, I could see that the original image was still on the stage, thus blocking any images being shown when the user returned to frame 1.

jmarx34