Posts filed under ‘Uncategorized’
CSS Tutorial – Roll Over Button
Pre-loaded Hover-state Images
In this XHTML CSS tutorial you’ll learn how to create a button for a web page using Photoshop, XHTML and CSS. More specifically, you’ll learn how to create a button who’s hover state image is preloaded. The advantage to this technique is that upon hovering over your button, the user won’t have to wait for it’s hover state image to appear; there’ll be no ‘graphic-less’ moment while the image loads, all without a single line of JavaScript.
Open up a blank XHTML document with a style statement within the <head> tags. This is where we’ll place out CSS code.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>button</title>
<style></style>
</head>
<body>
</body>
</html>
We’ll begin by setting out the XHTML markup for our button, between the <body> tags:
Notice the button has been given the class of ‘button’.
Now we’ll set up some basic CSS to establish some styles in our document. Place the following between the <style> tags:
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333
}
Now some attributes for what will be our button, identifiable by it’s class ‘button’. Firstly, it has a width of 100px, a height of 20px and some extra padding to increase it’s dimensions further.
display: block;
width: 100px;
height: 20px;
padding: 15px 20px 10px 45px;
color:#666666;
text-decoration: none;
}
The above statement dictates that the button has padding of 15px at the top, 20px on the right, 10px at the bottom and 45px on the left. This extra padding on the left will make room for an icon on our button. The total dimensions of our button are now 160px wide and 45px high. You’ll also see that I’ve given any text within the button a color of #666666, that it’s displayed as ‘block’ (making it adhere to the dimensions we’ve set) and that I’ve removed the default underline by stating that there will be no text decoration. Now lets make a graphic for it with Photoshop.
Open up a new document in Photoshop with the dimensions of our button.
Copy a design something along the lines of what you see below. I’ve chosen to use one of the many icons freely available from famfamfam.com and placed it on the left.
Now alter your canvas size (Image > Canvas Size…). Double it’s height to 90px from the top edge. This will give you the following result:
Now duplicate all the elements you’ve drawn and position them at the bottom of your canvas. This copy will be your button’s hover-state.
Your two button images need to be different in some way – perhaps a completely different color, different icon or perhaps something more subtle. I’ve chosen to alter the transparency of my top image making it fainter than the hover-state. The button will appear darker when hovered over.
When you’re satisfied with your image, save (File > Save for Web & Devices…) in whatever format you choose.
Now let’s use this image as a background for our button by further defining our ‘button’ class in the CSS.
This states that the image we’ve chosen will be used as the background for our button, that the image won’t be repeated (it won’t be tiled), that it will be positioned 0px from the left and 0px from the top. Of course, when the page is loaded and the button background is also loaded, the whole thing is placed in your browser’s cache, even the part of your button image which isn’t yet visible. Check your button in a web browser, it should look like this:
Now we need to add the final CSS statement, defining what happens when our button is hovered over.
color:#333333;
background:url(button.jpg) no-repeat 0px -45px;
}
This simple statement dictates that the hover-state of our ‘button’ link will have a slightly darker color of #333333 and that the background image will be our button.jpg. The difference this time is that the background position has been set at 0px from the left and -45px from the top – or, said in another way, that the background image is raised 45px. Our hover-state graphic will therefore instantly fill the button when hovered over. Try it yourself! Finished CSS Example
Flash CS3 Tutorial – Event Handling
For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.
View the Flash CS3 Tutorial Videos .
Interactivity with Flash – Event Handling
The code used in this Flash Tutorial is mainly ActionScript 2.0 with notes for using ActionScript 3.0
This tutorial comprises an introduction to interactivity in Flash, including the underlying principle of Event Handling.
Please note that Event Handling changed significantly between ActionScript 2.0 and 3.0.
myclip_mc.onPress = function() { trace(“press”); };
This code instructs the movie to listen for the mouse press event on the movie clip symbol, and, when a mouse press is detected, to execute the code within the brackets. This statement is assigning a function to the movie clip onPress event, meaning that Flash Player should carry out the function whenever the event fires.
If you’re using ActionScript 3.0, your code will be slightly different:
myclip_mc.addEventListener(“onPress”, clipPressed);
function clipPressed() { trace(“press”); };
This code has the same effect as the code above. It tells the movie to listen for the onPress event on myclip_mc and then execute the code within the clipPressed function specified.
Test your movie (CTRL + Enter or Control > Test Movie); click on the shape, you should see “press” written to the output panel:
There are many events that ActionScript can listen for. For example, to detect the mouse cursor rolling over your movie clip, change onPress (or onRelease) to onRollOver. Test your movie, then roll the mouse on and off the shape; the event should fire each time the cursor moves onto the shape. Try changing onRollOver to onRollOut and test again. This time the event fires when the cursor moves off the shape.
Experiment with the different events to familiarise yourself with them; you can also use button symbols, which have a degree of interactivity built-in, meaning that you may need to write less (if any) ActionScript code yourself.
