Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

Tutorial: create an animated Flash Button using Creative TextFX

In this tutorial we will start from a shape in Flash – a simple rectangle – and, by using Creative TextFX we will transform it into a button with just a few simple options.

Firstly I just want to remind you that, in order to be able to solve the tutorial, you will need the Creative TextFX extension installed on your computer; if you encounter any problems while doing that, please visit the “How to install an extension” tutorial.

Click here to download the source file and the required files for solving this tutorial.

1. Let’s start by opening Flash and creating a new Flash file – ActionScript 3.0. Right click on the stage to open the Document Properties window. Name the file “How to create a button using Creative TextFX”, set its dimensions to 380×100 pixels and the background color to white (#FFFFFF). Set the frame rate to 35 fps.

Create and configure a new Flash file

Create and configure a new Flash file

2. Extract the attached archive in the folder of your choice; open the “How to create a button using Creative TextFX.fla” file and from the library of this file (open the Library panel using CTRL+L), copy the “button” movie clip to the library of your file.

Copy the "button" movie clip

Copy the "button" movie clip

3. Drag the “button” movie clip on the stage, at coordinates X=14, Y=11 – centered with respect to the stage.

Drag the "button" movie clip on the stage

Drag the "button" movie clip on the stage

4. From the Components panel (CTRL+F7), drag an instance of Creative TextFX on the stage; following, open the component’s configuration interface from the top menu: Window>Other Panels>TextFX Panel.

Drag a Creative TextFX instance on the stage

Drag a Creative TextFX instance on the stage

5. In the Text tab, the target text field, insert the text “Click HERE”; select the font face Arial, size 36, and color white (FFFFFF) and bolded – make sure the text is selected so that the changes will take effect. Press Embed Fonts to embed the used text into the file’s library. In order to see your target text in the component interface, please select Background color black (000000).

Insert and configure the target text

Insert and configure the target text

6. In the Properties window, set the position of the component on the stage at X= 134.0, Y= 27.0 coordinates.

Configure the positioning coordinates

Configure the positioning coordinates

7. From the Time Manager, enable the Wait effect element, but leave the Delay, the In and Out effect elements disabled; also, make sure the Loop option is disabled.

Configure the Time Manager

Configure the Time Manager

8. From the Wait Effect tab, select the None Effect Name; the duration of the Wait Effect element is not important as long as it’s positive (greater than 0).

Configure the Wait Effect element

Configure the Wait Effect element

9. From the Actions tab, the Rollover Effect section, select the Fade effect, set its duration to 35 frames, easing function Regular and type easeOut; make sure the Load Preset Duration is disabled.

Select the Rollover Effect

Select the Rollover Effect

10. From the Rollover Effect Properties section, set the fade parameter to 50%.

Configure the Rollover Effect parameters

Configure the Rollover Effect parameters

11. Let’s pass to the event-triggered actions section of the Actions tab. Let’s deal with the sound first; using the Flash top menu – File>Import>Import to Stage, import the sound file you found in the archive to your Flash file. In the Library of the file, right-click the sound file and select Linkage; enable the Export for ActionScript option and set the linkage identifier to something simple, such as “Sound”.

Configure the Linkage options

Configure the Linkage options

12. In the Creative TextFX interface, the Actions tab, the Event-triggered actions section, select option addSound. Set the Event Type to press, Sound Library ID to “Sound” (the linkage identifier we previously set) and the Duration to 5.

Configure the addSound option

Configure the addSound option

13. In the same place in the component interface, add the addURL action; set the Event Type to press, the target to “_blank” and the URL to “http://www.extendstudio.com”.

Configure the addURL option

Configure the addURL option

14. Press CTRL+Enter to preview your file.

Preview your file

Preview your file

This tutorial was made using:

Creative TextFX v2

Creative TextFX v2 Creative DW Image Show PRO v2 is a Dreamweaver extension that enables you to create remarkable eye-catching Flash banners with Image and text effects, Flash slideshows and any other multimedia presentations in Dreamweaver without the need for Flash.

Find out more or buy now!

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com

Facebook comments:



Leave a Reply