5 Replies - 1325 Views - Last Post: 18 June 2011 - 04:47 AM

#1 flasher333  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 10
  • Joined: 03-June 11

How to load other movie clip depending on what you click

Posted 03 June 2011 - 01:05 PM

Hi all,

I'm struggling to get this working.
At the moment the AS opens a fullProjectPanel when I click on one of the ProjectPanels. However, when I click on another ProjectPanel, the script just drags the same fullProjectPanel from library.

How do I get the script to load a "different" fullProjectPanel, i.e. the same library item, but containing different text and image, depending on what ProjectPanel I click.

Do I have to name each ProjectPanel and then use switch and case? I'm not sure how to tackle this.

Sorry if this sounds a bit confusing, but let me show you my scripts:

Cheers.

fullProjectPanel AS:

import com.greensock.TweenLite;

var fullProjectPanel:FullProjectPanel;

// ADD FULL PROJECT PANEL ( runs when clicking on project panel(2nd frame of mainContainer, line 28))

function addFullPanel():void {

    fullProjectPanel = new FullProjectPanel;
    
//panelItem.name = imageName;
        
    TweenLite.from(fullProjectPanel, 0.6, {alpha:0, delay:0.5});
    addChild(fullProjectPanel);

    // indicate state
    fullProjectPanelUp = true;

    // listen for click on close button
    fullProjectPanel.closePanel.addEventListener(MouseEvent.CLICK, onCloseClick);
    fullProjectPanel.closePanel.buttonMode = true;
}

function onCloseClick(evt:MouseEvent):void {

    // run the slide up function that slides up the project container 
    mainContainer.slideUp();

    // remove the panel
    removeChild(fullProjectPanel);

    // delay the state change to allow for transition
    TweenLite.delayedCall(0.4, upFalse);
}

function upFalse():void {
    
    fullProjectPanelUp = false;
}



Pretty obvious this'll load an identical fullProjectPanel each time right.
The ProjectPanel AS reads:

import com.greensock.TweenLite;
import com.greensock.easing.Back;

import com.greensock.loading.*;
import com.greensock.loading.display.*;
import com.greensock.events.LoaderEvent;

import flash.display.Sprite;
import flash.text.*;

import flash.display.BitmapData;
import flash.display.Bitmap;

// CONTAINER FOR SCROLLING
var panelContainer:Sprite = new Sprite;
addChild(panelContainer);

// INITIAL VARIABLES

var imageArray:Array = new Array();
var currentButton:Object = new Object;
var selectedSection:Number = 0;
var myImage:Array = new Array();

function progressHandler(event:LoaderEvent):void {
    trace("progress: " + event.target.progress);
}

var xmlLoader:URLLoader = new URLLoader();
var xmlData: XML;

//Load the XML file
xmlLoader.load(new URLRequest("images/slides2.xml"));

//Adding an event listener to notify when loading is completed
xmlLoader.addEventListener(Event.COMPLETE,ParseXML);
//xmlLoader.addEventListener(Event.COMPLETE,ParseXML2);

function ParseXML(event:Event):void {
//function ParseXML(xmlData:XML):void {

    var panelArray:Array = new Array();
    xmlData = new XML(event.target.data);
    var lengthDoc = xmlData.image.name.length();
    
    for (var j:int=0; j<lengthDoc; j++) {

        var xmlLoader = new Loader();
        var panelItem:ProjectPanel = new ProjectPanel;
        var imageName = (xmlData.image[j].name);
//    trace ("imageName = "+imageName);
//    panelItem.addListeners();
        panelItem.name = imageName;
        
        panelItem.addEventListener(MouseEvent.CLICK, onclick);
        panelItem.project_title.text = (xmlData.image[j].description.@title);
        panelItem.project_description.text = (xmlData.image[j].description);

        var imageThumb:String = xmlData.image[j].path.@thumb.toString();
        myImage[j] = imageThumb;
        trace (myImage[j]);
        var imageUrlRequest:URLRequest = new URLRequest(myImage[j]);
        imageArray[j] = xmlLoader.load(imageUrlRequest);
        imageArray.push(xmlLoader);
        panelItem.project_image.MovieClip = (imageArray[j+1]);
        panelItem.project_image.addChild(imageArray[j+1]);
        
        if (j>0) {

            panelItem.x = j*(panelArray[j-1].width+10);
            //trace("Image = "+imageInfo);
            //var imageChildren:XMLList = event.image.children();
        }
        panelArray.push(panelItem);
        // adding Items as children to Container
        panelContainer.addChild(panelItem);
    }
}

