“Animate” a 2007 RibbonX image

The quotes around the first word should alert the reader that this is not about actually animating a ribbon image but rather about simulating the effect.

The end effect of the experimentation described in this proof-of-concept note is the alternating image for the Custom Italic button
dde-animate-1.gif
and

A few days ago I was developing a 2007 interface for some add-in. After trying out a few icons, it became apparent that an animated GIF (called AGIF below) would be the most effective way to convey some of the features of the add-in. I vaguely remembered some discussion at the last MVP summit that RibbonX did not support AGIFs. But, hoping I was wrong, my first attempt was to just that. I put one together (nothing fancy, just two images that alternated ad infinitum), created an empty workbook, saved it as a XLSM file, and opened it in the Office 2007 Custom UI Editor.

In the editor, I used one of the sample templates (Excel – A Custom Tab) to create a test ribbon. For one of the buttons (id=”customButton1?), I set the image attribute to the name of the AGIF, inserted the image file into the XLSM, saved the file, and opened it in Excel. Unfortunately, there was nothing wrong with my recollection. The ribbon did not animate the AGIF.

So, I figured that was that…until a day or so later when I was boarding a plane at some unearthly hour. Just as I got to my seat, I couldn’t help but think, “Duh! If you must, use code to swap the images!” While it wouldn’t be true animation (no custom transition effects) and it would require VBA code running on a timed basis, it might work in the right circumstances.

So, thoughts of sleep forgotten, I pulled out the laptop as soon as we climbed above 10,000 feet. Opening the XLSM file, I used one of the other buttons to specify the attribute getImage=”getImage”

<button id=”customButton1? label=”ConBold” size=”large” onaction=”conBoldSub” image=”animate”/>
<button id=”customButton2? label=”ConItalic” size=”large” onaction=”conItalicSub” getimage=”getImage”/>

Of course, now I had to write some code to provide RibbonX with the image at the appropriate time and also invalidate the control after so-many-seconds. The invalidation would cause RibbonX to ask for the image again, and this time the code would provide a different image.

The code below contains three logical segments.

The first initializes the myRibbon variable.

The second provides RibbonX with the image of choice. Since I had two images, named animate-1.gif and animate-2.gif, the code alternates between the two.

The third section is the timing controller. For the test, I used a 5 second delay with the application’s OnTime method. So, every 5 seconds the code invalidates the CustomButton2 control, which causes RibbonX to call the getImage procedure, which, in turn, returns the next image in the rotating sequence.

Option&nbsp;Explicit
Dim&nbsp;myRibbon&nbsp;As&nbsp;IRibbonUI
Dim&nbsp;LastNbr&nbsp;As&nbsp;Integer,&nbsp;NextTime&nbsp;As&nbsp;Date
‘Callback&nbsp;for&nbsp;customUI.onLoad
Sub&nbsp;RibbonLoaded(ribbon&nbsp;As&nbsp;IRibbonUI)
&nbsp;&nbsp;&nbsp;&nbsp;Set&nbsp;myRibbon&nbsp;=&nbsp;ribbon
&nbsp;&nbsp;&nbsp;&nbsp;FiveSecsAnimate
&nbsp;&nbsp;&nbsp;&nbsp;End&nbsp;Sub
‘Callback&nbsp;for&nbsp;customButton2&nbsp;getImage
Sub&nbsp;getImage(control&nbsp;As&nbsp;IRibbonControl,&nbsp;ByRef&nbsp;returnedVal)
&nbsp;&nbsp;&nbsp;&nbsp;If&nbsp;LastNbr&nbsp;=&nbsp;0&nbsp;Then&nbsp;LastNbr&nbsp;=&nbsp;1&nbsp;Else&nbsp;LastNbr&nbsp;=&nbsp;LastNbr&nbsp;Mod&nbsp;2&nbsp;+&nbsp;1
&nbsp;&nbsp;&nbsp;&nbsp;Set&nbsp;returnedVal&nbsp;=&nbsp;LoadPicture(&nbsp;_
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ThisWorkbook.Path&nbsp;&&nbsp;Application.PathSeparator&nbsp;&&nbsp;”animate-“&nbsp;&&nbsp;LastNbr&nbsp;&&nbsp;”.gif”)
&nbsp;&nbsp;&nbsp;&nbsp;End&nbsp;Sub
Sub&nbsp;FiveSecsAnimate()
&nbsp;&nbsp;&nbsp;&nbsp;myRibbon.InvalidateControl&nbsp;”customButton2″
&nbsp;&nbsp;&nbsp;&nbsp;NextTime&nbsp;=&nbsp;Now&nbsp;+&nbsp;TimeValue(“0:0:5”)
&nbsp;&nbsp;&nbsp;&nbsp;Application.OnTime&nbsp;NextTime,&nbsp;”FiveSecsAnimate”
&nbsp;&nbsp;&nbsp;&nbsp;End&nbsp;Sub
Sub&nbsp;stopAnimation()
&nbsp;&nbsp;&nbsp;&nbsp;Application.OnTime&nbsp;NextTime,&nbsp;”FiveSecsAnimate”,&nbsp;,&nbsp;False
&nbsp;&nbsp;&nbsp;&nbsp;End&nbsp;Sub

For the test I used images in the same directory as the workbook.

In conclusion, ideally the images should be in the workbook itself. The code would then refer to those images. But, I don’t know enough about how to refer to images in an Office2007 file or how to get LoadPicture to work with those images. While the best solution would be for Ribbon/RibbonX to support animated GIFs, the above is an alternative for those who cannot wait for Microsoft to get around to it.

Posted in Uncategorized

17 thoughts on ““Animate” a 2007 RibbonX image

  1. Tushar, I’ll bet you spent nearly as long animating the icon as writing the app!

    …..a moving icon is the WORST thing I can imagine having on my Excel screen. No professional web pages have them any more, because they annoy readers so much.

  2. Tushar,

    Thanks for a nice interesting approach on the subject. I made some few test myself with a managed COM Add-in (VB.NET). Since we can add images to project’s resources it could also directly interact with the images in use.

    I classify solutions into two categories:
    – “Can do”
    – “Practical”

    This workaround is placed in the category “Can do”. However it may be useful if it’s used to alert users in customized solutions where some conditions et al is not met. I tested to use two identical images and it worked well.

    I know that the common approach in Excel is to use messageboxes however in .NET we try to avoid them as much as possible and instead use ErrorProviders. But this approach brings Excel closer to .NET.

    Of course, it will be nice the day MSFT offer developers a toolbox to control the Ribbon UI.

    Kind regards
    Dennis

  3. I think an animated icon would drive me batty, but I can foresee wanting to change the image of a ribbon control. The commandbar technique with picture and mask (or even paste face) was pretty straightforward. This looks like a reasonably straightforward approach, especially if it can be done with an image from within the file itself.

  4. I think that animated icons could be useful as part of a user support / help system, for example:

    msgbox(“click button 1?)
    button 1 icon flashes

    But, like other posters, I think it would drive me mad if a particular button was winking at me non stop…

  5. This will be consuming system resources constantly. I know computers are faster every day, but the software running is also growing in size and in complexity. My computer is already taking so much time in certain routines that something for “show” only it will be distracting and probably useless.

    Also, our eyes have the capability of seeing things surrounding the area of focus and something changing at the top of the screen will only cause distractions, when people should be looking at the data on the sheet.

    I will prefer an icon that changes when you pass the cursor above it.

  6. I would not be so dismissive of the utility of this. While I would not want to do so in any kind of professional application, I could certainly see using this technique on those little helper applets that you only run for a few minutes to accomplish one thing and then shut down. For example, I have tons of macros that do nothing more than parse and clean a text file, and the more dummy-proof they are, the better.

    As far as system resources, I don’t see that as an issue at all. Back in the day of laptops with 10? screens, I used to run Excel full-screen all the time. Since the taskbar was hidden, I had a little ontime macro that would refresh a toolbar button with the current date and time. This was on a Pentium 233 rocking a cool 128MB of RAM and Excel 97. It never had a performance impact I noticed. The only annoyance was that it would interfere with the debugging process.

    Anyway, I don’t think most people would care if it did. If any of you have Vista Ultimate, try enabling the Dreamscene theme. This dumb little thing does nothing more than display an mpeg video as your desktop wallpaper, and it takes a full 10% of the CPU cycles on a 2.4GHz Core2Quad. I can imagine most users have less powerful hardware and think nothing of enabling this so-called eye candy.

    On second thought, I think all you pro developers should animate every single ribbon icon, ASAP. And I will go buy some Intel stock ASAP.

  7. This falls under the “blinking cell” category, one is not supposed to make it available because most people will create ugly stuff with it. Probably true, but I do feel that developers should be capable of doing those considerations themselves and have as large a toolbox as possible.
    I’d like a possibility to show animations on hovering. Hover is underrated when it comes to gui design and user friendliness. Maybe because real developers navigate with keyboards, only end users use a mouse.

  8. It’s kinda disappointing how so many cannot see beyond a “flashing icon.” But, then, this post was never meant for those who stopped thinking about the role of motion in user interface design after observing the rudimentary efforts of the early pioneers of the 90s.

    For those who see value in being able to change icons in a ribbon, I hope you will find various ways of going beyond this illustration, which is essentially a proof-of-concept post.

  9. Tushar, if you count “so many” then you must have misunderstood a few of us. I’m on your side man, and “can be done” is always fantastic :-)

  10. Tushar, thanks for posting, I understand Totally where your coming from here.
    I for one “.. will find various ways of going beyond this illustration, which is essentially a proof-of-concept post.”

    Thanks

  11. Tushar, can you expand on where this could be used?

    Is it a matter of having one icon during one task and another icon the rest of the time (as per my ealier post)? Or would there other reasons / times for using this / similar method(s)?

  12. i have an excel file i rely on very heavily and distribute to others as a simulation. i am currently looking into adding a custom ribbon tab that has buttons that simply run a macro. i am just learning about the xml code and ui editor, so i found you post interesting. i hoped tyou might be able to answer a question for me..

    i keep my file saved as a maro enabled workbook, so what affect would saving it as a xlsm file have on all my rich content, if any at all?

    and how would i code a custom button to run a macro?

    thanks

    John Hart

  13. Hi John,

    A while back, I built a table-driven ribbon customizer utility for Excel 2007.
    The gist is of the utility is this:

    You fill in a table specifying the custom buttons you want and which tabs you want them on. Then the utility automatically builds the custom XML and adds it to a new workbook or existing workbook, effectively applying your Ribbon customizations without writing one line of code.

    I’ve also made it so that the call-back functions are also created and added, so the buttons can be adjusted to call an existing macro with very little effort!

    You can download the utility here: http://www.datapigtechnologies.com/Custom_UI_Builder.zip

  14. I know this is an old post, and you have probably moved on from this but is there an equivelent of a mouse over event you can take advantage of?

    When you hover over a button the background turns orange to show you the control you are about to select – could you at this stage start the animated gif, swapping it for the inbuilt graphic??

    just a thought.


Posting code? Use <pre> tags for VBA and <code> tags for inline.

Leave a Reply

Your email address will not be published.