Video: How Do I: Get Started with the ASP.NET AJAX Animation Extender Control?

Presenter:Joe Stagner

This video introduces the Animation extender control from the ASP.NET AJAX Control Toolkit, which provides developers with a fully-extensible framework for adding animation effects to an ASP.NET Web page.

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video


Minute 0

Its video or provide an introductory demonstration to the innovation control the ships by the Microsoft execs control toolkit as the sample application that ships with the Ajax control toolkit states in the animation control is really much more than a control if the an extensible framework for adding innovation effects are basically it lets you a mechanism by which you can transition from one virtual state to enact so you can you can change from one car to another from one position to another from one s size to another and if you and you can do this based on events that are fired from the 18 artifacts exist on your page you can also look at JavaScript code that you write to think about that to declare the venting mechanism coupled with creative

Minute 1

Transition such important you can configure with parameters for size position and collar and to that the ability to add any cost of JavaScript code that you want to write basically the of the limits of what you can do with the animation control Center Om are a really only bounded by your own imagination so here s a this is a sort of a complex example in the see sharp source code for this demonstration in cells with the index control toolkit last one is quickly before we don t build their own know several things happen so I click on the button this blackbox starts from nothingness and expands out to its own size through that animation you notice the changes colors between you and a privilege to read and back notice that I have mouse over events in my in my pop up content here and didn t notice it such as changing but is actually a and

Minute 2

Nation effect is taking place so is a secondary animation is making us go from white term to read over the period of maybe a up a second and then back on a close associate shrinks up on the thing to notice is that while this is open this is clicked button is disabled so on strictly speaking it s not a mortal dialogue but automatically wired and is the ability to use events and and visual transitions to a to coax the state of the user interface process a complex example first thing you see where the would go with them a little bit like this but that is what for simplistic and nature so to do that with a visual Web developer and we can create a Ajax enabled web application needs Visual Basic as

Minute 3

Programming language who codes and in the sample first thing going to do as an undergrad of a stylesheet that I will use my page and a couple of images going to my default aspx page Dragon style sheet in my page to create the stylesheet reference and now ready to start building out our page since animations are based on events that are generated from Rh to knock on the content first will need some of that content so it had a couple of a couple spacings in a and to go more spacing here

Minute 4

Next to need a button is that we can work with Sosa grabbing ASP net button let s call it and in so 70 run a server of course in a him in a search is setting the on client click event handler to be little JavaScript snippet return false

Minute 5

And and and and and and and and and and and and and it is just a little litigation little bit page logic there to build a content as canoe be used in the animation is so subtle curb I default with will host defined in two tier call it layout decisions could be via a wire frame for her own Kaleida frame that will go around the content to appear and disappear based on the behavior of the animation salutes also come into class and next do

Minute 6

That will be contain the actual content that will fly out and be contained inside that wireframe that which is defined in the previous day is so skewed that a name of info acidophilus receptor is a disco or use a piece of style and a groups to use IntelliSense is really work in helping their so and know that here just do a whole collection of style and easier this is part of what provides the basis for the for the transition so for the sake of expediency and not to enumerate all

Minute 7

These attributes him some of them are from our CSS standard some of them are are not necessarily but you can use this as a template and most of these things should be familiar to you and the rest to close at his this form of May 2 million will decide that if we could just add some content this can be this is in our case it s taxing the any external markup you want so if you conclude no buttons are

Minute 8

Links or whatever you want them in fact the at the demo that installs with a sample website for the exact control toolkit has more complex content inside the the area that flies out exudate is an area to contain some items that will be used to close this thing or opening up so let s add another give and I ll call it and again and there will farther collection styles here that need to be applied so it s a

Minute 9

Him is offended now I can go in add the style this I we need a some element that can be used to generate an event so let s use an ASP net link button this is what s this is as good TV acts that can be used in to close that window that opens up through the animation is putting clothes to spend as little bit scared room that and

Minute 10

A now again unclaimed click and returns false and a text is a good capital acts here because her similarly simulating the normal Windows convention of a next being used to close out the in some form element is being displayed will also provide a tool to do so when the user hovers over the accidental tell them what s good happily click on it class thing is you re again at the this file is very necessary

Minute 11

Him and and and and and and and and and and and and and and and and and and and a in a it is a little result is a lot as a lifestyle here on what I should play with with pushing us at external style sheet but because opacity is not standard room and we do set to zero so that the element doesn t appear I didn t have any luck from if by further research reveals a way to successfully publish that I will certainly posted to my blog at www Joeon net okay so that s it we need is to read it a little bit of JavaScript to help us overlay one piece of content on top of another

Minute 12

