You can download the source code here.

Step 1: Preparing the files

The purpose of loading external files is to update our content without having to modify our .fla file and generate a new swf file and upload it each time we decide to change the images or the information about them.

First we will create a folder inside the project’s folder and we will name it images. Inside this folder we will have all our images we want to load. It’s a good idea to have all the images with the same dimensions.

Second, we create an XML file. Using XML is one of the best ways for structuring external content in a logical format that is easy to understand, process, and update. We will name it data.xml. Any simple text editor can create our XML file. The structure of our XML is shown below.

Code block

<?xml version="1.0" encoding="utf-8"?>
<slide DELAY="2">
<image URL="images/1.jpg" DESCRIPTION="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " />
<image URL="images/2.jpg" DESCRIPTION="Nam blandit dictum nibh vel mattis" />
<image URL="images/3.jpg" DESCRIPTION="Cras a magna eu libero sodales luctus nec at nulla" />
<image URL="images/4.jpg" DESCRIPTION="Nulla sed nisi sit amet ante hendrerit ullamcorper id eu neque" />
<image URL="images/5.jpg" DESCRIPTION="Vivamus quis turpis libero." />
</slide>

Copy and paste then save the file.

Now we will create the .fla file.  Open the Flash IDE and go to File, New… and choose Flash File( actionscript 3 ). Press Ctrl+F3 to bring out the swf properties panel and set the values size to 450×370 px.

Save it in the same folder as your XML file and your images folder as BannerRotator.

Step 2: Load and process the XML file

Loading the data from our external xml file will require using the URLLoader and URLRequest classes, while processing it will require using the XML Class. First we will create the variables that we will be using in the entire program.

Code block

var _delay:int = 0;
var _total:int = 0;
var _images:XMLList = null;

Variable _delay will store the amount of data before the image changes to the next image. Variable _total will store the number of images. Variable _ images will store the data about our images.

Now we will prepare the program to load our external XML.

Code block

var _loader:URLLoader = new URLLoader();
_loader.load(new URLRequest("data.xml"));
_loader.addEventListener(Event.COMPLETE, Complete, false, 0, true);

We have declared a _loader variable that will handle the loading of our file. The COMPLETE event tells the program that our XML has been loaded in our variable and it’s ready to be processed.

Code block

function Complete(e:Event):void
{
var _xml:XML = new XML(e.target.data);
_loader = null;
_loader.removeEventListener(Event.COMPLETE, Complete);
}

All the information from our loader will be stored into the local variable _xml. As a good practice we should clear our _loader variable and remove it’s event listener.

Inside our Complete function we will add the following lines of code.

Code block

function Complete(e:Event):void
{
var _xml:XML = new XML(e.target.data);
_loader.removeEventListener(Event.COMPLETE, Complete);
_loader = null;
_delay = _xml.@DELAY;
_images = _xml.image;
_total= _images.length();
}

We will use the @ operator to retrieve the attribute value we need for the _delay variable.  Variable _images will store a list with every node with the image tag. The .length() method will retrieve the number of nodes with the name image tag. Now all our variables are set.

Step 3: Loading the external images

In order to load an image we will use the Loader class. Several instances of this class will be created with a loop and stored inside an array for easy referencing.

Code block

var _loaders:Array = new Array();
function LoadImages():void
{
for (var i:int = 0; i < _total; i++)
{
var _url:String = _images[i].@URL;
var _loader:Loader = new Loader();
_loader.load(new URLRequest(_url));
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, ImageLoaded, false, 0, true);
_loaders.push(_loader);
}
}

This loop will cycle through the XML file, extract the URL attribute of every image node,   pass it to a Loader instance and then push that instance into our array. To every Loader instance we attach an event listener that will fire a function once the image has been loaded.

Now we will create our function that will be fired with every image that has been loaded. But before that we will create a variable that it will check how many images have been loaded. Once we got all the images loaded we can start to slide the images.

Code block

var _counter:int = 0;
function ImageLoaded():void
{
_counter++;
if ( _counter ==  _total)
{
SetupSlider ();
}
}

Step 4: Setup the slider

First we’re going to declare some variables that we will need and import some extra classes.

Code block

import fl.transitions.Tween;
import fl.transitions.easing.Strong;
var _next:int = 0;
var _timer:Timer = null;
var _tween:Tween = null;
var _container:Sprite= new Sprite();

Tween class it will be responsible for our animation and Strong it will be our effect class. Variable _next will store the current image id in the array and it will help us to select the next one. In order to have our slides running, we will use the Timer class to have our code executed repeatedly. The _tween variable will be used to store our transition effect. The _container will store our actual image to be displayed.

Let’s modify our Complete function so we can add our _container to the dis.

Code block

Now we will create our SetupSlider function:
[codesyntax lang=“actionscript”]
function SetupSlider():void
{
addChild(_container);
NextImage();
_timer = new Timer(_delay*1000);
_timer.addEventListener(TimerEvent.TIMER, TimerListener);
_timer.start();
}

We will add our container to the diplay list of our swf so later we can add images. the NextImage function will display our first image from the array. Then a timer will count how long until the next image will appear. We are going to set the speed, which is stored in the _delay variable,  at which the Timer intervals are triggered when instantiating the class. The Timer receives its speed in milliseconds, so we have to multiply our speed value by 1000.  Our timer will run its code through a separate event listener. Finally, we need to start the Timer by using the .start() method.

Now let’s create our TimerListener function.

Code block

function TimerListener(e:TimerEvent):void
{
_next++;
if (_next == _total)
{
_next =0;
}
NextImage();
}

Inside this function we set our next image to be displayed. If _next variable will be equal to the total amount of images the _next variable will be reset to start all over.

Finally we got to the part where we build our NextImage function.

Code block

