Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
AniMi

Can't add buttonMode true

Recommended Posts

Hello I'm stuck on my project, I don't know how to add buttonMode true in my gallery and somehow it doesn't loop for all the images in XML. it starts not from first image, it starts from second.

Please help me!

Code is in class "main"

package  
{	import com.greensock.events.LoaderEvent;
import com.greensock.loading.XMLLoader;
import com.greensock.loading.LoaderMax;
import com.greensock.loading.ImageLoader;
import com.greensock.loading.data.ImageLoaderVars;
import com.greensock.loading.display.ContentDisplay;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.EventDispatcher;


/**
 * ...
 * @author 
 */
public class main extends MovieClip
{


	private var xImgList:XMLList;

	public function main() 
	{
		//Load XML
		var xPhotography:XMLLoader = new XMLLoader("photography.xml");
		xPhotography.addEventListener(LoaderEvent.COMPLETE, xmlLoaded);
		xPhotography.load();
	}

	private function xmlLoaded(e:LoaderEvent):void 
	{
		var xData:XML = e.target.content;
		xImgList = new XMLList(xData.img);

		//setup loader max object
		var thumbLoader:LoaderMax = new LoaderMax( { name:"thumbLoader" } );
		thumbLoader.addEventListener(LoaderEvent.COMPLETE, thumbsLoaded);

		//setup variables for ImageLoaderVars
		var nImgWidth:Number = 100;
		var nImgHeight:Number = 72;
		var nMaxCols:Number = 4;

		for (var i:int = 0; i < xImgList.length(); i++) 
		{
			var iLoad:ImageLoader = new ImageLoader("images/thumbs/" + xImgList[i].@url, new ImageLoaderVars()
			.name(xImgList[i].@name)
			.width(nImgWidth)
			.height(nImgHeight)
			.smoothing(true)
			.container(galerijaTXT_mc.container_mc["p"+i] as MovieClip)
			.x(-50)
			.y(-20)

			)

			thumbLoader.append(iLoad);
		}

		thumbLoader.load();
	}

	private function thumbsLoaded(e:LoaderEvent):void
	{
		//Setup Click Events
		for (var i:int = 0; i < xImgList.length; i++) 
		{
			var cdImg:ContentDisplay = LoaderMax.getContent["p"+(i+1)];
			cdImg.buttonMode = true;
		}

	}

}

}

 

animation (for my gallery) is in .fla file

var galerijaTXT_clips = [];
for (var i:Number = 1; i <=12; i++) {
galerijaTXT_clips.push(galerijaTXT_mc.container_mc["p"+i] as MovieClip);

 

mv.addLabel("galerija_in", mv.duration);
mv.append(TweenMax.to(galerijaTXT_mc.container_mc, 0, {alpha:1, immediateRender:false, onStart:setSection, onStartParams:["galerija"]}));
mv.append(TweenMax.from(galerijaTXT_mc.galerijos_mc, .5, {x:"100", alpha:0}));
mv.appendMultiple(TweenMax.allFrom(galerijaTXT_clips,
  .5, {y:"50", alpha:0}, .1));
mv.addLabel("galerija_complete", mv.duration);

mv.appendMultiple(TweenMax.allTo(galerijaTXT_clips,
  .5, {scaleX:4, scaleY:4, alpha:0}, .1));

mv.insert(TweenMax.to(galerijaTXT_mc, 1, {alpha:0}), mv.duration -1);

 

My XML structure

<?xml version="1.0" encoding="utf-8" ?>













Link to comment
Share on other sites

looks like you have made great progress.

 

make sure there are no items on the stage covering up your images. if you are using my bullet-proof method, make sure everything that is invisible uses autoAlpha:0; OR do addChild(galerijaTXT_mc) to put it on top of everything else.

Link to comment
Share on other sites

Hey, thank you. i'm new to flash, actually, I'm not a programmer. So I'm trying to use zync gallery tutorial for this... I tried to addChild, but that doesn't help... I think something is wrong with my code :(

Link to comment
Share on other sites

Ok, I solved this...:))) thank you.. :) It's amazing... now I want that when a thumb is clicked it fade in (and load a big picture), and when clicked again it fade out to it's place... I don't know how to write an OnClick function, becouse onClick image must tween and fade in :) I want it to act like this http://www.files.riacodes.com/flash_zoom-photos-panel/ :)

 

