Forum: Log-In | Register | Contact | Shop


SwishMax Tutorials And Resources
Where Imagination Is The Creation

 


Add


Welcome To Swish-Designs.co.uk Have a Nice Friday

Captcha - Security Image Tutorial

completely automated public Turing test to tell computers and humans apart. (swishmax tutorial)

First Of All

Open swishmax and set the size for the movie, i have used 220 x 180

and frame rate of 25 fps. You will also need some background images for this tutorial,i have used 3, these will randomly change, if you do not wish to create any you can download a image pack to use with this Tutorial Here
This Captcha is set up for 6 characters but you can add as many or as few as you wish,


Step.1

first of all create a project folder on your hard drive and call it captcha, inside that folder extract the downloaded backgrounds folder containing the three images, or create a folder called background and save you own created images into it naming them bg0.jpg, bg1.jpg and bg2.jpg.

Step.2

Create a new Sprite, Name it "bg" and place it at x=15 and y=16 on the canvas.
Now on Scene_1 add the following Code.


onLoad () {
n=3;
bgse3 = math.random(n);
tellTarget (_root.bg) {
loadMovie("backgrounds/bg"+ bgse3 +".jpg");
}
}


This will load the captcha background image from the background folder at random intervals.
please note that it is set to load 3 images if you wish to add more or less change the number 3 acording to your image number. Press Ctrl+T you should have something looking like fig.1 below.



Now using the Bezier tool draw a line along the left hand side of the image and across the top of the image, give it a black line colour and no fill colour.
place this line at x=106.6 and y=35.8 copy and paste in place right click on the duplicated line change the colour to a light grey colour and then transform vertical and then again horizontal
you should now have something looking like fig.2 below.



Step.3

Using the Text tool create a dynamic text box name it "upp" give it a text size of 36 and a colour of 333333, see fig.3 below.



Group it as a sprite and name the sprite "L1" add the following code to the L1 sprite.

onFrame (2) {
upp = chr( Math.randomRange(97,123));
}
onFrame (3) {
stop();
}
onFrame (1) {
upp="";
}

Now place the L1 sprite inside the display area. and using the Rotate and Skew tool placed under options on the tools menu, Rotate the sprite slightly.

Copy and paste the L1 Sprite untill you have six in total name each of the sprites in order L1. L2, L3, L4, L5, L6 rotate to suit. Press Ctrl+T you should now have something looking like fig.4 below.



Step.4

Now you need a means to input the generated captcha code.
add the following code to Scene_1

onLoad (){
capinput="";
}

 

Using the Text tool create a Input Text Box name it "input" and give it a variable name of "capinput" place this underneath the image display area to the left see fig.5 below.



Step.5


Using the autoshape tool or the rectangle tool create a button and name it change add the following code to the button.

on (release) {
L1.gotoAndPlay(1);
L2.gotoAndPlay(1);
L3.gotoAndPlay(1);
L4.gotoAndPlay(1);
L5.gotoAndPlay(1);
L6.gotoAndPlay(1);
capinput="";
error_="";
n=3;
n=3;
bgse3 = math.random(n);
tellTarget (_root.bg) {
loadMovie("backgrounds/bg"+ bgse3 +".jpg");
}
}
on (press) {
L1.upp="";
L2.upp="";
L3.upp="";
L4.upp="";
L5.upp="";
L6.upp="";
}


you should have something looking like fig.6 below.



Step.6

Now create another button in the same way but his time name the button Submit and add the following code to the button.

on (release) {
if (capinput==display) {
error_="Correct Captcha Entered";
} else if (capinput=="") {
error_="Enter Whats In The Image";
} else {
error_="Wrong Captcha Entered";
capinput="";
L1.gotoAndPlay(1);
L2.gotoAndPlay(1);
L3.gotoAndPlay(1);
L4.gotoAndPlay(1);
L5.gotoAndPlay(1);
L6.gotoAndPlay(1);
n=3;
bgse3 = math.random(n);
tellTarget (_root.bg) {
loadMovie("backgrounds/bg"+ bgse3 +".jpg");
}
}
}

you should now have something looking like fig.7 below.



Step.7

Now for the finishing touch you need an error display. Using the text tool create a dynamic text box name it errors and give it a variable name of "error_". Now create another dynamic text box and name it dis with a variable name of "display" place this text box of the movie canvas, this does not want to be seen.

now add the fianl piece of code to Scene_1


onEnterFrame() {
display=L1.upp+L2.upp+L3.upp+L4.upp+L5.upp+L6.upp;
}


Press Ctrl+T and you should have a fully working Captcha Image varification like the one at the start of this tutorial.