TutorialSwitch

How To Build Quick and Simple AJAX Forms with JSON Responses

Jay S — Wed, 10 Dec 2008 18:46:45 +0000

In this tutorial, we will go through the steps to setting up an AJAX form, which will return a JSON response used to display success/error messages. We will be using jQuery and jQuery Form Plugin to make this entire process very quick and painless.

Checkout the DEMO used in this tutorial.

Quick overview of the jQuery Form Plugin (from their website):

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn’t get any easier than this!

Ok, now that you have some background, lets begin the tutorial!

1. Start by Building a Form

With the jQuery Form Plugin, you can make very complex forms and the plugin has no problem gathering all the form data and sending it over AJAX. For this tutorial however, lets keep it simple and create a contact form (Name, Email, and Message fields). All the fields in the form will be required.

Make sure to include the following attributes in your form tag, plus a DIV tag which will be used to display success/error messages.

<form method="post" action="submit.php" id="contact-us">
    <div id="contact-us-message"></div>
    <div class="input-box">
        <label>Name</label>
        <input type="text" name="name" />
    </div>
    <div class="input-box">
        <label>Email</label>
        <input type="text" name="email" />
    </div>
    <div class="input-box">
        <label>Message</label>
        <textarea name="message"></textarea>
    </div>
    <div class="submit">
        <input type="submit" value="Submit" />
    </div>
</form>

Note: The id attribute for the first DIV tag is the id attribute of the FORM tag + “-message”. In the JavaScript source provided in this tutorial, we have setup this custom convention, which helps to ensure the naming of elements is kept consistent throughout the application.

2. Create External JavaScript File (application.js) and Include into Page

Make sure to also include the jQuery and jQuery Form Plugin library files exactly in the order shown below.

<head>
...
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="application.js"></script>
</head>

3. Add JavaScript Code into application.js

The first section of code contains our setupAjaxForm class…it’s a small amount of code, but it accomplishes a lot. First, the class sets up the appropriate options for the jQuery Form Plugin. In addition, once a form is submitted, the class handles the JSON response and displays the results above the form.

Feel free to expand upon this class for your own uses :).

function setupAjaxForm(form_id, form_validations){
    var form = '#' + form_id;
    var form_message = form + '-message';
 
    // en/disable submit button
    var disableSubmit = function(val){
        $(form + ' input[type=submit]').attr('disabled', val);
    };
 
    // setup loading message
    $(form).ajaxSend(function(){
        $(form_message).removeClass().addClass('loading').html('Loading...').fadeIn();
    });
 
    // setup jQuery Plugin 'ajaxForm'
    var options = {
        dataType:  'json',
        beforeSubmit: function(){
            // run form validations if they exist
            if(typeof form_validations == "function" && !form_validations()) {
                // this will prevent the form from being subitted
                return false;
            }
            disableSubmit(true);
        },
        success: function(json){
            /**
               * The response from AJAX request will look something like this:
               * {"type" : "success", "message" : "Thank-You for submitting the form!"}
               * Once the jQuery Form Plugin receives the response, it evaluates the string into a JavaScript object, allowing you to access 
               * object members as demonstrated below.
               */
            $(form_message).hide();
            $(form_message).removeClass().addClass(json.type).html(json.message).fadeIn('slow');
            disableSubmit(false);
            if(json.type == 'success')
                $(form).clearForm();
        }
    };
    $(form).ajaxForm(options);
}

Now we need to instantiate the class to make the form active. The instantiation of the class is wrapped by the jQuery event handler which fires when the document is ready.

36
37
38

$(document).ready(function() {
    new setupAjaxForm('contact-us');
});

If you would like to add in JavaScript validations before the form is submitted, using the following code.

$(document).ready(function() {
    new setupAjaxForm('contact-us', function(){
        // field validations go here, make sure to return true (validates) / false (fails).
    });
});

4. Setup back-end PHP script for form processing

