Creating a Button Using FlashEff 2

In a previous post, I introduced the release of FlashEff 2 as an innovative Flash animation tool. In an attempt to prove my point, I am going to demonstrate how you can use FlashEff 2 to create a button using a MovieClip object.

OK, I know some of you might be thinking, a button? Well, creating a button in AS3 can be somewhat of a pain. After you get through creating your buttons, adding its functionality along with creating its appropriate event listeners; this process can get very old and tiring. Since FlashEff is here to simplify your workflow, why not let FlashEff handle your button’s functionality, animation and event listener creation.

Using Button Mode

In FlashEff 2, you can edit a button using its Button mode. This mode will allow you to assign your button some actions like following an URL, calling a function, or even going to a different frame whenever it gets clicked. All this without one single line of ActionScript. Here’s how!

Creating a Button Object

I am going to take a button graphic/design and create a MovieClip out of it. Once created, I will go into my Component Panel and drag a copy of the FlashEff2Button component onto my newly created MovieClip. One other great thing about FlashEff is that upon dragging a copy of its component onto the target object it will snap to the target’s 0,0 position.

FlashEff: Snap to Object

Now it is time to toy around with the FlashEff Panel.

Using the FlashEff Panel

The FlashEff Panel is where all of the magic happens. Here you can select any of the preset effects/animations that an object can have. Once you’ve added a preset, you can then preview an example of it via the live preview feature of the panel.  Take it for a test drive.

FlashEff Panel

Adding my Button Effect/Animation

In this example, I will select the “HappyTurn” preset. Now, if I wanted to I can modify the presets; allowing me to then save my own “custom” preset.  (Feature available only if you have the Premium Plus license) You can also adjust the tween type and speed for the up, over, and down button states. Just to keep things simple, I won’t be doing any of that.

FlashEff: Happyturn Preset

Adding Commands to the Button

FlashEff’s Button mode comes equipped with its assortment of commands that you can trigger upon press. They include adding a sound, calling a function, going to a keyframe, navigating to a URL, playing back a sound, and switching objects. Also, you can even stack these commands which will allow you to trigger a sound, call a function, and navigate to a URL on one press.

In this example, I will be adding a sound playback on press along with an event to navigate to a URL upon double clicking the button object. When attaching a sound you can identify that sound through a linkage ID or path.

FlashEff: Custom Commands

Overview

Below, you can find the final result of this mini demo.  Basically, the button, upon rollover, triggers the HappyTurn animation, then on press a click sound will trigger.  Now, if you double-click it will take you to the designated destination, Google’s homepage.  The custom possibilities are endless.  The more you use FlashEff the more situations you can picture yourself using the tool to simplify your project’s workflow.  To learn more on what FlashEff can accomplish, visit FlashEff.com.

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ useexpressinstall=”true” movie=”http://flashspeaksactionscript.com/files/flasheff2/create-button/buttonMode.swf” width=”500″ height=”340″ targetclass=”flashmovie”]Get Adobe Flash player

[/kml_flashembed]

FlashEff 2 Giveaway Opportunity

In the upcoming days, you are going to have the opportunity of winning 1 of 2 FlashEff 2 unlimited premium licenses.  Stay tuned…