function NextImage():void
{
if(_container.numChildren>0)
{
_container.removeChildAt(0);
}
_loaders[_next].alpha = 0;
_container.addChildAt(_loaders[_next],0);
_tween = new Tween(_loaders[_next],"alpha",Strong.easeOut,0,1,1,true);
}

This function is responsible with displaying the current image set by the TimerListener function.  We check if there are any child objects inside our _container. If there is any we will remove it and clean our container then set the current image alpha to 0 ( making it invisible) so we can add a nice effect to it.  The Tween class will get this image and animate it’s alpha by making it appear slowly.

Now it’s time to hit Ctrl+Enter keys so we can test our movie. If everything is good with our code it should display some images that change after some time.

If everything is ok we should now add some info about the images that are being displayed. We will add a textfield that will contain the image description.

We will create a variable _text that will hold our data. Let’s modify our SetupSlider function by adding the following code.

Code block

var _text:TextField = new TextField();
function SetupSlider():void
{
addChild(_container);
_text.selectable=false;
_text.width = 450;
_text.height = 50;
_text.x = 0;
_text.y = 300;
addChild(_text);
NextImage();
_timer = new Timer(_delay*1000);
_timer.addEventListener(TimerEvent.TIMER, TimerListener);
_timer.start();
}

Then we modify our NextImage function to add the information of the image.

Code block

function NextImage():void
{
if(_container.numChildren>0)
{
_container.removeChildAt(0);
}
_loaders[_next].alpha = 0;
_container.addChildAt(_loaders[_next],0);
_tween = new Tween(_loaders[_next],"alpha",Strong.easeOut,0,1,1,true);
_text.text = _images[_next].@DESCRIPTION;
}

The last line will get the DESCRIPTION attribute of the current image being displayed and add it to our textfield.

Hit Ctrl+Enter key again to test our movie. Each time the image changes our text field will display the description of the current image being displayed.

Note: A working online version should include also a preloader for the images. If they are to big the user should know that an image is being loaded and the program is working correctly.

-----------------------------------------------

FireCode is a promising project created by a couple of passionate Flash developers. Our purpose is  to help you understand how Flash works and show you how to develop or customize your components. We hope you enjoyed this tutorial. Don’t forget to visit our portfolio here and to send us your questions or suggestions!

First we are going to work with Flash internal classes, and then we will move on to some popular open-source classes to see the differences between them. This will help you understand how things work and maybe choose what’s best for you.

To download the source files used for this tutorial, click here .

Setup scene

Create a new Flash File (for AS3). The dimensions of the stage should be about 550 x 400. Next we will draw three shapes on the stage, each one converted to a MovieClip with an instance name (look in the picture bellow).

Flash Transitions

First, we have to import the necessary classes.

Code block

import fl.transitions.Tween;
import fl.transitions.easing.*;

The first line is to import the Tween, the second one is to import the Easing classes (used for effects). The constructor of the Tween Class looks like this:

Tween(obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean = false)

And the actual code looks like this:

Code block

var _flashTransitions:Tween = new Tween(_flash, "x", Elastic.easeOut, 0, 300, 3, true);

It’s a good practice to declare a variable for the tween to have more control.
So far we have initialized our tween, the object parameter is the _flash MovieClip on the stage. We are changing its “x” propriety from its initial position ( 0 ) to the next finish position ( 300 ). Duration is used to set the speed of animation. For this animation we are using Elastic.easeOut easing effect. Another great thing is we can add events listeners to this animation. These are some of the events:
motionChange:  Indicates that the Tween has changed and the screen has been updated.
motionFinish:    Indicates that the Tween has reached the end and finished.

This is how they work:

Code block

import fl.transitions.TweenEvent;
_flashTransitions.addEventListener(TweenEvent.MOTION_CHANGE, MotionChange);
_flashTransitions.addEventListener(TweenEvent.MOTION_FINISH, MotionFinish);
function MotionFinish():void
{
trace("in motion");
}
function MotionChange():void
{
trace("finish");
}

First we’ve added the TweenEvent class, then the event listeners to our tween variable. Test the movie to check everything works as it should.
Caurina’s Tweener
Tweener syntax was created with simplicity of use in mind, while still allowing access to more advanced features. It follows a ‘one-line’ command when creating new tweenings, with no instancing required (as it’s a static Class). Also, there are no initialization methods required by Tweener, other than ‘import’ command.
Let’s see how it looks:
Tweener.addTween(_object:Object, {_parameters:Object});

And the code:

Code block

import caurina.transitions;
Tweener.addTween(_caurina, {x:300, time:3, transition:"easeOutElastic"});

Our object parameter is _caurina MovieClip. The “x” parameter is the ending point of our tween. Tweener takes the object start position automatically. Next is the speed of the animation and finally the effect we are going to use.
As you see, there is not much difference of what we’ve previously used. Now comes the cool part. Let’s add some events to this animation. All we have to do is add two more parameters.

onUpdate  equivalent to motionChange in Flash
onComplete equivalent yo motionFinish in FLash

We are going to change the tween code like this:

Code block

import caurina.transitions;
Tweener.addTween(_caurina, {x:300, time:3, transition:"easeOutElastic" onUpdate:CaurinaChange,  onComplete:CaurinaComplete});
function CaurinaChange():void
{
trace("caurina in motion");
}
function CaurinaComplete():void
{
trace("caurina finish");
}

That’s it ! You don’t have to import more classes and write another line of code. Pretty simple and clean.
If you test the movie, you will see the same results.
If you are using the Tweener you should know that it ads extra 8kb to your movie size. If you want to know more about Tweener you just have to take a look at the documentation of this package.
TweenMax / TweenLite
Basically,  Tweenmax and TweenLite are the same. The difference is that TweenMax adds more features to TweenLite. I will focus on TweenLite.
The constructor of the TweenLite looks like this:
TweenLite(target:Object, duration:Number, vars:Object);
And the code:

Code block

