Alan Le

Yellow Fade Technique with Atlas

After seeing the new animation capabilities in the Atlas Control Toolkit, I wanted to experiment with implementing the Yellow Fade Technique.  I can't believe how simple it is with the new UpdatePanelAnimationExtender.

Demo: http://atlas.vertigosoftware.com/atlasyellowfade/

Source: http://blogs.Vertigosoftware.com/files/alan/atlasyellowfade.zip

The Code

The code should be really straight-forward.  I have an Update panel which contains an ASP.NET Label.  The update panel is triggered by the submit button which will change the label text to say hello to whatever's in the Textbox control.  I also added a server timestamp to the label.

To apply the yellow fade technique, I wrap the update panel around a div container and add the UpdatePanelAnimationExtender with properties to enable animation when the update panel has been updated.  There are two animation configured to fire in parallel for 2 seconds.  The first changes the background color from a shade of yellow back to white.  The second animation fades the content of the updatecontainer.

The work is done in this piece of code.  No knowledge of javascript necessary*!

<atlasToolkit:UpdatePanelAnimationExtender ID="upae" runat="server">
    <atlasToolkit:UpdatePanelAnimationProperties TargetControlID="UpdatePanel1">
        <Animations>
            <OnUpdated>
                <Sequence>
                    <Parallel duration="2" Fps="30">
                          <Color AnimationTarget="updatecontainer" StartValue="#FFEF3F" EndValue="#FFFFFF" Property="style" PropertyKey="backgroundColor" />
                          <FadeIn AnimationTarget="updatecontainer" minimumOpacity=".2" />
                    </Parallel>
                </Sequence>
            </OnUpdated>
        </Animations>
    </atlasToolkit:UpdatePanelAnimationProperties>
</atlasToolkit:UpdatePanelAnimationExtender>

* The design time support for the UpdateAnimationExtender shows the animation as simply "(Text)", so you would need to know the syntax for animations to configure it.

Atlas Control Toolkit - September?

I haven't seen an official announcement from the team yet, but it looks like a new release (marked 060914) of the Atlas Control Toolkit is up on the project's site at CodePlex.  From the description, the toolkit features four new controls: Animation, NoBot, Slider, and UpdatePanel Animation.  I linked the new controls to their corresponding pages on the Atlas Control Toolkit sample page.  It doesn't look like the new name change to "ASP.NET AJAX Control Toolkit" has populated to this release of the toolkit yet.

UpdatePanel Animation

I think the UpdatePanel Animation is a necessity.  Since the browser no longer flicker between refreshes with asynchronous callbacks, more clues with animation are needed to catch the user eye when something is being updated.  It looks like we can now easily create the Yellow Fade Technique in Atlas.

AnimationExtender

The animations found in the animation extender are also nice touch.  I need to check to see if it can do the cinematic effects like Rico.

Slider Control

I've been following the slider control when it was on Garbin's blog.  One problem I'm having this control, is getting it to trigger an UpdatePanel when the ValueChanged event is fired.  I'm have a similar problem with the Rating control Rated event.  Maybe someone has an easy way to wire up a javascript event handler to these events to get it to trigger UpdatePanels?

NoBot

Nobot is a contorl to prevent bot spam by identifying bots through 4 different criteria without requiring CAPTCHA.  I need to looke more into how this control works.

Check out these new controls and the existing controls in the toolkit.  Some really excellent stuff!

Update:  I missed this earlier, but there's some really good stuff in the animation department.  Check out the new documentation on "Using Animation".  Try the quick demos within that page.  Also there's an accompanying Animation Reference.