function ParseXML2(imageData2:XML):void {

    trace("------------------------");
    trace("XML Output");
    trace("------------------------");
     
    var imageChildren:XMLList = imageData2.image.children();
     
    for each (var imageData2:XML in imageChildren) {
        if (imageData2.name() == "name") {
//      trace(imageData2);
        }
    }
}

function errorHandler(event:LoaderEvent):void {
    trace("error occured with " + event.target + ": " + event.text);
}

function onclick(evt:MouseEvent):void {

    // tween all panels below visible area when clicking on projectPanel
    TweenLite.to(panelContainer, 0.5, {y:stage.stageHeight+250, ease:Back.easeIn});

    // running function on the main timeline
    MovieClip(this.parent).addFullPanel();
}

// slide the panels back up on closing the single panel project
function slideUp():void {
    
    TweenLite.to(panelContainer, 0.5, {y:0, ease:Back.easeOut});
}

// HORIZONTAL SCROLLING 
stage.addEventListener(MouseEvent.MOUSE_MOVE, onmove);

function onmove(evt:MouseEvent):void {

    // scroll only if fullprojectpanelup is false to prevent from interfering with transitions
    if (MovieClip(this.parent).fullProjectPanelUp==false) {
    TweenLite.to(panelContainer, 0.3, {x:-(stage.mouseX/980)*panelContainer.width+stage.stageWidth/2});
    }
}

stop();



Is This A Good Question/Topic? 0
  • +

Replies To: How to load other movie clip depending on what you click

#2 chinchang  Icon User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 725
  • Joined: 22-December 08

Re: How to load other movie clip depending on what you click

Posted 04 June 2011 - 05:55 AM

Yup, you could do it. Name the projectPanels like p1_mc, p2_mc etc. In the CLICK listener you could do something like :
function ClickListener(e:MouseEvent):void{
 var target:MovieClip = e.currentTarget as MovieClip;

 if(target.name == "p1_mc") doSomething();
 else if(target.name == "p2_mc") doSomething();
}

Was This Post Helpful? 1
  • +
  • -

#3 flasher333  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 10
  • Joined: 03-June 11

Re: How to load other movie clip depending on what you click

Posted 04 June 2011 - 01:03 PM

Thanks for your response Chinchang, I'll give it a try.
Was This Post Helpful? 0
  • +
  • -

#4 flasher333  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 10
  • Joined: 03-June 11

Re: How to load other movie clip depending on what you click

Posted 14 June 2011 - 08:51 AM

View Postchinchang, on 04 June 2011 - 05:55 AM, said:

Yup, you could do it. Name the projectPanels like p1_mc, p2_mc etc. In the CLICK listener you could do something like :
function ClickListener(e:MouseEvent):void{
 var target:MovieClip = e.currentTarget as MovieClip;

 if(target.name == "p1_mc") doSomething();
 else if(target.name == "p2_mc") doSomething();
}


Okay, I think I've got it sorted now:

var panelName:Number;

function onclick(evt:MouseEvent) {

	// tween all panels below visible area when clicking on projectPanel
	TweenLite.to(panelContainer, 0.5, {y:stage.stageHeight+250, ease:Back.easeIn});

	var target:MovieClip = evt.currentTarget as MovieClip;

	if(target.name == "pic1.jpg") {
	panelName = 1;
	MovieClip(this.parent).addFullPanel(panelName);
	}
	else if(target.name == "pic2.jpg") {
	panelName = 2;
	MovieClip(this.parent).addFullPanel(panelName);
	}
	else if(target.name == "pic3.jpg") {
	panelName = 3;
	MovieClip(this.parent).addFullPanel(panelName);
	}
	else if(target.name == "pic4.jpg") {
	panelName = 4;
	MovieClip(this.parent).addFullPanel(panelName);
	}
	else if(target.name == "pic5.jpg") {
	panelName = 5;
	MovieClip(this.parent).addFullPanel(panelName);
	}
}