code

 

 

		private function thumbsLoaded(e:LoaderEvent):void
	{
		//Setup Click Events
		for (var i:int = 0; i < xImgList.length(); i++) 
		{
			var cdImg:ContentDisplay = LoaderMax.getContent("p"+(i+1));
			cdImg.buttonMode = true;

			cdImg.addEventListener(MouseEvent.ROLL_OVER, onOver);
			cdImg.addEventListener(MouseEvent.ROLL_OUT, onOut);
			cdImg.addEventListener(MouseEvent.CLICK, onClick);
		}

	}


	var glow:GlowFilter = new GlowFilter(0x999999, 1, 2, 2, 3, 255, false, false);

	private function onOver(e:MouseEvent):void 
	{
		e.target.filters = [glow];
	}

	private function onOut(e:MouseEvent):void 
	{
		e.target.filters = [];
	}

	var zoom : MovieClip;
	private function onClick(e:MouseEvent):void 
	{

	}



}

}

Link to comment
Share on other sites

now I want that when a thumb is clicked it fade in (and load a big picture), and when clicked again it fade out to it's place...

 

the behavior you are describing pretty much sums up a complete dynamic slideshow with interactive thumbnails.

 

This goes a good deal beyond, "not knowing how to code an onClick function".

 

Unfortunately this is quite a big task for someone just to provide a complete solution for as there is a good deal of logic and interactivity that needs to be addressed.

 

Fortunately, GreenSock has provided a sample of a very robust yet elegant slideshow. Many of the concepts would pertain to what you are trying to achieve:

 

you can download this slideshow at http://www.greensock.com/as/LoaderMax/slideshow.zip

Link to comment
Share on other sites

you described the behavior of a thumbnail fading in (although i assume you meant fade out), and then loading a large image which then animates.

 

your link shows a single image getting bigger when you click on it.

 

the two are quite different in there complexity and scope.

 

furthermore, I don't understand exactly why you are asking how a particular effect is achieved when all the source files for that effect are freely available?

http://www.riacodes.com/flash/create-a- ... ith-flash/

 

From your previous code it seems you are quite comfortable with loading images and animating them. The tutorial above covers all the interactive effects you are seeking. I don't think anyone here can have much more to add.

 

I encourage you to keep trying.

Link to comment
Share on other sites

  • 2 weeks later...

Ok, i'm done with a gallery, Everything works, but I need that on load the first image and first thumbnail to show up.

Here is my code:

 

package  
{	import com.greensock.events.LoaderEvent;
import com.greensock.loading.XMLLoader;
import com.greensock.loading.LoaderMax;
import com.greensock.loading.ImageLoader;
import com.greensock.loading.data.ImageLoaderVars;
import com.greensock.loading.display.ContentDisplay;
import com.greensock.*;
import flash.filters.*;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.MouseEvent;
import flash.net.URLRequest;


/**
 * ...
 * @author 
 */
public class main extends MovieClip
{


	private var xImgList:XMLList;

	public function main() 
	{
		//Load XML
		var xPhotography:XMLLoader = new XMLLoader("photography.xml");
		xPhotography.addEventListener(LoaderEvent.COMPLETE, xmlLoaded);
		xPhotography.load();
	}

	private function xmlLoaded(e:LoaderEvent):void 
	{
		var xData:XML = e.target.content;
		xImgList = new XMLList(xData.img);

		//setup loader max object
		var thumbLoader:LoaderMax = new LoaderMax( { name:"thumbLoader" } );
		thumbLoader.addEventListener(LoaderEvent.COMPLETE, thumbsLoaded);

		//setup variables for ImageLoaderVars
		var nImgWidth:Number = 80;
		var nImgHeight:Number = 52;
		var nMaxCols:Number = 4;

		for (var i:int = 0; i < xImgList.length(); i++) 
		{	addChild(galerijaTXT_mc); 
			var iLoad:ImageLoader = new ImageLoader("images/thumbs/" + xImgList[i].@url, new ImageLoaderVars()
			.name(xImgList[i].@name)
			.width(nImgWidth)
			.height(nImgHeight)
			.smoothing(true)
			.container(galerijaTXT_mc.container_mc["p"+i] as MovieClip)
			.x(513)
			.y(242)
			.prop("index", i)
			.prop("url",xImgList[i].@url)

			)

			thumbLoader.append(iLoad);
		}

		thumbLoader.load();
	}

	private function thumbsLoaded(e:LoaderEvent):void
	{
		//Setup Click Events
		for (var i:int = 0; i < xImgList.length(); i++) 
		{
			var cdImg:ContentDisplay = LoaderMax.getContent("p"+(i+1));
			cdImg.buttonMode = true;

			cdImg.addEventListener(MouseEvent.ROLL_OVER, onOver);
			cdImg.addEventListener(MouseEvent.ROLL_OUT, onOut);
			cdImg.addEventListener(MouseEvent.CLICK, onClick);
		}

	}


	var glow:GlowFilter = new GlowFilter(0x999999, 1, 2, 2, 3, 255, false, false);

	private function onOver(e:MouseEvent):void 
	{
		e.target.filters = [glow];
	}

	private function onOut(e:MouseEvent):void 
	{
		e.target.filters = [];
	}

	private function onClick(e:MouseEvent):void 
	{
		var vars:Object = ImageLoader(e.currentTarget.loader).vars;

		checkOldImage(vars.index)
	}

	private function checkOldImage(index:Number):void 
	{
		//check if there is already an image
		if (galerijaTXT_mc.container_mc.mainHolder.numChildren > 0)
		{
			var oldClip:Sprite = Sprite(galerijaTXT_mc.container_mc.mainHolder.getChildAt(0));
			TweenMax.to(oldClip, 0.5, { autoAlpha:0, onComplete:function() { galerijaTXT_mc.container_mc.mainHolder.removeChildAt(0); loadImage(index) }} )
		} else
		{
			loadImage(index);
		}
	}

	private function loadImage(index:Number):void 
	{
		//Get filename
		var file:String = xImgList[index].@url;

		//Setup main Image loader
		var mainLoad:ImageLoader = new ImageLoader("images/main/" + file, new ImageLoaderVars()
		.width(557)
		.height(400)
		.x(352)
		.y(255)
		//.scaleMode("proportionalInside")
		.crop(true)
		.container(galerijaTXT_mc.container_mc.mainHolder as MovieClip)
		.smoothing(true)
		.alpha(50)
		)
		//setup EventListeners
		mainLoad.addEventListener(LoaderEvent.COMPLETE, imageLoaded);
		mainLoad.load();
	}

	private function imageLoaded(e:LoaderEvent):void 
	{
		var imgClip:ContentDisplay = LoaderMax.getContent(e.currentTarget.name);
		TweenMax.to(imgClip, 0, { colorTransform: { exposure:2 }} );
		TweenMax.to(imgClip, 1.5, { colorTransform: { exposure:1 }, autoAlpha:1 } );

	}




}

}