The below PHP script is very generic and basic (not even object-oriented). At minimum, the script shows the basic work flow to process POST data and return a JSON response. I would recommend taking the response variable and moving it to a class to ensure your response hash stays consistent throughout your application.


    if($_POST){
        // response hash
        $response = array('type'=>'', 'message'=>'');
 
        try{
            // do some sort of data validations, very simple example below
            $required_fields = array('name', 'email', 'message');
            foreach($required_fields as $field){
                if(empty($_POST[$field])){
                    throw new Exception('Required field "'.ucfirst($field).'" missing input.');
                }
            }
 
            // ok, field validations are ok
            // now add to data to DB, Send Email, ect.
 
            // let's assume everything is ok, setup successful response
            $response['type'] = 'success';
            $response['message'] = 'Thank-You for submitting the form!';
        }catch(Exception $e){
            $response['type'] = 'error';
            $response['message'] = $e->getMessage();
        }
        // now we are ready to turn this hash into JSON
        print json_encode($response);
        exit;
    }
?>

5. Add CSS styles

Our JavaScript code requires two CSS classes, “success” and “error” to be setup for the form results. At this point, you should have a functioning form, but it’s ugly! Spend some time adding some visual styles to match your project and your done! If your stuck, download the files provided at the bottom of this tutorial for some additional guidance.

Hope you enjoyed and found this tutorial useful. As always, if you have any questions, comments, or feedback on improving this site, feel free to leave a comment below.

5 Tutorials on How To Make Yourself Look Like a Zombie

Jay S — Mon, 08 Dec 2008 16:23:34 +0000

We are way past Halloween, but one of our users requested a tutorial covering how to turn a picture into a zombie. Since this topic has been covered by several other blogs and sites, I figured it might be nicer to do a roundup instead. Feel free to post links to other similar tutorials in the comments :).

1. Photoshop Zombie Tutorial

2. Zombie Photoshop Tutorial

3. Photoshop make a zombie

4. Dramatize a Zombie (Scribd Version)

5. Halloween Photoshop Tutorial: Creating Zombie

Creating Flaming Text with Photoshop

Jay S — Mon, 27 Oct 2008 19:07:41 +0000

In the spirit of Halloween, I decided I would create a tutorial on how to create text engulfed in flames. Sorry no pumpkins, maybe next time :). This tutorial is a bit of a challenge, so if your a beginner, some practice will be required.

Step 1

Create a new document, 600×360 pixels (72 DPI).

Step 2

Set background layer to black (#000).

Step 3

Create text element using the word “Diablo”. I used AvQuest font at 94px. Of course you can use whatever font you would like.

Step 4

Make a new layer above the “Diablo” layer by clicking on the create new layer icon. Set layer name to “Fire”. Merge all viewed layers to the “Fire” layer with Cmd + Option + Shift + E for Mac or Ctrl + Alt + Shift + E for PC.

Go to Edit > Transform > Rotate 90 degrees CCW

Step 5

With “Fire” layer active go to Filter > Stylize > Wind. Leave the dialog set to defaults and click OK. Repeat this filtration one or two more times (Use Cmd + F or Ctrl + F to repeat).

Now go to Edit > Transform > Rotate 90 CW

Step 6

The wind filter is a bit to harsh, so we need to blur the effect a bit. With “Fire” layer active go to Filter > Blur > Gaussian Blur. Set Radius 1.5 pixels and click OK.

Now for the cool part. Lets add some color :). Go to Image > Adjust > Hue/Saturation. Make sure Colorize is checked off, set Hue to 40, Saturation to 100 and click OK.

Step 7

Duplicate “Fire” layer by dragging it to the create new layer icon or with Cmd + J or Ctrl + J to create “Fire copy”.

With “Fire copy” active g to Image > Adjust > Hue/Saturation or Cmd + U or Ctrl + U. Set the Hue to -40 and click OK.

Set mode of “Fire copy” layer to the Mode Color Dodge and then merge the layer down onto “Fire” layer by going to Layer > Merge Down

Step 8

Now comes the tricky part. We will use Liquify filter to make the flames more realistic. This step will take some practice, so try to be as patient as possible.

With “Fire” layer active, use the following keyboard shortcut, Cmd + Shift + X (MAC) or Ctrl + Shift + X (PC), this will bring up the Liquify filter.

