Tip: How to build a preloader (example)

Discuss Interactive Design & Flash® (SWF) Export inside QuarkXPress 7, 8 & 9.
Exchange ideas, share helpful tips and get started with your first interactive design.
Please note that Flash (SWF) authoring is not supported in QuarkXPress 10 anymore.
Matthias Guenther (Quark)
Quarkian
Quarkian
Posts: 2490
Joined: 04 Jun 2004, 15:06
Contact:

Tip: How to build a preloader (example)

Post by Matthias Guenther (Quark) » 14 Aug 2007, 09:05

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

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

jacquesd
Posts: 10
Joined: 09 Nov 2004, 06:09

Tip: How to build a preloader (example)

Post by jacquesd » 14 Aug 2007, 09:33

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

Matthias Guenther (Quark)
Quarkian
Quarkian
Posts: 2490
Joined: 04 Jun 2004, 15:06
Contact:

Tip: How to build a preloader (example)

Post by Matthias Guenther (Quark) » 14 Aug 2007, 09:45

Hi, Jacques,

[strong]jacquesd:[/strong]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/vie ... 1696#71696

Best
Matthias

KP
Posts: 27
Joined: 01 Mar 2006, 10:36

Tip: How to build a preloader (example)

Post by KP » 14 Aug 2007, 11:57

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).

KP
Posts: 27
Joined: 01 Mar 2006, 10:36

Tip: How to build a preloader (example)

Post by KP » 15 Aug 2007, 03:58

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.

Matthias Guenther (Quark)
Quarkian
Quarkian
Posts: 2490
Joined: 04 Jun 2004, 15:06
Contact:

Tip: How to build a preloader (example)

Post by Matthias Guenther (Quark) » 15 Aug 2007, 06:24

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

KP
Posts: 27
Joined: 01 Mar 2006, 10:36

Tip: How to build a preloader (example)

Post by KP » 15 Aug 2007, 11:16

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?

Matthias Guenther (Quark)
Quarkian
Quarkian
Posts: 2490
Joined: 04 Jun 2004, 15:06
Contact:

Tip: How to build a preloader (example)

Post by Matthias Guenther (Quark) » 15 Aug 2007, 14:33

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

Matthias Guenther (Quark)
Quarkian
Quarkian
Posts: 2490
Joined: 04 Jun 2004, 15:06
Contact:

Tip: How to build a preloader (example)

Post by Matthias Guenther (Quark) » 15 Aug 2007, 14:54

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

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/vie ... 8088#75412

By the way, remember to look at the examples I listed here:
http://www.quark.com/service/forums/vie ... hp?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

KP
Posts: 27
Joined: 01 Mar 2006, 10:36

Tip: How to build a preloader (example)

Post by KP » 15 Aug 2007, 16:52

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

Locked

Return to “General authoring questions”