Link to comment
Share on other sites


 private function thumbsLoaded(e:LoaderEvent):void
     {
        //Setup Click Events
        for (var i:int = 0; i          {
           var cdImg:ContentDisplay = LoaderMax.getContent("p"+(i+1));
           cdImg.buttonMode = true;

           cdImg.addEventListener(MouseEvent.ROLL_OVER, onOver);
           cdImg.addEventListener(MouseEvent.ROLL_OUT, onOut);
           cdImg.addEventListener(MouseEvent.CLICK, onClick);

//do something only for first thumb
if(i == 0){

TweenMax.to(cdImg, .5, {autoAlpha:1});
loadImage(0);
}

        }

     }



Link to comment
Share on other sites

thank you so much :)) you rock!!!!

 

am ok... now I want that the image doesn't appear so fast, I tried to write delay:4, but it doesn't work... WEll it doesn't throw errors, but there is no delay :))) whats the problem?:)

Link to comment
Share on other sites

the thumb or the large image?

 

are you sure the containers for both are set to be not visible before you are trying to fade them in?

Link to comment
Share on other sites

for big image. :)

Link to comment
Share on other sites

until you answer the second question or show where your delay is added there is nothing else I can do

Link to comment
Share on other sites

I tried to add it here


private function thumbsLoaded(e:LoaderEvent):void
     {
        //Setup Click Events
        for (var i:int = 0; i < xImgList.length(); i++) 
        {
           var cdImg:ContentDisplay = LoaderMax.getContent("p"+(i+1));
           cdImg.buttonMode = true;

           cdImg.addEventListener(MouseEvent.ROLL_OVER, onOver);
           cdImg.addEventListener(MouseEvent.ROLL_OUT, onOut);
           cdImg.addEventListener(MouseEvent.CLICK, onClick);

//do something only for first thumb
if(i == 0){

TweenMax.to(cdImg, .5, {autoAlpha:1, [b]delay:3[/b]});
loadImage(0);
}

        }

     }

Link to comment
Share on other sites

that appears to me to be the thumbsloaded function, so I don't think that is going to effect the big image. right?

 

isn't the big image handled inside imageLoaded? that's where i would start.

Link to comment
Share on other sites

private function imageLoaded(e:LoaderEvent):void

{

var imgClip:ContentDisplay = LoaderMax.getContent(e.currentTarget.name);

TweenMax.to(imgClip, 0, { colorTransform: { exposure:2 }} );

TweenMax.to(imgClip, 1.5, { colorTransform: { exposure:1 }, autoAlpha:1, delay:3} );

 

}

 

 

I have already tried it here, but then all the pictures loads very slowly, I only need the first one do that.

Link to comment
Share on other sites

then do like you did with the thumbs and add a conditional statement to check if the image being loaded is the first one by evaluating c.currentTarget.name

 

I am taking a vacation from this thread after this.

I'll check back in a few days when I return.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×