Flash file to big!!

[Collegekid19]

Hello all,

I recently completed a photography website project. I did the entire project in flash and its filled with lots of high quality digital photos. The photos need to be high quality to show off the artist's work.

The problem is this... the swf file is a staggering 14.7 mb and it takes forever to load!

How do I get this puppy to load faster... I read that maybe I could load the images in with XML and that might work... only problem is I have no idea how to do that. Could someone point me in the right direction?

[Eye for Video]

You are right in thinking you need to load the images via an xml file. Here are a couple of good sources for slide show tuts:
www.gotoandlearn.com
and
www.learnflash.com (try out a few of their free sessions before buying anything).
The main thing is to learn how to populate an array using ActionScript. Once you have “pushed” the names and urls of the images into the array, then you’ll load an image into a movie clip placed on the stage. After you understand the basics of connecting Flash and images via an xml file, you can fancy up your display if needed.
Next, a couple of points about the images. Resize all the images (outside of Flash) to whatever size your displaying movie clip will be. So let’s say you want to display an image on the screen (without scrolling please). On a 1000 wide monitor the usable height will only be about 550 to 600 pixels wide. Unless you are cropping to fit a wider screen, with a height of 600 pixels, a standard photo (with a 4:3 ratio) would only be 800 wide. So that’s about the max you can use without scrolling (800 X 600). But take a look at something a little smaller (say 600 X 450), it may just work a lot better.
So resize in PhotoShop or something to the desired size, don’t do it in Flash. That will just add extra download time for a file that can’t be displayed at it’s full size.
Then since it’s a photo gallery, keep the quality (jpeg compression for example) up near the max. Don’t resize AND compress at a high rate or you’ll never get good quality. Decrease the file size by using smaller dimensions on the image, NOT lower quality.
The final .swf will have no images on the timeline, only a movie clip which the xml file will fill with an image. The file size of the .swf could be as low as 50 kb or less, the bulk of your old .swf will now be broken into 250 kb (or whatever the size of one image) chunks, since only one or two photos will need to be loaded at a time.
Best wishes,
Eye for Video
www.cidigitalmedia.com

[nina7683]

