Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use Flex special effects", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to use Flex special effects" this article.

Flex special effects explanation

The behavior mechanism of Flex makes it easy for developers to add animation effects to their applications, thus making the user interface more colorful. This chapter describes how to create behaviors and animation effects in Flex applications.

1. What is Flex behavior?

The Behavior in Flex is a combination of Trigger and Effect. When the user performs an operation in the interface, such as clicking a button, the trigger will be activated, resulting in some visual or auditory changes in the target component, such as playing a gradually displayed animation or making a sound. A trigger can be triggered by a user action or by a program, and a trigger can correspond to multiple effects.

1.1 triggers and effects

Triggers are very simple to use and can be used as an attribute in a MXML tag, called in a tag, or called with the setStyle () and getStyle () methods in ActionScript. The name of the trigger is the triggerEvent name + "Effect" suffix. According to this naming convention, the trigger name for the mouseDown event is mouseDownEffect. The trigger names provided in Flex include the following.

LaddedEffect: triggers when a component is added to the container.

LcreationCompleteEffect: triggered when the component is created.

LfocusInEffect: triggered when a component gains focus.

LfocusOutEffect: triggered when a component loses focus.

LhideEffect: triggered when the visible property of a component is changed to false.

LmouseDownEffect: triggered when the mouse is pressed.

LmouseUpEffect: triggered when the mouse is released.

LmoveEffect: triggers when a component moves.

LremovedEffect: triggered when a component is removed.

LresizeEffect: triggered when the component changes size.

LrollOutEffect: triggered when the mouse is removed from the component.

LrollOverEffect: triggered when the mouse moves over the component.

LshowEffect: triggered when the visible property of a component is changed to true.

Flex animation consists of a factory class (Factory) and an instance class (Instance). The factory class is used to handle events and control animation, and its name is the name of the effect, such as Zoom. Usually we create an instance of the factory class in the application, set the necessary parameters, and then associate the instance with the trigger. The instance class is used to achieve animation. When the trigger is triggered or the play () method is called, the factory class creates an instance of the instance class to play the desired effect. After execution, the instance will be destroyed. If an effect corresponds to multiple target objects, each target object will have its own instance. The naming convention of the instance class is effect name + Instance. If the factory class defined earlier is called Zoom, then the instance class name is ZoomInstance. This mechanism of Effect is an application of the factory pattern in the design pattern. When the effect is executed, it runs not Zoom, but ZoomInstance.

Figure 9-1 below shows the hierarchical relationship between factory classes and instance classes, respectively. The Effect class is an abstract base class that is the basic factory class that defines all effects. The EffectInstance class is the base class that defines all effect real example classes. Instead of creating an instance of the Effect class itself in the application, you create an instance of a subclass, such as Mask or Tween.

Figure 9-1 Factory class and instance class

1.2 simple effects components

A wealth of effects components are available in Flex. Because the effect is a gradual process based on time, all effects have the duration property, which sets the playback time in milliseconds. You can also control the number of times the effect is played and the interval between repeating the effect (in milliseconds) by setting the repeatCount property and the repeatDelay property, respectively. If you want to delay calling the effect for a period of time after the trigger is triggered, you can use the startDelay attribute.

1) AnimateProperty animation effects of Flex special effects

AnimateProperty is the effect used to animate the properties or styles of a component. We can use its property property to set the properties on the target object that need to be animated, and then set the fromValue property and the toValue property to provide the start and end values of the property for the effect. For example, the following code uses a mouseDownEffect trigger, which triggers the AnimateProperty effect when a picture is clicked. Within 1 second, the scaleX property of the Image object changes from 1 to 2 and is stretched horizontally. The code is as follows:

If you want to set the effect through style, you can set the isStyle property to ture, and then style the target object through the setStyle () method to achieve the purpose of setting the effect.

2) Blur fuzzy effect of Flex special effects

Blur is a blur effect. This effect uses the flash.filters.BlurFilter filter, and if you apply the Blur effect to a component, you can no longer apply the BlurFilter filter to that component, nor can you apply the Blur effect again. The following code triggers the Blur effect through the mouseDownEffect trigger of the Image object, and the Image object gradually becomes blurred within 1 second. The code is as follows:

3) Dissolve dissolving effect of Flex special effect

Dissolve is a dissolving effect. When the effect starts playing, an opaque rectangle is created, suspended above the target component, its color is set by the Dissolve.color property, and the transparency is "1.0-Dissolve.alphaFrom". As the effect plays, the alpha property of the rectangle will gradually change from (1.0-alphaFrom) to "1.0-alphaTo" until the effect is played and the rectangle is destroyed.

If the target object is a container, the Dissolve effect is applied to the content area inside the container.

The following code uses a CheckBox object to set the visible property of Image, triggering their respective Dissolve effects through hideEffect and showEffect triggers, respectively:

4) Fade fading effect of Flex special effects

Fade is a fade in and out effect, which animates by setting the alpha property of the component. When setting the Fade effect with showEffect or hideEffect triggers, if the values of the alphaFrom and alphaTo properties are omitted, the transparency of the target object changes from 0 to the current alpha value of the target on the showEffect trigger, and from the current alpha value to 0 on the hideEffect trigger. If you want to use the Fade effect for fonts, you must use embedded fonts.

The following code uses a CheckBox object to set the visible property of Image, triggering their respective Fade effects through hideEffect and showEffect triggers, respectively:

5) Glow luminous effect of Flex special effect

Glow is a glowing effect that uses the flash.filters.GlowFilter filter class. If you apply the Glow effect to a component, you cannot apply the GlowFilter filter to that component, nor can you apply the Glow effect again. The following code triggers the Glow effect through the mouseDownEffect trigger of the Image object:

6) Iris rainbow effect of Flex special effects

