Example - An Animated Scroll Window

[ChioCS]

In this example, we will show you how to setup items in a Scroll Window to perform some animation as it move across the canvas. We also added a background Window beneath it and a simple Splash to promote our company to give it an extra jest. The animating part is as follows.

1. Perform Bitmap effect on 2 members.
2. Animate a member in a Set.
3. Perform Group Effect on 5 members.

Note: In order animate an item, it has to be inside a Set.

 

[ChioCS]

So, we created our window as below.

First, we drop all prepared graphics into the canvas except those that we need to place it in a Set. Arrange it if you like or you can do it later.


Bitmap Effect

A Bitmap Effect can be single or a series of the same Effect, in the later, you have to give it a different values in order to animate.

For our logo, we apply 2 similar blur effects with different values. To do it, simply click on the image then click on a timeline, and from the Effect menu, choose the Bitmap type, filll in the values in the Effect Tab.

For the second, we simply apply a Drop Shadow Effect on an image on timeline zero.

Animate a member in a Set

For this, we created a Set in the object tab, added a Text in the Set canvas, to perform the animation, we simply record some text movement.

 

[ChioCS]

Applying Group Effect

Lets take a look at the above member, it is a Set compose of 4 Han characters, to create that, add a text, type the character in the textbox vertically, select the font and size, finally convert it into a Set.

As you can see we have applied 3 Transform effects at timeline 0,1 and 4. So that gives us 2 movement of the same Set. Remember a Group Effects needs at least a pair to animate.

For our first movement, we wanted it start from being hidden to fully visible, so we set the Alpha to 0 on the first timeline. And we want them to perform as one, so in the Sequence field, we select Together.

 

[ChioCS]

If you notice, for the next timeline we had a translation of x and y value set to a negative value, that is because while we transform the alpha from 0 to 255 we also perform a movement upwards and move slightly to the left.

For the next movement, we wanted the character in the Set to move individually. Therefore we set the Sequence on our second timeline to RoundRobin. In this scenario, a member within the Set has to complete transforming before the next member begins. However we like to twit it a little by having a displayframe value of -0.6, so this allows the next member to begin before the previous member completes it task.

With RoundRobin, every member timeslice are divided equally from the pair of timeline, therefore in this movement we have 3 seconds instead of 1, otherwise it would be too quick to the eyes.

 

[ChioCS]

Finally, the end pair of the second movement. We further set the translation to the left, that is because we wanted it to land on the previous image and with the y translation normalize. And it also perform a rotation of 360 in thismovement.

If you notice, this Set doesn't seems to occupy any space in the Scroll Window, that is because, after we converted the text to a Set, we adjusted the width of the Set to 1 pixel. For a Scroll Window, you can play around with the width and height of a Set to your effect.

 

[ChioCS]

Here's the sample, animatedscroll.rar