refractory comparison, the compression will affect the quality.sub-upload relatively trouble. i also encountered a similar headache.:(

good luck...

[Collegekid19]

Hey guys... here's the flash file I was working on. Its pretty straight forward. Each one of the picture categories is basically a movie clip located on separate frames. Check it out and let me know how to get this thing to load faster.

sandwichreport(dot)com/tatutest.html

[Eye for Video]

As I mentioned before, make the file smaller. Don't put any of the large images on the timeline or in your library. Resize the images used as thumbs to just the exact size they appear on the screen. Have a second set of the images (large size) to display in the movie clip. Use an xml file to feed the images to the movie clips. The .swf file need to be just a fraction of what it is now.
Maybe you designed for a wider monitor, but….One big problem with the general layout is that on a 1024 X 768 monitor, all the nav buttons are below the fold. First time viewers may not even know the buttons exist. Then once a person scrolls down to the nav buttons, the headline banner is cut off.
Keep on Truckin’
Eye for Video
www.cidigitalmedia.com

[Collegekid19]

Thanks eye for vid! you're comments are right on point!

Here is what I have for each category:

The buttons and the large images for each category are in separate movie clips on different frames on the main timeline.

And I've done the basic code like this:

function nature1(e:Event) {
gotoAndStop(1);
}
nature_btn1.addEventListener(MouseEvent.CLICK, nature1);


So if I understand what you are saying correctly, I should keep the thumbnail buttons and remove the large images from the library and from each movie clip?

Could you maybe give me a short example of how I should structure the new code, with feeding the images in by XML as you suggested?

I really appreciate your advice,

Thanks

[Eye for Video]

Well you really need to check out some of those xml tuts to get the whole picture, but I’ll give you an overview. Start with just a blank, new document.
Create a movie clip on the stage and give it an instance name of “holder_mc” or whatever…
If you want you could also create a dynamic text box, named “caption_txt” to describe your image.
That’s it, your done! File size by the way 1 kb. Oh, except there is a little ActionScript to make it all work

var ssx:XML = new XML();
ssx.ignoreWhite = true;

/* this skips all the white space created by formatting, tabbing, etc. of the xml file and creates a few vars you will use */

var currentIndex:Number = 0;
/* meaning the index number of the array you are currently viewing */
var captions:Array = new Array();
var urls:Array = new Array();

ssx.onLoad = function(success) {
if (success) {
var ss:Array = ssx.firstChild.childNodes;
for (i=0;i<ss.length;i++) {
/* here you push the following items into the array, incrementing (i++) as you go */
captions.push(ss[i].attributes.caption);
urls.push("images/" + ss[i].attributes.url);
/* this is the path to the large size images, these are in a folder “images/” before the actual file name */
}
/* this tells Flash to load Movie url of image into your holder_mc, along with a caption*/
holder_mc.loadMovie(urls[currentIndex]);
caption_txt.text = captions[currentIndex];
}
else
{
/* use trace to send you a message if there is a problem finding the xml file
trace("XML file failed to load. Please try again later");
}
}

ssx.load("slideshow.xml");
/* change this name to whatever you named your xml file, this path says it’s in the same folder */
You also need to create an xml file which describes the images and captions. For example:

<?xml version="1.0" encoding="ISO-8859-1"?>
<pictures>

<picture caption="Stone dragon" url="kauai001.jpg" />
<picture caption="Light fixture" url="kauai002.jpg" />

</pictures>
This was originally set up with next and prev buttons but you will need to adjust for your own needs. Remember that the path to the images is in a folder “images”
Wheww!!
It’s late..
Best of luck to you
Eye for Video
www.cidigitalmedia.com

[Collegekid19]

Aww thank you soo much! I really really appreciate it. how did you get so good at this stuff?

[Eye for Video]

Well after 30 years in the business world, I was able to go back to school and be a “College Kid”….. imagine that. I spent two years learning and studying a subject I love, multimedia. Since then I’ve studied a lot of on-line tutorials, practiced creating a lot of Flash, and spent a lot of time in Forums, asking and answering questions. Main thing is to keep using and advancing in the field you like.
Learning software is kind of like learning a new language, it that it will have a shelf life… if not used, it will slowly fade away. If you use your new language every day, it becomes more natural and integrated in your daily routine. Don’t use a new language for a couple of years and you’ll see how much it has faded away.
One more hint about your project, since you are using the thumbs as buttons, in order to get the correct large image to display for each button, you’ll need to direct it to the correct spot in the array. Since an array index starts with 0, then 1, 2, 3…… the second image would have an index of [1]. Be sure to build that into the button function.
This will load the initial image into the movie clip, index = 0, or first image in array.

var currentIndex:Number = 0;
Bunch more code goes here........

holder_mc.loadMovie(urls[currentIndex]);
caption_txt.text = captions[currentIndex];
Include a new function for each button to access the correct index position in the array. For example for the second image thumb with instance name img2_btn.

function img2() {
holder_mc.loadMovie(urls[1]);
caption_txt.text = captions[1];
}
img2_btn.onRelease = img2;

Loads second image into the movie clip on the stage.
Best of luck to you,
Eye for Video
www.cidigitalmedia.com

[Collegekid19]

Hey Eye for Vid,

Ok so I've done a little studying up on XML and Action script. It took me a while to figure out your code example is actionscript 2 and not AS 3. So I'm glad I've come that far :) haha

So anyways I'm fairly certain I followed your directions precisely. But I keep getting the same error when I try to preview my file in flash:

XML file failed to load. Please try again later
Error opening URL 'file:///Macintosh%20HD/Users/DHOP/Library/Caches/TemporaryItems/naturetest.xml'

As you can see I inserted the the xml file name at the bottom of the code. I also removed the code for the captions because I don't need the captions to be generated from the XML doc. All of my files are contained within one directory and the images are in a folder in that directory called "images"

var ssx:XML = new XML();
ssx.ignoreWhite = true;

/* this skips all the white space created by formatting, tabbing, etc. of the xml file and creates a few vars you will use */

var currentIndex:Number = 0;
/* meaning the index number of the array you are currently viewing */
var urls:Array = new Array();

ssx.onLoad = function(success) {
if (success) {
var ss:Array = ssx.firstChild.childNodes;
for (i=0;i<ss.length;i++) {
/* here you push the following items into the array, incrementing (i++) as you go */
urls.push("images/" + ss[i].attributes.url);
/* this is the path to the large size images, these are in a folder “images/” before the actual file name */
}
/* this tells Flash to load Movie url of image into your holder_mc, along with a caption*/
holder_mc.loadMovie(urls[currentIndex]); }
else
{
/* use trace to send you a message if there is a problem finding the xml file */
trace("XML file failed to load. Please try again later");
}
}

ssx.load("naturetest.xml");



I didn't forget to name the instance of the movie clip. I did my XML file up just the way your example shows. Yet I still get the error message

XML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<pictures>

<picture caption="Death Valley" url="nature1deathvalley.jpg" />
<picture caption="Weed Sky" url="nature2weedsky.jpg" />

</pictures>

I'm pretty stumped here. Help is greatly appreciated.

[Collegekid19]

Ok so I re-published the file in Flash.

I'm no longer getting the XML failed to load error.

When I preview the file I don't get any error messages but none of the images are appearing.

If I post this code in to the first frame of the movie clip with instance name "holder_mc" shouldn't the first image appear?

var ssx:XML = new XML();
ssx.ignoreWhite = true;

/* this skips all the white space created by formatting, tabbing, etc. of the xml file and creates a few vars you will use */

var currentIndex:Number = 0;
/* meaning the index number of the array you are currently viewing */
var urls:Array = new Array();

ssx.onLoad = function(success) {
if (success) {
var ss:Array = ssx.firstChild.childNodes;
for (i=0;i<ss.length;i++) {
/* here you push the following items into the array, incrementing (i++) as you go */
urls.push("images/" + ss[i].attributes.url);
/* this is the path to the large size images, these are in a folder “images/” before the actual file name */
}
/* this tells Flash to load Movie url of image into your holder_mc, along with a caption*/
holder_mc.loadMovie(urls[currentIndex]); }
else
{
/* use trace to send you a message if there is a problem finding the xml file */
trace("XML file failed to load. Please try again later");
}
}

ssx.load("naturetest.xml");

var currentIndex:Number = 0;
holder_mc.loadMovie(urls[currentIndex]);

[Eye for Video]

Did you mean that if you JUST used the code in red, should the first image appear? No it will not. You did not fill the array with the "push".
But if you have a movie clip (holder_mc) in the first frame, and use just this code:
stop();
holder_mc.loadMovie("images/nature1deathvalley.jpg");
it will load the first image. That all there is too it. The .swf is very small because there are only a few small thumbnails in it.
Since there is no array, you don't need an index number.
Another option is to use the above code once in each frame (with different image urls) and thumbnails as buttons to move to frame 1, frame 2, frame 3, etc.
Each frame simply loads a new image into the holder mc.
Best wishes,
Eye for Video
www.cidigitalmedia.com

[Collegekid19]

No i just highlighted that portion in red to show that I put it in that place. Is that the correct position for it?

Also I tried using:

function img2() {
holder_mc.loadMovie(urls[1]);
}
img2_btn.onRelease = img2;

for the buttons and it didn't bring up the images. I changed the URL number to each position in the array and nothing.

[Collegekid19]

I'm not exactly sure what you mean by fill the array with the push. Do you mean that I need to input each Image URL in my flash code from the XML document?

Did I need to add the file extensions somewhere in the code? I'm kind of confused.

[Collegekid19]

Ahhh first success:


stop();
holder_mc.loadMovie("images/nature1deathvalley.jpg");

When I use that code it does in fact bring up the image! First time I've gotten one to appear with the coding. Does this utilize the XML file at all? I see how this decreases the overall swf file size by calling in the images, but won't it still take a while for all of the images to load? Should I have the browser pre-load all of the images when the site loads? Or am I way off base?

I would prefer to get the full code that you provided working. I think I'm close, I just don't understand what you mean by fill the array with the push. I think once I get that I will be able to fill in the gaps and get this whole thing working. A small example could probably get me on my way.

[Eye for Video]

No this does not use the xml at all, just another option for dynamically loading images. Since it only loads one image at a time, whichever frame you choose, just loads one image.
That first set of code I showed you should have done the job. Here it is without the comments:
var ssx:XML = new XML();
ssx.ignoreWhite = true;

var currentIndex:Number = 0;
var captions:Array = new Array();
var urls:Array = new Array();

ssx.onLoad = function(success){
if (success) {
var ss:Array = ssx.firstChild.childNodes;
for (i=0;i<ss.length;i++) {
captions.push(ss[i].attributes.caption);
urls.push("images/" + ss[i].attributes.url);
}
holder_mc.loadMovie(urls[currentIndex]);
caption_txt.text = captions[currentIndex];

}
else
{
trace("XML file failed to load. Please try again later.");
}
}

ssx.load("slideshow.xml");

This should load the first image... buttons or thumbs can come later.
EfV

[Collegekid19]

Ok so I used that code in the first frame of the movie clip. Of course I changed the xml file to mine which is naturetest.xml

I'm not getting any error messages so I'm assuming its working properly. I have my thumbnails all laid out. How do I code each button to call up the images? and where do I place that code? Perhaps on an action layer within the button itself?

[Collegekid19]

The first image doesn't show up with that code.

[Eye for Video]

And you have a movie clip in the first frame with instance name holder_mc?
If your movie is more than 1 frame, add a
stop();
above the code.
All actions will be in your actions layer.
xml file is like
<?xml version="1.0" encoding="UTF-8"?>
<pictures>

<picture caption="Stone dragon" url="kauai001.jpg" />
<picture caption="Light fixture" url="kauai002.jpg" />
<picture caption="Giant canoe" url="kauai003.jpg" />
<picture caption="Pool with an ocean view" url="kauai004.jpg" />

</pictures>
And still no first picture?
EfV

[Collegekid19]

EFV,

Strangest thing. Last night I got very frustrated and decided it was time to call it a night. I couldn't get the code to work and I couldn't get the first image to show up on the stage. I was just fed up!

This morning I thought I would give it another shot and bingo. The code works, the first image shows up on the stage, and the weirdest thing about it is I didn't change a thing!

I guess for whatever reason, restarting my computer and opening flash again made it work. Perhaps I hadn't saved something properly. Only the computer Gods know :)

Anyways thanks again for putting up with my malarky.

I'm going to keep going now and see if I can get the buttons to work now. Wish me luck. I will post a link to the final product when I get it finished.

[Collegekid19]

Latest update: SUCCESS!

EFV,

With your help I was able to finish up the site and load the photographs in dynamically using XML. The link below is to .swf we'll be putting live very soon. I think its really starting to come together nicely. Right now the only issue is that the photos are still loading a bit slow when you click the buttons. Any suggestions for making these puppies load a bit faster? I was thinking if the images pre-loaded they would display faster upon clicking the buttons. If that is impossible a simple pre-loader might do the job nicely.

What do you think?



www(*)tatuvalkonenphotography(*)com/newsite/test.html