How to create a transition effect
This article is about how to create flash transition effects for FlashSlider software.
All effects are divided between libraries by a such manner that the similar effects are in the one file with the extension *.fse.
The effect describes changing of the current and following slides with the transformation matrix. There are two types of such matrix: transformation of colors and size.
Here is the example of the effect "Panoramic view for current and following slide to left":
| <Effect ID="ID-L" Name="Slides to left" Order="True"> | ID and Name of effect. The Order specifies deepness of the following slide |
| <Step Time="0"> | Step item. Time specifies the start of step |
| <Color Cur="False" New="False"/> | Either color should be transformed |
| <Transform Cur="True" New="True"> | Either size or position should be transformed |
| <Cur> | Properties of the current slide |
| <Scale X="0" Y="0"/> | Scale after step |
| <Skew X="0" Y="0"/> | Skew after step |
| <Translate X="-100" Y="0"/> | Position after step |
| </Cur> | |
| <New> | Properties of the new slide |
| <Scale X="0" Y="0"/> | Scale before step |
| <Skew X="0" Y="0"/> | Skew before step |
| <Translate X="100" Y="0"/> | Position before step |
| </New> | |
| </Transform> | |
| </Step> | |
| </Effect> |
Identificator is a unique value which is used by the program to identify a slide with an effect. All library identificators should have the same suffix.
Effect name describes effect showing in the program only and is not used anywhere else.
Start point (Time) of step is a value in percents. The first step must start from 0.
Deepness of following slide defines where the follow slide appears.
Order = true - the follow from top of the current, Order = false - the follow from bottom of the current.
The color matrix is defined in the R G B A format. Color components is changed from -255 to 255. The difference between the matrix for the current and following slides is the values for the current one define the slide condition at the end of the effect diagram and for the following one - at the start.
How does it work? For instance, the matrix 0 0 0 -255 for the current slide is defined. The current slide matrix is always 0 0 0 0 at the start of transformation, therefore the alpha value goes down till -255 by the end of transformation or, it becames transparent fully.
Now there is the same matrix 0 0 0 -255 but for the following slide. The following slide matrix is always 0 0 0 0, so the alpha value goes up from the fully transparent to 255, normal without transparency.
The values of the size transformation matrix are defined like the values of the colors transformation matrix.
The matrix is defined in the format ScaleX ScaleY SkewX SkewY TranslateX TranslateY.
ScaleX, ScaleY are compression coefficients in percents. The negative values (from 0 to -100) compress an image, the positive ones - extend it.
SkewX, SkewY are the skew coefficients in percents of the size. The fixing point is the top left corner of the slide.
TranslateX, TranslateY are the replacement coefficients in percents of the size. 0 is at the top left corner of the slide. The positive X directs right, Y - down.
In the example above is used the matrix 0 0 0 0 -100 0 for the current slide, it means the only TranslateX coefficient has defined, so the slide will be replaced for the slide width to left. As the matrix 0 0 0 0 100 0 for the following slide has been defined, so the slide replace at the start of transformation is equal to the slide width to right.
