Solved

Need flash slideshow to play in a smaller window rather than the entire stage

Posted on 2011-09-17
9
281 Views
Last Modified: 2012-05-12
I have a flash file that I got online that does almost all of what I want with a couple of exceptions:

It plays the images on the entire stage, and I want them to play in a smaller part of the stage.
It has an infobox with a countdown and mask that I would like to remove

What I want is a bigger stage that I can put a static photo in, annd have the slideshow play on a small part of the whole stage.  You can see the effect that I am going for at www.lafayettekiwanis.org/scoreboard.html where I want the images of our advertisers' logo playing in the white rectangle on the screen to simulate what they looked like at the event.

The actionscript code that came with it is:

package  
{
	//imports
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.*;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.display.StageAlign;
	import flash.display.Stage;
	import flash.display.StageScaleMode;
	import flash.text.TextField;
	import flash.utils.setInterval;
	import flash.utils.clearInterval;
	import caurina.transitions.Tweener;
	
	/**
	* ...
	* @author Michel
	*/
	
	public class SlideShow extends Sprite
	{
		//vars
		private var _slideTime:int = 10;
		
		private var _xmlPath:String = "slideXML.php";
		private var _xmlLoader:URLLoader;
		private var _xmlContent:XML;
		private var _totalImages:int;
		private var _counter:int;
		private var _timerCounter:int;
		private var _image:Sprite;
		private var _prevImage:Sprite;
		private var _loader:Loader;
		private var _intv:int;
		private var _infoIntv:int;
		private var _stage:Stage;
		private var _infoBox:InfoBox;
		
		public function SlideShow(__stage:Stage)
		{
			_stage = __stage;
			_stage.align = StageAlign.TOP_LEFT;
			_stage.scaleMode = StageScaleMode.NO_SCALE;
			loadXml();
		}
		
		private function loadXml():void
		{
			//load the xml file
			_xmlLoader = new URLLoader();
			_xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
			_xmlLoader.load(new URLRequest(_xmlPath));
		}
		
		private function xmlLoaded(e:Event)
		{
			//save the xml
			_xmlContent = new XML(e.target.data);
			_totalImages = _xmlContent..slide.length();
			//add info
			_infoBox = new InfoBox();
			addChild(_infoBox);
			_infoBox.x = _infoBox.y = 10;
			updateInfoTxt("...");
			//load the first image
			loadNext();
			//resize
			stage.addEventListener(Event.RESIZE, onResize);
		}
		
		private function loadNext()
		{
			//load image
			loadImage(_counter);
			//increase the counter
			_counter++;
			//if it is the last go to the first
			if (_counter == _totalImages)
			{
				_counter = 0;
			}
		}
		
		private function loadImage(__id:int )
		{
			//clear the interval
			if(_intv != 0){
				clearInterval(_intv);
				clearInterval(_infoIntv);
			}
			//make a new holder sprite
			_image = new Sprite();
			addChild(_image);
			//load the image
			_loader = new Loader;
			_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
			_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imageLoading);
			_loader.load(new URLRequest(_xmlContent..slide[__id].@file));
			//add the image to the holder
			_image.addChild(_loader);
			//swap the index
			if (_prevImage != null)
			{
				swapChildren(_prevImage, _image);
				swapChildren(_infoBox, _prevImage);
			}else{
				swapChildren(_infoBox, _image);
			}
		}
		
		private function imageLoading(e:ProgressEvent)
		{
			//show the proc loaded
			var procLoaded:int = (e.bytesLoaded / e.bytesTotal) * 100;
			updateInfoTxt(String(procLoaded + "%"));
		}
		
		private function imageLoaded(e:Event)
		{
			//the info counter
			_timerCounter = _slideTime;
			updateInfoTxt(String(_timerCounter));
			//resize image
			_image.width = _stage.stageWidth;
			_image.scaleY = _image.scaleX;
			if (_image.height < _stage.stageHeight)
			{
				_image.height = _stage.stageHeight;
				_image.scaleX = _image.scaleY;
			}
			//add tween
			if (_prevImage != null)
			{
				Tweener.addTween(_prevImage, { alpha:0, time:2, onComplete:function()
				{
					//remove old
					removeChild(this);
				}} );
			}
			//save prev image
			_prevImage = _image;
			//set the interval
			_intv = setInterval(loadNext, _slideTime * 1000);
			_infoIntv = setInterval(timerTick, 1000);
		}
		
		private function timerTick()
		{
			//update the timer counter
			_timerCounter--;
			updateInfoTxt(String(_timerCounter));
		}
		
		private function onResize(e:Event)
		{
			//onresize resize the image
			_image.width = _stage.stageWidth;
			_image.scaleY = _image.scaleX;
			if (_image.height < _stage.stageHeight)
			{
				_image.height = _stage.stageHeight;
				_image.scaleX = _image.scaleY;
			}
		}
		
		private function updateInfoTxt(__txt:String)
		{
			//set the text to the info textfield
			var infoTxt:TextField = TextField(_infoBox.getChildByName("infoTxt"));
			infoTxt.text = __txt;
		}
		
	}
	
}

