I’ve published several videos about Adobe Muse on my Youtube channel. This is where I received te following question: “How can I add a preloader on a Muse web page?”. I’m not a fan of preloaders on web pages, but as Adobe Muse lets you create richer animations, I understand that in some cases, before telling a story, you want to make sure that all the elements are loaded.
You can see my preloader in action here: http://mchaize.businesscatalyst.com/inspire.html
How to install my preloader
I submitted my widget to the Adobe Muse Exchange website yesterday. It should be available very soon. The Muse Exchange website lists all the widgets and libraries created by the community. I explain in my previous post how you can create your own library and share it on this website.
You can download my widget here: http://creativedroplets.com/samples/adobemuse/preloader.mulib
Once on your desktop, double-click on it. It will launch Adobe Muse and add my widget in the Library panel:
How to use it
You can decide on which page you want to add a preloader, but don’t add it on a classic web page. A preloader can be frustrating for the user. A web page loads its content on the fly so that the visitor can start reading content as soon as the page starts loading. But if you plan to tell a story with several heavy assets, your visitor can understand that you need to load everything before starting the experience.
- Open the page in Adobe Muse.
- Create a layer on top of all other layers. Make sure that the top layer is selected.
- Open the Library panel.
- Drag and drop the “preloader” widget anywhere on the page.
Then, you can set some properties:
The preloader is composed of a text message and a spinner. You can set the “Message” you want to display and the “Font color”. The Background color will set the color of a fullscreen element that you can make transparent by playing with the “Opacity” option: 0 will make it fully transparent, 1 fully opaque.
That’s it. Publish your page and you’ll see the preloader.
The source code of my widget
My widget is based on the work of Niklaus Gerber: Preloadme. It’s a lightweight preloader powered by jQuery and CSS. To display a spinner, Niklaus uses an animated GIF. This is something I had to modify as I cannot embed an image in my widget. CSSload is a website that generates animated spinners using CSS: http://cssload.net/
The source code is available on GitHub: https://github.com/michaelchaize/MuCow/blob/master/preloader.mucow
Notes for MuCow developers:
The Preloadme code from Niklaus is based on jQuery. Adobe Muse also uses jQuery to run the widgets. You don’t have to load your version of jQuery. To use the one loaded by Muse, place your code in the <bodyEndHTML> section of the MuCow. This way, you know that the jQuery framework is already loaded.
Questions ? Ideas ?
If you have questions, don’t hesitate to comment this post. You can also contact me on twitter: http://twitter.com/mchaize