May 13, 2009

Tutorial #09

Mini Preview

Create an animated cloud icon in PHP using the existing cloud icon tutorial PSD File.

Welcome to my first tutorial for DrawingClouds. I’m very happy to be hear, and to be adding some interactivity to some of the other projects that are already on the site. So, shall we dive right in?

Step 1
First, we’re going to take the PSD form the tutorial here.

Step 2
Now, we’re going to take our image, cut off the arrow and paste it to a new layer and then make that layer hidden, then lengthen the green stem and save it as “1.png” without the quotes or course. First, make sure that you crop your image to 262 wide by 353 tall in pixels. This is the optimum size for this tutorial, and is necessary for everything to line up in the end. If you change the dimensions here, be sure to do so in the final html file as well.

Step 2

Step 3
Next, we’re going to go back, unhide the arrow layer, and hide the others. You may want to slide the arrow down a tad so it lines up with the longer stem. Save this as “2.png”. Once again, make sure that you crop your image to 262 wide by 353 tall in pixels. This is the optimum size for this tutorial, and is necessary for everything to line up in the end. If you change the dimensions here, be sure to do so in the final html file as well.

Step 3

Step 4
Now, we’re ready to start the actual coding. For the purpose of this tutorial, we’re going to use JQuery. Below is the code. you should name it “jquery-1.2.6.min.js”. Don’t worry if this scares you. This is a preset code sample, sort of like WordPress for blogging, this is JQuery for animation.

Download the JQuery Sample Here

Step 5
Let’s dive right into the code. First, I’ll show you the JQuery code to get you started. It automatically searches for our base image, and places it over the new image. Set the “20″ in animate to a higher number if you want the arrow to go lower, and a lower number to make it animate higher. You can also change “600″ in duration to change the speed of the animation. Note! – Please don’t use 1, or it might cause a seizure. Seriously, it can be damaging to certain users who might be prone to seizures.

<script type="text/javascript">
$(function() {
$('ul.flow li').hover(function(){
$(this).find('img').animate({top:'20px'},{queue:false,duration:600});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:false,duration:600});
});
 
});
</script>

Step 6
Now, we’re going to dive into the CSS, this will add our basic styling, and allow us to change some visually appealing settings that make our download “box” even more unique. The below is just the framework. Make this project yours, and add some background colors and image effects.

ul.flow li {
list-style:none;
background: url("1.png");
width:262px;
}
 
ul.flow li a {
 
display: block;
position: relative;
height: 353px;
width: 262px;
}
 
ul.flow li a { text-decoration: none; }
 
ul.flow li img {
position: absolute;
border: none;
 
}

Step 7
Finally, let’s add our basic HTML to display all of our hard work. The following are just basic HTML tags, so there shouldn’t be much trouble figuring out what’s going on. Just upload this file, both 1.png and 2.png, and jquery-1.2.6.min.js and you’re animated cloud download logo is complete. (The style and Javascript in steps 5 and 6 is just for explanation, it’s already included in this step for ease of use. )

<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Float</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function() {
$('ul.flow li').hover(function(){
$(this).find('img').animate({top:'20px'},{queue:false,duration:600});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:false,duration:600});
});
});
</script>
<style media="screen">
ul.flow li {
list-style:none;
background: url("1.png");
width:262px;
}
ul.flow li a {
display: block; 
position: relative;
height: 353px;
width: 262px;
}
ul.flow li a { text-decoration: none; }
ul.flow li img {
position: absolute;
border: none;
}
</style>
</head>
<body>
<ul class="flow">
<li><a href="http://drawingclouds.comyr.com/?p=291"><img 
src="2.png" alt="Awesomeness!" /></a></li>
</ul>
</body>
</html>

That’s all there is to it! Next time, we’ll get into how to include this effect on your WordPress Blog. That’s all for now, John out. =D

Download the Source Files that includes the JQuery, Html and Image Files

1 Comment

Aaron Lawrence May 23, 2009 at 01:15

Wheres the PHP???? May be you should change the name of the tutorial.

Reply

Create an Animated Cloud Icon using JQuery

1 Comment

Leave a comment

Ads

Recent Posts

Categories