And:

function addFullPanel(panelName:Number):void {

	if(panelName == 1) {

		fullProjectPanel = new FullProjectPanel;
		var request:URLRequest = new URLRequest("images/pic1.jpg");
		loader.load(request);
		fullProjectPanel.full_image.addChild(loader);
	}

	else if(panelName == 2) {

		fullProjectPanel = new FullProjectPanel;
		var request:URLRequest = new URLRequest("images/pic2.jpg");
		loader.load(request);
		fullProjectPanel.full_image.addChild(loader);
	}

	else if(panelName == 3) {

		fullProjectPanel = new FullProjectPanel;
		var request:URLRequest = new URLRequest("images/pic3.jpg");
		loader.load(request);
		fullProjectPanel.full_image.addChild(loader);
	}

	else if(panelName == 4) {

		fullProjectPanel = new FullProjectPanel;
		var request:URLRequest = new URLRequest("images/pic4.jpg");
		loader.load(request);
		fullProjectPanel.full_image.addChild(loader);
	}

	else if(panelName == 5) {

		fullProjectPanel = new FullProjectPanel;
		var request:URLRequest = new URLRequest("images/pic5.jpg");
		loader.load(request);
		fullProjectPanel.full_image.addChild(loader);
	}

	TweenLite.from(fullProjectPanel, 0.6, {alpha:0, delay:0.5});
	addChild(fullProjectPanel);

	// indicate state
	fullProjectPanelUp = true;

	// listen for click on close button
	fullProjectPanel.closePanel.addEventListener(MouseEvent.CLICK, onCloseClick);
	fullProjectPanel.closePanel.buttonMode = true;
}


Was This Post Helpful? 0
  • +
  • -

#5 chinchang  Icon User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 725
  • Joined: 22-December 08

Re: How to load other movie clip depending on what you click

Posted 14 June 2011 - 10:15 AM

Observe that there are redundant statements in your code. You could shorten your function to great extent by clubbing equivalent statements like this :

var panelName:Number;

function onclick(evt:MouseEvent) {

	// tween all panels below visible area when clicking on projectPanel
	TweenLite.to(panelContainer, 0.5, {y:stage.stageHeight+250, ease:Back.easeIn});

	var target:MovieClip = evt.currentTarget as MovieClip;

	MovieClip(this.parent).addFullPanel(target.name);
}


and for your addFullPanel function :

function addFullPanel(panelName:String):void {

        var path:String = "images/"+panelName;

		fullProjectPanel = new FullProjectPanel;
		var request:URLRequest = new URLRequest(path);
		loader.load(request);
		fullProjectPanel.full_image.addChild(loader);
	

	TweenLite.from(fullProjectPanel, 0.6, {alpha:0, delay:0.5});
	addChild(fullProjectPanel);

	// indicate state
	fullProjectPanelUp = true;

	// listen for click on close button
	fullProjectPanel.closePanel.addEventListener(MouseEvent.CLICK, onCloseClick);
	fullProjectPanel.closePanel.buttonMode = true;
}


And there you have the short version of your code :)
Was This Post Helpful? 0
  • +
  • -

#6 flasher333  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 10
  • Joined: 03-June 11

Re: How to load other movie clip depending on what you click

Posted 18 June 2011 - 04:47 AM

I'm still a bit lost as to why my script is not working. Embedding the AS3 slideshow into my Flash file is still an issue. I'm getting no compiler errors, but when I click on a MC panel to load a slideshow I get the following output error messages:

Quote

TypeError: Error #1010: A term is undefined and has no properties.
at mainCS3_final11_fla::MainTimeline/addFullPanel()
at mainCS3_final11_fla::mainContainer_1/onclick()


