How to create a 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 380x100 pixels and the background color to white (#FFFFFF). Set the frame rate to 35 fps.

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.

3. Drag the “button” movie clip on the stage, at coordinates X=14, Y=11 – centered with respect to 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.

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).

6. In the Properties window, set the position of the component on the stage at X= 134.0, Y= 27.0 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.

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).

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.

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

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”.

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.

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”.

14. Press CTRL+Enter to preview your file.

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. If you have any questions or suggestions please contact me at jon.stanciu@extendstudio.com.