In this tutorial we will try something different with css, we will try to make an opacity rollover effect, which could be used as menu items and much more.
This should be the final result, (note, you might not see anything if you use any special browsers or very old versions, it has to support the opacity css style).
Now for this example we need to prepare a few things, first create a folder to contain this whole project, save the three images above in the folder and dont rename them because we will be using the names.
Now open your favorite html editor, (notepad, dreamweaver etc).
First we will add the css styles at the top.
<style type="text/css">
.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
-moz-opacity: 0.4;
}
.opacityit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
</style>
That was the styles tag, you can do it in the html file, or export it to an external .css file (then remember to delete the <style> and </style> tags).
Now we just need to place our elements with html code, and assign some classes to them to make this effect work.
<div id="cat_menu">
<a href="http://www.blog.0tutor.com" class="opacityit"><img border="0" src="ps.jpg" /></a>
<a href="http://www.blog.0tutor.com" class="opacityit"><img border="0" src="flash.jpg" /></a>
<a href="http://www.blog.0tutor.com" class="opacityit"><img border="0" src="3ds.jpg" /></a>
</div>
As you might see its quite simple, first I make a div box just as a wrapper to hold the images.
then every image is shown in as a href link with an class calling for the style "opacityit" rollover effect.
If you have trouble making it work you can download a project here, remember if it still doesnt work, check if you use a browser that supports the opacity filter effect.
Download the css opacity project here.
Yet again I felt like making a 3d text effect in Photoshop, so here is how to make a stylish 3d text effect.
First with the text tool type in the text you want to apply this effect to.
In the layers panel right click the text layer and choose rasterize layer.
Now go to edit -> transform -> perspective and drag the right upper corner a bit down as shown below.
Then again go to edit -> transform -> free transform and drag the right middle corner a bit to the left to change the text width.
With the text layer selected in the layers panel, now choose the move tool, hold down the alt key and press the left arrow key on the keyboard about 8 times, (depending on how big your font is). This will duplicate the text layer 8 times.
Select all the text layers in the layers panel except the top one, then right click and choose merge layers.
Double click the top layer to get to the layers styles panel and give it settings as shown below.
Double click the text layer below, (the one that should represent the 3d effect) and give it styles as shown below.
And we are done, to make the reflection I just put a copy of the the layers into another folder and rotated the text scaled it to fit.
In this Flash actionscript tutorial I will show you how to use loops to load in and position objects on the stage, a very neat method and much better then just dragging all your movie clip objects from the library and try to place them in the right position.
This is what we want to accomplice, making 4 columns with 3 rows of objects, in all 12 green ghosts.
First we need to make the ghost, I will not show you how to do this, this is an actionscript tutorial not drawing tutorial.
But when you have your ghost in place in the library panel, the first and most important thing is to use linkage to tell flash that this object should be available through the actionscript code.
So open the library panel and right click our ghost object, then choose linkage and set it like I did in the image below, if you get any error messages just hit okay, its just flash telling you it will make a class for the object.
Now we are ready to go to the actionscript panel and do some dirty work.
I have typed in the description within the code starting with the comment tag // in flash so you can copy and paste it right into your flash project.
// First we define all the variables at the top of the actionscript, so we know where to change them, therefore its also important to give them good names to remember.
// first variable holds the value of how many objects we want.
var shapesNum:Number = 12;
// shapeSize holds the value of the size in pixels we want our object to be.
var shapeSize:Number = 55;
// Holds how many columns we want to create.
var columnsNum:Number = 4;
// This is the distance between the objects we create, its the space between them, we will need it later to do some simple math.
var distance:Number = 20;
// Here is the function wrapper, we name the function createShapes and void tells it to return no value.
function createShapes():void {
// some internal variables to hold the position of the objects, this is set to 0 now, but as we loop through all 12 objects, it will be changes.
var X:int = 0;
var Y:int = 0;
// this is the loop it basically says i = 0 and adds on each time, as long as its less then our variable shapesNum (which is 12). Meaning it will loop 12 times.
for (var i:int = 0; i < shapesNum; i++) {
// Now we create an instance of our shape, here we just name it shape and calls the linkage from before which we called myShape.
var shape:myShape = new myShape();
// This might seem a bit confusing, but I will try to explain, it says if not i (in the loop) is the same as i divided by columnsNum AND i is not equals to zero.
// Meaning in english that now we have reached the end of a column and needs to reset the X position and create a new column. and the Y position is brought down.
if (!(i%columnsNum) && i != 0) {
X = 0;
Y += shapeSize + distance;
// Here we just set the x and y position of the ghost object, saying distance (which was 20) + the shapeSize * X (X is how many shapes we have placed) + distance* X, now this gave me just a bit of scale number, but I experimented with it and found that if I added 15 to the number it fit.
// So this is a number you might want to experiment with yourself to find something that fits.
shape.x = distance+shapeSize*X+distance*X + 15
shape.y = distance+Y + 25
// Now we set the shape size equal to shapeSize
shape.width = shapeSize
shape.height = shapeSize
// Finally we add the shape to the stage using the addChild method.
addChild(shape);
// incrementing the X value so its ready for the next object in the loop.
X++;
// Last but most important thing is to make sure we run the function when flash starts by calling the function createShapes();
createShapes();
I hope you understood what I did in this tutorial, it might seem a bit confusing but when you learn it, its a great function and I have used it making a couple of games in the past.