The slideshow AS within the FullProjectPanel MC reads:

stop();

var galleryData:XML;

var galleryLoader:URLLoader = new URLLoader();
galleryLoader.addEventListener(Event.COMPLETE, onGalleryDataLoaded, false, 0, true);

var panelNames:String = MovieClip(this.parent).name;

trace("trace.this = "+this);
trace("trace.this.parent = "+this.parent);
trace("panel chosen (outside function) = "+panelNames);

switch(panelNames) {

    case "pic1.jpg":
    //case "instance49":
    trace("panel chosen = "+panelNames);
    galleryLoader.load(new URLRequest("gallery1.xml"));
    break;

    case "pic2.jpg":
    galleryLoader.load(new URLRequest("gallery2.xml"));
    break;
    
    case "pic3.jpg":
    galleryLoader.load(new URLRequest("gallery3.xml"));
    break;

    case "pic4.jpg":
    galleryLoader.load(new URLRequest("gallery4.xml"));
    break;

    case "pic5.jpg":
    galleryLoader.load(new URLRequest("gallery5.xml"));
    break;
}

function onGalleryDataLoaded(evt:Event):void {

    galleryData = new XML(evt.target.data);
    // start checking if the movie is loaded
    addEventListener(Event.ENTER_FRAME, onCheckLoaded, false, 0, true);
    galleryLoader.removeEventListener(Event.COMPLETE, onGalleryDataLoaded);
}

function onCheckLoaded(evt:Event):void {

    if (root.loaderInfo.bytesTotal == root.loaderInfo.bytesLoaded) {

        gotoAndStop("main");
        removeEventListener(Event.ENTER_FRAME, onCheckLoaded);
    }
}



Depending on what MC I click, the script should load a corresponding slideshow.
On Scene 1 I've got:

import com.greensock.TweenLite;
import com.greensock.easing.Back;

import com.greensock.loading.*;
import com.greensock.loading.display.*;
import com.greensock.events.LoaderEvent;

import flash.display.Sprite;
import flash.text.*;

import flash.display.BitmapData;
import flash.display.Bitmap;

// CONTAINER FOR SCROLLING
var panelContainer:Sprite = new Sprite;
addChild(panelContainer);

// INITIAL VARIABLES

var imageArray:Array = new Array();
var currentButton:Object = new Object;
var selectedSection:Number = 0;
var myThumb:Array = new Array();
var myImage:Array = new Array();

function progressHandler(event:LoaderEvent):void {
    trace("progress: " + event.target.progress);
}

//loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);

function loadProgress(event:ProgressEvent):void {  
    var percentLoaded:Number = Math.ceil(event.bytesLoaded/event.bytesTotal); 
    trace("Loading: "+percentLoaded+"%");  
}  

var xmlLoader:URLLoader = new URLLoader();
var xmlData: XML;

//Load the XML file
xmlLoader.load(new URLRequest("images/slides2.xml"));

//Adding an event listener to notify when loading is completed
xmlLoader.addEventListener(Event.COMPLETE,ParseXML);

function ParseXML(event:Event):void {

    var panelArray:Array = new Array();
    xmlData = new XML(event.target.data);
    var lengthDoc = xmlData.image.name.length();
    
    for (var j:int=0; j<lengthDoc; j++) {

        var xmlLoader = new Loader();
        var panelItem:ProjectPanel = new ProjectPanel;
        var imageName = (xmlData.image[j].name);
        panelItem.name = imageName;

        panelItem.addEventListener(MouseEvent.CLICK, onclick);
        panelItem.buttonMode = true;
        panelItem.project_title.text = (xmlData.image[j].description.@title);
        panelItem.project_description.text = (xmlData.image[j].description);

        var imageThumb:String = xmlData.image[j].path.@thumb.toString();
        var imageLarge:String = xmlData.image[j].path.@large.toString();
        myThumb[j] = imageThumb;
        myImage[j] = imageLarge;
        trace (myImage[j]);
        var imageUrlRequest:URLRequest = new URLRequest(myThumb[j]);
        imageArray[j] = xmlLoader.load(imageUrlRequest);
        imageArray.push(xmlLoader);
        panelItem.project_image.MovieClip = (imageArray[j+1]);
        panelItem.project_image.addChild(imageArray[j+1]);

        if (j>0) {

            panelItem.x = j*(panelArray[j-1].width+10);
        }
        panelArray.push(panelItem);
        // adding Items as children to Container
        panelContainer.addChild(panelItem);
    }
}

