Tutorials

FlashEff2 Tutorials

1. Create an image show and hide effect

1. Create a new ActionScript 3.0 Flash file: File > New, select Flash File (ActionScript 3.0). In the Properties panel, set the frame rate of the Flash movie to 30 fps.

2. Import your image into your project: File > Import > Import to Stage and select the image from your local computer that you wish to use for the effect.

3. With the image selected on the stage, transform it into a symbol (press F8 or Modify > Convert to symbol). In the Convert to Symbol dialog box give your clip a name, set the type to Movie Clip and press OK.

4. [optional] If it isn't already selected, select the new movie clip on the stage and give it an instance name of "myClip". If you do not give it an instance name, FlashEff2 will automatically assign it one in the form of "InstanceName_*", where "*" represents an index number (starting from 0).

5. Open the Components panel (Window > Components or Ctrl+F7 for Windows/Cmd+F7 for Mac OS) and from the FlashEff2 folder select the component and drag it over the image clip on the stage.

6. Open the FlashEff2 Panel (Window > Other panels > FlashEff2 Panel) and sign in to your JumpeyeComponents account. If you are already signed in, make sure that the FlashEff2 instance you placed on the stage is selected so that the panel will load the settings controls.

7. In the FlashEff2 Panel select the Show tab to bring up the list of available patterns. In the Pattern tab, select Symbol (it is selected by default) to list the symbol patterns and choose the FESAlpha pattern to apply an alpha effect.

8. This brings up the list of available presets of the FESAlpha pattern (the Free FlashEff2 version will only have one preset available). You can choose one of the presets that you would like to apply on the image. If you have the Premium Plus version, you'll be able to further customize the effect by pressing the "Edit settings" button that opens the list of properties for the chosen pattern.

9. Next, select the Tween tab to change the easing type from easeInOut to easeOut and set the length of the show effect (tweenDuration) to 3 seconds.

10. The Options tab allows you to specify whether the show effect will automatically execute or not and the amount of time the component should wait before applying the show effect. For this example you can leave the settings as they are.

11. The hide effect can be set up exactly the same way as the show effect. So select the Hide tab to open the list of patterns and then choose Symbol to list the symbol patterns.

1

12. Select the "FESChaoticMasks" pattern and then select a preset that you'd like to be applied.

13. In the Options tab set the delay parameter to 5 seconds (the time from the end of the show effect to the beginning of the hide effect).

14. Once you set the show and hide effects, you can test your file by pressing Ctrl+Enter for Windows or Cmd+Enter for Mac OS.

2. Create a text show and hide effect

1. Create a new ActionScript 3.0 Flash file: File > New, select Flash File (ActionScript 3.0). In the Properties panel, set the frame rate of the Flash movie to 30 fps.

2. Select the Text Tool, place a text field on the stage and then write some text in the text field.

3. With the text field selected, set it up for the effect: in the Properties panel give it the instance name of "myText", set the type to be "Dynamic Text", the anti‐alias setting must be "Anti‐alias for animation", enable the "Render text as HTML" option and press the Embed button to open the Embed Characters dialog box. In the dialog box press the "Auto fill" button to embed only the characters from the text field.

4. Open the Components panel (Window > Components or Ctrl+F7 for Windows/Cmd+F7 for Mac OS) and from the FlashEff2 folder select the component and drag it over the text field on the stage.

5. Open the FlashEff2 Panel (Window > Other panels > FlashEff2 Panel) and sign in to your JumpeyeComponents account. If you are already signed in, make sure that the FlashEff2 instance you placed on the stage is selected so that the panel will load the settings controls.

6. In the FlashEff2 Panel select the Show tab to bring up the list of available patterns. In the Pattern tab, select "Text", which lists the text patterns, and choose the "FETBlur" pattern to apply an alpha effect.

7. In the presets list that opens up (the Free FlashEff2 version has only one preset for each pattern) you can choose any pre‐configured preset that you like.

8. If you have the Premium Plus version, select the "Edit settings" button to edit the properties of the blur effect. To change the way characters are displayed from the "preset" property list, select "random". This way the characters will be displayed in a random order. From the preview area in the top‐left corner you can see how the effect will look like. If you want to use these settings later on, you can save your preset by pressing on the "Save preset" button and giving it a name.

9. Select the Tween tab and check the "Use custom tweening" option to allow you to customize the tween. From the tweenType list select "Bounce".

10. The Options tab allows you to specify whether the show effect will automatically execute or