import com.greensock.TweenLite;
var _tweenLite:TweenLite = TweenLite.to(_tweenmaxlite,3, {x:300, ease:Elastic.easeOut});

Code block

import com.greensock.TweenLite;
var _tweenLite:TweenLite = TweenLite.to(_tweenmaxlite,3, {x:300, ease:Elastic.easeOut, onUpdate:TweenLiteUpdate, onComplete:TweenLiteComplete });

A project using TweenLite is going to have an extra 4.7kb added to its size.
Conclusion
If you run all three examples, you will see they all do the same thing. You can change almost every proprety of the object that we want to tween, from position to scaling or alpha. The main difference is that the last two examples are easy to write and clean. If you are going to make a project that doesn’t  need to many effects, it’s better to use TweenLite or Tweener ( it’s a matter of taste and size added to the resulting .swf ). For projects with elaborated effects I suggest using TweenMax as it has some nice extra features.
————————————
FireCode is a promising project created by a couple of passionate Flash developers. Our purpose is to help you understand how Flash works and show you how to develop or customize your components.
We hope you enjoyed this tutorial. Don’t forget to visit our portfolio here and to send us your questions or suggestions!

What makes FlashComponents.net a top-notch marketplace are the quality files that buyers find here. In order to keep this high-level, some Flash files that are submitted for approval may be rejected for certain reasons. But don’t get frustrated if your files have been rejected because our staff is here to help you. Unlike other marketplaces, our staff will not only review your files, but also make suggestions on what you can change or improve in order to get your components in the day light.

Taking into consideration the huge amount of files we receive daily for approval, here are the main reasons your file may have been rejected:

1.  The component is not really a Flash file

Sure, there are some objects moving around, but that doesn’t make it a Flash component. At least that’s not what we’re looking for in a file. When we say quality files, we mean mouthwatering design, unique features and, nevertheless, useful. And this is where the second reason appears.

2. The component is not useful

We don’t just approve files so we can fill in the categories in our website. We approve them because we really believe in them and in the fact that buyers will find them invaluable for their websites. When developing a Flash file, you must firstly consider for whom you’re developing it. Will anyone find it useful enough to buy it?

3. The component is better off free

It just doesn’t do you justice. If you already have a brilliant portfolio we’re all proud of, why lower your standards? Why not give it away for free to get more visitors to your author profile? In this case, our staff will give you a suggestion to make it free. You don’t have to accept it, but keep in mind that you can also make money by giving away free stuff.

4. The component’s price is too high

Unlike other marketplaces, you are free to choose the price you think your component is worth selling. On the other hand, don’t overestimate your file. To make sure you’ve got the right price, go through the other files from different developers on FC to make an idea of the right price. Moreover, be the critic of your own file. Do you have some unique features that other files from the same category don’t? Or is it just another “simple slider”?

5. The file’s sample has not been uploaded correctly

This happens very often. To avoid this unpleasant situation, make sure you read the instructions carefully before uploading the sample.

6. The sample contains commercial links

This is also a common reason we reject a file. There are a lot of authors that include links to other commercial websites or to their own commercial/non-commercial portfolio. This is not allowed on FC. If you want to exemplify the usage of a hyperlink, we recommend you include a link to your author page on FC. This is a simple and elegant solution that can also help you promote the other files from your portfolio. For further information regarding commercial links, please see our policy.

7. The file includes images, audio or video files you have no copyright over

In this case, there’s an easy solution. Just check out our Library where you can find some great resources for free image, audio and video files you can use in your commercial projects or samples in order to show the potential buyer how the file works.

8. The sample image is low-quality

Make sure the image you use for the file you’ve submitted is a quality one and that the main elements can be distinguished. Consider this when compressing the image.

9. The file is corrupted

There’s no need for further explanations. This is something you have to fix right away and then re-upload the file for approval.

10. The file doesn’t open with the specified version of Flash

Before uploading the file, make sure to review the source code a couple of times and make sure it opens with the version of Flash you specified in the description. This is a simple thing if you don’t want your file rejected and wait a few more days before it’s reviewed again.

11. There’s another file with the exact same name

Be creative when it comes to naming your file. Try avoiding the same all boring words such as: premium, simple, dynamic, basic, etc. Give it a cool name that differentiates it from other files.

12. The same file is being sold on another website by a different developer

“Borrowing” files from other websites and publishing them on FC is not allowed. Even if we don’t always discover this right away, our visitors or other authors will certainly do. That’s when your file is reported for copyright infringement and you will have to deal with an expensive punishment. Check out our copyright policy for more information.

There may also be other reasons I’ve missed, but be sure we will never reject a file without including a message explaining why it was rejected and what our staff believes you can do to improve it in order to get it out in the open on FlashComponents.net. Good luck!

You don’t have to have an idea from heaven in order to get featured on FC. On the other hand, being featured is no dumb luck. We appreciate a good file and we make sure it gets the deserved attention from potential customers. Since you’ve sent us a lot of e-mails asking how your file can get into the “What’s New” box, here’s a list of criteria we take into consideration when choosing to feature a Flash component.

Your file SHOULD:

1. Be a cool product

Firstly, we want to see original files or files with cool new features. Obviously, the file should also have a distinctive design and good user experience. Keep in mind that by including your file in the Featured box, we’re telling our visitors what they should definitely check out. We will avoid featuring a file that wastes their time, by drawing their attention to a file that isn’t usable or attractive. Therefore, you won’t be seeing just another “simple” banner rotator being featured any time soon.

2. Be different

Even though we choose file based on various criteria, you can always send us an e-mail and give us your pitch. Explain what makes your file special and why we should feature it.

3. Communicate the content with a truly unique layout

Consider developing a well structured file where the information is nicely presented and communicated. An unusual or fresh approach in which the content is presented can get you at the top of the waiting list. Take a risk, while having usability in mind at all times.

