Kevin
asked on
Need flash slideshow to play in a smaller window rather than the entire stage
I have a flash file that I got online that does almost all of what I want with a couple of exceptions:
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:
Thanks.
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
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;
}
}
}
Thanks.
ASKER
And here is the flash file.
background-slide-show.fla
background-slide-show.fla
Nice to get generated XML
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
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);
}
}
}
ASKER
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
http://www.lafayettekiwanis.org/JamboreeImages/scoreboard.html
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;
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;
ASKER
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);
}
}
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
ASKER
Open in new window