And so for that with a stylish little piece of JavaScript code here knows that while this is the latest is taking three arguments one is optional and basically saying his illness I want to be on the bottom here is the element that I want to be on them on the top I can choose to make at the same size or as the as the underlying element or not so you override the size we want to you were just in a getting getting the location on of the object is on the bottom and figuring out where the new object should go at some is all this will be sent to does and then all that s left is to define the actual animation controls themselves now in our case

Minute 13

Reading to animation controls warned it is because we want an animation to take place when we click on the on the button that s when we click on this button we want one animation to take place and that s that the the box of Texas can look up your butt to make that box disappear when he did it program and animation on a different on a different item and namely that the click event of that Xbox so with a lot of parameters to these animation controls so for the Pacific expediency and go to include them by using snippets of these are not auto magic parts of the Ajax toolkit install is just snippets that I ve pot that I ve prewritten and a one of the things I really want encourage you about is that the as I mentioned earlier that the limits to what you can do with his

Minute 14

With these animation controls is not only by your imagination and your understanding of HTML and JavaScript so I m this is just an example will walk through I m actually quite similar regularly said the target control for the first one is for info the button is shown on the on the page by default and then the target for the second animation controls one close which only appears after we click on button until I so for the mix include you in terms of what s you know why we need two of them and remember the target of this animation doesn t exist until after Sunday s click of a button that that Xbox area has appeared so just click let s look at these look at these parameters this is definitely something awful of the documentation to suffer suffer details but his animations collection and we have we have this on click section and or defining a sequence of this is a sequence of events

Minute 15

So I part of how we manage the definition is animation is to define the sequence of things we want to happen and we can group them as you see here is parallel section some of them don t want to happen at the same time so we want this to happen for us that we want this to happen and what this whole group of things all the happen at the same time so this case enable action enabled also return the return that got them off while the while the animation has appeared and it ll stay there until we said it to true in this be closing animations is the opening animation in that position a wireframe where do that by declaring the script action to be a call to that cover JavaScript function that we defined appear

Minute 16

Print we won such as the fact is that we defined with no content at and we just picked up the stylesheet from our CSS file and so we we specify what the script is good to be an elite define the action so that targets can be flied out to deep display than with wireframe for the buttons bounced to the info panel s bounce and this is the thing that causes that affect where looks like it starts from scratch from almost nothing in the show moves itself into place right so these things happen in parallel so it s going to be moved to the right place and resized up to the size and are also as good steps to college for us and it really fits her fancy I confess to being artistically challenged but you get really fancy terms of no you if you know integer design guy and that sort of imagination you can and he gives his fancies like

Minute 17

And remove the panel Ashley contains the actual content on top of the wireframe Soden setting the script action with a call to the cover event of a cover up of a fly out which is the wireframe we just moved out there with the info panel then what do ignore the size reviews the size that we specify so that the border that don t vote the actual true dark outside frame will continue to appear will be completely overlaid on his faction is they are animation target is the the infant is here s how we want to appear as it is how we want to stay in to take place is the target here is the direction so how long we want to take us to be fairly quick and again the style action you will hear that from a this is basically just the reverse or so sooner I is for

Minute 18

Back out and basically do this will cause it to to salute out right and then don t actually beat you if you look to it to disappear and for it to set the display values so that it doesn t it is not visible but will be ready for the next open animation and then lastly we ve set that original button on the page enables equal to true sets available to be close again in and no assists with impetus to whole lot of of variables are there here on an end this is just the tip of the iceberg in terms of the kinds of things you can do with the animation control so there are a great deal more events and behaviors that are available and again this is one of those that particularly you and UI focused folks need to drill down into the details of the animation

Minute 19

Extender to see how you can apply your design skills to the behaviors that you can get by using animation control sonorous gunrunner as a default display the click of a button noticed that the animation flows out here is my earnest by Mark up in our case is taxed again as can be and is generally one click on the button is XML so vivendi can trap so in addition to showing the tools that you can change the colors as the as the sample the ships of the Tolkien shows click on that picturing some disappears in the slightest reactivated and I said that s introductory form of using the animation control Center home hopefully in the near future will be able to both myself and other guys on the ASP net team can produce a more detailed on more advanced usages

Minute 20

Of the animation control center but please don t please don t formulate your entire view of what you can do with this animation etc basically on this one demo a because again the idea of the he idea of the animation control center is not just do pop ups but in fact to allow you to do transitions from any size position or visual attribute like caller that you want to so it s a super for powerful control and if you have some neat uses of the animation control please him go ahead and use the suggestions box to contact me on the ASP net page I love to see the cool stuff you re doing with the animation control center that ships with the marks of a sex control toolkit

Click here to go to original video page