We will animate some text using Creative TextFX and, following, we will animate a movie clip using Creative MovieFX. The result will be a nice animation in the Halloween spirit.

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

Read the tutorial here.

Requirements

• Flash CS3 or CS4
• Creative Flash Scroller AS3 (you can download a free trial)

To make it work, you just need a bit of AS3 code. Here is the tutorial to guide you through.

Issue: previewing Flash in a local browser (MAC or Windows) security warning

The good news is that the Extend Studio products have a warning system built in that throws a quite explicit error message if you don’t have the necessary Flash Player local settings. On both MAC or Windows the  warning message in your browser looks like in the picture below.

Solution

To make the correct Flash Local settings to locally test your Flash in a webpage, follow the link in the browser, and follow the steps:

• In the Adobe Flash Player Settings Manager, select global security settings, select  Always Allow.

• In the “Always trust files in these locations” go to edit locations -> add locations->browse for  folder.

• Select the folder where you have the files, or simply select the hole drive where the files are stored, in my case I`ve selected the hole drive C:\ on windows, and on mac I`ve selected the root “ / ” . On mac it should look like in the picture below.

• On windows, it should look like this:

• After that  go to your page and refresh it, it should work like the picture below.

That’s all! If you have any other questions, you can always send an e-mail at : support@extendstudio.com

This is my first post on the Extend Studio blog as I didn’t have the chance to write until now. I will try to do this more often from now on. I plan to make all my posts helpful and fun. I will post tutorials, links to interesting websites and best practices as well as a more inside look of the Extend Studio company.

We created many tutorials for our products until now and we will continue to increase our tutorial library with new additions each week. But we don’t want to stop and create tutorials for our extensions. We want to be as helpful as we can and we will begin to post various how-to-make tutorials about issues that we noticed that our customers need help with. Also, we are open for tutorial ideas and requests. You can either post them here or our forum and we will take your request into consideration.

While building this tutorial I got the idea that an easy to use pre-build preloader might be helpful if you don’t want or don’t have time to build one yourself. I’ve created a little preloader class that can be used to load your swf’s with. There are some movieclips already built that you can just drag and drop on the stage and then insert the path to your swf and the preloader class will handle the rest. If you want more details about this preloader, download its package from here. You will find a usage manual inside the package. Now, back to the tutorial.

In this tutorial I will teach you how to make a Flash preloader using Actionscript 3. The idea is that we will create a very small swf that we will use to load your main swf file using the Actionscript 3 Loader class. Because the preloader will be a very small swf, you don’t have to worry that it will take much time until the preloader itself is downloaded.

Drawing the preloader symbol

We will start the creation of our preloader with the graphical part, the preloader symbol. We will keep it simple, our preloader will be just a rectangle that will fill up as the download progresses.

• First create a new FLA AS 3 file and save it as “preloader.fla”.
• Select the rectangle tool and draw a rectangle on the stage.
• Double click on the rectangle and then press F8 on your keyboard. This will open the “Convert to symbol” panel. Give it any name you want (e.g. “preloader_mc”) and click on the ok button.



• Edit the symbol by double clicking it. Once inside symbol editing mode you need to click on frame 100 from the timeline and insert a new keyframe there by pressing F6.



• Go back to frame 1 of the timeline and select the only the fill of the rectangle. From the properties panel, give it a width of 1.



• With frame 1 still selected press F9 on your keyboard. This will open up the actions panel. Insert the code “stop();”
• Right click on one of the frames between 1 and 100 and click on “Create Shape Tween”



• This is how the timeline of your preloader symbol should look after all these steps.

Writing the script

Now that we have our preloader symbol ready let’s get back to the main stage and write some Actionscript. Now that we have our preloader symbol ready let’s get back to the main stage and write some Actionscript. Don’t worry if you’re not very familiarized with Actionscript writing, it’s a very small and simple code.

• First of all, select the symbol you’ve just created on the stage and give it an instance name, for example: “preloader”;
• Now select frame 1 and press F9 again to open the script panel;
• First of all, we will create the loader object that will load the main swf movie. To do that write:
  var loader : Loader = new Loader();
• Add event listeners to this object that will tell you the progress of the loading progress and when it finishes
  loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
• Tell the loader instance to load your swf
  loader.load(new URLRequest(path_to_your_swf_file));
• All that remains to do now is to set the functions that are called on each event:
  • “progressHandler”: this function will be executed every time new bytes are downloaded until it finishes the entire movie. We will use this function to calculate the percentage loaded and increase the frame of the preloader movieclip.
    function progressHandler(e:ProgressEvent) { var percent : Number = Math.round(e.bytesLoaded*100/e.bytesTotal); preloader.gotoAndStop(percent); }
  • “completeHandler”: this function will be executed only when the movie has fully loaded. Now we can add that movie to the stage and remove the preloader.
    function completeHandler(e:Event) { this.addChild(loader); this.removeChild(preloader);}

You can now test the movie but don’t forget to create the loaded swf first. You’ll have to click on “View” and “Simulate download” when you export the swf locally or else the preloader won’t appear as the loading time is very small.

Thank you for following this tutorial.

There will be more to come, so stay around.

Regards,

Andrei Rinciog, Extend Studio

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

This tutorial was made using:

Creative Flash Scroller

Creative Flash Scroller is a multipurpose Flash 8, Flash CS3 and Flash CS4 scroller that can scroll anything, can be placed anywhere in your Flash project, can be customized to suit your design and can be reused at any time. It comes with 3 components: Creative Classic Scroller (classic scroller with adjacent scrollbars), Creative Scroll Area (scroll area with no scrollbars), and Creative Scrollbar. Find out more!

