Quark Forums

Hi, all,

we had the discussion before, how to build a preloader.

One way to do it is to write one in Adobe Flash or find a pre-fabricated one in the web.

Of course it is also possible to simulate the effect using Quark Interactive Designer itself. The only thing not possible (currently) is to have it report the actual progress (%). The main purpose of a preloader though - to show the viewing person that something is still happening - is possible to do with Interactive Designer.

As I have been approached today, whether I could write a small tutorial, here it is.

Actually I thought about the different ways how to build one (on the first page, delaying and then jumping to the next page OR opening another project from within the start SWF via Open Project action etc.) and liked the one the best that healyourself.de is using, as it is simple to create. Kudos to "crazy_maze"!

The only prerequisite is that you build your HTML pages yourself (and here I assume you do it with QuarkXPress).

If you have other approaches which work well for you, please feel free to post them here also.

--- 8< snip -------------------------------

Ok, let's start. One way to build a
Preloader, using two independent, non-linked SWFs:

1. I assume you have your SWF Presentation readily built, you just want to add a preloader. I assume the layout is called "MainSWF" (name doesn't matter).

2. Create a web layout in the same project, e.g. by using the menu Layout > New. Here we later "assemble" the two SWFs. Call it "Landing page".
Side note: If you don't use QuarkXPress for building HTML pages, then do similar steps in your preferred HTML authoring program.

3. Create a new interactive layout (Menu "Layout > New"), this is going to be the loader, call it "Loader".

4. Make the new "Loader" layout of type presentation e.g. 320 pixel wide, 50 pixel high. 50 fps.

5. Create a text box there, write in it "Please wait, web page loading..." (or whatever you prefer).

6. Create a picture box underneath, maybe 320 pixels wide, 15 pixels high. Background color white, border black, maybe 0.5 pixels.

7. Create another picture box centered over this one, 320 pix wide, 12 pixel high, background orange. This is going to be the actual progress bar.

8. So far it was only design (feel free to alter ;-) ) Call the orange bar "progressbar" in Interactive palette, option "Initially hidden".

9. Now create a script. Call it "Page1 start". The script contains the following actions:
9a. Object > Show "progressbar", Effect "Cover > Left to Right", time 5 seconds
9b. Delay > Time > 5 seconds
9c. Object > Hide "progressbar", 0 seconds
9d. Repeat these three actions twice or three times

The last step is easy to achieve by clicking on the duplicate button and is only necessary if your main SWF doesn't load in 5 seconds. Then the bar starts again, which is better than having a progress bar at 100% and nothing happens.

10. Make the "Page1 start" script the Entry Script for page 1 (in tab "pages").

11. We are done, all we need to do is now assemble the page. Therefore in "Advanced Layout Properties" of the two Interactive Layouts "MainSWF" and "Loader" make them shared (thus making them Composition Zones).

12. Now in the web layout "Landing page", open the shared content palette and drag the "Loader" on your HTML page.

13. Drag "MainSWF" on the HTML page, make sure it completely covers the "Loader".

--- 8< snap -------------------------------

What next? Nothing, you are done.

If you are wondering why this works, well easy. The preloader SWF is small therefore shows instantly. The main SWF is big and will start to laod. The frist page however does not show before all elements on the page are loaded. WHiel it is not showing yet, you see the preloader (which loops in case it takes longer).

Why do we not loop the preloader forever in the background? Well, we could, if SWF wouldn't drain the system's resources a lot. Therefore we limit it to two, three or four runs, you might want to experiment what's best for your use case.

The loader actually idles "behind" your main presentation all the time and that doesn't hurt.

Feedback and comments welcome!

Enjoy!
Matthias

Thanks again matthias, i'm gonna try it as soon as i finished my main swf lol, by the way in my main swf presentation to make it lighter for the user i have made a second swf for my portfolio and when clicking on the portfolio button i have used the action "load swf"in a swf box with external link, is it the right way to make the swf light?
jacques

Hi, Jacques,

jacquesd:

is it the right way to make the swf light?

Yes, that is one way. Another is to keep things external (like sounds).

Have a look at the entry here:
http://www.quark.com/service/forums/viewtopic.php?p=71696#71696

Best
Matthias

Hi Matthias

Thanks for the instructions on creating a preloader. Its a while since I did anything in QID (unfortunately I have not had call to use it on my recent projects) and was afraid I was getting rusty, but your walk-through was very simple to follow and I built your progressbar with no problem. It reminded me just what a great piece of kit QID is.

I have inserted it into one page only of my website as a trial. I have four portfolio pages which each show a swf display of samples. There has been a short delay before the samples load so I thought it would be good to add a progress bar there.

The only thing is I recently upgraded my broadband connection to the max speed available and now it opens so fast anyway that I can't see if the preloader is working! I'm assuming its whirring away in the background and I'm hoping anyone with a slower connection will see it before the samples load.

Anyway, from this page...

http://www.kimporter.co.uk/KPPortfolioMainPage.htm

...if you click on the icon headed 'Newsletters/magazines' then the new progressbar should show for a few seconds before the collection of images display (in theory).

