Scripting Part II

Example 2

In the previous example we made our first script, now we will take that sample and we will modify it to show how hummingbird allow you to animate objects in a powerful way.First of all you must know that hummingbird includes a powerful animation tool called TweenLite, this is a tweener which allow us animate any numerical property of any object using interpolation.First we must modify the previous script in the following way:

In the designer edit the page alex1 and add a text component with the text ‘animate me’ and the coordinates x and y like show the following picture:

The just created text must have the name alex1_2 (remember that the system will assign it a name automatically), Then modify the page in such way you must have the events like is showed in the following pictures:

… we need the tweenlite library so include it in the imports event.

...In the onCreated event of the alex1_2 object we give initial position to the text. Note the use of the me event parameter, which reference to alex1_2 component.

...Last we modify the alex1_1_onClick event, first we get a reference to the text component that says ‘animate me’, with that reference we use tweenlite to animate the x coordinate of the text (using its wrapper). We could animate many properties at same time using the same code line.

Save the page and now test it: open another tab or window in your browser and write on the address:http://url/webdesigner/webdesigner.html?cp=alex1where url is the url to the server (replace with the corresponding in your case).Press enter and your browser must show you your page with the two texts, then click on the text ‘push me’ and then you must see how the text ‘animate me’ moves softly horizontally.

Now you have a very little idea of the power of scripting with Hummingbird.In the following posts you will see how to use the properties and methods of the components to make really amazings web sites.