The Iris effect animates the effect target by expanding or shrinking a rectangular mask focused on the target. This effect can show the target by zooming in the mask from the center of the target, or you can shrink the mask to the center to hide the target. The following code uses a CheckBox object to set the visible property of Image, triggering their respective Iris effects through hideEffect and showEffect triggers, respectively:

7) Move mobile effect of Flex special effects

The Move effect is used for mobile animation. Within a given time, the location of the component changes over time. The following attributes are usually required to use this effect.

The lxFrom and yFrom properties are used to specify the initial location.

The lxTo and yTo attributes are used to specify the target location.

LxBy and yBy are used to specify the amount of movement, that is, the speed at which the component moves in the x-axis and y-axis.

Typically, you only need to specify any two of these values, the initial position, the target position, or the amount of movement, and Flex calculates the third value. If you specify all three values, Flex ignores the xBy and yby values. If you specify only xTo and yto values or xBy and yby values, Flex sets xFrom and yFrom to the current position of the object.

The following program demonstrates how to use the Move effect.

Code listing MoveSample.mxml

In the code, the layout property of Application is set to absolute, and when the user clicks the mouse anywhere in the application, the moveImage method is called, in which the Move effect is first stopped, then the target location is set according to the location of the mouse click, and finally the effect is played.

Move effects are usually applied to containers that use absolute positioning (such as Canvas) or containers that use "layout=absolute" (such as Application or Panel). If you need to apply it to an automatically laid out container, such as a VBox or Grid container, although the target object is moved, the next time the container updates its layout, it moves the target object back to its original location. In this case, you can set the container's autoLayout property to false to prevent moving back, but this disables the layout of all controls in the container.

8) Pause pause effect of Flex special effects

The Pause effect enables you to do nothing for a specified period of time. If you add the Pause effect as a child of the Sequence effect, you can create a pause between 2 other effects.

9) Resize resizing effect of Flex special effects

The Resize effect is used to change the size of components. Similar to the Move effect, the Resize effect can specify the initial size (widthFrom, heightFrom), target size (widthTo, heightTo), and the amount of variation (widthBy, heightBy), and its rules of use are similar to those of the initial position, target position, and amount of movement of the Move effect. The following code demonstrates the use of the Resize effect:

In addition, the hideChildrenTargets attribute is used to hide other sub-items of the Panel container. When we apply the Resize effect to the sub-items in the Panel container, by default, Panel will repeatedly calculate the size and position of the sub-items to adjust the layout. If you set this property to true, you can make the Panel container do not do this calculation when playing the animation until the playback is complete, which can save system resources.

10) Rotate rotation effect of Flex special effects

Rotate is a rotation effect that rotates a component around a specified point. Rotate can specify the coordinates of the center of rotation (the originX and originY properties) and the starting angle of the rotation (the angleFrom property) and the final angle (the angleTo property). The range of valid values for the starting rotation angle is 0,360, while the final angle can be positive or negative, with a default value of 360. If the value of angleTo is less than the value of angleFrom, the target rotates counterclockwise, otherwise it rotates clockwise. The code is as follows:

There are also times when you need to set the hideFocusRing property to determine whether the effect should hide the focus ring when it starts playing. The default value of this property is true. For components, the focus ring has been automatically hidden. If the Rotate effect is applied to objects that are not targeted by the UIComponent base class, the focus ring must be hidden.

It is important to note that the default value of the hideFocusRing property is false in the Effect-based effect class and true in the MaskEffect-based effect class.

11) SoundEffect sound effects of Flex special effects

The SoundEffect effect is used to play MP3 audio files. We can specify the MP3 file to be played through the source property, set the URL of the file directly, or embed the Class object of the MP3 file with the Embed keyword.

The properties of the SoundEffect effect include the following.

The lautoLoad property is used to set whether the MP3 file is loaded automatically, and the default value is true.

The lbufferTime property is used to set the buffer time of the sound object. The default value is 1000, in milliseconds.

LisLoading this property is true if MP3 is loaded.

The lloops property is used to set the number of cycles, with a default value of 0.

The lpanEasingFunction property is used to set the ease function for sound equalization.

The lpanFrom and panTo properties are used to set the start and final translation of the sound object, with values ranging from-1.0 to 1.0, where-1.0 indicates that only the left channel is used, 1.0 indicates that only the right channel is used, and 0.0 indicates that the sound is evenly balanced between the two channels.

The lsound property represents the sound object on which the MP3 file is loaded.

The lsource property represents the URL or class of the MP3 file to be played.

The lstartTime property is used to set the start playback time in milliseconds, with a default value of 0.

The luseDuration property indicates whether to stop playback according to the time specified by the duration attribute. If false, the effect will stop after the MP3 finishes playing or looping. The default value is true.

The lvolumeEasingFunction property is used to set the ease function for the volume effect.

The lvolumeFrom property and the volumeTo property are used to set the initial and final volume of the sound object, with values ranging from 0.01mm 1.0 to a default value of 1.

In the example shown in the following code, when the application is created, the sound file starts to play, and the sound transitions from the left channel to the right channel.

Code listing SoundSample.mxml

12) WipeUp, WipeRight, WipeDown, WipeLeft erasure effects of Flex special effects

These classes, which define erasure effects in four directions, are usually used in conjunction with showEffect and hideEffect triggers and are very easy to use, as in the following example.

Code listing WipeSample.mxml

13) Zoom scaling effect of Flex special effects

The Zoom effect scales objects proportionally around a specified point. Unlike the Resize effect, Resize changes the length and width properties of the target object, while Zoom changes the scaling of the target object. In the following example, the Zoom effect starts when the mouse moves over the picture and reverts when the mouse is moved out.

Code listing ZoomSample.mxml

The above is all the content of the article "how to use Flex Special effects". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.