4. Have a unique feature

Apart from a top-notch design, your file should be able to stand out in the crowd by including an innovative feature and using cool techniques from which potential customer can benefit. If your file includes a new feature that no other file does, then you have a good chance of being featured.

5.  Boost of creativity

Nowadays, with so many Flash marketplaces out there, competition is huge. That’s why you really need to think outside the box and come up with an interesting and creative file that is bound to be noticed.  And when we say creative, we don’t just think about a “nice” design. We think: novelty, intuitive layout, usability and accessibility. These are just a few think you should consider when creating a new file.

6. Be Wanted

We have certain categories of file that are oversubscribed and that include tons of similar files, which makes it harder for your file to get noticed. That’s why we recommend that you find a niche and develop a component targeting a smaller category. For instance, instead of developing a general Flash website that can be used in about every domain out there, try a different approach. Develop a website that can be used exclusively to present a Spa, or a hotel, for instance. Do some research and figure out the trends and the domains that are flourishing today.

7. Be strategically released at the right time

Even if you might have not considered this until now, the time of the release of a new file is also important. The files or authors featured in our “What’s New” box change three times a week: Monday, Thursday and Friday. On the same page, most files are sold at the beginning of the week, meaning from Monday until Thursday. That’s why you should consider uploading your files one or two days sooner, so you have a better chance to be noticed. On the other hand, don’t rely on this because we sometimes receive a lot of file and verifying them might take longer than expected.

8. Be a Quality File

Even though we encourage  you to develop files often, we’ll never put quantity in front of quality. A good file has a better chance of being featured than one that has been developed in a rush and can have a lot of bugs. We recommend you focus more on the quality of the component you develop, rather than producing file after file. Create the best file you can and keep in mind that, whether you get featured or not, you will get sales firstly because of it’s quality.

9. Be developed in AS3

While AS2 files are still getting sold on FC, this isn’t going to last for a very long time. Consider learning AS3, if you haven’t already, and have a portfolio with more than 80% AS3 files. W e strongly believe you will benefit from this in the near future.

10. Be Part of a Discount Pack

We’re constantly searching to feature discount packs because everybody loves them. That’s why you can also consider using some of your existing files and including them in a promotional pack. It’s a great way to promote yourself and your files.

Your file does NOT have to:

1. Be too complex

Sometimes, this scares off clients because they believe that they don’t have enough knowledge to use the file and they they’ll have to pay extra in order to implement the file into their website.

Consider developing easy to use files or, at least, include a user guide that can help the client use the component without having to spend more.

2. Be BFF with the FC staff

While we enjoy communicating with all of you and make sure you know we like your new releases, you should keep in mind that we only feature files based on its quality and the above mentioned criteria.

You can style them however you see fit, by simply editing the XML file.

Check out  airesvsg’s portfolio for other premium Flash files.

If you want to build your own Flash News Reader, here are some resources you may find useful:

1) Build your own Flash RSS Reader [Tutorial: Flash ActionScript 3.0]

2) Flash: Reading XML

3) Create a RSS news ticker/reader

Communicating with (potential) customers is a must in every business, even though dealing with them is not always easy. But what you have to keep in mind is that not all are Clients From Hell. After all, they’re the ones putting the bread on your table. Most importantly, you are given the chance to do something you’re passionate about and create a Flash component for a client that is going to enjoy using it.

So here a few suggestions on how to improve your communication skills with regards to (potential) customers.

1. Don’t try to please everyone

“If you try and please everyone, you won’t please anyone.” -37signals.

This one is the golden rule. When developing a component, keep in mind who are the visitors on FlashComponents.net and what they are looking for. Also, if you’re specialized in developing Flash galleries or Flash templates, make an effort to improve your designs and features on that. Focus on what you do best and always bring new features to your files.

2. Encourage feedback

Let customers know that you’d appreciate a comment on your product page with an opinion or a suggestion regarding the file you released. This way you can figure out how much the visitors like/ dislike your file, and what features they would like added. It helps to discover what they like, for future reference.

3. Thank critics

Don’t be afraid of criticism. Be thankful for it and try to get the best of it. Always keep an open mind when it comes to a bad review of your file. Remember we’re all subjective and so are your customers. Some might like it, some might not.

Do your best to discover the reason why some don’t like it and take it into consideration when adding a new feature to your file or when developing a different component. Not all criticism is unfounded. You might even get some great ideas from these reviews.

4. Listen

A very important rule when dealing with clients is listening to what they have to say. Read carefully the information they are providing to you and the things they’d like done, for instance, customizations.

Never say “No”! Instead, if what the client is asking for seems crazy or impossible, try to provide alternatives and advices. They will appreciate you wanting to work it out. That’s in fact what you do: you provide solutions. Also, if you have questions you want to ask to clarify what the client needs, don’t hesitate. He will appreciate your interest to help him out.

5. Answer questions

Make sure you check your client messages everyday, whether they’re in your FC account, personal e-mail or social networks, such as Twitter or Facebook. Most of the clients have questions regarding how the file works, what they should do to change a button, a color, a background. Don’t take too long answering client messages and providing support because they also have deadlines and need fast assistance. Provide punctual and quality support and they’ll definitely appreciate it and return to you.

6. Put yourself into his shoes

Most of our customers are beginners, so you should do your best to understand their point of view. They might not know much and that’s, in fact, why they’re buying your file and paying you for it. When communicating with clients, speak his language. Avoid using jargon or technical language because you risk confusing the client after the first lines. Not only will you be wasting time, but he also won’t understand anything. If you are keen on using them, explain to the client what it means.

7. Mistakes are only human

If you’ve developed a file and it turns out it doesn’t work, it has bugs or other issues, don’t act innocent. Politely admit your screw up and fix it as soon as possible. Also, let your potential customers know that you’re working on that and when it will be fixed, so they can purchase it.