2

not and the amount of time the component should wait before applying the show effect. For this example you can leave the settings as they are.

11. The hide effect can be set up exactly the same way as the show effect. Thus select the Hide tab that opens the list of patterns and then choose "Text" to list the text patterns.

12. Select the FETMagneticWind pattern and select a preset that you'd like to be applied.

13. To further customize the effect, press on the "Edit settings" button (feature available only for the Premium Plus version) and from the preset list select "char: random (d1)". This will apply the effect on characters in a random order.

14. In the Options tab set the delay parameter to 5 seconds (the time from the end of the show effect to the beginning of the hide effect).

15. Once you set the show and hide effects, you can test your file by pressing Ctrl+Enter for Windows or Cmd+Enter for Mac OS.

3. Apply FlashEff2 filters

1. Create a new ActionScript 3.0 Flash file: File > New, select Flash File (ActionScript 3.0). In the Properties panel, set the frame rate of the Flash movie to 30 fps.

2. Import your image into your project: File > Import > Import to Stage and select the image from your local computer that you wish to use for the effect.

3. With the image selected on the stage, transform it into a symbol (press F8 or Modify > Convert to symbol). In the Convert to Symbol dialog box give your clip a name, set the type to Movie Clip and press OK.

4. [optional] If it isn't already selected, select the new movie clip on the stage and give it an instance name of "myClip". If you do not give it an instance name, FlashEff2 will automatically assign one to it in the form of "InstanceName_*", where "*" represents an index number (starting from 0).

5. Open the Components panel (Window > Components or Ctrl+F7 for Windows/Cmd+F7 for Mac OS) and from the FlashEff2 folder select the FlashEff2 and drag it over the image clip on the stage.

6. Open the FlashEff2 Panel (Window > Other panels > FlashEff2 Panel) and sign in to your JumpeyeComponents account. If you are already signed in, make sure that the FlashEff2 instance you placed on the stage is selected so that the panel will load the controls to make the settings.

7. In the FlashEff2 Panel select the Filters tab to start applying filters. You'll see that the Filter tab has three more tabs available: "Select 1st filter", "Select 2nd filter" and "Select 3rd filter". This is because the panel allows you to apply up to three filters on the same target object.

8. Select the first tab to apply one filter on the image. This will open the list of filter patterns

3

available.

9. From that list, select "WaterReflection" to apply the WaterReflection filter.

10. In the presets list that opens up (the Free FlashEff2 version has only one preset for each pattern) you can choose any pre‐configured preset that you like.

11. To further customize the filter, press on the "Edit settings" button (feature available only for the Premium Plus version), set the "reflectionAlpha" property to 1 and the "reflectionRatio" to 127.

12. If you test your clip now (Ctrl+Enter for Windows or Cmd+Enter for Mac OS) you'll see that your image will have a water reflection.

4. Create buttons and apply commands with FlashEff2

1. Create a new ActionScript 3.0 Flash file: File > New, select Flash File (ActionScript 3.0). In the Properties panel, set the frame rate of the Flash movie to 30 fps.

2. You can turn your images, shapes and text into buttons using FlashEff2.

3. To create a button from an image import your image into your project: File > Import > Import to Stage and select the image from your local computer that you wish to use for the effect.

4. With the image selected on the stage, transform it into a symbol (press F8 or Modify > Convert to symbol). In the Convert to Symbol dialog box give your clip a name, set the type to Movie Clip and press OK.

5. [optional] If it isn't already selected, select the new movie clip on the stage and give it an instance name of "myButton". If you do not give it an instance name, FlashEff2 will automatically assign one to it in the form of "InstanceName_*", where "*" represents an index number (starting from 0).

6. Open the FlashEff2 Panel (Window > Other panels > FlashEff2 Panel) and sign in to your JumpeyeComponents account. If you are already signed in, make sure that the FlashEff2 instance you placed on the stage is selected so that the panel will load the controls to make the settings.

7. In the FlashEff2 Panel select the Presets tab to open the list of button presets. If you have the FlashEff2 Premium version, you will be able to select from multiple pre‐configured presets, otherwise there will be only one available: the default preset.

8. To further customize the button states (up, over and down states) you can select the "Edit settings and states" button to bring up the settings for the three states of the button (this feature is available only for the FlashEff2 Premium Plus version).

9. To continue, open the Option tab and check the "useHandCursor" option so that hand cursor is displayed over the button.

4