1. Firstly, let’s open Flash and create a new file. (For CS3 users: in order to set-up the frame rate and name your file, right-click the stage and select “Document properties”)

Create file

2. Use the Text Tool to create three messages on the screen: „Click on the buttons to navigate”, „Scroll left” and „Scroll right”; don’t forget to use bold Static text. Follow the directions from the next image.

Stage view

3. Select the blue texts one after the other and convert them to buttons by pressing F8. Name the one on the left – „Left” and the one on the right – „Right”.

Convert text to buttons

4. Let’s edit the buttons a little. Double-click button “Left”; as you enter symbol-editing mode, let’s configure the button a little. Leave its “Up” state as it is, and Copy+Paste the keyframe in the “Over” state; select the text and disable its “Bold” attribute. Extend the keyframe for all the states by inserting a frame in the “Hit” state. Do the same for the “Right” button.

5.Open the Components and Component Inspector panels.

Open the Components and Component Inspector panels

6. Drag an instance of Scroll Area on the stage; let’s configure its size and position properties as in the following image. Name the instance of the Scroll Area “myScroller”.

myScroller's size and position properties

7. Let’s add the movie clip we will use as our slide-show; you can find it in the attached “.fla” file’s library under the name of “slideshow”. Copy it in the library of your own file. Your library should look like this at this moment:

Library view

8. The next step is to connect the Scroll Area to the movie clip; as we’re going to use the movie clip directly from the library, we have to export it for ActionScript. Right-click “slideshow” and select Linkage; tick the “Export for ActionScript” check-box.

Export for ActionScript

9. Let’s configure the Scroll Area now; select it and open the Component Inspector panel. In the General tab, make the following changes: select “Library item” as Target Type and insert “slideshow” for Target. Disable the Mouse Wheel Scrolling, but leave the visual effects enabled.

Configure the General tab

10. Because we would like to create a slide-show, we will disable the mouse scrolling fully and scroll only by using the two buttons. Select “Scrollbar only” as behavior.

Configure the Behavior tab

11. In the Borders tab we will modify the Scroll Area’s appearance as in the following screen-shot:

Configure the Borders tab

11. Let’s configure the buttons that will control our slide-show. Select the ”Left” button and write the following code in the Actions panel:

on (release) {
	_root.myScroller.stepScroll("Left",82);
}

12. Do the same for the “Right” button, only now the code will be this:

on (release) {
	_root.myScroller.stepScroll("Right",82);
}

What we did above is just scroll right or left with the specified amounts of points.

13. Preview your file.

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.

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

This tutorial was made using:

Creative Flash Scroller

Creative Flash Scroller is a multipurpose Flash 8, Flash CS3 and Flash CS4 scroller that can scroll anything, can be placed anywhere in your Flash project, can be customized to suit your design and can be reused at any time. It comes with 3 components: Creative Classic Scroller (classic scroller with adjacent scrollbars), Creative Scroll Area (scroll area with no scrollbars), and Creative Scrollbar. Find out more!

1. Let’s start by opening Flash and creating a new file. (For CS3 users: in order to set-up the frame rate and name your file, right-click the stage and select “Document properties”)

Create file

2. The next step is to import to stage the file “CFLS-BOX.png” (you can find it in the attached package).

Import to stage

3. Select the Text tool and insert some text on the stage. You can find as well the text to insert in the attached package under the name “text.txt” (Copy+Paste it in your text box). Make the text field 450 pixels wide. In the next image you can see how the ensemble of elements should look like.

Ensemble for symbol creation

4. Select both the image and the static text and convert them into a movieclip and name it “Layout” (you can do that by pressing F8 while both of them are selected).

Convert to symbol

5. Open the Components and the Component Inspector panels.

Open the Components and the Component

Inspector panels

5. From the Components panel, drag an instance of Classic Scroller on the stage. Modify its properties in the following way:

Modify the scroller properties

6. In the component interface, leave its properties default for now except for choosing “Theme 1” as a skin. Save your file and preview it by pressing CTRL+Enter; it should look like this:

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

14. Press CTRL+Enter to preview your file.

Preview your file

This tutorial was made using:

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

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 simple In effect”, set its dimensions to 400×200 pixels and the background color to white (#FFFFFF). Set the frame rate to 35 fps.

Create and configure a new Flash file

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

3. In the Text tab, the target text field, insert the text “Sample text on two (ENTER) different lines”; select the font face Arial, size 26, and color black (000000) – 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.

Insert and configure the target text

4. In the Properties window, set the position of the component on the stage at X= 80.0, Y= 130.0 coordinates.

Configure the positioning coordinates

5. From the Time Manager, enable the In and Delay elements, but leave the Wait and Out elements disabled; also, make sure the Loop option is disabled. Set the delay time to 10 frames.

Configure the Time Manager

6. From the In Effect tab, select as the effect to use Helicopter and its preset Extend_settle. Let’s configure the effect to last 70 frames; make sure that the Load Preset Duration is unchecked. Also, let’s change the easing function to Regular and the easing type to easeIn; as you can see, Creative TextFX is very customizable as with the change of a single parameter (Easing Function), you can obtain 5 different appearances of the same effect. Leave the effect parameters with their initial configuration.

Configure the In Effect element

7. Press CTRL+Enter to preview your file.

This tutorial was made using:

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.