8. Prove you are a professional

Keep in mind at all times that customers are paying you for a service and you are expected to deliver it in a professional manner. That’s why you should:
- offer support in time;
- provide documentation for your files;
- respond politely to criticism;
- thank them for their feedback and suggestions;
- use proper English when communicating with a customer. If your English is not very good, use whatever translating tool you have.

All things considered, you will be a pleasure to work with. Now tell me, how well do you communicate with your (potential) customers?

1. Presentation

The first thing a visitor sees on the FC homepage is the preview image of your file. There are about 20 new released Flash components displayed on the homepage and a self explanatory image of your file can get his attention. People are extremely “visual”, so if your image says nothing about how the file looks like or what it can do, he might just not notice it. Use a clear image that reflects the main feature of your file and make it a good one. Take your time cropping and resizing, because this can convince the potential customer your file is worth checking out.

2. Let him play

If you’ve convinced him to check out your file, he’s going to want to see more. Provide a sample of the file on your component page and show him how it works. Give him the chance to play with the component and see what it can do for him.

3. Provide Documentation

On this same page, you should also fill in the technical details of the file, such as Flash Level, Documentation Level, but also a description of its features and suggestions of use. Basically, it should provide users with the help and documentation they’re looking for. Include a brief presentation of the component and suggest in the first paragraph how it can be used.

For example, if you’re selling an image gallery, can it also be used as a product showcase? Also, you should keep in mind that most of the visitors don’t have advanced knowledge of Flash as you do, otherwise they’d develop the file themselves. That’s why the description should not be too technical.

Use a simple, friendly, clear language so they can understand what they can do with the file. This is not the place to be big-headed by using technical language only you and other Flashers like you can understand. The visitor should be able to understand easily what the file can do for him, and not how smart you are.

4. Write with Keywords for SEO

Most people search for Flash components using Google, so using proper keywords are the first step to get them to check out your file. For instance, if you’ve developed a Flash Video Gallery, make sure to include these words in the name of the component. If you’re offering a Free file, include the word Free in the title of the component.

Let’s take Ngchenghow’s Flash XML 3D Carousel (AS3). He’s included all the keywords that describe its main features and it’s increasing his chances to appear in the first places in the search results. No wonder this file has 160 sales. Moreover, these keywords should also be included in the description of the file. On the other side, don’t include keywords that have nothing to do with your file or its features. It may attract visitors, but you’ll disappoint them because they’re not finding what they’re looking for and they’ll leave in a heart beat.

5. Set the Right Price

The price is also a big factor of decision. Don’t kid yourself that if your file is so awesome that they’ll be willing to pay whatever for it. Set a price taking into consideration the uniqueness and quality of the file, the time you’ve spent  developing it, but also the trends and the range of files on the market. If you’ve developed a file with no special features, don’t expect it to sell like hot bread if you’ve set a high price. If it’s an original file with unique features, you can use that to set a higher price.

On FlashComponents we have three licenses you can set different prices for – regular, commercial and special. If you don’t know what price to set, refer to other similar products with big sales and set a price taking into consideration the elements mentioned above.

6. Have a Brilliant Idea

Speaking of originality, people always want to buy unique files, that are different from others on the market. Don’t sell them the same old slideshow you developed with a tutorial. You can do better than that! Come up with original ideas and impress your customers. Also, develop constantly. Don’t just develop 2 files and take a 2 months holiday. To be at the top of the list, you should get out of your comfort zone and re-energize yourself. Start developing at least 1-2 new files a month and your visibility will increase. Users will notice you and, cha-ching, you get more sales.

7. Put Together Discount Packs

We all love discounts. f you lack creativity, there’s always an alternative. Put together 3-4-5 of you files in a package and watch the results. You’ll be surprised how many people buy Flash components in a bunch. This is a great way to sell files and to promote yourself.

8. Give Them the Chance to Create

When developing a file, keep in mind that people like to customize and personalize it to fit their space. Always consider the customer and his needs. Give instructions on how the file can be modified, from colors and text, to music and boxes. Give them the chance to be involved in the process and make your file “their” file.

9. Update Files Constantly

If you’re having trouble selling a file or the opposite, if the file is selling well, don’t just leave it as it is. Check out the comments from your component’s page posted by your (potential) customers and see what suggestion they have and what other features they’d like included to that file. Take it into consideration and work on that. You will attract new customers and the ones that have already purchased your file and that will benefit from the updates will think they’re getting their money’s worth and will definitely come back.

10. How about some Freebies?

You already know this one. There’s no better way to promote yourself then by giving away one of your files free or charge. You’ll get attention and your users will check out your other files to see the other goodies you’ve got to offer.You don’t really need to create a special file to give away. Use the files you already have in your portfolio, but that are not selling well or a file that is very cheap. This is bound to do the trick.

11. Hit the Flash Catwalk

What a better way to promote your files for free than our Flash Catwalk? Ask your customers for feedback and a link to the website where they used your file. Send us the information and you’ll get a spot in our newsletter, along with and exclusive article and all the promotion you can get.

12. Be the Expert

Show them that you know what you’re talking about and write a tutorial for one of your files. Write an accessible step-by-step tutorial so everybody can use it. At the end of the tutorial, include a link to your profile page to make sure they find out who you are and what you can do.

We experience these things with you guys, so we’re all learning together, side by side. That’s why we’d love to receive your comments on what it is that works for you and how you managed to promote your files on FC. Send us your insights at authors4fc@flashcomponents.net and we’ll be sure to include them in a future article. If you’ve got some great insights, you can even write your own piece with tips&tricks and we’ll publish it here. Join the club!

A personal portfolio page is all about promoting you and your skills as a Flash developer. Here is where you show potential customers what you can do and how good you are, so they purchase your files. Also, this is where you show visitors what you’re made of and use it to build your online presence. It is essential for you to have a good portfolio page if you want to get visitor’s attention and, even become a brand.

We’re going to show you how you can improve your presence on FC, build a credible image and, last but not least, get more sales.

1. Think big!

Think of yourself as a brand, even if you’re just starting off. Be creative with your name and logo. Don’t forget that, like on first dates, first impression matters. Like you choose a hairstylist because his hair looks fancy and well taken care of, this is how your visitors can choose you over other developers.

If you’re trying to promote yourself as a top-notch Flash developer, you should firstly choose a logo. You can even personalize it by including your own name. Make it attractive, yet simple and easy to remember. This will help you stand out and, also, develop a strong identity.

Check out these examples to get a clearer picture:

2. Use colors and design to create your brand

Colors are essential tools to building your identity, just as logos have the same role. This is a great way to brand yourself, by using a particular color for all the files you develop. Let visitors become familiar with your color and, after a while, they’ll become more familiar and connected to you. Here’s how easy these two authors on FC are building their visual identity:

3. Who are you?

Most of the visitors usually have a better look at your portfolio to find out who you are, where you’re from and see other samples of your work. This space is all about you and no one else. That’s why we strongly encourage you include a short presentation on yourself. This should be a short yet catchy paragraph in which you’ll have to summarize the main ideas that differentiate you from other developers. Be professional, yet personal, technical, if you need to, but clear. And remember, less is more, so don’t share your whole life.

Here’s a few things you could include:

* Who you are
* Why you chose to be a Flash developer
* When you started developing Flash files
* Share your professional background as a Flash developer
* What you specialize in: templates, galleries, etc
* Where you’re from
* If you’re available for freelance work.

Take a look at these examples:

This is no place to be shy or secretive. The more valuable information you include, the better your visitors will get to know you, form an opinion and trust you.

4. Organize!

Your portfolio page on FC is very important, as it’s actually a showcase of your entire work and developing skills. People will most probably want to see your other files to decide whether you’ve got potential or not. To give them a better glimpse of your work, include high-quality screenshots to present your files.

Also, include a short presentation for each file, emphasizing on its strongest features, the ones that differentiate it from the other files from the same category. Take your time while organizing this page as it will have impact on the visitor’s purchasing decision.

You don’t have to include all your files there. You can choose to include your best selling files or your best files from certain categories of Flash components, how this author did:

5. Provide contact options

This is also a very important thing you should keep in mind. Aside from the “Send private message” feature that your (potential) clients can use to contact you, you can also provide them with your e-mail address in case they’ve got questions or concerns regarding your files, or just want to hire you for a private project. Just include it at the end of your description.

6. Promote Yourself

We’ve got tons of visitors but with little time on their hands. If you’re not going to show them what you’re capable of, they’re not going to search for it. If you’ve got a non-commercial portfolio or a blog where you talk about Flash or anything related, don’t just keep it to yourself. Put it out there, along with the rest of your description. Not only will this help you promote yourself, but you’ll also gain visitor’s trust as a specialist in this area and show you really know what you’re doing. Use an appropriate message to link to it, like “Hire me”, “Check out my Portfolio”, “I’m also Here” etc.

7. Offer support on social networks

Social networks are the real deal these days. So, if you’re active on different social networks, invite people to follow you on Twitter, Facebook, LinkedIn or wherever it is that you’re hanging. Let them know you’re available to offer support whenever they need it and on whatever grounds they prefer. Let them know where they can find you, this way you can build their trust. Also, this is a great way for you to meet people, make connections and, nevertheless, expose your work.

We experience these things with you guys, so we’re all learning together, side by side. That’s why we’d love to receive your comments on what it is that works for you and how you managed to create your identity on FC. Send us your insights at authors4fc@flashcomponents.net and we’ll be sure to include them in a future article. If you’ve got some great insights, you can even write your own piece with tips&tricks and we’ll publish it here. Join the club!

You will also learn how to switch these instructions on and off. Assumed Knowledge: Tweening, use of Symbols, Layers and some Actionscript.

Step I: Set up the Main Stage

Example of a movie which plays in both directions.

1. Create a new movie.

2. Rename layer 1: Car

3. Set the size to 500 x130px in: Modify – Document

4. Create a new symbol by going to: Insert – New Symbol

5. For name: Car graphic

6. For behavior: Graphic

7. Click: OK

8. Draw a car (or type the word car!). Alternatively copy and paste some clip art from Word, into the symbol, which is what I did. Make sure your car is facing to the right >.

9. Go back to the main stage by clicking on the scene 1 button:

10. Open your Library: Window – Library
11. Drag your car on to the left hand side of the stage.
12. If it is too big/small resize it with the Free Transformation tool .
13. Right click (Mac – Ctrl Click) on frame 45 and select: Insert Keyframe
14. With your Arrow tool move the car, that is on frame 45, to the right hand side of the stage.
15. Right click somewhere between frame 1 and 45, select: Create Motion Tween

If you play your movie, the car should now drive from left to right. In test mode it will do this repeatedly, never going in reverse.

Step II: The Play Button

1. Click on the Insert new layer button .
2. Name the new layer: Play
3. Open the Common button Library: Window – Common Library – Buttons
4. In the Library, double click on the Playback folder to open it.
5. Drag the gel Right button, to the right side of the stage.
6. Close the Library.
7. Go to frame 45 in the Play layer and right click, Select: Remove frames

This should have removed that last frame of this layer. You do this because once the play head has reached frame 45, there are no more frames, therefore you cannot ‘Play’ forwards, because there is nowhere to go. Removing the frame removes the button.

Step III: The Back Button

1. Click on the Insert new layer button .
2. Name the new layer: Back
3. Go to frame 2 of this layer, right click, select: Insert Blank Keyframe
You place the back button in frame 2 for the same reason that you removed the last frame of the play layer, except the play head will be going in reverse. If the play head is on frame 1, you cannot go backwards.
4. Open the Common button Library: Window – Common Library – Buttons
5. In the Library, double click on the Playback folder to open it.
6. Drag the gel left button, to the left side of the stage.
7. Close the Library.

