Despite their clichéd status, animated GIFs still have a place in modern web design, particularly when used artistically, such as the subtle and beautiful Cinemagraphs, or for short animated clips to demonstrate a technique or show off a product.
The problem with GIFs is they load and play automatically by default, which can be a distraction and also cause the page to load slowly while the files download. The GIF Player widget for Adobe Muse lets you place animations that only download and play when your visitors click or hover over the image, giving your design a much more professional and streamlined experience.
Browse to the location where you downloaded the widget file. Extract the contents of the file. Double-click the .mulib file to import it into the Library. This will launch Muse if it's not already open.
Alternatively, once you’ve unarchived the file, you can import the widget into the library by clicking the Import Muse Library icon at the base of the Library Panel.
Once it's imported the new widget will appear in the Library panel as a folder containing one or more items..
Start by dragging the GIF Player Enabler widget from its folder in the Library Panel onto the design canvas. If you're planning to have GIFs on several or all pages, you can add it to your master pages. The banner image won't be displayed when the site is previewed or published.
Important! Make sure the Enabler widget is at the top of the page (or above it), otherwise the player my not work correctly,
Next, we'll add our placeholder image using any standard method of adding an image in Muse (Place, drag, etc.). This will usually be a frame from the animation but it can be any image, as long as it has the same dimensions as the GIF image.
Next, we'll create a graphic style to associate our image with the widget. Make sure the image frame is selected. Go to the the Graphic Styles panel. Click the New Style icon.
Double-click the new style entry to open its options. Set the name to something relevant - we've used giftest for the example. Any spaces in the style name will be replaced by hyphens. Click OK to apply.
Now we need to insert the Item section of the widget. This is where we set up the options for the image we're working on.
Drag the GIF Player Item widget onto your design. It can be inserted near the placeholder image for reference.
Important! All Item widgets must be placed below the Base widget on the page. They may not function otherwise.
The first option links the widget to the graphic style we created for the placeholder image. This must match exactly, including upper and lower case letters. Remember to replace any spaces with hyphens.
Now we need to choose the GIF file to display. The image will be scaled to fit the dimensions used for the placeholder image.
The next option is Wait for file to load before playing. This determines whether the entire animation should be loaded before it's started. This is especially useful for large file sizes.
The final options set the appearance and behaviour of the widget.
Once the widget is set up we need to test it to make sure everything is working. This can be done either in the Muse Preview or previewed in the browser.
Click the image to play.
Like this? Please share it!