Create and share a custom widget for Adobe Muse

Create and share a custom widget for Adobe Muse

A lot of Adobe Muse CC widgets are available by default: menus, tabs, slideshows, social… But sometimes, web designers need to embed code from a service that is not available in Muse. Every time you find a website that provides a ‘Share’ button, you can be sure that they want to  embed some HTML. Usually, you just need to copy a few lines of HTML with some parameters. Adobe Muse lets you paste HTML code, and it will be inserted in your code. But sometimes, you may want to use this embedded code in several pages, with different parameters, and eventually share this widget with your team or the community. That’s why Adobe introduced the concept of MuCow which stands for “Muse Configurable Options Widget”. In this article, I’ll showcase my first MuCow and explain how you can create your own.

My custom widget to enable “Zoom & Pan” pictures

I wanted to display on a website some of my panorama pictures such as this one hosted on Flickr:

I wanted the visitor to pan & zoom to discover the details of this shot. That’s how I discovered Zoom.it. It’s a free online service to deep dive into high resolution pictures. You just have to paste a link to your image and it will convert it using Deep Zoom technology (licensed by Microsoft). Here is my picture of South Korea converted by Zoom.it: http://zoom.it/7R0v

Now, let’s see how I used this service to create a custom Widget for Adobe Muse CC.

A custom widget is just XML

To create a custom widget (a MuCow), you need to create an XML file. The documentation is online and very concise. In my case, I want to embed a Zoom.it viewer in a Muse page. The user will drag and drop my widget and resize it. If we look at the code suggested by Zoom.it to embed the viewer, I need to add this line:

<script src=”http://zoom.it/7R0v.js?width=auto&height=400px”></script>

There are two variables:

  • The unique URL to my picture converted by Zoom.it (http://zoom.it/7R0v).
  • The height of the viewer (the width is set automatically).

To get the unique URL, I’ll have to ask the user to paste it somewhere. For the height, I can let the user resize the widget on the stage, and then Muse can pass me the value of the height. This one is a “built-in” parameter: the value will be specified directly by Adobe Muse.

Here is the basic XML structure of a MuCow.You can open any text or code editor to create a XML file:

The HTMLWidget tag can take as a child a <parameters> tag. Between the parameters tags, you can set different kinds or parameters: <text>, <list>, <url>, <bool> (a checkbox), <number> or <builtin>. For my widget I’ll need to ask for a URL and a builtin parameter to get the height of the widget.

So I’ll get:

With a builtin parameter, Adobe Muse can set not only the width and the height but also the itemUID, the siteUID, the country (of the document), the locale and the language (for localization). Notice that I’ve named the first parameter “ZoomItURL”. When the user places my widget in the page, he will get this pop-up to set the parameters:

zoomitParams

We have the parameters. Now we need to inject HTML code in our page. To add code, you need to use the classic <![CDATA[ … my content… ]]> delimiter. To use a parameter in your HTML code, use the prefix param_ and curly braces: {param_PARAMNAME}.

Then you can insert HTML code in the <HEAD> section of your page (<headHTML>), at the beginning of the <BODY> (<bodyBeginHTML>) , where your widget is positioned in the page (<pageItemHTML>) or at the end of the page (<bodyEndHTML>). In my case, I want to insert the widget where the user places it. So here is the final code:

Notice how I’ve included the param_ZoomItURL and the param_height parameters.

To test it in Adobe Muse, save this file with a .mucow extension. Open a page in Muse, and use the File > Place command. Select the .mucow file and place it in your page.

How to share your MuCow with the community

My Zoom.it widget is now available on the Muse Exchange website: http://muse.adobe.com/exchange-library/zoom-it

To submit your MuCow to this marketplace, follow these steps:

  1. Place your MuCow in a Muse page.
  2. Open the Library panel and create a folder
  3. Select your MuCow in the page and click “Add Selected item” in the Library panel.
  4. Then you can select it in the library, and click “Export selected item as a Muse library”
  5. Create a .mulib file on your desktop

Then visit this page to submit your widget:

http://muse.adobe.com/submit-widgets.html

Questions? Ideas?

If you have any question about custom widgets, or any ideas for a widget… don’t hesitate to post a comment on this page, or tweet me: http://twitter.com/mchaize

 

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

15 Comments

  1. hey, thanks for all this info, great clear vids.

    what do you think about the possibility of using this zoom.it widget as a hero image welcome banner?

    could this ever run a autoplaying slideshow?

    i would love to have a high rez playlist of images, that zoom as the content is scrolled up.

  2. That is great. How can I get rid of the border? Thanks.

  3. Salut Michael,
    Qu’en est t’il si l’on veut installer une galerie responsive avec filtre en jquery que l’on a acheté dans Muse.
    Comment cela se passe pour insérer une galerie de ce type qui change de taille suivant la taille de la fenêtre.?
    Peux tu citer les grandes étapes et les choses à éviter de faire?

    • salut Richard
      peux tu m envoyer un email ?

  4. Would like to see more form field options like check box groups, radio groups, etc, etc.

  5. Thanks. How can I place a link chooser to an site internal page from inside the widget – is this possible?

  6. Merci! Michael, vos explications sont apprécier.

  7. Hi Micheal!
    The Tutorial is nice, but I’m confused when I do same kind of widget like twitter feed widget. Can you please make a tutorial on that or make a in depth tutorial on making widgets.

    Thank you.

  8. Salut Michael .
    Comment créer des widgets avec la représentation de l’image dans Adobe Muse .
    Par exemple, le widget Disabler de Qooqee . Lorsque vous faites glisser et déposez le widget sur ​​la page de la bibliothèque . Il a l’image du logo Qooqee sur la page .
    S’il vous plaît aidez -moi avec elle . Permettez- moi de savoir comment cela peut être fait .

Trackbacks/Pingbacks

  1. Add a preloader to your Muse web pages | Creative droplets - […] The Muse Exchange website lists all the widgets and libraries created by the community. I explain in my previous…

Submit a Comment

Your email address will not be published. Required fields are marked *