...

View Full Version : Loading Images



losse
06-02-2008, 03:14 PM
Hi gang!
I've got a flash file I built where there are scrolling images that fade in, scroll and fade out and this happens with three images...

However, I loaded the images inside the FLA and between the images, the tweens and the effects, the flash file gets pretty big and therefore takes a while to load when you first access the site.

It's not a type of animation that merits a pre-loader as it's more a "decoration" rather than a main feature on the site.

Just wondering if creating a flash file with some actionscript that calls images in a directory and accomplishes the same effect would render the file smaller in size and therefore load faster?

Is this possible? Anyone out there can help me with the actionscript?

gnomeontherun
06-02-2008, 04:24 PM
First things first, have you already compressed your images properly?

You could have the images loaded dynamically, so they wouldn't all load before the scrolling starts, just the first one and then it loads the second.

There are some tutorials about loading images dynamically, some use XML some don't. Try a Google search, and there are plenty of decent tutorials out there.

If you have trouble modifying a tutorial for your site, just post more questions here.

losse
06-02-2008, 05:06 PM
I used photoshop for the images...How would I compress with flash or a third party software?

gnomeontherun
06-02-2008, 06:09 PM
Well you should export the images from photoshop, and that is how you can compress them. What are you using now? How large are they? What file type are you importing into Flash?

losse
06-02-2008, 09:45 PM
Hi again
You mean compress in photoshop as in save for "web"?? The images are 72 dpi and 905x600... the width of the website is 900 so that's why they're so big. I'm importing the jpg into flash...

Let me know if I'm doing something wrong!

gnomeontherun
06-02-2008, 09:49 PM
Ok you said photoshop, and sometimes people import the PSD or oversized images into Flash and wonder why it is slow. You are doing it right. You may be able to export them as JPG and compress them more, depending on how much quality you want to lose.

Again there are plenty of tutorials on dynamic image loading in Flash out there, so pick one that seems to fit your needs best and if you need help just ask!

losse
06-02-2008, 10:29 PM
thanks again!
Would dynamic image loading load things faster? If so, I'll need your help... never done anything like that...

gnomeontherun
06-03-2008, 12:10 AM
It will let the Flash document load faster, and then the images will get loaded later. Overall it just changes the fact that you don't have to load all of the images before it starts to play. Search Google for a tutorial.

losse
06-03-2008, 02:07 PM
Thanks I'll look it up... How would I go about achieving the fade in, scroll up effects after dynamically loading the images... I'm used to having things in the library while doing actions to them...

Thanks

gnomeontherun
06-03-2008, 05:05 PM
I remembered a thread from a while ago, and think it might be a big help.

http://codingforums.com/showthread.php?t=129968

losse
06-03-2008, 06:26 PM
Ok
So we're using this code:


import mx.transitions.Tween;
import mx.transitions.easing.*;

pauseTime = 2000;

xmlImages = new XML();
xmlImages.ignoreWhite = true;
xmlImages.onLoad = loadImages;
xmlImages.load("images.xml");