The Warp tool is selected by default. In the dialog box set the Brush Size to 50 and the Brush Pressure to 40. Now click-drag the initial flame shapes up from the edges of the white text areas. Wiggle the mouse as you drag up. This first run creates the major flame shapes.

For the second run, create smaller flames by reducing the Brush Size to 30 and the Brush Pressure to 35. Now you will need work each flame until you start seeing my results. This will require you to change brush sizes and really get in and work each flame. It will take some time and practice, but you can do it!

If you want to start over you can Reset back to the undistorted version by holding down Option for Mac or Alt for PC and clicking the Reset button that appears to replace the Cancel button. You can also use the Reconstruct tool to remove or rework your distortions. Once your happy with the results, click OK.

Step 9

Move the original “Diablo” text layer to the top of the layers.

Set to color of the text to black (#000)

You can choose to stop here if you want the original Diablo logo. Our next objective is to make the text look like it is all on fire and has been burning for a bit.

I want to give the appearance of cracks in the lettering, so we first need to raster the “Diablo” text layer. Zoom in a bit, select the Magic Lasso tool, and start making small random cuts into each letter. Examples below show start to finish cracks.

The black lettering is to dull, so we need to add some more color and texture. First, add a drop shadow to the “Diablo” layer. The Blend Mode for the shadow should be set to Multiply and the color to #b75c0b.

Add an Inner Bevel to the “Diablo” layer with a Highlight color of black (#000) and shadow #844600. Make sure to duplicate the settings below and then tweak from there.

Finally, add a Color Overlay with #f57300. This will give the illusion of the text blending in with the fire.

Step 10

Duplicate the “Fire” layer once again and place the layer “Fire copy” at the top of the layers.

Set the mode for “Fire copy” to Screen with Option + Shift + S. Then add a layer mask by clicking on the Add Layer Mask icon at the bottom of the Layers palette.

With the linear Gradient tool run a white to black, linear gradient from the top of the text area to the bottom.

Then use the Smudge tool or Shift to toggle, with a 65 pixel, soft edged brush at 70%, on the layer mask, dragging up and down to reveal or hide flames. I also used to the eraser tool on “Fire copy” layer because I felt the top of the flames were a bit too bright.

Phewwww, now we’re done Below is my finished product…

Hope you enjoyed the tutorial. We look forward to hearing from you about any suggestions or comments about the site. If you have any suggestions for tutorials, please feel free to submit them using the form on the right column.

Turn a Digital Photo Into a Polaroid

Jay S — Sun, 19 Oct 2008 21:43:35 +0000

In this post, I’m going to show you how to turn a digital photo into an old school Polaroid. There are similar tutorials out there, but most just do a basic white border around a photo. This tutorial provides a bit more realistic version. All the materials (i.e. psd, font, photo, ect.) used in creating this tutorial can be downloaded (.zip) at the end of this post.

Step 1

Start off by creating a new document, in my case 640×480 pixels (72 dpi).

Step 2

Import your background image and lock the layer. For this image I’m going to go with a wood background, which I grabbed from CG Textures.

Step 3

Create a new set (i.e. folder) and under that set create a new layer. On the new layer, make a box (305×340 pixels) with a gray (#EDEDEC) background.

Step 4

Import and crop your picture. My picture is from a recent trip my wife and I made to Bushkill Falls, PA (Really beautiful scenery in the heart of the Poconos).

Make sure to leave about 10-15 pixel border on the left, right, and top of the photo. Leave 60 pixel border on the bottom.

Step 5

Ok, we have the basic elements, so now we need to start making this look more realistic.

First, lets add a shadow around the photo. Right click on the picture layer (on the thumbnail) and choose Select Layer Transparency. Now create a new layer, above the picture layer. Make sure that layer is selected and go to Edit > Stroke.

Now go to Filter > Blur > Gaussian Blur.

Step 6

Select the base layer (border around actual photo) and go to Filter > Texturizer

This will give our base layer a slight bumpy texture, which is pretty close to the actual texture of a Polaroid.

Step 7

Add a drop shadow to the base layer.

Step 8

The picture is just too crystal clear…real Polaroids usually have this yellowish tint to them, plus they are a little grainy.

Select your picture layer and go to Filter > Noise > Add Noise.

Then go to Image > Adjustments > Photo Filter.

Step 9

Add writing to your Polaroid. I’m going to use “Gilles’ Comic Font” with black (#000) color and a font size of 24pt. If you would like to use a different font, I would recommend one that looks like handwriting for the realism.

Step 10

Now for the final final touches. Lets add some minor wear and tear. Create a new layer below the picture layer. We will use two paint brushes, both using the color black (#000).

Use the above two paint brushes or choose your own to add a few minor imperfections to the Polaroid. I also used the blur tool to give the look of a smudge.

After you are done with the brushes, change the opacity on the layer we just created to 50%.

Step 11

Rotate the entire set (folder) counter clockwise and now your done!

Hope you enjoyed this tutorial. Please feel free comment below and subscribe to our RSS feed for updates.

YouTube Video in Flash Quick & Easy!

iksnae — Fri, 17 Oct 2008 21:28:18 +0000

In this tutorial I am going to show you how to load YouTube flv stream into your flash application without using the YouTube API.

Create a new AS3 FLA and Actionscript File in same directory. Here are mine.

First we need to setup the doc class for the FLA . Open the FLA and set the Document Class in the properties panel.

Then click the pencil icon to open the AS file.

Now we’ll set up the doc class. We need to create a package and declare the class.

Pretty straight forward… Go back to the FLA and preview.. You should get the trace.

Create the interface by dragging InputText and Button components on to the stage. I added a Label too, but not necessary.

Then create a video component by clicking on the triangular icon on the top-right of the Library panel.

You will be prompted to enter a name and click OK. Use any thing but “video”. Make sure to select Actionscript-controlled.

Drag the video component onto the stage. Then arrange and give each component an instance name.

Save the fla.

Back to the AS File. This is the biggest one, so take your time.

First, we’ll need to import the packages/classes:

Second, we need to declare all our objects in the class.

Third, we set up the constructor.

Here we make references to the components on the stage and add listener to catch mouse click.

Fourth, create the internal methods/functions:

- getVideo

- playVideo

- clickHandler

- loaded

- onMetaData

okay… time to flesh out these methods…

getVideo:

We instantiate the Loader and URLRequest objects, passing url to YouTube’s swf player for a specified video. Don’t worry we’re not going to be using it. It just serves as a way to authenticate the session, then we toss it out.

loaded:

Here’s where the magic happens. We decode the variables in that YouTube SWF we loaded with the URLVariables class and find the token value. Next we create a new url, which is the url for the FLV stream. Store that url and call playVideo()

playVideo:

We init the NetConnection object by calling it’s connect method. Then we instantiate the NetStream object and set client to this.

Next we attach the NetStream to the Video object and call the NetStream’s play() method, passing new url to video stream.

At this point our app is ready to go. We just need to wire up the clickHandler to store the video id and call the getVideo method.

Your final code should look something like this:

That’s it! You should have a functioning youtube player. This should be enough to get you started on you own YouTube apps.

Demo:

Create an Intense Eye

Amaresh — Mon, 01 Sep 2008 07:09:48 +0000

In this Photoshop tutorial we will learn how to add detail and intensity to an image in 5 simple steps.
We’ll be using simple filters and layer modes and more to add an interesting effect to an otherwise regular stock photo.

Step 1

First of all you need to open up the stock image that we’ll be using for this tutorial. You can get it here. Resize the image to 600×450.

Step 2

Create a new Curves Adjustment layer by clicking on Layers > New Adjustment Layer > Curves and set the curve like the one below :

Step 3

Now duplicate your original layer, and apply Filter > Other > High Pass and set the radius to 4.

Step 4

Set the Blending Mode of this layer to Linear Light.

Step 5

Now, to finish it off, apply a Selective Color Adjustment Layer ( Layer > New Adjustment Layer > Selection Color) and play around with the settings till you are happy with the outcome.

There you go, we’ve transformed our original picture into a much more intense and detailed one. Please feel free to subscribe to our RSS feed for updates.

Layer Masking in Photoshop

Shotormorgh — Sun, 31 Aug 2008 08:15:45 +0000

One of the tedious tasks you’ll often find yourself doing is cutting stuff out, putting them somewhere they don’t belong and making them fit in. And there are many ways of doing this.

If you’re not using layer masks by now, then you should really read this.

Say you have an image of fellow you want to cut out of picture A and put it in picture B. There are several ways you could go at it, none of them wrong. You could use the freeform lasso to go around your subject, if you don’t have a steady hand there’s the pen tool ofcourse. And if you don’t happen to have a hand. Well, you could always get some Gooback to do it for a buck an hour. (…) Moving on.

All these methods are sound and there’s nothing wrong with them. But using a layer mask along side them has it’s advantages.

When you delete a part of an image to leave a cut-out that part is gone, and the only way to get it back is by undoing or reloading the picture. If you apply a layer mask, nothing is gone. You can come back to make corrections or just disable the mask to get your image back.

How it works is: You apply a layer mask over a layer. This creates, like the function suggests, a mask over your layer. Which you can then paint over and mask parts of your image. The way you do this is by painting black over what you don’t want to see.

Sounds pretty straightforward, so let’s give it a try.

Step 1

So we start off with an image containing something we want to cut out of. In this case it’s your friendly neighbourhood Joker. But I don’t quite like the Gotham City setting. So that’s what we’re going to change.

Step 2

The first thing we do is apply the layer mask. You can do this by selecting the layer with the Joker and clicking on the layer mask button on the bottom of the layers panel as shown. When pressed a small white square appears next to the layer.

The chain in the middle of it means that the mask is linked to the layer, they move together just as two normal linked layers. So it is possible by turning off the link to move the layer mask and the layer seperately. Which would be useful if we for instance want to nudge the mask into the right position.

Step 3

I have a picture here of a building in The Hague, this is where we want to place the Joker, don’t ask me why. So we’ll create a layer beneath the Joker layer and paste the picture in.

Step 4

Now comes the fun part, give a click on the white square on the Joker layer. This will select the layer mask, which means that anything you do on the canvas is only applied on the layer mask.

Like I said, there are many ways to cut him out. Choose whatever you find easier. I found it fairly simple with this image to use the magnetic lasso and going around the Joker. Then when I had my selection. I right clicked on the selection > select inverse and then filled the area with black. This left me with the Joker on a different background.

The important thing is that after you make a selection, instead of deleting or cutting out. You make sure that the area around your subject is filled with the colour black. If you do this whilst having selected the layer mask, then you should have something similar to my image.

Now you might have jaggy edges, this is no big deal. The beauty of layer masks is that we can fix all this and we can make a million mistakes, erase them and try again.

To get rid of jaggy edges and spots you may have missed you can simply pick a brush, and paint black over the layer mask. Similarly, you can use the eraser to bring back parts of your image.

So, to recap. The layer mask allows you to hide parts of your image without actually making adjustments to the image itself, thus leaving your image intact at all times. Which will not only save you time and headache, but benefit you in the long run as well.

This is just the basic function of layer masks, you can do much more. Try different brushes. Or use it to hide parts of a layer style. Just experiment with it. You’ll find new uses.

Aqua Gel Text in Photoshop

Amaresh — Sun, 31 Aug 2008 07:04:45 +0000

In this tutorial, we’ll be using simple layer styles to make a smooth aqua gel effect that you can easily apply to text.

Step 1

Open a new photoshop document, and apply a radial gradient. I used the colors #250101 and #000000.

Step 2

Now, with a font of your choice, write the desired text. Pick a nice bright blue color, I’ve chosen #03c9e1.

Step 3

Now double click on the text layer and select Bevel and Emboss and use the following settings for it:

Here’s how our text is looking like now :

Step 4

Click on Inner Glow and apply the following settings. Choose a dark shade of blue.

Our gel effect is almost ready now :

Step 5

To make the gel look more realistic, click Inner Shadow and use the settings below:

Presto! Our gel text effect is complete!

There you go, we’ve managed to add a gel-type style to your text in 5 simple steps! You can download the PSD from here.