Well, looking again this morning at the page where my new preloader is supposed to appear, the result seems to be to cause a question mark to appear at the box top left for no apparent reason, and to make the cursor flicker!

I've been through the walkthrough instructions again, and my preloader swf works fine on its own; I combine it with the 'Newsletters' swf via the shared content palette and check they work together, which they do. But once it is uploaded I'm just getting the wierd effects described above.

I'm obviously doing something wrong, but I can't work out what.

Hi, KP,

I see a broken picture (a PNG) on that one page, is that what you mean?

There the name is wrong somehow, it looks for Picture10.png on all pages except here. Maybe a master page issue?

Best
Matthias

Matthias – The broken picture link was because I uploaded the new html page with the preloader swf but not its linked images - have uploaded everything again properly this time , which solves that problem.

However, the preloader does now show for the first few seconds on the page link I gave above, but it doesn't show on the other three portfolio pages which include the same preloader swf placed from the shared content palette.

Is this because once the swf has run on the first page it won't run again on the other pages because it is the same file? That is to say, will it only run once because it is the same file that is shared with the other pages?

If that is the case i suppose I could get round it by saving the swf with different names and load each one separately rather than trying to share the same file?

Hi, KP,

how's your web layout set up, do you have four HTML pages where each contains the same preloader and is only covered by different SWFs your sections)?

Thanks
Matthias

Hi, all,

a German customer (http://www.foto-satz.de) has asked me about a different way of creating a pre-loader, main objective was to be able to control the preloader elements from the main SWF (so to stop them).

--- 8< snip -------------------------------

Therefore here's another way of creating a
Preloader, using two SWFs, one loading the other

1. Export your presentation as SWF (using File > Export > Exporter for Macromedia Flash). I assume it is 800x600 pixel large.

2. To create the preloader we need an additional Interactive Layout. Create one, type presentation, at least as large as your SWF (so here 800x600).

3. Create on the first page a progress bar, blinking text or whatever you desire your preloader should look like.

4. Create a picture box, make it as large as your SWF (800x600) and give it a name in Interactive Palette. Make sure to define this as an "SWF" object in the object tab. I called mine "Stage".

5. Create a script (script tab). Add all the script actions which are needed to start your preloader items (e.g. the progress bar created in step 3)

6. Now the loading part of your SWF: As the last action in this script create an action "SWF > Load", in SWF Object 'Stage', SWF File 'your SWF' (of step 1).

7. Done. Define this script as Entry Script for page 1.

If you want to add actions to disable, hide or stop your preloader elements, do that. You migth want to add a delay here before doing that (in case your main SWF loads long).

--- 8< snap -------------------------------

Enjoy!

If you put this in a Quark Web layout, pleas remember the bug and workaround listed here: http://www.quark.com/service/forums/viewtopic.php?t=18088#75412

By the way, remember to look at the examples I listed here:
http://www.quark.com/service/forums/viewtopic.php?t=17743

Now three of the sites listed make use of these preloaders ;-) .
Point taken, important feature request for future versions to make this easier (and add percentage).

Thanks for the trust in our product, guys!
Matthias

Hi Matthias,

Yes, exactly – I have four HTML pages where each contains the same preloader and is covered by different SWFs.

What I suspect is happening is that the preloader runs its course on the first page it is used (I've set it to repeat just twice at 4 seconds each time) and so doesn't run on the other pages which share it.

Thanks,
Kim

Hi Kim

I dont think its a problem with the swf having already run once as the swf is freshly loaded on every page.

When you export multiple instances of a single shared content swf layout , it creates multiple instances of swf files in the "image" directory of your html page. So , in your case there should be 4 swf files for each pre loader.

If this is the case you could do either of the following things:

1) Make sure all swf files are present in the image folder
2)Edit the exisitng HTML code so that all pages refer the same swf file
3)An entirely differenr apprach - dont use the shared content instance. Instead, create a normal picture box and get the pre-loader swf in it using get picture. This does not result in multiple swfs on export.


Hope this helps.

Regards,
Kabir

Hi all,
I have tried it its perfect Matthias, by the way i have made an animation in qid for the progress bar, is there a way to make a conditional expression or script that stops the animation when the second swf finish loading, i know you said it's better to play 3 or four times the animation than looping the circle bar (in my case) but ii seems possible with if , else and so on
have a nice day
jacques

This is excellent! At the moment I am currently wading through loads of archive CDs to create our portfolio spreads, and it was a concern that I didn't have a more elegant solution when the visitor needs to wait for a while. I don't think it matters at all that no percentage feedback can be given.

Thanks, Matthias :)

Hi all,

I use the matthias trick for the preloader, but i got a slight problem, my second swf use a mask layer (the spotlight tutorial) and of course make the swf transparent each time the spot anim is activated, so in the background i always see my preloader, i have tried to change the background of the presentation but no success is there a workaround to achieve this?
regards
jacques

Hi, Jacques,

yes, there is actions to wait until an object is playing, e.g. you could put into your Script
Loop
Delay 1 sec
Break If SWF your.swf is playing
End Loop
Object hide <your controller elements>

However, I am not sure (never tried it with a slow internet connection) whether Interactive thinks the SWF is already playing when still loading, that is something you would have to experiment with.

Regards
Matthias