10. Now, you can test the flash clip (Ctrl+Enter for Windows or Cmd+Enter for Mac OS) and the button will be working (it reacts to the mouse activities: roll over, roll out, press and release).

11. The final step is to apply some action to the button. You can either do it by using ActionScript code to listen to the button events and execute some actions on the appropriate one or simply by using FlashEff2 commands. With the FlashEff2 Panel opened, inside the Button tab, select the Command tab. Here you will be able to add a set of commands to your target object.

12. Click on the "Add" button and from the opening list select "FECNavigateToURL". This pattern opens a web page in your browser.

13. From the "evenType" list select "release" to set up the pattern to execute on the mouse release action over the target button. Leave the "browserTarget" property to open the web page in a new window ("_blank") and type the URL to the desired web page in the "url" text box.

14. Test the application by pressing Ctrl+Enter for Windows or Cmd+Enter for Mac OS and if you click on the button you have previously created, you'll see that now it also opens the target web page into your browser.

5. Create a looping animation with FlashEff2

The easiest way to create a looping animation with FlashEff2 is to create the timeline animation spanned across multiple frames as long as the FlashEff2 animation is playing. It is very similar to creating a symbol or text show and hide animation presented in the previous tutorials.

1. The simplest way to create a show and hide animation on the target object is to use a single FlashEff2 Component instance (for both, the show and the hide animations). Once you managed to create such an animation (please refer to tutorials 1 and 2) you need to make play again and again, in other words, to loop.

2. For this, you simply need to expand the animation to as many frames as necessary to play the entire animation.

3. First of all, we recommend that for such timeline animations, you start FlashEff2 from the second frame on, so that the FlashEff2 has enough time to initialize. If you followed the tutorials on how to create show/hide animations for images and texts, then from the timeline select the frame(s) containing the target object and the FlashEff2 Component instance and drag them to the second frame (you can otherwise create the show/hide animation directly on the second frame).

4. Next, you need to calculate how many frames should the animation play on the timeline. You need to know the frame rate of your Flash clip (at how many frames per second it is set to play) and the total time of your FlashEff2 animation.

The FlashEff2 animation contains a show animation that is set to play for an amount of time set in the Tween sub‐tab of the Show tab (tweenDuration parameter) which by default is 2 seconds. To that time you need to add the delay before the show animation starts, which is given by the delay

5

parameter in the Options sub‐tab of the Show tab. This one is usually 0 so the show animation starts as soon as the FlashEff2 Component instance is placed on the stage, over the target object.

Next, there is a pause between the show and hide animations which is set through the delay parameter in the Options sub‐tab of the Hide tab (this one is also 2 seconds by default) and finally the hide animation which also has a tweenDuration parameter (2 seconds by default). If you add up these four values you get the total amount of time that the FlashEff2 Component instance and the target object should be on the stage, in case of a timeline animation. In this particular example (all values are left as defaults) the total time would be 6 seconds: 0 seconds (delay for show) + 2 seconds (show animation) + 2 seconds (delay for hide) + 2 seconds (hide animations).

This value now has to be transformed into a number of frames. This can be achieved simply by multiplying the time in seconds with the frame rate of your clip. In this case 6 seconds * 30 fps = 180 frames. So the FlashEff2 instance and the image should span across 180 frames, from the second frame to the 181st frame.

5. So, on your timeline navigate to frame 181, select it and press F5 to expand the frames to 181. If your FlashEff2 and image are placed on two separate layers (like the attached example), than you need to do this operation for both frames.

6. If you test your clip now (Ctrl+Enter for Windows or Cmd+Enter for Mac OS) you'll see that the show/hide animation of your target object is looping. Once the hide animation has finished the playhead also reaches the end of the timeline and moves back to the first frame to play the contents again and again.

6. Timeline animations with FlashEff2

Timeline animations are made exactly the same as in the previous tutorial (Create a looping animation with FlashEff2). The attached example contains a show/hide animation on an image and two more show/hide animations on text. All the assets (FlashEff2 Component instances, the image and text fields) are placed on separate layers to easily access them later on.

Each set of animations starts from a different frame so that the animations are consecutive and even more, the two text effects have a cross fade‐like sequence: the show animation on the second text field starts at the same frame where the hide animation of the first text field is supposed to start. So the two animations (hide and show) are playing at the same time to simulate the cross fade‐like effect between them.

The animations stop at the very last frame because of the stop() command. If you would like them to loop continuously, simply remove the stop() command from the last frame.

6