function loadImages(loaded) {
if (loaded) {
xmlFirstChild = this.firstChild;
imageFileName = [];
totalImages = xmlFirstChild.childNodes[0].childNodes.length;
for (i=0; i<totalImages; i++) {
imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
}
randomImage();
}
}
function randomImage() {
if (loaded == filesize) {
var ran = Math.round(Math.random() * (totalImages - 1));
picture_mc._alpha = 0; // Start image clip as invisible
picture_mc.loadMovie(imageFileName[ran], 1); //Load random image from xml
var pictureTweenIn:Tween = new Tween (picture_mc,"_alpha",Normal.easeIn,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
pictureTweenIn.onMotionFinished = function () { // When done fading
_root.pause(); // Start pause() function
}
}
}
function pause() {
myInterval = setInterval(pause_slideshow, pauseTime);
function pause_slideshow() {
clearInterval(myInterval);
var pictureTweenOut:Tween = new Tween (picture_mc,"_alpha",Normal.easeOut,100,0,1,true); // After pause, start fade out
pictureTweenOut.onMotionFinished = function () { // Once faded out
_root.randomImage(); // Call next randomImage()
}
}
}

I take it I just put this in the main timeline and let it do it's thing?

By the way... would the images.xml file look exactly like it looks on this tutorial: http://www.webzo.org/tutorials/flash/xml-random-image-slideshow.php... Would I just set up the images like this:

<xml>
<images>
<a title = "pic1.jpg" />
<b title = "pic2.jpg" />
<c title = "pic3.jpg" />
</images>
</xml>

losse
06-03-2008, 06:41 PM
Update...

i got it to work... however it's going through all the images I have in the XML file... is it possible to have, say, 10 image in the XML file however the flash file only "play" 3 random images and then stop at the last one?

And if it's not too much to ask... how would I modify this script so that the images slide in from bottom to top and top to bottom?

gnomeontherun
06-03-2008, 07:11 PM
Sure we can pick 3 random images from a list. And sure we can have them slide in. Check the other thread I linked to for a tutorial on tweens, you should be able to figure that one. You will make minor adjustments to the two lines with :Tween in them. The new part is to just stop the randomImage() after 3 are loaded. Its untested right now, but this should be the basic idea.


function randomImage() {
if (loaded == filesize) {
for (z=0;z<3;z++) {
var ran = Math.round(Math.random() * (totalImages - 1));
picture_mc._alpha = 0; // Start image clip as invisible
picture_mc.loadMovie(imageFileName[ran], 1); //Load random image from xml
var pictureTweenIn:Tween = new Tween (picture_mc,"_alpha",Normal.easeIn,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
pictureTweenIn.onMotionFinished = function () { // When done fading
_root.pause(); // Start pause() function
}
}
}
}

losse
06-03-2008, 07:14 PM
So I replace the section in the previous code "function randomImage" with what you just posted? It didn't seem to change anything?

gnomeontherun
06-03-2008, 07:32 PM
If you read it closely, you will see I added a for loop. It will limit it to 3 images.

losse
06-03-2008, 07:39 PM
Here's what happens when I try that... it loads the first image... pauses... then loads the additional images but keeps on going.. it doesn't stop after the third image... and compared to the original script... the images load a bit faster...

gnomeontherun
06-03-2008, 08:02 PM
The images are probably just in the cache of your browser, shouldn't load any faster at least because of the script. So here it is. I just fixed it all, but what I do is send a variable which tracks the number of images displayed. You can change the line where it says currentNum < 3 to any number. I went ahead and just changed the Tweens too since its just a simple edit.


import mx.transitions.Tween;
import mx.transitions.easing.*;

pauseTime = 2000;

xmlImages = new XML();
xmlImages.ignoreWhite = true;
xmlImages.onLoad = loadImages;
xmlImages.load("images.xml");

function loadImages(loaded) {
if (loaded) {
xmlFirstChild = this.firstChild;
imageFileName = [];
totalImages = xmlFirstChild.childNodes[0].childNodes.length;
for (i=0; i<totalImages; i++) {
imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
}
randomImage(0);
}
}

function randomImage(currentNum) {
if (loaded == filesize) {
if (currentNum < 3) {
var ran = Math.round(Math.random() * (totalImages - 1));
picture_mc.loadMovie(imageFileName[ran], 1); //Load random image from xml
var pictureTweenIn:Tween = new Tween (picture_mc,"_y",Normal.easeIn,400,0,1,true); // Use the Tween class to ease in the position vertically from 400 to 0 over 1 seconds
pictureTweenIn.onMotionFinished = function () { // When done fading
_root.pause(currentNum); // Start pause() function
}
}
}
}

function pause(currentNum) {
myInterval = setInterval(pause_slideshow, pauseTime);
function pause_slideshow() {
clearInterval(myInterval);
var pictureTweenOut:Tween = new Tween (picture_mc,"_y",Normal.easeOut,0,400,1,true); // After pause, start
pictureTweenOut.onMotionFinished = function () { // Once gone
currentNum++;
_root.randomImage(currentNum); // Call next randomImage()
}
}
}

losse
06-03-2008, 08:05 PM
Ok... Thanks for the re-code... however, I think I like the fade in / out effect better... without the slide in / out... how would I change that???

losse
06-03-2008, 08:10 PM
also... is it possible to fade the next image when the previous image is at 50&#37; faded-out?

gnomeontherun
06-03-2008, 08:14 PM
Put the Tween code lines back from the last code example.

It is possible but not as it is coded. It would take some extra coding that I don't have time to do. I'm trying to help, but I want you to be able to do this too. I'm not just being a code generator, but you haven't yet read the tutorial about Tweens or you wouldn't have asked me about them again, so please take some time and educate yourself about the code you are using. I don't mind helping, but I want to know you are actually trying to solve this too, not just waiting for me to write the program for you.

losse
06-03-2008, 08:21 PM
Thanks for the help... to be quite honest... this is the first time doing this so I did need all the help I can... I'm used to doing tweens the old fashinoned way...

Can you point out which tweens tutorial you were talking about and I will take a look?

gnomeontherun
06-03-2008, 08:35 PM
Its fine if it is your first time, but my challenge is that everyone needs to try and understand the code they are using. Its how I learned, and I'm expecting people who come here to want to learn.

http://www.oman3d.com/tutorials/flash/tweenclasseasing/

To crossfade the items, we would need to approach the scripting differently. Only one image can be in the pictures_mc at a time, so we'd need to have two movieclips loading separate images to fade in/out simultaneously.

losse
06-03-2008, 09:34 PM
allright I took a read... I see the tutorial covers a lot less than what's in the script in question but now I get this portion:


var pictureTweenIn:Tween = new Tween (picture_mc,"_alpha",Normal.easeIn,0,100,1,true);

So you couldn't have the easeInOut function instead of the easeIn... and then easeOut to do the cross-fade effect?

gnomeontherun
06-03-2008, 10:26 PM
The Tween covers only that portion, which I think was a good quick explaination of how the tweens worked. easeInOut doesn't crossfade, but rather it is a combo of easeIn and easeOut, so the animation easesOut of its position, speeds up, and then slows down in the second part to easeIn.

To crossfade you really need at least two movieClips, at least with the way this script is running.

losse
06-03-2008, 11:01 PM
and I would put a pause at the beginning of the second movie clip??? But how to avoid 2 same images cross-fading together? I guess luck of random draw?

gnomeontherun
06-04-2008, 12:19 AM
What do you actually need this for and to do? I'm just telling you the very general way that it has to be done, the smaller details would have to be planned out. This is starting to move away from your original question, so I want to know where you want to go so this thread doesn't keep changing its goal.

losse
06-04-2008, 01:14 AM
In a nutshell it's a homepage animation where a few images fade in and out... To keep it fresh, I thought to load, say 10 images but only randomly fade in and out 3 of them... that way, everytime the user comes to the homepage, they see 3 new images.

Thanks for sticking with me!!

losse
06-04-2008, 01:55 AM
To keep things simple... I thought of doing this as well... run 2 movie clips as you mentioned... Have a set of images for one and a different set for the other... that way you wouldn't have the same image fading into itself...

instead of loading 3 total, we could load 2 images per movie clip so that a total of 4 images fade in and out and then stop...

The only thing that I need to figure out is how to pause the second movie clip so that one starts after the other and they both work together to achieve the effect...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum