1 Reply Latest reply on Jan 23, 2007 4:57 PM by Newsgroup_User

    How to code a fading UI?

    Applied CD Level 1
      If anyone has used Apple’s DVD media player or iTunes for video you’ve probably noticed the user interface fades in when rolled over and fades out when the mouse leaves. I have an application that could use the same sort of minimalist interface and I’ve got it 90% worked out but my scripts have a few short comings.

      1. The scripts use repeat loops to handle the fades which of course locks up the interactivity until the loop is completed. I want the handlers to use timeout scripts rather than a repeat loops so I can continue to process events and maintain interactivity during the fades.

      2. I want the fade scripts to be able to interrupt one another, for example, if the mouse is moved over the interface it begins to fade in, if the mouse is moved off the interface I want it to start fading out immediately from whatever blendLevel it reached before the mouseLeave event, as it’s currently written it will complete the fade in before switching to the fade out.

      3. I’d like the number of steps involved in the blend to be based on a time increment rather than an arbitrary integer number of steps. The problem with an arbitrary number is that what works well for a fast machine takes far too long on a slow machine, I’d like the speed of the fades to be performance independent (within reason).

      The last kicker is that I would like to avoid using an exitFrame handler to drive the fade handler, the interface should be compatible with the standard “Hold on Current Frame” behavior.

      If any has some ideas I’d love to hear them.

      - Bob
      - Applied CD Technologies
        • 1. One Lead
          Level 7
          The Fade In-Out behavior in the library palette animation\animation
          might give you some ideas.


          It is time basedd (fewer courser steps on slow systems) and works in
          background.


          It looks like you might be able to extend the mFadeActivate handler to
          work with your menu stuff


          Here's a rough example


          on mFadeActivate me, finalBlend, totalMS, excludeSprite



          To bring in menu sprite 10 and turn down any others mid process:



          sendSprite(10, #mFadeActivate, 100, 500, 0)

          sendAllSprites(#mFadeActivate, 50, 0, 10)


          The second call sets all other elements to 50% blend in 0 time, except
          sprite 10


          if excludeSprite = me.spriteNUm then exit -- this line handles the
          exclued sprite num