Ulead Animation Applet


Ulead's new Animation Applet 2.0 adds pizzazz to your PhotoImpact images by creating all kinds of animated java applet effects!

This tutorial will show you how to create an animation with the Snow particle and rainbow gradient text, export it to HTML and use the resulting animation to build a web page in FrontPage 2002 (Ulead has a similar tutorial). The animation is based on one I made for my mom's skating page.

I want to mention that Animation Applet 2.0 is capable of much more sophisticated effects (including multiple images with multiple effects at different points in the timeline) than I'm showing in this tutorial. However, this is meant to be a basic introduction to how Animation Applet 2.0 works.

The first thing to do is make a note of the dimensions of the image you're going to use in the applet. My image is 248 X 378 pixels. You have to know these dimensions when you start building the applet.

Open up Animation Applet and when you get the Startup Screen, choose "Start From a New Applet." Your work space will be divided up into a top and bottom pane. Choose File, Preferences, New Applet. From the General tab, enter the width and height of your image. It's really important that you do this before you begin building the applet. If you don't, the applet will not be applied to your entire image.

enter image width and height

Next click on the Background tab. Since the applet does not have any transparency, it's good to specify a background color or image from the background tab. I've already filled my image background with the snow tile, so I left the default color of white selected. Click the Play Control tab if you want the applet to play only a limited number of times. I've left mine set to the default of "Infinite." If you want to add a Border, click the Border tab. Click the Advanced tab to see a number of extra options available. I've left all the defaults selected, except that I've edited the Applet Priority to Normal (the default is Low). Click OK to close the Preferences dialog box.

You should see a big white rectangle the size of your image in the lower half of the work space. Now let's insert our "sprites," the particle effect. Choose Insert Sprites, Particle Effects, Snow. Doing so opens a big dialog box with editable attributes. If you accept the defaults and click Preview, your browser will open to display the animation. You probably won't like the look with the default settings, so close the browser window.

Notice that the big white rectangle representing your applet is now gray (it says "Snow 1" on it), and that there are two tabs in the lower part of the work space: Compose and Preview. Double click on the gray rectangle to open up the Snow dialog box again. This time edit the attributes as shown below. Of course you can choose your own values for each attribute, but these are the ones I thought looked best after experimenting.

Snow dialog box

Click OK to close the dialog box. Note that the top half of the work space shows 60 frames in the animation's timeline. In the bottom half of the work space, click on the Preview tab and wait for a moment. You'll see the animation previewed right in the work space, without having to open your browser. At first the screen will be white, but then you'll see text stating "Loading 1/1, Snow X/50," where X is the frame numbers loading. When it hits 60, the animation will display.

When you're done previewing the animation, click the Compose tab again. If you want to further tweak the settings, double click on the gray rectangle again to open the dialog box again. Continue on until you're satisfied with the snow animation.

Now let's add some animated rainbow gradient text. Choose Insert Sprites, Text Effects, Gradient. A Gradient dialog box will open. Type in the text you want to add and format font, font size, color, etc. Note that you can choose to make the text only show the gradient rainbow effect on mouseover, if you select that option.

add gradient text

When you're done entering and formatting the text, click OK. Gradient will be added to your animation timeline at the top of the work space.

snow and gradient added to timeline

From the Compose tab at the bottom of the work space, note that the Gradient effect has been added on top of the snow effect. By default, it goes to the upper left corner of the image. My screen shot says "Gradient 3" because I tried some other effects first -- yours may say "Gradient 1" (or whatever).

gradient text added to applet

Drag the Gradient box down to the lower right corner and resize it by dragging on its bounding boxes. This way the rainbow gradient text will appear only within that area in the background of the image.

drag and resize gradient effect

Click the Preview tab to watch the animation. You'll see the rainbow gradient text animation superimposed over the snow animation.

When you're satisfied with your animation, you have two ways to save it. If you think you might want to edit this animation again sometime later, choose File, Save As, to save it as an Animation.Applet Project File, which carries a file extension of .UAA. Next time you want to edit the applet, just open up the .UAA file.

To use this animation on a web page, I'd recommend that you choose File, Save as HTML. You can also choose Edit, Copy HTML, then paste the code into a web page document in your HTML editor. But doing so will not save all the necessary class files to run the animation. The big advantage to Saving to HTML is that the entire HTML web page plus all of the files necessary to make the animation run are saved to the same folder. For example, saving this animation applet generates an HTML file, a copy of the image file, and four class files (uagrada, uaplayere, ua2sbase, ua2snow). It's important to remember that you must upload all of these files to the same directory on your server, or the animation won't work.

Now that you have an HTML page containing the animation, open it up in your HTML editor. I'm using FrontPage 2002 here, but this will work in Dreamweaver and other editors too. What you'll have is a blank page with the animation, represented by a gray square, on the top left side of your page, with "ua2playe.class" underneath it.

applet on web page

Since I want to position this applet on the left, with a header and buttons on the right side, it would be good to put this applet into a table cell to control how the other images flow around it. Accordingly, click the HTML tab down at the bottom of the screen to view the HTML code. Select all of the code for the applet:

select HTML code for applet

Hit Ctrl+X to cut the code out of the document. Click the Normal tab again to return to the page view. The page looks empty now. Choose Table, Insert, Table. When the Insert Table dialog box opens, make a 2 row, 2 column table, Borders=0. I've made my table centered, 90% of the page width. Click OK. You'll see the familiar dotted lines that show the structure of the table.

Click in the top left cell. Now click the HTML tab at the bottom of the page to return to code view. Hit Ctrl+V to paste the Clipboard contents back into the document. Click the Normal tab again to return to page view. You'll see the applet is back on the page, in the top left cell.

applet back in table cell

From here on in, you can edit the page just as you would any HTML page. I've added a snow tile for the background image, a header and navigation buttons, and selected text, link, vlink and alink colors. I selected both columns in the bottom row and merged them together, then added copyright information.

Save your finished page locally on your own computer, then publish as you would normally using FrontPage's Publish feature, by Importing the files if you're editing live online, or FTP all the files into the correct folder on your server.

And here's the web page!

This tutorial uploaded 9/28/01

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage