Start by creating a new ActionScript 3.0 document in Flash. You can find the UI components in the components window. Press ctrl+F7 to open the components window and drag some radio buttons and checkboxes to stage.

I have dragged 3 of each to stage.

At this point these are pretty generic components but you can see that they are visually perfect, the only visual details that need to be changed are the text. If you press ctrl+ENTER to test the movie at this time you can click on these and see that they really work.

Now lets change some of the settings of these components. Select any of the components and head over to the “Component Parameters” section in the properties window. You can see some properties listed here. The properties are pretty much self-explanatory but I will explain them just in case. Lets go to the radio button’s property first.

The first thing here is the “enabled” checkbox. This would enable or disable the radio button to be selected. Group name sets the group that the radio button belongs to. A user can select one option from one set of radio buttons. The selected option specifies whether the button is initially selected or not. The value field sets a value that the radio button contains. So if a user selects this radio button then we can retrieve its value with ActionScript. At last the visible property selects whether the button is visible to the user or not. This property has some pretty limited applications.

If you head over to the checkbox component parameters you can see that all the properties are same except the label placement. This property selects the placement of label relative to the checkbox. Also note that there is not group name here. That is because there are no groups in checkboxes and each checkbox is independent.

I have labeled all the checkboxes and radio buttons with some names of foods. Now we examine the code that we need to process these components. For the code to work with these components, they need to have some variable names. I have given these the names of radio1_mc,radio2_mc,radio3_mc,check1_mc,check2_mc & check3_mc. I have also created a button that would be used to submit these values and I have named it submit_btn.

Now create a new layer for actionscript and insert the following code in it.

submit_btn.addEventListener(MouseEvent.CLICK,processButtons);

function processButtons(e:MouseEvent){

if(radio1_mc.selected){

trace(“Radio button 1 is selected”);

}

if(radio2_mc.selected){

trace(“Radio button 2 is selected”);

}

if(radio3_mc.selected){

trace(“Radio button 3 is selected”);

}

if(check1_mc.selected){

trace(“Checkbox 1 is selected”);

}

if(check2_mc.selected){

trace(“Checkbox 2 is selected”);

}

if(check3_mc.selected){

trace(“Checkbox 3 is selected”);

}

}

The code is pretty simple but let me explain it to you. First I add and event listener that handles the clicks on the submit button. In the event handler I check the “selected” property of  all the radio buttons and checkboxes. If that is true then it means the radio button or checkbox  is selected and so I trace on to the output that the radio button/checkbox is selected.

I hope you have learned how to use these UI components. Use these components to make your applications user friendly and save precious development time.

By the way, don’t forget to check out Wix, an awesome free Flash website builder.

Before I begin, if you want a very easy way out of this tutorial, check out  free website builder from Wix, which lets you create a professional Flash website for free.

Start off by making a new ActionScript 3.0 document in Flash. Press ctrl+J and set the stage size to the size of your choice, I am giving it the size of 1024*600.Now we need to create the buttons. I will make just a simple rectangular button. But you can make a button as complicated as you want.

You can see in the screenshot below that I have placed three instances of my button on stage and I have put text on all three. I have also given the buttons instance names of home_btn , about_btn and contact_btn so that we can use the buttons in the actionscript.

Now it’s time to make the content of the webpage. The content of this page would actually be one long stip so that whenever we click on any of the buttons, the strip can be move to left or right to bring that content in the screen window. So I will just make a new movieclip with the content corresponding to the three buttons. Again I will not make anything fancy, just some simple text for each page. Remember that we will make our movieclip of the width 1024×3, since the width of each window is 1024 and there will be three windows. As for the height you can make it according to your will. You can see in the screenshot below that I have placed the movieclip with all the content the stage. I have also divided the buttons and content into layers so that the fla file is more manageable. I have also named the content movieclip as content_mc so that we can use it in the ActionScript 3.0

Now its time for the code part. Create a new layer to put the ActionScript and add the following code in it.

import fl.transitions.Tween;

import fl.transitions.easing.*;

home_btn.addEventListener(MouseEvent.CLICK,panContent);

about_btn.addEventListener(MouseEvent.CLICK,panContent);

contact_btn.addEventListener(MouseEvent.CLICK,panContent);

function panContent(evt:MouseEvent){

var buttonName:String = evt.target.name;

switch(buttonName){

case “home_btn”:

new Tween(content_mc,”x”,Strong.easeOut,content_mc.x,0,1,true);

break;

case “about_btn”:

new Tween(content_mc,”x”,Strong.easeOut,content_mc.x,-1024,1,true);

break;

case “contact_btn”:

new Tween(content_mc,”x”,Strong.easeOut,content_mc.x,-2048,1,true);

break;

}

}

Let me explain the code to you now. The first two lines import the Tween and Easing classes so we can Tween our movieclip with the help of actionscript. In the next three lines we are adding event listeners for click events on our buttons. Whenever a user clicks on any of the buttons, the panContent function would be dispatched. In the panContent function, the first line is strong the name of the button that called the event in the variable buttonName. The next code block is a switch statement on the buttonName variable. So, for each button the switch would perform a different function. For each case in the switch we are using

new Tween(movie clip name, attribute of movieclip to be tweened, the easing function,starting point, ending point,time, is time in seconds?);

For movie clip name, we always put content_mc because that is the clip we want to tween, for attribute we put “x” because we want to tween x position of content_mc, the easing function Strong.easeOut makes the tween go from fast to slow from start to end of the tween, for starting point of tween we always enter the current position of the movieclip, for ending point we set the negative of the x value for the specific content. E.g. The “About” content starts from x=1024 so we set the tween to go to -1024.If content_mc is placed at -1024 then the 1024 would be just at the start of the screen hence putting About section in view. For the time parameter, I put 1 and for the last parameter I put true which means that the time parameter is in seconds.

Now in order to publish this page in HTML, we have to set the publish settings for HTML. We want our content to be in the center of the screen so we choose the following settings.

If you publish the flash now and run the html then you might see everything to be fine, but if you have a screen size of width greater than 1024 then you would see extra bits of the content movieclip as in the screenshot below.

But the fix for this is really easy, you just need to apply a mask over the entire stage on the content layer.

Now if you publish and run the html, everything would be perfect. You can use this method to create interesting webpages very fast. You can innovate in this method to your will to make it even more attractive.

Click here to see the panning web page in action.

Found this tutorial way too hard? Check out  free website builder from Wix, which lets you quickly create a professional Flash website for free without doing any coding.

Start by creating a new document in flash. First of all we will make the object which we need to move. I am making a simple circle. The object needs to be a movieClip otherwise it would not work with the guide layer.

Now make a new layer and draw a line on it, this line is the path that the ball will follow. I have drawn a wavy line with a green color. The color is not important here because it would not be visible in the output.

Now right click on the layer with the path and select the guide option from the context menu. This will transform the layer into a guide layer.

You will know that it has successfully transformed when you see the icon of the layer change.

But the ball is not bound to the guide yet, to do that drag the ball layer with your mouse and move place it on the lower side of the guide layer. When the ball layer becomes a part of the guide you will see it like the image below.

To make the ball move with the line, the ball needs to be on the line first, drag the ball on the line such the circle showing the center of the ball is on the line.

Now press F6 on any other frame in the ball layer to insert a new frame there. Press  F5 on the same frame in the guide layer to extend the guide layer upto that frame. Now in this frame change the position of the ball but you have to make sure that the center of the ball is still touching the line.

At last right click on the middle of ball layer and choose classic tween to tween the ball. Press Ctrl+ENTER to test the movie and you will see the ball move along the line of the guide layer.

You can use this method to dramatically decrease the time of making an animation. I hope this helps you become a better animator.

Found this Flash Guide Layer tutorial too hard? Don’t worry, you have an easy way out. Check out Wix, an awesome free Flash website builder.

Start by creating a new ActionScript 3.0 document in Flash and keeping it the standard resolution.  Now create a movie clip. You can draw anything in the movieclip. And finally draw a rectangle bordering the stage. We need the rectangle to visualize where our stage is.

On my stage the box with the text “www.webdesigndev.com” is the movie clip and I have named it “text_mc”. You also need to put your movieclip on stage and give it a name.

For my design, I need to movieclip to be touching the right side of the screen. Let’s try to do that using ActionScript. Create a new layer in the timeline and paste the following line of code in it.

text_mc.x  = stage.stageWidth-text_mc.width;

In this line of code, stage.stageWidth give us the with of our stage and text_mc.width gives me the width of the movieclip text_mc. Subtracting the second from the first I can make the movie clip touch the right end of the stage. So, I set the x position of the movieclip to this value. Now press Ctrl+SHIFT+F12 and publish the application in html and flash. I get the html page looking like THIS.

Now this is not what we wanted. We wanted the movieclip to touch the right end of the screen. The movieclip is touching the right end of the red rectangle. This is because it is programmed to touch the right end of stage and right now our stage is the red rectangle. We need a way to make our whole screen the stage. That way our movieclip will touch the right end of the screen. In order to do this, go back to the publish settings by pressing Ctrl+SHIFT+F12 and go to the HTML tab. Now in the dimensions panel select “Percent” and set the width and height to 100 percent. This will make the flash occupy 100% of the screen available in the browser. Select the scale value as “No Scale” because we don’t want the content of our stage to be resized to fit the screen. Select the Flash alignment as LEFT , TOP because we want the (0,0) coordinate of flash to be on the top left of the screen and not somewhere in the middle so that our coordinate system of flash remains the same.

Now if we publish this in html and flash we can see our movieclip touch the right end of the screen. CLICK HERE TO SEE THE HTML PAGE.

Using this method you can place the components of your design on places relative to the screen size. If you think wisely while designing then you will be able to make some very practical, flexible and attractive web designs.. If your design fits all screens then the viewers will definitely be happy with it.

Want an easy way out of this tutorial? Use Wix, an amazing free Flash website builder that will let you create a very professional Flash website in the fraction of the time it takes creating it from scratch.

7-Moby Dick 2

In this game you get to be a great white whale killing humans to protect yourself. The controls of the game are really interesting here. You use your mouse to set the direction of the whale while the whale keeps on moving at all times. You have to use the momentum of the whale to attack boats. One of the many good things in this game is the upgrades. You can earn upgrade points which you can use to improve you whale’s size, speed and lots of other things.

Click here to playMoby Dick 2

6-Fireboy and Watergirl – The Light Temple

This game has a really unique gameplay. It’s a puzzle game in which you get to control 2 characters; fireboy and watergirl. You have to use your brain and control both the characters at the same time to solve the puzzle.

Click here to play Fireboy and Watergirl – The Light Temple

5-The Fancy Pants adventure world 2

The reason of this game being in this list is its ease of play and fun. This is the kind of game that people look for in flash games. The graphics and gameplay is amazing. There are a lot of levels so you wouldn’t get bored with this game soon.

Click here to play The Fancy Pants adventure world 2

4-Shift

Among all the puzzle games that I have ever played, this game is the most unique and most addictive. When you start to play this game, it’s just an ordinary jump and run game but when the shift comes in, it’s a whole new world. Whenever you press the <Shift> key in this game, the stage would change states. You have to solve the puzzle while thinking about both the states of the game. This game is a great exercise for brain.

Click here to play Shift

3-Liquid measure 2

There are a lot of games out there that look alike this game. But this game tops all of them because of the graphics, the gameplay and by introducing new things in every new level. In this game you have to put the pipes together to form a path for the water to its destination. The game starts out easy but after a few levels it gets really interesting and difficult. It’s the ability of this game to keep the user immersed that has earned this game the 3^rd spot.

Click here to play Liquid Measure 2

2-Shell shock live

The capabilities of flash have always been underestimated. But this is a game that really leverages the power of Flash. The game offers a unique multiplayer experience in flash. This is a turn based game in which all players have to target the other team in their turn. There is a huge variety of weapons in this game and all of them are really interesting. The in-game chat is also very interesting. Messages from a user are always shown as a bubble on their tank. This is a new concept and it is really interesting.

Click here to play Shell Shock Live

1-Raze

If we can choose one factor for determining a good game then that factor wouldn’t be graphics or gameplay or its multiplayer capabilities. The only factor that matters is how much fun you have playing the game. And Raze is a game which scores a 10/10 on that factor. Raze is an action game in which the main theme is to shoot and kill. There are 2 campaign modes and  a lot of single play modes. The graphics of the game are impressive. The huge variety of weapons is amazing. If you are making a game then make sure that Fun is on the top of your list.

Click here to play Raze

Let’s start by creating a new Flash Document and creating a new button symbol. I will create a rectangular button with a little shine on the top. I also want my button to have rounded edges so I choose the rectangle primitive tool from the tools menu.

I create a rectangle of 200×70 size and from the properties panel I set all the edges to 5px roundness. I select the rectangle and press ctrl+B to break it into a drawing object so that I may edit it.

Now comes the trick bit. I create a new line on above the rectangle and I bend it with the cursor tool so that it comes over the rectangle.

We have done this step because we want to divide the rectangle fill into two parts so that we may fill each part with a different color.

Now I fill the fill 2 with a solid red color.

For fill 1, I fill in a linear color with two shades of red. The I press F to select the gradient transform tool and rotate the linear color so that the lighter shade is at the bottom. This will give our rectangle the shining effect.

At this point we can remove the lines that we used to divide the fill.

Now for the Over and the Down states of the button you can just use the gradient transform tool to move the gradient up and down and give it an effect of the shine moving.

You can see the finished button here.

You can use the same technique to create other sorts of shines like shine on a circular orb and shine on a rectangle across the diagonal. Just stay creative and you will do good.

Want an easy way out of this tutorial? Use Wix, an amazing free Flash website builder that will let you create a very professional Flash website in the fraction of the time it takes creating it from scratch.

It is good if you follow along with me in this tutorial. Let’s start by creating a new ActionScript 3.0 document in Flash. Press Ctrl+F8 to create a new MovieClip symbol. We will design our new cursor in this MovieClip.

I have drawn a little red cursor with a circle on its back but you can draw anything you want, you can even make an animation in this MoveClip if you want an animated cursor. But right now I will stick to a static cursor because animated ones become a little too over in most cases.

One thing that you need to make sure is that you have to keep the registration point of the movie clip at the position where you would want your cursor to register the clicks. Naturally I want my cursor to register clicks on the tip so I have kept the registration point at the tip of the cursor.

Now that we have made the graphics part of the cursor lets go back to the main timeline and drag our new cursor to the stage. Also we would give a name to our cursor so that we can manipulate it in the ActionScript code. I have named my cursor MovieClip as cursor_mc.

Now create a new layer to contain the ActionScript code.

On the ActionScript layer, press F9 to open the Actions window and paste the following code there.

Mouse.hide();

stage.addEventListener(MouseEvent.MOUSE_MOVE,follow);

function follow(E:MouseEvent){

cursor_mc.x = mouseX;

cursor_mc.y = mouseY;

}

This is the code that replaces our current cursor with the new cursor. It’s a very short and simple code. The first line here calls the Mouse.hide() function which hides the default cursor. After the default cursor has been hidden, we need to move in the new cursor. To do that we add an event listener to the stage that detects whenever a user moves their mouse and then calls the follow function which will make the new cursor follow the movement of the mouse. In the follow function we simply set the coordinates of the new cursor (which is cursor_mc) equal to the coordinates of the mouse.

And that’s it,  you can press ctrl+ENTER to test the application.
Click Here to see the cursor in action.

You can use this method to create a variety of cursors. Just make sure that you keep the basic functionality of cursor in mind when modifying it.

Want an easy way out of this tutorial? Use Wix, an amazing free Flash website builder that will let you create a very professional Flash website in the fraction of the time it takes creating it from scratch.

Lets start by creating a new Flash ActionScript 3.0 application. Create a new movieclip by pressing ctrl+F8. We will make the animation of the preloader in this movieclip.

The idea I have in mind to create an arc and turn it into a circle as the loading progresses.  To do that, I use the oval primitive tool. You can select it from the toolbar.

Draw an oval and set its inner radius from the properties menu to some value other than 0 so that a hole is created in the center of the oval.

Now to give the animation effect, I make 36 frames on the timeline and on each frame I increment the “End angle” by 10. So from frame 0 to frame 36, the arc turns into circle.

The animation looks pretty good now but I want to make it better. So I copy the circle to the layer below it, resize it and change its color. The new configuration looks a bit like this.

The animation looks quite good now. Now you just need to follow the steps of the Flash preloader tutorial to add the actionscript code to this and the preloader is ready. If you are looking for something more basic, you can read my tutorial on how to create a flash website.

You can see the finished version of the preloader here.

This is just an example of how you can get creative with preloaders.  You can come up with your own variation of the preloader on this basic skeleton.

Want an easy way out of this tutorial? Use Wix, an amazing free Flash website builder that will let you create a very professional Flash website in the fraction of the time it takes creating it from scratch.

1 : www.the-planet-zero.com

The planet zero is a project by Nissan. This website has been created to raise awareness for alternative energy. The website is highly interactive and the user is sure to get immersed in the website.

2 : www.intel.com/museumofme

Intel’s museum of makes you realize how much information about you is there on Facebook. The website takes all of your data from Facebook and puts it in an interactive museum. You are definitely going to enjoy this trip.

3 : www.5gum.co.za

A highly interactive website by Wrigley’s Gum, this website was made to promote 5 gum. The dark colors and flashing lights offer a very immersive experience.

4 : www.sdzsafaripark.org/game

A flash game made for the San Diego Zoo- Safari Park. The game has nice graphics and animation.

5 : www.htcsense.dk

A beautiful website for HTC. The best thing about this website is the amazing transitions and 3d effects.

6 : www.millaswelt.de

This website has a very beautiful interactive flipbook animation. The graphics and the animation are absolutely outstanding.

7 : www.idadeinterior.com.br/en_US

An adorable baby asks you a couple of questions and tells you your real age. A very nice theme along with nice graphics.

8 : follownoone.com.au

An absolutely brilliant concept for the promotion of Volkswagen Polo. You can literally drive around the website in a polo. I’m sure you will enjoy the ride.

9 : www.erkyperky.com.au

Erky and Perky are on the hunt to find crumbs. This website features excellent character animation and very good graphics.

10 : www.climbmountasgard.com

Play this addictive and adventure filled game in which you have to climb mount asgard. The special thing about this game is its graphics which look very realistic.

Do you want an interactive Flash site like the ones you see above? Use Wix, an amazing free Flash website builder that will let you create a very professional Flash website in the fraction of the time it takes creating it from scratch.

About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder.

This is an advanced Flash tutorial. If you don’t yet know how to create a free Flash website, you should check out my Flash tutorial before reading this tutorial.

First of all let’s write some lines of code to be used by the debugger.

var s:Number;

s = sum(3.5,5);

trace(s);

function sum(i:Number , j:Number):Number{

                var sum:int = i+j;

                return sum;

}

If you know ActionScript 3.0 then you will easily understand the above code. Its contains a function sum which adds the two numbers it takes as its parameters and returns their sum. The actionscript code is using this function to add 3.5 and 5 and store the returned value in the variable s.  There is also a bug in this code. When I run the program, I should be seeing the value “8.5” in my output window, but I am seeing only “8”.

You might have noticed the problem in the code but we are going to find the problem out with the help of the Flash debugger now. To run the debugger, the first thing we need to do is to insert break points in our code. You see the flash debugger lets us execute our code one line at a time. But for that it needs an initial breakpoint. A break point is the position where the automatic code execution stops and the manual line-by-line code execution comes into play. To insert a break point in the code, move your cursor to the line where you want to insert the breakpoint and press “CTRl+B”. You will see a red dot along that line indicating a breakpoint. I have inserted a break point in the line where the function is being called.

Now we are ready to start the debugging. Press the keyboard shortcut CTRL+SHIFT+ENTER to start the debugger. Once you press the keys, your whole screen would be changed.

In your code you will see a yellow colored arrow which indicated the current position of the execution, in the bottom left column you will see a list of all the variables along with their values. In the top left panel you will see buttons which control the execution of the code.

Right now the program control is on line number 3. I press the step into button to move the control inside the function.

You can see the yellow arrow move to sum function and you will also see the variables i,j,sum and their values.

I could have avoided entering the sum function by pressing the step over button when the control was on the line with the function call. I can also press the step out button any time to step out of the sum function and proceed with the rest of the code.

But right now let’s keep executing the rest of the lines in the sum function. Press the step in button to execute each line of code. You will see that the variables become updated on each step. When I have executed line 8 of the program, I see that the variable sum has a value of “8”.

The value of sum should be 8.5 here but it is 8. This indicates that the error must be at this place in the code. Indeed if we look carefully, we can see that the type of the variable “sum” is declared as int. Since int cannot store fractions that is the reason that we have been seeing 8 in the output instead of 8.5 .If we change the type of sum to Number and then execute our code again, we can see the correct value of 8.5.

And so we have successfully used the debugger to debug our code. This is a very small code and the bug could be spotted without the help debugger too, but when you are managing large and complex codes then debugger will definitely be of huge help and it will help you see the bugs in the code which cannot be spotted very easily without it.

Do you want bug-free code? Use Wix, an amazing free Flash website builder that will let you create a very professional Flash website in the fraction of the time it takes creating it from scratch.