Image Slideshow
I want to create a banner for a website that will include a series of images that I want to play in a loop, fading into one another. I've seen this on a few websites but don't know much about flash or how to do it.
I'm presuming Flash is the technology to do this although would it also be possible or better/worse to do this using spry?
Could someone please point me in the direction of a good resource to show me how to build this functionality.
Thanks.
SitePoint > Design Your Site > Flash and Actionscript
Posted on: Aug 6, 2008, 10:41
View Complete Forum Thread with Replies
Sponsored Links:
Photo Slideshow With XML - Image Gap On First Cylce Through Slideshow
Hello,
I am new to this site, and I went through the tutorial on this site, "Photo slideshow using XMl and Flash, " http://www.kirupa.com/developer/mx20..._slideshow.htm
but I encountered a problem where my images lag the first time they cycle through all the images in the XML file.
The first time the flash page loads and starts the slideshow, I don't want the gap between the transitioning of the images where the movie backgound shows. I think it has something to do with the images loading for the first time, so I tried to load each picture in a different movieclip with an alpha of 0 before the slideshows starts, but it didn't work and there is still the gap between the images the first time the pictures cycle through the slide show.
Please offer any advice on how to stop the image lag the first time the slideshow cycle through all the images in the XML file.
View Replies !
View Related
Image Slideshow Cant Remove Previous Image
Hi there I have a basic image slide show loading external images that fades out after each image and then I want to load the next image. However I can't figure out how to remove the old image, at the moment when the image fades out you can see all the previous images fading out too.
Here is the code I am using:
Code:
var imageNo:Number = 1;
ImageLoad("images/home/" + imageNo + ".jpg",imageHolderMC);
// image preloader
function ImageLoad(u:String,target){
var targetClip = target;
var _loader:Loader = new Loader();
var request:URLRequest = new URLRequest(u);
_loader.load(request);
targetClip.addChild(_loader);
_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
}
function loadProgress(event:ProgressEvent):void {
var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
percentLoaded = Math.round(percentLoaded * 100);
}
function completeHandler(event):void {
imageHolderMC.alpha = 1;
imageHolderMC.addEventListener(Event.ENTER_FRAME, fadeOut);
function fadeOut(evt:Event):void {
if(imageHolderMC.alpha > 0){
imageHolderMC.alpha -= .02;
} else {
imageHolderMC.removeEventListener(Event.ENTER_FRAME, fadeOut);
imageNo++;
ImageLoad("images/home/" + imageNo + ".jpg",imageHolderMC);
}
}
}
I think it is something to do with removeChild() but I can't figure out where to put it.
Any help would be really er... helpful!
Cheers,
Bob
View Replies !
View Related
Xml Slideshow Tutorial - Fade From Image To Image?
I am building a slideshow for a client based on Kirupa's fantastic tutorial http://www.kirupa.com/developer/mx2004/xml_slideshow.htm
I want to change it so that instead of new images fading in from the background color, they fade from image to image. To that end, I have created another instance of the image mc the same as "picture" but called "bg_picture". I have placed it in the same layer as picture, but sent it to the back so it would lie behind the main picture.
My thought was to load the current picture as a background picture before p got incremented (or decremented) and the new image fades in. That way, the fade will be from one image directly to the next. I have edited the code as follows:
Code:
function nextImage() {
if (p<(total-1)) {
bg_picture.loadMovie(image[p], 1); //added this line
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
}
}
}
When I test the flash file, the slideshow performs as expected except that when the new line is called, the image showing blinks out to the background color momentarily, then reappears before the new image fades in.
I thought it might be a question of the background image not being preloaded, so I tried the following code to force the background image to load before the transition starts. Unfortunately, there was no discernable difference in the display.
Code:
function nextImage() {
if (p<(total-1)) {
bg_picture._alpha = 0; //added code starts here
bg_picture.loadMovie(image[p], 1);
bg_filesize = bg_picture.getBytesTotal();
bg_loaded = bg_picture.getBytesLoaded();
if (bg_loaded == bg_filesize) {
bg_picture._alpha = 100; //added code ends here
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
}
} //added code
}
}
Does anyone have any idea what I can do to have this transition smoothly?
View Replies !
View Related
Getting Slideshow Button To Go From Last Image To 1st Image...
and vice versa.
Instead of using the left and right arrow keys, I have buttons that call the functions of nextImage() and previousImage().
Here's the problem: I want the user to be able to jog through all the images and when they hit the last one, the next "next" click takes them to the beginning.
-and-
if the user is on the first image, clicking the "back button" takes them to the last image.
One more thing. --------------->
I need to interval (myInterval) to reset (but not stop the slideshow) everytime a "back" or "next button" is clicked.
I've tried the clearInterval(myInterval), but no luck.
I've attached all the files that I am working with.
Thank you in advance for all of your help.
View Replies !
View Related
Xml Image Slideshow Help
Hello,
I have gotten the basics of working with XML in AS 3 down, and I have been so far able to load different bits of text from an external xml file to my flash movie, but I am stymied on getting images to load...can someone take a quick look at this and let me know what lines of code I am missing, or point me in the right direction?
Right now I just have three pics in my xml file so I can work out how to do this in the first place...
XML file is structured like this:
<images>
<pic>img/img0.jpg</pic>
<pic>img/img1.jpg</pic>
<pic>img/img3.jpg</pic>
</images>
AS 3 Code:
Code:
import flash.display.Sprite;
import flash.events.TimerEvent;
import flash.utils.Timer;
import flash.net.URLLoader;
import flash.net.URLRequest;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("images.xml"));
var xmlData:XML = new XML();
function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
ParseImages(xmlData);
}
function ParseImages(imagesInput:XML):void {
trace("XML Output");
trace("-------------------------");
trace(xmlData.pic.text()[0]);
}
var imageLoader:Loader = new Loader();
addChild(imageLoader);
var timer:Timer = new Timer(1000, 30);
timer.addEventListener(TimerEvent.TIMER, imageLoad);
timer.start();
function imageLoad(e:Event):void{
var length = xmlData.pic.length();
var i = 0;
while(i < 3){
imageLoader.load(xmlData.images.pic[i]);
i++;
trace("Image" + i + "Loaded");
}
}
thanks,
varPBR:Tasty
View Replies !
View Related
Image Slideshow
I'm trying to have 5 images (right now 4 and 5 are commented out) each fade in, then disappear, then the next fades in. Right, now, only my first image fades in.
ActionScript Code:
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.events.TimerEvent;
import flash.utils.Timer;
var store1_mc:MovieClip;
var store2_mc:MovieClip;
var store3_mc:MovieClip;
//var store4_mc:MovieClip;
//var store5_mc:MovieClip;
var imageRequest:URLRequest;
var imageLoader:Loader;
var minuteTimer:Timer;
store1_mc = addImage("store1.jpg", 0);
store2_mc = addImage("store2.jpg", 0);
store3_mc = addImage("store3.jpg", 0);
//store4_mc = addImage("store4.jpg", 0);
//store5_mc = addImage("store5.jpg", 0);
TransitionManager.start(store1_mc, {type:Fade, direction:Transition.IN, duration:2, easing:Strong.easeOut});
minuteTimer = new Timer(4000);
minuteTimer.addEventListener(TimerEvent.TIMER, onTimerFired);
minuteTimer.start();
function addImage(imageURL:String, imagePosition:Number)
{
var image_mc:MovieClip
image_mc = new MovieClip;
imageRequest = new URLRequest(imageURL);
imageLoader = new Loader();
imageLoader.load(imageRequest);
image_mc.addChild(imageLoader);
image_mc.x = imagePosition;
image_mc.visible=false;
addChildAt(image_mc, 0);
return image_mc;
}
function onTimerFired(event:TimerEvent):void
{
if (store1_mc.visible == true){
store1_mc.visible = false;
store2_mc.visible = true;
}
if (store2_mc.visible == true){
store2_mc.visible = false;
store3_mc.visible = true;
}
if (store3_mc.visible == true){
store3_mc.visible = false;
store1_mc.visible = true;
}
}
View Replies !
View Related
Image Slideshow
Hello to all,
I recently obtained some brief instructions from this forum about how to create a flash effect such as on the following website:-
null
The instructions given were:-
1. Import images
2. Convert each to a symbol
3. Drag an instance of each to the stage on its own layer.
4. create a 2nd keyframe down the timeline.
5. Position the image in the 2nd keyframe somewhere else.
6. Apply a Motion Tween.
I am very new to flash and this seems a little brief to me. However, I have managed to decipher some of the instructions above and create some effects. How do I create the 'slide in' effect in which an image slides in from the left over the previous image?
The only help I can see anywhere on the web is about fading an image, but nothing about creating a slide in effect similar to that on the this website null
Any help I would be really grateful, coming from a novice at using Flash 8.
Kind regards to all,
Jeff
View Replies !
View Related
Image Slideshow...help.
I tried to create a slide show following the instructions on this website: http://www.layersmagazine.com/flash-slideshow-image-gallery.html
I'm having trouble with the Action Script because when I try to debug my flash file, under Description it says: 1119: Access of possibly undefined property onRelease through a reference with static type flash.display:SimpleButton. While under Source it says: next_btn.onPress=function(){ and the same thing for last_btn.onPress=function(){
I would really appreciate it if someone would help me with it...
Thank you!
View Replies !
View Related
Xml Slideshow With Only One Image
okay, I know most slideshows have more than one image, but when the slideshow only has one, it blinks on and off. The problem is I am using this in a cms tool that pulls the files dynamically so i will sometimes have more than one,but other times, only one. anyone have a solution?
http://www.kirupa.com/forum/showthread.php?t=81020
View Replies !
View Related
[help] Image Slideshow
hi, i tried the search once, but i couldnt find wat i was looking for .. so here goes my problem..
I want to make an image slideshow with 5 images and a specified duration and also 5 buttons to jump to any of the 5 images.
so my flash script goes like
Code:
///////////////////////////////////////////////////////////////////////////////////
intervaltime = 15000;
changescreen(1); // display the first image
function wait()
{
clearInterval(myTimer);
myTimer = 0;
changescreen(++p);
fl=1;
loaded = 0;
// set image alpha to 0
}
function tracethis()
{
loaded = 1;
trace("loaded = " + loaded);
myTimer = setInterval(wait, intervaltime); // set the time interval till next image
}
function changescreen(n)
{
if(n>5)
{n=1;}
newvars.load(url+"?id="+n);
clearInterval(myTimer); // clear the time interval (this is needed if the image was changed by mouse click)
newvars.onLoad = function()
{
_root.screen.textVar1 = this.textVar1;
_root.screen.titleVar1 = this.titleVar1;
_root.screen.imageloader.loadMovie("flash/images/img"+n+".jpg");
_root.screen.imageloader.onLoad = tracethis();
}
p=n;
}
onEnterFrame = function()
{
if(loaded == 1)
{
//image has loaded
// change the image alpha to 100
}
_root.preloader.pl_bar._x = -50 + (bytesloaded*100)/TotalBytes; //display the pre loader
}
// code to change the image on mouse click..
///////////////////////////////////////////////////////////////////////////////////
It turns out that the timer is running while the image is being loaded. Which means that it doesnt wait 15 seconds after the image has loaded. Even worse , if the image take longer to load , the timer just runs out and goes to the next image. I cant understand how to correct this problem, coz timer is cleared as soon as the function changescreen() is called.. plz help me out with this..
View Replies !
View Related
Image Slideshow
hi there,
I'm still quite new in flash and I'm building an image slideshow with preloaders?
the thing I wanna have is: an xml gets preloaded with the path information of the images! all images storaged in an array. and after a few seconds the next image fades in!
so...
I think I'm well on my way... I've preloaded the xml and on click on stage I'm preloading an image, the image fades in with tweener. if I click a second time the current image fades out and the next image gets preloaded and fades in!
only thing I don't know is how to handle the thing with preloading all other images in the background! I don't want it to fade out, preload and fade in...i want it to fadeOver to the next image! How can I achieve that!
Code:
//Stage Properties
stage.scaleMode = "noScale";
stage.align = "TL";
//Classes
import flash.display.*;
import flash.net.URLRequest;
import flash.events.*;
import caurina.transitions.*
//Preloader Textfield
var tf:TextField = new TextField();
var format:TextFormat = new TextFormat();
tf.x = 0
tf.y = 0
format.font = "Verdana";
format.color = 0x000000;
format.size = 12;
format.align = "center";
tf.defaultTextFormat = format;
tf.selectable = false;
tf.width = 45;
tf.background = true;
tf.backgroundColor = 0xFFFFFF;
tf.height = 20
addChild(tf);
tf.visible = false
//Loderobject for Photopreload
var fotoloaderobject:Loader = new Loader();
addChild( fotoloaderobject );
fotoloaderobject.alpha= 0
fotoloaderobject.contentLoaderInfo.addEventListener( Event.OPEN, handleOpen );//...nach dem Start des Ladens...
fotoloaderobject.contentLoaderInfo.addEventListener( ProgressEvent.PROGRESS, handleProgress );//...kontinuierlich während des Ladevorgangs...
fotoloaderobject.contentLoaderInfo.addEventListener( Event.COMPLETE, handleComplete );//...nach Abschluss des Ladevorgangs...
//Loderfunctions
function handleOpen( event:Event ):void
{
tf.visible = true
}
function handleProgress( event:ProgressEvent ):void
{
var percent:Number = int(event.bytesLoaded / event.bytesTotal * 100)
tf.text = percent +"%";
}
function handleComplete( event:Event ):void
{
tf.visible = false
Tweener.addTween(fotoloaderobject , {alpha:1, time: 2})
}
//XML Loaderobject
var loader_xml:URLLoader = new URLLoader();
loader_xml.addEventListener(Event.COMPLETE, onLoaded)
//@stageClick --> next image
stage.addEventListener(MouseEvent.CLICK, changeObject);
//XDefinig XML
var xml:XML;
//Array for storage
var xa:Array = new Array()
//CurrentPic Integer
var cp:int = 0
function onLoaded(e:Event)
{
xml = new XML(e.target.data);
var il:XMLList = xml.path;
//For loop to buffer xml
for (var i:uint=0; i<il.length(); i++)
{
var co:Object = new Object();
co = il.text()[i]
xa.push (co)
}
output(xa[0])
}
//Function to load images
function output(c:Object):void
{
fotoloaderobject.load( new URLRequest( xa[cp] ) );
}
//Next image
function changeObject(e:Event):void
{
Tweener.addTween(fotoloaderobject , {alpha:0, time: 2, onComplete: nextimg})
function nextimg() {
if(cp == xa.length - 1)
cp = 0;
else
cp++;
output(xa[cp]);
}
}
loader_xml.load(new URLRequest ("images.xml"));
thanks for your help
View Replies !
View Related
Image Slideshow
I'm working on a slideshow in Flash 8. I want it to have images go to the left, and then slow down, stop, and go the other way. When you hover over an image, the animation stops, and the image scales bigger and is dominant over the images around it.
I've gotten most of that to work so far. The animation works, and the stopping and scaling of the images works too. But the dominance thing isn't working. I tried some code that allowed the instances to swap depths. But that would mess up the animation.
I searched all over the web, and found this forum, where someone had asked a similar question not too long ago. I tried to use the information in that thread to fix my problem but it didn't help.
This is the only code I have. I have it on a frame.
Code:
function stopTime() {
this._parent.stop();
this.gotoAndPlay("grow");
trace("stop time");
}
function startTime() {
this._parent.play();
this.gotoAndPlay("shrink");
trace("start time");
}
this.img001anim_mc.onRollOver = stopTime;
this.img001anim_mc.onRollOut = startTime;
this.img002anim_mc.onRollOver = stopTime;
this.img002anim_mc.onRollOut = startTime;
this.img003anim_mc.onRollOver = stopTime;
this.img003anim_mc.onRollOut = startTime;
this.img004anim_mc.onRollOver = stopTime;
this.img004anim_mc.onRollOut = startTime;
this.img005anim_mc.onRollOver = stopTime;
this.img005anim_mc.onRollOut = startTime;
this.img006anim_mc.onRollOver = stopTime;
this.img006anim_mc.onRollOut = startTime;
this.img007anim_mc.onRollOver = stopTime;
this.img007anim_mc.onRollOut = startTime;
this.img008anim_mc.onRollOver = stopTime;
this.img008anim_mc.onRollOut = startTime;
this.img009anim_mc.onRollOver = stopTime;
this.img009anim_mc.onRollOut = startTime;
this.img010anim_mc.onRollOver = stopTime;
this.img010anim_mc.onRollOut = startTime;
this.img011anim_mc.onRollOver = stopTime;
this.img011anim_mc.onRollOut = startTime;
this.img012anim_mc.onRollOver = stopTime;
this.img012anim_mc.onRollOut = startTime;
this.img013anim_mc.onRollOver = stopTime;
this.img013anim_mc.onRollOut = startTime;
this.img014anim_mc.onRollOver = stopTime;
this.img014anim_mc.onRollOut = startTime;
this.img015anim_mc.onRollOver = stopTime;
this.img015anim_mc.onRollOut = startTime;
this.img016anim_mc.onRollOver = stopTime;
this.img016anim_mc.onRollOut = startTime;
this.img017anim_mc.onRollOver = stopTime;
this.img017anim_mc.onRollOut = startTime;
this.img018anim_mc.onRollOver = stopTime;
this.img018anim_mc.onRollOut = startTime;
The timeline looks like this:
_root.
slideshow_mc.
img001anim_mc.
img001_mc
So there is a single movie clip on the root (slideshow_mc). Inside that movie clip is a bunch of images (each with it's own layer) (img001anim_mc). Those movie clips are animations of the images growing/shrinking. Inside them is the actual animation of (img001_mc) growing/shrinking.
I've tried putting code in the frame inside the slideshow that you see above. I've tried putting the swapDepths there. I've tried putting the swapDepths inside the img001anim_mc and referencing the parent. Both have given me the same exact result, the image that I hover over stays in place and the rest of the images keep moving.
Can anyone help?
Thanks so much!
View Replies !
View Related
How To Made A Image Slideshow?
1. How to make a photo slideshow which when i click on next button, the photo will change to next picture, but if i click on back button, the photo will go back to the previous one?
2. How to make a music from loud to silence slowly? i mean the sound fade out slowly...
Any help will be appreciate, please and thanks...
View Replies !
View Related
Problems With Slideshow, 2º Image.
I am with a problem in slideshow, am pulling 10 external images using "_ root", when I open my page "random.html", does not appear mine 10 images, it only shows 9 images to me, not showing the second image, and I can´t find the problem, I would like a little help, if possible.
View Replies !
View Related
Jump To An Image In Slideshow
I've made my slideshow and 'next' and 'previous' buttons to navigate through them. But as I have 89 images I want to be able to jump to a specific image. I.e. In a box I type '50' and that will jump to image number 50 and saves me having to click 50 times.
The images are in a seperate folder and an XML file is used to call them in. So is it just a question of assigning a value to each entry and calling that when the relevant number has been clicked? How would I go about doing this?
I was going to use the input text box, is this ok?
I'm on 2004 MX Pro BTW.
Thanks
View Replies !
View Related
Slideshow Image Loading...
ok I am using Macromedia Flash MX Pro 2004. I am using the template under new and the modern slideshow is what I am using. Since I have added a few more pictures, it takes longer to load so I am wanting to add a loading phrase or something for each picture... How would I do this?
View Replies !
View Related
XML Image Slideshow Preload?
Hey All,
I have built an image slide show [insert lame joke here] very similar to that found at.....
http://www.slideshowpro.net/
How do you all figure this application loads the images?
I have 90+ images fed by an xml reference but on the first load they all take sometime. I have one movieclip holder the images are loaded into. Is this the approach?
I could also see duplicating this clip into levels that would reside under each other so the next image could load while the first is displayed.
Any thoughts here?
As always any help here would be fanfriggintastic!
cheers
-jub-
View Replies !
View Related
Editing This Image Slideshow
I have the following slideshow:
Code:
this.pathToPics = "animation/";
// fill this array with your pics
this.pArray = ["image0.jpg", "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg"];
this.fadeSpeed = 20;
this.pIndex = 0;
// MovieClip methods ----------------------------------
// d=direction; should 1 or -1 but can be any number
//loads an image automatically when you run animation
loadMovie(this.pathToPics+this.pArray[0], _root.photo);
MovieClip.prototype.changePhoto = function(d) {
// make sure pIndex falls within pArray.length
this.pIndex = (this.pIndex+d)%this.pArray.length;
if (this.pIndex<0) {
this.pIndex += this.pArray.length;
}
this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
if (this.photo._alpha>this.fadeSpeed) {
this.photo._alpha -= this.fadeSpeed;
} else {
this.loadPhoto();
}
};
MovieClip.prototype.loadPhoto = function() {
// specify the movieclip to load images into
var p = _root.photo;
//------------------------------------------
p._alpha = 0;
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.onEnterFrame = fadeIn;
} else {
trace(l/t);
}
};
MovieClip.prototype.fadeIn = function() {
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
this.onEnterFrame = null;
}
};
With a left and right arrow, with code:
Code:
on (release) {
_root.changePhoto(-1);
}
&
Code:
on (release) {
_root.changePhoto(1);
}
I want to though have 6 buttons and when button 3 is pressed for example image3.jpg to fade in, and whatever is previously loaded to fade out... Anyone know how to do this using the above code?
View Replies !
View Related
Image Slideshow Question
Okay I'm no pro web designer, but I'm building a website for a company, and they want an image slideshow for some of their featured products.
Something along these lines: http://www.slaterdistributing.com/default.aspx
The above example seems to use some heavy javascripting to make the slideshow, but I was wondering if there was a way to create the same thing in Flash using actionscript, where flash would draw from a certain directory or filename to locate the images used.
Is this possible? And if so, could someone point me in the right direction?
View Replies !
View Related
Text On Image Slideshow
ok i have another question:
i have like a slide show of images now from a tutorial i used.
if i want text to overlay each image and not fade in or out (like the images do) how do i do this?
again thanks in advance.
View Replies !
View Related
[CS3] XML Image + Video Slideshow
Hi guys,
Maybe anyone could help me to add a video to my existing image slide show gallery.
Video and images are intend to be controlled with next-previous arrow buttons.
Here is the code I'm using
thanks
Code:
delay = 9000;
//-----------------------
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("crystallize/crystallize.xml");
// ///////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
// ///////////////////////////////////
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 1.5;
}
}
};
var myInterval;
function nextImage() {
p++;
p %= image.length;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
clearInterval(myInterval);
if (playing) {
slideshow();
}
}
}
function prevImage() {
clearInterval(myInterval);
if (playing) {
slideshow();
}
if (p>0) {
p--;
} else {
p = image.length-1;
}
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
clearInterval(myInterval);
if (playing) {
slideshow();
}
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+"/"+total;
}
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
nextImage();
}
}
stop.tt.text = "STOP";
play.tt.text="PLAY"
playing = true
play.onPress = function(){
playing = true
nextImage()
}
play.onRelease =play.onReleaseOutside= function(){
this.gotoAndStop("_disabled")
this.enabled = false
}
stop.onPress = function(){
playing = false
play.enabled = true
clearInterval(myInterval)
}
View Replies !
View Related
Random Image Slideshow
Hi, I have a project for this company that requires an image slideshow to show 46 images, with small fade cuts separating each image. The way I have set up now, is just spread out on the timeline, and a very simple movie clip. I showed it to the president today, and he wants me the images to be shown at random so that they are not at all in the same sequence every time a visitor views the main page. I've looked at several random number generators and various other randomizers, and nothing appears to be controlled by just time. I found one that works by loading a different image every time the page is refreshed, but what I am looking for is for a new image to appear through a simple fade transition every 45 frames. I know the solution might require some very redundant coding because of the number of images, but i'm willing to make the sacrifice. any help?
View Replies !
View Related
Slideshow On/off In Image Gallery
hey all, hopefully someone can help me out on this, been frustrating me.
I have this image gallery made using actionscript and xml, implemented a slideshow function to it so if wanted you can turn the slideshow on and it will go through the images automatically, but I also want to be able to turn the slideshow off. I have the slideshow turning on ok and I have it so it turns off but for some reason, after i turn it off and I manually go through the images the slideshow will turn back on after a few clicks.
I have this code on the slideshow on button:
Code:
on(press){
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
}
}
}
and using clearinterval on the off button:
Code:
on(press){
clearInterval(myInterval);
}
if anyone can give me a hand that would be awesome, thanks
View Replies !
View Related
Image Slideshow Scroller
Hey all, I'm pretty new here.
Would anyone be able to point me into the direction for designing an image scroller similar to this one BSU.edu
I'm working on a project for my company and they wanted something similar to this. Any help would be greatly appreciated. Thanks in advance!
Edited: 08/29/2008 at 12:17:05 PM by Narroway Graphics
View Replies !
View Related
Slideshow Image Transition
im trying to make an automatic slideshow with THIS image transition, however i do not want the scrolling thumbnails and the controls, can anyone tell me how to remove them and just make the slideshow automatic with the image transition?
http://img.photobucket.com/albums/v629/houstontx/slide1.swf
here is the link to the fla
http://www.box.net/public/oi4gmtkzjq
Edited: 12/12/2006 at 04:55:31 PM by mojoka5
View Replies !
View Related
XML Random Image Slideshow
I'm pulling my hair out trying to figure out how to make it pull the image and the text assiociated with the image randomly. Any direction would be greatly appreciated:
Attach Code
var id, current;
var k = 0, p = 0;
var slide = 1;
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
id = setInterval(preloadPic, 100);
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("assets/flash/splash/images.xml");
function Math.preloadPic()(Math.random()*5) {
clearInterval(id);
var con = picture.duplicateMovieClip("con"+k, 200+k);
con.loadMovie(image[p]);
_root.txt.desc_text_mov.desc_txt.text = description[p];
preloader._visible = 1;
con._alpha = 0;
var temp = picture.createEmptyMovieClip("temp"+k, 99+k);
k++;
temp.onEnterFrame = function() {
var total = con.getBytesTotal();
var loaded = con.getBytesLoaded();
percent = Math.round(loaded/total*100);
preloader.preload_bar._xscale = percent;
if (con._width) {
preloader._visible = 0;
con.onEnterFrame = fadeIn;
_root.txt.gotoAndPlay(2);
if (slide) {
id = setInterval(nextImage, 9000);
}
delete this.onEnterFrame;
}
};
}
MovieClip.prototype.fadeIn = function() {
if (this._alpha<100) {
current._alpha -= 10;
this._alpha += 10;
} else {
current._visible = 0;
current = this;
delete this.onEnterFrame;
}
};
function nextImage() {
current = this["con"+p];
p<total-1 ? p++ : p=0;
preloadPic();
}
function prevImage() {
current = this["con"+p];
p>0 ? p-- : p=total-1;
preloadPic();
}
preloadPic();
View Replies !
View Related
Slideshow/Image Gallery
Happy New Year!!!
I am building an XML image gallery in Flash CS3 with AS3. I am having trouble loading my large images into a movie clip that I created on the stage.
How it works:
1. the thumb images will load in a movie clip located to the left of the stage.
2. when the user clicks on the thumb image the correct large image will load in a different movie clip located on the right side of the stage.
Here is the line of code that I am having trouble with:
this.pricesScrollWindow.largeImages.addChild(this.imageLoader);
Attach Code
//largeImages.visible = false;
/*var largeImages:LargeImages = new LargeImages();
largeImages.width = 590;
largeImages.height = 500;
addChild(largeImages);*/
var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
function xmlLoaded(event:Event):void{
xml = XML(event.target.data);
xmlList = xml.children();
//trace(xml.children());
for(var i:int=0;i < xmlList.length();i++){
var imageHolder:ImageHolder = new ImageHolder();
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("thumbnails")));
//imageLoader.x = (170 * i);
addChild(imageHolder);
imageLoader.name = xmlList[i].attribute("source");
imageHolder.addChild(imageLoader);
if(i <= 1){
imageHolder.y = 0;
imageHolder.x = (i) * 85;
}
if(i >= 2){
imageHolder.y = 80;
imageHolder.x = (i - 3) * 85;
}
if(i >= 2*2){
imageHolder.y = 80 * 2;
imageHolder.x = (i - (2*2)) * 85;
}
if(i >= 2*3){
imageHolder.y = 80 * 3;
imageHolder.x = (i - (2*3)) * 85;
}
if(i >= 2*4){
imageHolder.y = 80 * 4;
imageHolder.x = (i - (2*4)) * 85;
}
if(i >= 2*5){
imageHolder.y = 80 * 5;
imageHolder.x = (i - (2*5)) * 85;
}
if(i >= 2*6){
imageHolder.y = 80 * 6;
imageHolder.x = (i - (2*6)) * 85;
}
if(i >= 2*7){
imageHolder.y = 80 * 7;
imageHolder.x = (i - (2*7)) * 85;
}
if(i >= 2*8){
imageHolder.y = 80 * 8;
imageHolder.x = (i - (3*8)) * 170;
}
if(i >= 3*9){
imageHolder.y = 80 * 9;
imageHolder.x = (i - (3*9)) * 85;
}
if(i >= 3*10){
imageLoader.y = 80 * 10;
imageLoader.x = (i - (3*10)) * 85;
}
if(i >= 3*11){
imageHolder.y = 80 * 11;
imageHolder.x = (i - (3*11)) * 85;
}
if(i >= 3*12){
imageHolder.y = 80 * 12;
imageHolder.x = (i - (3*12)) * 85;
}
if(i >= 3*13){
imageHolder.y = 80 * 13;
imageHolder.x = (i - (3*13)) * 85;
}
if(i >= 3*14){
imageHolder.y = 80 * 14;
imageHolder.x = (i - (3*14)) * 85;
}
imageHolder.scaleX = .5;
imageHolder.scaleY = .5;
imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
}
}
function showPicture(event:MouseEvent):void{
//largeImages.visible = true;
imageLoader = new Loader();
imageLoader.load(new URLRequest(event.target.name));
imageLoader.x = 0;
imageLoader.y = 0;
imageLoader.scaleX = .29;
imageLoader.scaleY = .29;
this.pricesScrollWindow.largeImages.addChild(this.imageLoader);
//imageLoader.addEventListener(MouseEvent.CLICK, removePicture);
}
function removePicture(event:MouseEvent):void{
imageLoader.visible = false;
imageLoader.removeEventListener(MouseEvent.CLICK, removePicture);
}
View Replies !
View Related
XML SlideShow Image Transition?
Is there a way to modify the Kirupa XML Slideshow to have a different transition instead of just fades in between images. Maybe something like an animated mask transition or something a little more visually appealing then just a simple fade.
Im not necessarily looking for a specific transition, just the way to accomplish adding one to the slideshow.
Thanks for any help anyone can provide.
View Replies !
View Related
Help With XML Slideshow - Fading Last Image
Hi I'm working on and xml loaded slideshow. I have a script that I got off of this site where the image fades out before the next one is loaded. The only problem is that the last image does not fade out, it just goes back to the first image which makes it inconsistant.
Anyone think they could help me with this?
Thanks in advance!
Here is the code I have so far:
Code:
delay = 4000;
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
link = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
link[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
}
firstImage();
} else {
content = "Please refresh your browser. XML was not loaded correctly";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
p = 0;
function preload(clip) {
picture.loadMovie(clip);
var temp = this.createEmptyMovieClip("temp", 9987);
temp.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
if (filesize>4 && filesize == loaded) {
picture._alpha += 1;
// used to be 10
if (picture._alpha>100) {
picture._alpha = 100;
slideshow();
delete this.onEnterFrame;
}
}
};
}
function nextImage() {
if (p<(total-1)) {
p++;
fadeOut(image[p]);
desc_txt.text = description[p];
desc_txt2.text = link[p];
}
}
function firstImage() {
picture._alpha = 0;
fadeOut(image[0]);
desc_txt.text = description[0];
desc_txt2.text = link[0];
}
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
}
}
function fadeOut(clip) {
picture.onEnterFrame = function() {
this._alpha -= 1;
if (this._alpha<1) {
preload(clip);
delete this.onEnterFrame;
}
};
}
View Replies !
View Related
XML Slideshow: Link To URL On Image?
I'm using Kirupa's XML Slideshow and was wondering if it was possible to add a link on the images to open a URL in the same html window.
Here's what I have in my Actions Layer:
Code:
delay = 5000;
//-----------------------
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = "Non disponible";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("news_fr.xml");
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
slideshow();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
}
}
I have also uploaded my FLA file in a compressed format (zip).
Thanks for your help.
View Replies !
View Related
Image Slideshow From Right To Left
hi there !
i need to develop an animation with over 50 image, all images slides over each others from right to left, and in the end of the animation there is a loop so that it automatically recall the first image to put it on the top ! and so on...
here is the fla for download, please i need ur help!! thanks very much in advance.
Peace
View Replies !
View Related
Image Slideshow Tutorial
in the image slideshow tutorial
how are u supposed to host the file on the web?
u can host the movie file but how about the xml file
it says that the movie and the xml file should be in the same folder
but waht if u want to publish it on the web?
View Replies !
View Related
Random Image Slideshow
Hi all, i've been trying to work with this actionscript to make it random and i just can't seem to do it. Any direction would be greatly appreciated.
Code:
var id, current;
var k = 0, p = 0;
var slide = 1;
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
id = setInterval(preloadPic, 100);
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("assets/flash/splash/images.xml");
function Math.preloadPic()(Math.random()*5) {
clearInterval(id);
var con = picture.duplicateMovieClip("con"+k, 200+k);
con.loadMovie(image[p]);
_root.txt.desc_text_mov.desc_txt.text = description[p];
preloader._visible = 1;
con._alpha = 0;
var temp = picture.createEmptyMovieClip("temp"+k, 99+k);
k++;
temp.onEnterFrame = function() {
var total = con.getBytesTotal();
var loaded = con.getBytesLoaded();
percent = Math.round(loaded/total*100);
preloader.preload_bar._xscale = percent;
if (con._width) {
preloader._visible = 0;
con.onEnterFrame = fadeIn;
_root.txt.gotoAndPlay(2);
if (slide) {
id = setInterval(nextImage, 9000);
}
delete this.onEnterFrame;
}
};
}
MovieClip.prototype.fadeIn = function() {
if (this._alpha<100) {
current._alpha -= 10;
this._alpha += 10;
} else {
current._visible = 0;
current = this;
delete this.onEnterFrame;
}
};
function nextImage() {
current = this["con"+p];
p<total-1 ? p++ : p=0;
preloadPic();
}
function prevImage() {
current = this["con"+p];
p>0 ? p-- : p=total-1;
preloadPic();
}
preloadPic();
View Replies !
View Related
Image Slideshow And Scenes
I'm trying to have a multi-scene project with a image slideshow on the first one, and once all the images have been show I want it to progress to the next. I'm using a simplified version the xml slideshow tutorial on here. I would just extend the timeline out to the needed frames ( total pics x delay x fps) but there are over 250 pictures which would result in some 60,000 frames. I know there has got to be a way to keep flash on the slideshow scene for the required time.. I was thinking something with setInterval, but I have no idea where to go with it. here is my code, any help would be greatly appreciated :X
Code:
delay = 5000;
// total frames = (number of pictures)(time up)(fps)
//-----------------------
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
p = 0;
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
imgloader.contentPath= image[p];
picture_num();
slideshow();
}
}
}
function firstImage() {
if (loaded == filesize) {
imgloader.contentPath= image[0];
picture_num();
slideshow();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
}
}
View Replies !
View Related
Editing This Image Slideshow
I have the following slideshow:
Code:
this.pathToPics = "animation/";
// fill this array with your pics
this.pArray = ["image0.jpg", "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg"];
this.fadeSpeed = 20;
this.pIndex = 0;
// MovieClip methods ----------------------------------
// d=direction; should 1 or -1 but can be any number
//loads an image automatically when you run animation
loadMovie(this.pathToPics+this.pArray[0], _root.photo);
MovieClip.prototype.changePhoto = function(d) {
// make sure pIndex falls within pArray.length
this.pIndex = (this.pIndex+d)%this.pArray.length;
if (this.pIndex<0) {
this.pIndex += this.pArray.length;
}
this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
if (this.photo._alpha>this.fadeSpeed) {
this.photo._alpha -= this.fadeSpeed;
} else {
this.loadPhoto();
}
};
MovieClip.prototype.loadPhoto = function() {
// specify the movieclip to load images into
var p = _root.photo;
//------------------------------------------
p._alpha = 0;
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.onEnterFrame = fadeIn;
} else {
trace(l/t);
}
};
MovieClip.prototype.fadeIn = function() {
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
this.onEnterFrame = null;
}
};
With a left and right arrow, with code:
Code:
on (release) {
_root.changePhoto(-1);
}
&
Code:
on (release) {
_root.changePhoto(1);
}
I want to though have 6 buttons and when button 3 is pressed for example image3.jpg to fade in, and whatever is previously loaded to fade out... Anyone know how to do this using the above code?
View Replies !
View Related
Choppiness In Image Slideshow
Hey everybody,
I'm a bit of a flash newb when it comes to action script. I've got this infinite slideshow scroller here, and it works great, but the output is a bit choppy, and tends to get hung up sometimes. fps is 150, frame rate 30. there's no need to look at the xml data as it doesn't control these variables.
http://www.pirouettesdancewear.com/splashtest.html
if anyone is interested in skimming through the code, i wouldn't mind
but if you also just have any thoughts, that would be great too.
thanks!
View Replies !
View Related
Image Slideshow Position
Hi,
I have a image viewer loading in flash. I want it to be fixed, so it fits nicely in the site. Right now it moves with the browser.
Example
Any suggestions?
I can't pinpoint in the code where this is happening.
I can post the code if needed.
Thanks
View Replies !
View Related
Random Image On Slideshow
hii
periority(High)
can anybody help me to find out the issue which coming with PNG files on slideshow the fading in & OUT IS NOT SMOOTH. WITH JPG ITS WORKING FINE
for testing just paste this code on ur 1st frame & test it,
2nd periority(low)
in this i need Random image in this Slideshow write now its coming in seqential order.
can anybody help me in that,what will be the code for that ?
or
suppose if i load these images through flashvars,can i load random image on each refresh. is it possible?
//AS-2 started
// put the image name here
photos = "1.png,2.png,3.png,4.png,5.png,6.png";
interval = "6";
_root.checkthisroot = true;
if (checkthisroot) {
Stage.scaleMode = "noScale";
Stage.align = "TL";
}
if (defaultinterval == undefined) {
defaultinterval = 6;
} else {
defaultinterval = Number(defaultinterval);
}
if (folder == undefined) {
folder = "";
}
checkslash = function () {
if (folder.length>0) {
if (folder.charAt(folder.length-1) != "/") {
folder += "/";
}
}
};
checkslash();
if (datafile == undefined) {
datafile = "inherit";
}
if (alphadelay == undefined) {
alphadelay = 7;
} else {
alphadelay = Number(alphadelay);
}
if (loop == undefined) {
loop = true;
} else {
if (loop == "true") {
loop = true;
} else {
loop = false;
}
}
if (clicktoreplay == undefined) {
clicktoreplay = true;
} else {
if (clicktoreplay == "true") {
clicktoreplay = true;
} else {
clicktoreplay = false;
}
}
i = 0;
photoindex = -1;
showimage = true;
nextimageloaded = false;
waiting = false;
checkvars = function () {
if (photos == undefined) {
getlist();
} else {
myphotos = photos.split(",");
myinterval = interval.split(",");
slide();
}
};
getlist = function () {
myvars = new LoadVars();
myvars.onLoad = function(success) {
if (success) {
myphotos = this.photos.split(",");
myinterval = this.interval.split(",");
if (this.defaultinterval != undefined) {
defaultinterval = Number(this.defaultinterval);
}
if (this.folder != undefined) {
folder = this.folder;
}
checkslash();
if (this.alphadelay != undefined) {
alphadelay = Number(this.alphadelay);
}
if (this.loop != undefined) {
if (this.loop == "true") {
loop = true;
} else {
loop = false;
}
}
if (this.clicktoreplay != undefined) {
if (this.clicktoreplay == "true") {
clicktoreplay = true;
} else {
clicktoreplay = false;
}
}
slide();
} else {
trace("unsuccess");
}
};
/*if (datafile == "inherit") {
datafile = this._url.substr(0, _url.length-3)+"txt";
}
trace(datafile);
myvars.load(datafile);*/
};
slide = function () {
i++;
photoindex++;
if (photoindex == myphotos.length) {
photoindex = 0;
}
var p = createEmptyMovieClip("photo"+i, i);
p.createEmptyMovieClip("internal",1);
loadMovie(folder+myphotos[photoindex], p.internal);
p._alpha = 0;
this.onEnterFrame = function() {
var l = p.internal.getBytesLoaded();
var t = p.internal.getBytesTotal();
if (l == t) {
preloader._visible = false;
delete this.onEnterFrame;
checkshow();
}
};
};
MovieClip.prototype.mfade = function() {
this.a = this._alpha;
this.onEnterFrame = function() {
this.a += (100-this.a)/alphadelay*2;
this._alpha = Math.round(this.a*1);
if (100-this.a<2) {
this.interval._alpha -= mytime;
delete this.onEnterFrame;
this.myinterval._alpha = 100;
this._alpha = 100;//dikai dene ke baad alpha
this._parent["photo"+(i-2)].mfadeOut.MovieClip();
}
};
};
//---------------------------------------
MovieClip.prototype.mfadeOut = function() {
this.b = this._alpha;
this.onEnterFrame = function() {
this.b += (0-this.b)/alphadelay;
this._alpha = Math.round(this.b);
if (0-this.b<2) {
//delete this.FadeOut.onEnterFrame;
this.myinterval._alpha = alphadelay;
this._alpha = 0;//dikai dene ke baad alpha
this._parent["photo"+(i-2)].removeMovieClip();
}
};
};
//------------------------------
checkshow = function () {
if (showimage || waiting) {
showimage = false;
waiting = false;
this["photo"+i].mfade();
if (myinterval[photoindex] != undefined) {
mytime = Number(myinterval[photoindex])*1000;
} else {
mytime = Number(defaultinterval)*1000;
}
mycounter = setInterval(counter, mytime);
if (photoindex<(myphotos.length-1) || loop) {
slide();
} else if (clicktoreplay) {
this["photo"+i].onPress = function() {
slide();
};
}
} else {
nextimageloaded = true;
this["photo"+i].mfadeOut();
}
};
counter = function () {
clearInterval(mycounter);
if (nextimageloaded) {
nextimageloaded = false;
showimage = true;
checkshow();
} else {
waiting = false;
}
};
checkvars();
stop();
//AS-2 ENDED
thanks
neeraj
View Replies !
View Related
Image Slideshow Using FlashMX
hai friends,
This is joe, I want to do a image slide show using flash MX. I need a help I Just the image to scroll, But i don't know
1. how to stop the Image scrolling on Mouseover.
2. On clicking on a particular image a new webpage must be displayed.
3. how to made a multiple images to scroll one by one
Thanks in Advance,
Joe Lawrence
View Replies !
View Related
Editing This Image Slideshow
I have the following slideshow:
Code:
this.pathToPics = "animation/";
// fill this array with your pics
this.pArray = ["image0.jpg", "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg"];
this.fadeSpeed = 20;
this.pIndex = 0;
// MovieClip methods ----------------------------------
// d=direction; should 1 or -1 but can be any number
//loads an image automatically when you run animation
loadMovie(this.pathToPics+this.pArray[0], _root.photo);
MovieClip.prototype.changePhoto = function(d) {
// make sure pIndex falls within pArray.length
this.pIndex = (this.pIndex+d)%this.pArray.length;
if (this.pIndex<0) {
this.pIndex += this.pArray.length;
}
this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
if (this.photo._alpha>this.fadeSpeed) {
this.photo._alpha -= this.fadeSpeed;
} else {
this.loadPhoto();
}
};
MovieClip.prototype.loadPhoto = function() {
// specify the movieclip to load images into
var p = _root.photo;
//------------------------------------------
p._alpha = 0;
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.onEnterFrame = fadeIn;
} else {
trace(l/t);
}
};
MovieClip.prototype.fadeIn = function() {
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
this.onEnterFrame = null;
}
};
With a left and right arrow, with code:
Code:
on (release) {
_root.changePhoto(-1);
}
&
Code:
on (release) {
_root.changePhoto(1);
}
I want to though have 6 buttons and when button 3 is pressed for example image3.jpg to fade in, and whatever is previously loaded to fade out... Anyone know how to do this using the above code?
View Replies !
View Related
Flickering In Image Slideshow
I'm using Flashdevelop (because I just want to fool around a bit and see if flash is something I want to spend time on), and that means it's really hard to find any useful tutorials, manuals and scripts. Because almost all assume one is using CS3, and are full of design modes, .fla's, timelines and frames
Still, I managed to put together (copying and pasting from several scripts and tutorials I found online) an image slideshow.
I've got two image items covering each other. In the one on top I load the first picture, in the one on the bottom I load the picture to be shown next. Then the pic on top fades out, showing the pic underneath. Once the pic on top has become invisible, I load the pic now visible in the top image item and make it visible again. Then, I load the pic to be shown next in the bottom image item, etc. etc.
The images nicely fade one into the other when I click on the image.
But... when I make the slideshow advance on it's own, I get an ugly flickering between pics. One pic fades into the second pic. Then for a fraction of a sec I see the black background (the pic disappears), it reappears and fades into the next pic.
I guess it's got something to do with the fade out effect duration, or the fact that the goNext() is executed before the pic is completely loaded? Or maybe it's something else, who knows. I'm a complete newbie when it comes to this stuff
Here's my code:
Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import com.asfusion.controls.PhotoshowImage;
//all the pictures
private var pictures:Array;
//the index of the array that corresponds to currently shown picture
private var currentIndex:int = 0;
//actual picture object that is currently shown
[Bindable]
private var currentPicture:PhotoshowImage;
//next picture object to be shown
[Bindable]
private var nextPicture:PhotoshowImage;
// show the next picture in set
private function goNext():void
{
if (currentIndex < pictures.length - 1){
currentIndex++;
}
else {
currentIndex = 0;
}
switchPictures();
}
private function switchPictures():void{
fadeIn.end();
fadeOut.end();
nextPicture = pictures[currentIndex];
picture2.visible = false;
}
private function updateCurrentPicture():void{
//set the current picture based on current index
currentPicture = pictures[currentIndex];
goNext(); // without this line I have to click on the image and it all works smoothly
}
//this changes the set of pictures
public function set dataProvider(value:Array):void
{
pictures = value;
currentIndex = 0;
updateCurrentPicture();
}
public function get dataProvider():Array
{
return pictures;
}
]]>
</mx:Script>
<mx:Resize id="resize" />
<!-- taken straight from the docs -->
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0" effectEnd="updateCurrentPicture()"/>
<mx:Canvas styleName="imageHolder" id="canvasSlideshow" width="500" height="500" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:ProgressBar styleName="progressBar" id="progressBar1" source="{picture1}" visible="{progressBar1.percentComplete != 100}" />
<mx:ProgressBar styleName="progressBar" id="progressBar2" source="{picture2}" visible="{progressBar2.percentComplete != 100}" />
<mx:Image top="0" left="0" id="picture1"
source="assets/photoshow/images/{nextPicture.name}" click="goNext()"/>
<mx:Image top="0" left="0" id="picture2"
source="assets/photoshow/images/{currentPicture.name}" hideEffect="{fadeOut}"
complete="picture2.visible = true" click="goNext()"/>
</mx:Canvas>
<mx:Text y="320" height="47" styleName="caption"
text="{currentPicture.caption}" />
</mx:Canvas>
Any ideas?
View Replies !
View Related
Safari And Image Slideshow
This is a friend of mines site, I didn't make it or the flash image slideshow on the homepage..actually I think the image slideshow is some kind of freeware gallery the guy who did make it used. Anyway I wrote some php for the site to upload images and write the XML automatically for the slideshow and everything looks good from my end when testing in Firefox and IE on a PC, however, she isn't seeing it properly on Safari on her Mac. Can someone take a look at it and see if they see any problems. I should alternate 4 images in a row fading them in and out.
www.annapodris.com
View Replies !
View Related
Trouble With Xml Image Slideshow
hey guys, i have an xml based image fader, that loads four random images from four different directories and places them into four different empty movieclips. Now, first of all, I'm pretty sure that my code could me optimized, because I just copied the code and duplicated it, so maybe someone could help me out with that...
but the most important part is this: the pictures fade in, but I REALLY NEED them to also fade out before the next one is being faded in... and I cant do it....
can someone please help me out?
the code is this:
ActionScript Code:
stop();
var oldVar1 = 0;
var oldVar2 = 0;
var oldVar3 = 0;
var oldVar4 = 0;
var newVar1 = 0;
var newVar2 = 0;
var newVar3 = 0;
var newVar4 = 0;
var my_xml = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success) {
if (success) {
library1 = this.childNodes[0].childNodes;
library2 = this.childNodes[1].childNodes;
library3 = this.childNodes[2].childNodes;
library4 = this.childNodes[3].childNodes;
//time = this.firstChild.childNodes[0].childNodes[1].firstChild.nodeValue;
maxVal1 = library1.length;
maxVal2 = library2.length;
maxVal3 = library3.length;
maxVal4 = library4.length;
//delete my_xml;
getImage1();
getImage2();
getImage3();
getImage4();
}
};
my_xml.load('images.xml');
this.onEnterFrame = function() {
if (container1._alpha<100) {
container1._alpha += 2;
}
if (container2._alpha<100) {
container2._alpha += 2;
}
if (container3._alpha<100) {
container3._alpha += 2;
}
if (container4._alpha<100) {
container4._alpha += 2;
}
};
function getImage1() {
newVar1 = Math.floor(Math.random()*maxVal1);
if (newVar1 == oldVar1) {
getImage1();
} else {
oldVar1 = newVar1;
container1._alpha = 0;
container1.loadMovie(library1[newVar1].firstChild.firstChild.nodeValue);
time1 = library1[newVar1].childNodes[1].firstChild.nodeValue;
setTimeout(getImage1,time1);
newVar1 = Math.floor(Math.random()*maxVal1);
}
}
function getImage2() {
newVar2 = Math.floor(Math.random()*maxVal2);
if (newVar2 == oldVar2) {
getImage2();
} else {
oldVar2 = newVar2;
container2._alpha = 0;
container2.loadMovie(library2[newVar2].firstChild.firstChild.nodeValue);
time2 = library2[newVar2].childNodes[1].firstChild.nodeValue;
setTimeout(getImage2,time2);
newVar2 = Math.floor(Math.random()*maxVal2);
}
}
function getImage3() {
newVar3 = Math.floor(Math.random()*maxVal3);
if (newVar3 == oldVar3) {
getImage3();
} else {
oldVar3 = newVar3;
container3._alpha = 0;
container3.loadMovie(library3[newVar3].firstChild.firstChild.nodeValue);
time3 = library3[newVar3].childNodes[1].firstChild.nodeValue;
setTimeout(getImage3,time3);
newVar3 = Math.floor(Math.random()*maxVal3);
}
}
function getImage4() {
newVar4 = Math.floor(Math.random()*maxVal4);
if (newVar4 == oldVar4) {
getImage4();
} else {
oldVar4 = newVar4;
container4._alpha = 0;
container4.loadMovie(library4[newVar4].firstChild.firstChild.nodeValue);
time4 = library4[newVar4].childNodes[1].firstChild.nodeValue;
setTimeout(getImage4,time4);
newVar4 = Math.floor(Math.random()*maxVal4);
}
}
View Replies !
View Related
Random Image In XML Slideshow
I have a (very) basic XML slideshow. The slideshow appears on every page of a 7-page site. Is there a simple way to make the starting picture different on each of the 7 pages, without creating 7 different swfs & xml docs...?
I'm thinking some sort of onLoad get random image, then increment by +1...but if the random image was the seventh of eight images, how would I script it to loop to the beginning six...?
Probably basic, probably been asked before...please just point me in the right direction if this is a redundant question. (I did search first, but didn't find anything...)
Thanks for your time!!
View Replies !
View Related
Downloading An Image From A Slideshow
I'm currently trying to work with Lee's XML slideshow. I was wondering if there is a way to have a fixed "download" button so the end user can download the current image in the movieclip. I've only been working with Flash and actionscript for a few months and I'm ready to go nuts on this one.
View Replies !
View Related
External Image Slideshow
Does anyone have any info on creating a slideshow that loads external images? I only want to load about 10 and then for it to end on a final frame... just not sure how to do it... any help would be greatly appreciated!
View Replies !
View Related
Photo Slideshow Image Altered?
I am creating a slideshow with 22 images moving from right to left, I have created a movieclip and also layed it out on the main scene but when the movie is exported the images get distorted after awhile. Is this because the length of all the images combined go outside of the working area?
Download the flash file here and see what I mean, all help is appreciated!
Thanks,
Natacha
http://www.sketchypixel.com/flash/slideshow.zip
View Replies !
View Related
|