function ParseXML2(imageData2:XML):void {

    trace("------------------------");
    trace("XML Output");
    trace("------------------------");
     
    var imageChildren:XMLList = imageData2.image.children();
     
    for each (var imageData2:XML in imageChildren) {
        if (imageData2.name() == "name") {
        }
    }
}

function errorHandler(event:LoaderEvent):void {
    trace("error occured with " + event.target + ": " + event.text);
}

function onclick(evt:MouseEvent) {

    // tween all panels below visible area when clicking on projectPanel
    TweenLite.to(panelContainer, 0.5, {y:stage.stageHeight+250, ease:Back.easeIn});

    var target:MovieClip = evt.currentTarget as MovieClip;
    var panelNames:String = target.name;
    trace("panel chosen (inside function) = "+panelNames);
    MovieClip(this.parent).addFullPanel(panelNames);
    // running function on the main timeline
}

// slide the panels back up on closing the single panel project
function slideUp():void {
    
    TweenLite.to(panelContainer, 0.5, {y:0, ease:Back.easeOut});
}

// HORIZONTAL SCROLLING 
stage.addEventListener(MouseEvent.MOUSE_MOVE, onmove);

function onmove(evt:MouseEvent):void {

    // scroll only if fullprojectpanelup is false to prevent from interfering with transitions
    if (MovieClip(this.parent).fullProjectPanelUp==false) {

        TweenLite.to(panelContainer, 0.3, {x:-(stage.mouseX/980)*panelContainer.width+stage.stageWidth/2});
    }
}

stop();



And on Scene1 on the main Timeline I've got:

import com.greensock.TweenLite;

var fullProjectPanel: FullProjectPanel;

function loadProgress(event:ProgressEvent):void {

    var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
    percentLoaded = Math.round(percentLoaded * 100);
    trace("Loading: "+percentLoaded+"%");
}

function loadComplete(event:Event):void {

    trace("Complete");
}

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

// ADD FULL PROJECT PANEL ( runs when clicking on project panel(2nd frame of mainContainer, line 28))

function addFullPanel(panelNames:String) {

    var path:String = "images/"+panelNames;
    fullProjectPanel = new FullProjectPanel();
    var request:URLRequest = new URLRequest(path);
    loader.load(request);
    trace("path = "+path);

    TweenLite.from(fullProjectPanel, 0.6, {alpha:0, delay:0.5});
    addChild(fullProjectPanel);

    // indicate state
    fullProjectPanelUp = true;

    // listen for click on close button
    fullProjectPanel.closePanel.addEventListener(MouseEvent.CLICK, onCloseClick);
    fullProjectPanel.closePanel.buttonMode = true;
}

function onCloseClick(evt:MouseEvent):void {

    // run the slide up function that slides up the project container 
    mainContainer.slideUp();

    // remove the panel
    removeChild(fullProjectPanel);

    // delay the state change to allow for transition
//  TweenLite.delayedCall(0.4, upFalse);
}

function upFalse():void {
    
    fullProjectPanelUp = false;
}



Using the trace command, I think I managed to track down the source of the issue. The variable panelNames exists only within the function.
In other words

trace (panel chosen (inside function)) = pic1.jpg

which is correct, and

trace (panel chosen (outside function) = root1.

So when I use the switch function in the FullProjectPanel MC it doesn't recognize the panelNames anymore. Do I have to define panelNames globally, and if so how do I go about doing that? Or is there a more trivial solution?

Hope someone can point me in the right direction.

Cheers
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1