Your layers and stage will look similar to this, depending on what frame the red play head is in.

The play head above is in frame 2. You can see both buttons

If you are in frame 1, you should only be able to see the play button on the right.
If you are in frame 45, you should only be able to see the back button on the left, and the car will be on the left.

Step IV: Stopping the Auto Play

1. Save the movie.
2. Go to: Movie – Test Movie
3. The car should be going continuously from left to right, with the buttons momentarily disappearing.
4. Close the test window by clicking the second cross on the top right (maybe in a different place).
5. Right click on frame 1, layer Car, select: Actions
6. Select: – Actions – Movie Control – Stop
7. Do the same thing for frame: 45

The Controller Movie Clip

Up until now everything you have done is standard Flash construction. The problem with making a movie play in reverse is that there is no:

playReverse(); Do not use – does not work !

At least as far as I am aware there is no play in reverse command! I don’t no why not, it seems an obvious option. Macromedia, are you listening!

There is the following script:

This is all very well, but it only goes back one frame and stops. You would have to click the back button 44 times to get back to frame 1!

A Controller Movie Clip is the answer. That is a piece of actionscript that when you click the back button repeatedly says prevFrame(); prevFrame(); prevFrame(); etc. Until you get to frame one then the controller says nothing. In other words you need to be able to switch the instruction on and off. If you could not switch it on and off, when you hit the play button, one bit of script would be saying prevFrame(); and another would say play();. This would cause an obvious conflict.

The controller has to be able to be:

* Switched on
* Repeat an instruction innumerable times
* Switched off

To be able to do this, is absolutely crucial to Flash programming. Here we are going to get a movie to play backwards, but this same principle can be used in hundreds of different ways. At the end of this tutorial you will find links to sample files that use the same system of a controller movie clip to give instructions in a variety of different circumstances.

Step V: The Controller Movie Clip – Frame 1

You should not build a controller on the main stage because that limits your ability to switch it on and off.

1. Create a new symbol by going to: Insert – New Symbol
2. For name: Controller MC
3. For behavior: Movie Clip
4. Click: OK
5. Right click on frame 1 and select: Actions
6. Select: - Actions – Movie Control – Stop
This is the off position. The movie clip does not go to frame 2, there are no instructions. It is dormant.

Step VI: The Controller Movie Clip – Frame 2

1. Right click on frame 2 and select: Insert Blank Keyframe

Your time line should look like this.
2. Right click on frame 2 and select: Actions
3. Make sure the Actions panel is set to Normal.
You do this by clicking on the side menu button ( ). Select Normal.
4. Select: - Actions – Movie Control – Goto
5. In the options above select: Type > Previous Frame
This will place the following script:

prevFrame();

This is no good, as it will go to the previous frame of this movie clips time line rather than the main time line on the main stage.
6. Change the Actions panel to: Expert mode
Click on the side menu button ( ). Select Expert.
7. In front of the prevFrame(); type: _root. (The dot is not a full stop, you need to type it!)
Your script will look like this:

_root.prevFrame();

This will instruct the main stage the (root directory) to go back a frame. But it will only go back one frame!

Step VII: The Controller Movie Clip – Frame 3

1. Right click on frame 3 and select: Insert Blank Keyframe
2. Right click on frame 3 and select: Actions
3. Select: > Actions > Movie Control > gotoAndPlay
4. For the frame option type: 2
Your script should look like this:

gotoAndPlay(2);

Your time line should look like this.

The loop

In the above script gotoAndPlay(2); there is no _root. That means that the script will go to frame 2 of the current time line: The Controller movie clip

Which is what we want. So the playhead to goes back to frame 2, this will repeat the instruction on frame 2 (_root.prevFrame();). The play head in the main time line will go back one frame.

Our controller movie clip will continue to play to frame 3, as there is no instruction for it to stop.

In frame 3 of Controller, is an instruction to go and play frame 2 (gotoAndPlay(2);). The play head in the controllers time line will go and play frame 2.

This will repeat the instruction to move the playhead in the main time line back one frame.

The loop goes on indefinitely.In other words it will make the main timeline play continuously backwards.

Frame 1: Controller is switched off.
Frame 2: Instructs the main time line to go back one frame.
Frame 3: Instructs frame 2 to repeat it’s instructions.

Switching the loop off/on

There are a number of ways to switch a controller on and off. We will switch it on with the back button. To switch it off we will do two things. Use the play button and also remove it from the main time line in frame 1, which will zap it into nonexistence.

You can also switch controllers on and off with instructions in the main time.

Step VIII: Setting up the Controller on the Main Stage

1. Go back to the main stage by clicking on the scene 1 button:
2. Open your Library: Window – Library
3. Select frame 2, Back layer.
4. Drag your Controller MC onto the stage.
You can put it any place you like as it is invisible when you test the movie or view it in a web page. In Flash, an invisible Movie Clip looks like this:
If it is highlighted it will have a cross in the middle.

By placing the controller in frame 2, it does not exist in frame 1.

If the controller has been looping, and the main time line going backwards, when the main play head reaches frame 1 the controller does not exist. The loop will have stopped. If the viewer clicks on the play button, the play head on the main stage will go to frame 2 and play. The controller play head will be by default on frame 1. As there is a ’stop’ in that frame the loop does not play.
5. For the back button to instruct the controller to play, the controller must have a name. If the controller is not selected, click on it with the Arrow tool .
6. Open the Property panel: Window – Properties
7. Where it says Instance Name, type: control

The controller is now ready for action.

Step IX: Actionscript for the Back Button