Open in new window


Thanks.
0
Comment
Question by:Kevin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 

Author Comment

by:Kevin
ID: 36554376
If you need to see the php file as well that grabs the imnages automatically, it is here:

 
?php
	$extArray = array("jpg", "JPG", "jpeg", "JPEG", "gif", "png", "bmp", "swf");
	$dir = "images";
	
	
	header("Content-Type: application/xml; charset=UTF-8");
	
	print "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n\n";
	print "<slideshow>";
	
	if ($handle = opendir($dir)) {
		while (false !== ($file = readdir($handle))) {
			$ext = substr($file, strlen($file)-3);
			if (in_array($ext, $extArray)) {
				print "<slide file='$dir/$file' />\n\n";
			}
		}
		closedir($handle);
	}
	
	print "</slideshow>";
?>

Open in new window

0
 

Author Comment

by:Kevin
ID: 36554517
And here is the flash file.
background-slide-show.fla
0
 
LVL 29

Expert Comment

by:dgofman
ID: 36555424
Nice to get generated XML
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 29

Expert Comment

by:dgofman
ID: 36555549
Is not bad script but I don't know why author removing and adding images over and over

I changed script little bit and add your requirements

now you can control image position and size using rect variable


private var rect:Rectangle = new Rectangle(10, 5, 400, 300);

where x - 10, y - 5, width - 400, height - 300
package  
{
	//imports
	import flash.geom.Rectangle;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.display.StageAlign;
	import flash.display.Stage;
	import flash.display.StageScaleMode;
	import flash.utils.setTimeout;
	import caurina.transitions.Tweener;

	/**
	* ...
	* @author Michel
	*/
	public class SlideShow extends Sprite
	{
		//vars
		private var _slideTime:int = 3;
		private var _xmlPath:String = "slideXML.php";
		private var _slides:XMLList;
		private var _image:Sprite;
		private var _prevImage:Sprite;
		private var _loader:Loader;
		private var _imageIndex:uint;
		private var _stage:Stage;

		private var rect:Rectangle = new Rectangle(10, 10, 300, 300);
		
		public function SlideShow(s:Stage)
		{
			_stage = s;
			_stage.align = StageAlign.TOP_LEFT;
			_stage.scaleMode = StageScaleMode.NO_SCALE;

			//make a new holder sprite
			_image = new Sprite();
			addChild(_image);

			_prevImage = new Sprite();
			addChild(_prevImage);

			_image.x = _prevImage.x = rect.x;
			_image.y = _prevImage.y = rect.y;

			loadXml();
		}
		
		private function loadXml():void
		{
			//load the xml file
			var xmlLoader:URLLoader = new URLLoader();
			xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
			xmlLoader.load(new URLRequest(_xmlPath));
		}
		
		private function xmlLoaded(e:Event):void
		{
			//save the xml
			var xmlContent:XML = new XML(e.target.data);
			_slides = xmlContent..slide;

			//load the first image
			if(_slides.length() > 0){
				_imageIndex = 0;
				loadImage();
			}
		}

		private function loadImage():void
		{
			var holder:Sprite = (_imageIndex % 2 == 0 ? _image : _prevImage);
			setChildIndex(holder, 0); 
			var lastHolder:Sprite = (_imageIndex % 2 != 0 ? _image : _prevImage);
			setChildIndex(lastHolder, 1); 

			//Remove old loader
			if(holder.numChildren > 0)
				holder.removeChildAt(0);

			//load the image
			_loader = new Loader();
			_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
			_loader.load(new URLRequest(_slides[_imageIndex].@file));
			//add the image to the holder
			holder.addChild(_loader);
		}

		private function imageLoaded(e:Event):void
		{
			var holder:Sprite = (_imageIndex % 2 == 0 ? _image : _prevImage);
			holder.alpha = 1;
			
			var lastHolder:Sprite = (_imageIndex % 2 != 0 ? _image : _prevImage);
			Tweener.addTween(lastHolder, { alpha:0, time:3});

			holder.width = rect.width - rect.x;
			holder.height = rect.height - rect.y;

			//set the interval
			if(_imageIndex >= _slides.length() - 1){
				_imageIndex = 0;
			}else{
				_imageIndex++;
			}
			setTimeout(loadImage, _slideTime * 1000);
		}
	}
	
}