1. Right click on the back button on the left.
2. Select: Actions
3. Set the Actions Panel to: Normal Mode
4. Select: - Actions – Movie Control – Goto
5. In the frame option above type: 2
Your script will look like this:

This of course refers to the main time line not the controller, we need to change this.
6. Set the Actions Panel to: Expert Mode
7. Type the target path:

Don’t be scared if it’s pretty long, as it includes every step in the book so you can understand better how to create the menu. Here we go!

Direction X or Y:
It is easy to change the code so that every thing moves from the top. All you need to do is swap the X values for Y values:

Menu come in from the top on the Y axis’s.

Step I: Setting up the Document

1. Open a New Flash Document: File – New (Ctrl N)
2. If the General Tab is not selected, select it: General Tab
3. Select Flash Document:
4. Click: OK

Note: You should now be able to see a new Flash document.

5. Go to: Modify – Document (Ctrl J)
6. Set the size to: 525 x 200 px
7. Select a: Background colour

I selected: 003366

My background Colour.

8. Click: OK

Step II: Creating the Menu Bar

1. In the Timeline rename Layer 1 to: Menu Bar

2. Using the rectangle tool on the left off the Stage draw a long: Rectangle
3. With the Text Tool type: Menu

4. I added a triangle to my Menu:

5. With the Free Transformation Tool : Rotate the Menu Bar

The rotated Menu Bar in the correct position.

6. In the Timeline right click (Mac: Ctrl click) on Frame 55 and select: Insert Frame

Note: These 55 frames are included so that the Menu Bar will be visible throughout the entire Movie. At this stage, the Movie has no content, but we will add content in the following steps. If your content exceeds 55 frames, you will need to return to this Layer and add additional frames to ensure that the Menu Bar is visible throughout the Movie.

Step III: Creating the Graphics

1. To avoid errors lock the Menu Bar Layer:
2. Click on the Insert Layer button:
3. Rename the new Layer to: Graphics
4. Place any graphics or text that you may want:

My Graphics Layer looks like this.

5. In Frame 10 of the Graphics Layer, right click and select: Insert Blank KeyFrame

Your Layers should look like this.

Note: This new Keyframe will contain the content of Menu item one. The new Keyframe does not need to be in Frame 10 but could be on the next unused Frame, which is Frame 2. I have selected to use Frame 10 so that Button 1 will match Frame 10 and Button 2 will match Frame 20 etc. An alterative would be to use Frame Labels (which I do not cover in this tutorial).

6. In Frame 10 place any graphics or text that you want to be visible when the first Button is clicked:

My Graphics Layer looks like this. I painted the word using the Brush Tool.

7. Repeat five times what you have just done with different graphics for frame 20, frame 30, frame 40 & frame 50.

My Graphics Layer and Timeline Keyframes.

8. To avoid errors lock the Graphics Layer:

Step IV: Creating the Buttons

1. Go to: Insert – New Symbol (Ctrl F8)
2. Name it: Button 1
3. For Type select: Button

4. Click: OK

5. Draw a small: Rectangle
6. Type a label on it such as: Button 1

My Button.

Note: Make sure your text and your rectangle are different colours!!

7. Repeat what you have done to create: Button 2 through to Button 6

Note: My last button returns the user back to the starting point so I have typed Home as the Label.

My six buttons.

8. When you have finished your Buttons go back to the Main Stage by clicking on the Tab:

Note: Do not place your buttons on the Main Stage. If you have delete them (don’t worry they still in the Library).

Step V: Adding the Menu

1. Go to: Insert – New Symbol (Ctrl F8)
2. Name the Symbol: Menu 1 MC
3. The Type should be: Movie Clip

4. Click: OK

5. Open your Library: Window – Library (F11)
6. Drag Button 1 into the new Symbol: Menu 1 MC


My Menu 1 MC with the Button nested inside the Movie Clip.

7. Repeat what you have done to create:

Note: All your symbols are still in the Library, none of them have yet been placed on the Main Stage.

*All the Symbols in the Library.

Step VI: Placing the Menu

1. When you have finished go back to the Main Stage by clicking on the Tab:
2. If your Graphics Layer is not locked, lock it:
3. Click on the Insert Layer button:
4. Rename the new Layer to: Buttons
5. If your Library is closed, open it: Window – Library (F11)
6. Drag from the Library on to the Stage all your: Movie Clips (Not the Buttons)
7. Position the Movie Clips to the Left and just: Off Stage
8. You may want to use your Align Panel to get them in a straight line and spaced evenly: Window – Align (Ctrl K)

The Movie Clips are on the left and are just off stage.

9. If the Property Inspector is closed, open it: Window – Properties (Ctrl F3)
10. Select the first Movie Clip and give it an Instance Name of: MC1

Note: Do not type a space between the MC and the 1. It must be one word: MC1

The Instance Name for:MC1

11. Give as Instance Name the next Movie Clip: MC2
12. Give Instance Names to the rest of the buttons: MC3 etc.

13. You may need to re-arrange the order of the Layers. They should look like this:

The Layer Order has been changed.

Note: The Menu Bar needs to cover the Buttons which is why it is the top Layer. The Buttons should swing onto the Stage over the Graphics.

Step VII: ActionScript for the Timeline

The following Actionscript will make the first button move. There is additional code that makes the other buttons follow the first button, a bit like follow the leader.

1. To avoid errors lock the Buttons Layer:
2. Click on the Insert Layer button:
3. Rename the new Layer to: Actions
4. Place the following ActionScript on Frame 1 in the: Actions Layer

// stops the movie on frame 1
stop();

// sets the x position for the menu to stop and go back to. You may need to adjust these two settings
var goto = 30;
var backto = -80;

// declares a variable called go which will be used to help create the movement

var go = 0;

// sets the speed – don’t set it too slow

setInterval(mousePosition, 5);

// this function is called by the word ‘mousePosition’ in the setInterval above