Open in new window

0
 

Author Comment

by:Kevin
ID: 36557914
Very cool.  I was able to see my images the size that I specified in the .as file, but no matter what I put as the first 2 rectangle variables (which I guess is the x, y position), the images seem to play close to the upper left hand corner...

http://www.lafayettekiwanis.org/JamboreeImages/scoreboard.html
0
 
LVL 29

Expert Comment

by:dgofman
ID: 36558127
How to switch location I described in the thread but I have one mistake with calculation of size let me fix.

And to move you image you can use a rect like this

rect = new Rectangle(300, 210, 225, 154);

private function imageLoaded(event:Event) : void
        {
            var _loc_2:* = _imageIndex % 2 == 0 ? (_image) : (_prevImage);
            _loc_2.alpha = 1;
            var _loc_3:* = _imageIndex % 2 != 0 ? (_image) : (_prevImage);
            Tweener.addTween(_loc_3, {alpha:0, time:3});
            _loc_2.width = rect.width;
            _loc_2.height = rect.height;
0
 

Author Comment

by:Kevin
ID: 36560697
So would the new ActionScript file look like this ?

package  
{
	//imports
	import flash.geom.Rectangle;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.display.StageAlign;
	import flash.display.Stage;
	import flash.display.StageScaleMode;
	import flash.utils.setTimeout;
	import caurina.transitions.Tweener;

	/**
	* ...
	* @author Michel
	*/
	public class SlideShow extends Sprite
	{
		//vars
		private var _slideTime:int = 3;
		private var _xmlPath:String = "slideXML.php";
		private var _slides:XMLList;
		private var _image:Sprite;
		private var _prevImage:Sprite;
		private var _loader:Loader;
		private var _imageIndex:uint;
		private var _stage:Stage;

		private var rect:Rectangle = new Rectangle(180, 180, 225, 154);
		
		public function SlideShow(s:Stage)
		{
			_stage = s;
			_stage.align = StageAlign.TOP_LEFT;
			_stage.scaleMode = StageScaleMode.NO_SCALE;

			//make a new holder sprite
			_image = new Sprite();
			addChild(_image);

			_prevImage = new Sprite();
			addChild(_prevImage);

			_image.x = _prevImage.x = rect.x;
			_image.y = _prevImage.y = rect.y;

			loadXml();
		}
		
		private function loadXml():void
		{
			//load the xml file
			var xmlLoader:URLLoader = new URLLoader();
			xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
			xmlLoader.load(new URLRequest(_xmlPath));
		}
		
		private function xmlLoaded(e:Event):void
		{
			//save the xml
			var xmlContent:XML = new XML(e.target.data);
			_slides = xmlContent..slide;

			//load the first image
			if(_slides.length() > 0){
				_imageIndex = 0;
				loadImage();
			}
		}

		private function loadImage():void
		{
			var holder:Sprite = (_imageIndex % 2 == 0 ? _image : _prevImage);
			setChildIndex(holder, 0); 
			var lastHolder:Sprite = (_imageIndex % 2 != 0 ? _image : _prevImage);
			setChildIndex(lastHolder, 1); 

			//Remove old loader
			if(holder.numChildren > 0)
				holder.removeChildAt(0);

			//load the image
			_loader = new Loader();
			_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
			_loader.load(new URLRequest(_slides[_imageIndex].@file));
			//add the image to the holder
			holder.addChild(_loader);
		}

		private function imageLoaded(e:Event):void
        {
            var _loc_2:* = _imageIndex % 2 == 0 ? (_image) : (_prevImage);
            _loc_2.alpha = 1;
            var _loc_3:* = _imageIndex % 2 != 0 ? (_image) : (_prevImage);
            Tweener.addTween(_loc_3, {alpha:0, time:3});
            _loc_2.width = rect.width;
            _loc_2.height = rect.height;
			
			holder.width = rect.width - rect.x;
			holder.height = rect.height - rect.y;

			//set the interval
			if(_imageIndex >= _slides.length() - 1){
				_imageIndex = 0;
			}else{
				_imageIndex++;
			}
			setTimeout(loadImage, _slideTime * 1000);
		}
	}
	
}

Open in new window

0
 
LVL 29

Accepted Solution

by:
dgofman earned 500 total points
ID: 36561437
No, I just asked to make only two changes

package  
{
	//imports
	import flash.geom.Rectangle;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.display.StageAlign;
	import flash.display.Stage;
	import flash.display.StageScaleMode;
	import flash.utils.setTimeout;
	import caurina.transitions.Tweener;

	/**
	* ...
	* @author Michel
	*/
	public class SlideShow extends Sprite
	{
		//vars
		private var _slideTime:int = 3;
		private var _xmlPath:String = "slideXML.php";
		private var _slides:XMLList;
		private var _image:Sprite;
		private var _prevImage:Sprite;
		private var _loader:Loader;
		private var _imageIndex:uint;
		private var _stage:Stage;

		private var rect:Rectangle = new Rectangle(180, 180, 225, 154);
		
		public function SlideShow(s:Stage)
		{
			_stage = s;
			_stage.align = StageAlign.TOP_LEFT;
			_stage.scaleMode = StageScaleMode.NO_SCALE;

			//make a new holder sprite
			_image = new Sprite();
			addChild(_image);

			_prevImage = new Sprite();
			addChild(_prevImage);

			_image.x = _prevImage.x = rect.x;
			_image.y = _prevImage.y = rect.y;

			loadXml();
		}
		
		private function loadXml():void
		{
			//load the xml file
			var xmlLoader:URLLoader = new URLLoader();
			xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
			xmlLoader.load(new URLRequest(_xmlPath));
		}
		
		private function xmlLoaded(e:Event):void
		{
			//save the xml
			var xmlContent:XML = new XML(e.target.data);
			_slides = xmlContent..slide;

			//load the first image
			if(_slides.length() > 0){
				_imageIndex = 0;
				loadImage();
			}
		}

		private function loadImage():void
		{
			var holder:Sprite = (_imageIndex % 2 == 0 ? _image : _prevImage);
			setChildIndex(holder, 0); 
			var lastHolder:Sprite = (_imageIndex % 2 != 0 ? _image : _prevImage);
			setChildIndex(lastHolder, 1); 

			//Remove old loader
			if(holder.numChildren > 0)
				holder.removeChildAt(0);

			//load the image
			_loader = new Loader();
			_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
			_loader.load(new URLRequest(_slides[_imageIndex].@file));
			//add the image to the holder
			holder.addChild(_loader);
		}

		private function imageLoaded(e:Event):void
		{
			var holder:Sprite = (_imageIndex % 2 == 0 ? _image : _prevImage);
			holder.alpha = 1;
			
			var lastHolder:Sprite = (_imageIndex % 2 != 0 ? _image : _prevImage);
			Tweener.addTween(lastHolder, { alpha:0, time:3});

			holder.width = rect.width;
			holder.height = rect.height;

			//set the interval
			if(_imageIndex >= _slides.length() - 1){
				_imageIndex = 0;
			}else{
				_imageIndex++;
			}
			setTimeout(loadImage, _slideTime * 1000);
		}
	}
	
}

Open in new window

0
 

Author Closing Comment

by:Kevin
ID: 36563278
Thanks!  It works great.  See the results at

www.lafayettekiwanis.org/scoreboard/scoreboard.html
0

Featured Post

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Recently, I was asked to recommend a tracking system to be implemented on a clients website. As the entire site was built on flash, my first thought was to suggest custom built tracking system. However, our company at that point of time didn't h…
The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question