Chris Worfolk's Blog

Requirements: Adobe Photoshop 7

You can proably do this with older version of photoshop but if you don’t have them or want the new version, you can download a 30 day trail.

Introduction

In this article I’m going to show you how to create a water texture in Photoshop. Although Macromedia Fireworks has some built in textures to do this, the textures you can create in Photoshop look far more realistic and is more customizable. For more infromation on image editing see my last column.

I will also make it seemless so you can tile it on your web page, background, etc as wallpaper and it won’t show the lines where the image repeats.

Step by step

1. The first thing to do is to create a new image 400 x 300 pixels. This is just my recommended size though, the size of the document is irrelevant.

2. You’ll need a layer to work with. If you don’t already have one (you probably will) then create a new one.

3. Hit D to set your colors to default: black as foreground and white as background. Go to Filter>Render>Clouds to make what will be the base of our water texture.

4. Go to Filter>Blur>Radial Blur and use these settings – Amount: 38, Blur Method: Spin, Quality: Good (unless you don’t mind waiting a little bit, in that case choose Best). Then go to Filter>Blur>Gaussian Blur with a radius of 2 because we want this to be blurry to the max.

5. Go to Filter>Sketch>Bas Relief and choose the settings – Detail: 13, Smoothness 10. Next go to Filter>Sketch>Chrome and select the following options – Detail: 5, Smoothness 2.

6. Now to add color. Duplicate the layer by going to the Layers palette and dragging the layer with the water texture onto. Click on the eyeball to the left of the new layer you just made to hide it. Select the original (lower) layer and go to Image>Adjust>Channel Mixer. You may want to make it a different color, but to copy the blue I used make these changes – in the Red Output Channel move the blue to the left; in the Green Output Channel move the green slightly to the right; in the Blue Output Channel move the blue to the right. Next click on the at the top of the layers palette and choose New Adjustment Layer. Then choose Hue/Saturation as the type. Play around with the Hue and the Saturation bars until the blue color looks the way you like it.

7. Now click the upper layer in the Layers palette. In the left drop-down box change Normal to Color Dodge and lower the Opacity real low to about 5-10%. (This layer brightens the lightest areas of the image and makes them glow a little). As a final touch you may want to adjust the Hue/Saturation layer again (just double click it) or try adjusting the Curves of the lowest layer (click it and hit Ctrl/M).

8. First make sure you save your file. Then flatten your layers by going Layer>Flatten Image. Next go Filter>Other>Offset. Fill in the coordinates – Horizontal: 200, Vertical: 200. After that, go Filter>Distort>Twirl select 120° as the angle. Now you may be done here if you like the way it looks, but I had a poor turn out on this example – the four sections were still clearly visible. So to correct this simply add one more filter. Go Filter>Distort>ZigZag and choose – Amount: 10, Ridges: 5, Pond Ripples.

9. Just for fun, you may want to see your image in seamless-tiling glory. Hit Ctrl/A to select all, then go to Edit>Define Pattern. Create a new image (about 800×800 pixels), click the paint bucket, set Contents to Pattern in the Options palette, and click in your blank image.

The SQL update command allows you to make specific changes to one or more rows. You could in theory do this by deleting the old one and inserting a new one but this means you have to deal with all the data and can only do one row of data. Using UPDATE solves both of these problems.

Basic syntax

As with everything there is a basic command structure to allow you to sort out what you want and run the various different parts of the commands. The syntax for using UPDATE is as follows:

UPDATE table SET field1 = 'value1', field2 = somenumber WHERE field3 = 'value3'

There are three parts to this. The first is the table to update. The second is the values which you are setting. The third is the validation of which rows in the table should have the update run.

Sample table

To make this easier to do I am going to create a sample table of data from which we can work from. The table is going to be called friends and will have several bits of data in it.

Name	email	age	favourite colour
Jim	jim@mail.com	24	blue
Alex	alex@operamail.com	23	black
Josh	happy@killer.com	30	grey
Mike	mikebob@avril.com	27	blue

Ok first lets say that Josh tells me that his email has changed from happy@killer.com to josh@wiggam.com. So we need to run an update command to change the email address from the old one to the new one.

UPDATE friends SET email = 'josh@wiggam.com' WHERE name = 'Josh'

In this code, all rows where the name is Josh, will have the current email changed to match josh@wiggam.com. This would be a problem if I had two Josh’s but I don’t so only one is updated. If I did have two Josh’s I could change the statement to say:

WHERE email = 'happy@killer.com'

Or I could also try

WHERE name = 'Josh' AND age = 30

Updating multiple values

Next let’s pretend that it’s Alex’s birthday – he turns 24 and decides that his favourite colour is now green. So we need to update two values in the table at once. Luckily this is pretty simple to do.

UPDATE friends SET age = 24, favourite colour = 'green' WHERE name = 'Alex'

First thing I must stress – you should never have a column name with a space it – don’t do it. But seen as this is just an example it’s not a problem. If you really needed a name like that then using FAVOURITE_COLOUR or a dash, etc to space them out.

In the above update statement both age and favourite colour are updated in every row where the name is Alex. Also there are no hyphens around age as it’s a number and so does not require them. You will get an error if you try to put them round a number when using a number column, as you will do for not using them in a text column.

Updating multiple rows

Finally I am going to look at how to update two records at a time. Though we have really already covered it so this is more of a confirmation to make sure you have it right. Take a look at this code:

UPDATE friends SET age = 60 WHERE favourite colour = 'blue'

I decide that everyone who likes blue is an old foogy so I am going to update everyone’s age to 60 who said their favourite colour was blue. As usual the script looks for everyone who is ok by the WHERE validation. This time it finds both Jim and Mike and changes both their ages to 60.

Conclusion

The UPDATE command is fairly simple – you just specify the table to update, the values to set and the conditions a row must meet for the update to be run on that row. One final thought though – take another look at Mike’s email address and try and guess what music I was listening to when I wrote that one :).

Yep, it was of course Feeder ;).

Whether you connect to MySQL, MS Access, SQL or more databases and whether you do it via PHP, ASP or even more you still use the same basic commands of SQL to extract information from the database.

Below is a sample database table called “members”

Username	Name	Email	Posts
Jim	Jim Harris	jim@ntlworld.com	24
Mod	Toby Hunter	t.hunter@btopenworld.com	4
Happy	Simon Gates	theman2003@aol.com	12

Seen as your database connections and how you phrase the code depends on what language you are using I won’t cover that. Chances are you will have some variable such as db = “your SQL commands here”

First of all, you may want to extract all the data. A basic command would be:

SELECT * FROM members

The SQL commands such as SELECT and FROM are always in capitals. SELECT is the first thing you put whenever you are reading or extracting data. It tells you what to take out. For instance you may only want certain columns.

SELECT name FROM members

Or

SELECT name,email FROM members

* tells the script to take all the columns from the database.

FROM tells you what table in the database to take the data from. So for instance if you had a table called “stats” you would use:

SELECT * FROM stats

Next you may want to add conditionals onto the data to only take certain rows:

SELECT * FROM members WHERE name = "Jim Harris"

This would give you the result:

Jim Jim Harris jim@ntlworld.com 24

You can also add several conditional values on:

SELECT * FROM members WHERE username = "jim" and name = "Jim Harris"

That would produce:

Jim Jim Harris jim@ntlworld.com 24

As with most mathematical type equations you don’t have to use the = sign all the time. For instance:

SELECT * FROM members WHERE posts > 10

This would produce

Jim Jim Harris jim@ntlworld.com 24
Happy Simon Gates theman2003@aol.com 12

The guy with the username “mod” would be missed out as his has not made more than 10 posts.

Finally you can also order the rows. For instance if you wanted to order then by the number of posts they made:

SELECT * FROM members ORDER BY posts DESC

This would produce:

Jim Jim Harris jim@ntlworld.com 24
Happy Simon Gates theman2003@aol.com 12
Mod Toby Hunter t.hunter@btopenworld.com 4

By contrast:

SELECT * FROM members ORDER BY posts ASC

Would produce:

Mod Toby Hunter t.hunter@btopenworld.com 4
Happy Simon Gates theman2003@aol.com 12
Jim Jim Harris jim@ntlworld.com 24

ASC sorted them lowest first or alphabetically and DESC sorts them highest first or reverse alphabetically.

Sometimes you want to make an area clickable, say part of an image or you have some animation that you do not want to have to convert to a button. What you need is an invisible one.

First draw a square (or whatever shape you want) onto your page. Double click the shapes border and delete it. You don’t need it and it makes the button look weird when you resize it.

Now convert the box into a button. Once you have done this double click it, and add keyframes for up, over, down and hit like you would any normal button.

Go back to the first 3 stages (up, over, down) and delete anything in these frames. The only thing you should leave is the box in the hit keyframe. Now go back to editing the movie (Ctrl + E).

If it worked the button should now appear as a half tranparent blue box. And if it does you have yourself one invisible button. You can now resize this to any area you want it to cover.

Large movies take a long time to load, especially for users who are not blessed with a high speed broadband connection. Therefore just giving them a screen which says loaded or just giving them nothing at all can leave them a little dazed and wondering what to do. The solution – give them some feedback on what is being loaded.

Movie modifications

The first thing you need to do is have an empty frame at the top. You don’t need anything else – just an empty frame before you content. If it’s easier you could even create a separate scene to house this frame. Make sure it’s a key frame and the next frame where you content begins is a key frame too.

Next create a text box which says loading, or the name of the movie or something similar. This will be our loading object. It should only exist in that first fame. Now with the object selected go to Insert > Convert to Symbol and save it as a movie clip. I recommend the name ‘preloader’ but it has no affect what so ever. It just makes it easier for you to identify it in the library.

The scripting

Now double click on your newly created movie clip and watch it zoom into editing mode. There should currently only be one frame in the timeline now – extend this to three by inserting two new frames. Call this layer text or graphic or something similar. This layer will just remain the normal static text. The scripting will go in a different layer – create a new one for the scripting and make each of the three frames, key frames.

Now we have three key frames in the script layer which we can insert code to. This is expert field so we need expert view on. If you’re not working in expert code view then open the actions panel and click the options view icon. It looks like a little square with an arrow pointing to the top right hand corner. Then click the line which says expert view rather than normal view. This will turn the action scripts window into more of a text editor style window to allow us to insert code.

The first thing we want to do here is to stop the main movie from going any further before it’s loaded. So click on the first frame in the script layer and put the following code in:

_parent.stop();

This tells the main movie to stop. Generally commands like this use the model: object.command. In this example the object is the main movie or _parent as its known and the command is to stop it.

Now click on frame two of the script layer. He we are going to set some variables so we can give the user feedback on how far the movie has loaded so far. We do this by using a few functions built into ActionScript which allow us to get certain values.

kBytesLoaded = getBytesLoaded()/1024;
kBytesTotal = getBytesTotal()/1024;
kBytesRemaining = kBytesTotal - kBytesLoaded;
percentLoaded = 100 * kBytesLoaded / kBytesTotal;
progress = Math.floor(percentLoaded) add "%";

This script works out what has been loaded and how much is to load and then works out the percentage. It’s a great script although I can’t claim responsibility for it. Insert this script into the second frame and that will give us plenty of variables to work with.

Finally click on the third frame in the scripts layer. In here we check to see if the movie has loaded and if it has we send them on their way. If not we continue to loop and give them feedback on what has been loaded so far.

if (percentLoaded < 99){
gotoAndPlay(2);

} else {

_parent.play();
stop();
}

Here you can see if that if less the 99% has loaded then the movie is not fully loaded then the movie clip is sent back to recalculated the variables. If 99% or more has loaded then the movie clip is stopped and the main movie starts again. I use 9% rather than 100% as if there is a little data left which cannot be loaded it will never reach 100% and therefore loop for ever.

Giving feedback

Finally we need to tell the user what is going on. So create a new layer, call it something like feedback. Then insert a text box. This will display the percentage that has been loaded so far. This box needs to be set to dynamic. In Flash MX you can change this in the properties box - look for the drop down menu saying static text and change it to dynamic text.

Also look for the input text box which says var next to it. This stands for variable and will let us make the text box fill with a variable we set. So in the box write:

Progress

This will fill the box with the process variable telling the user what percentage of the movie has loaded. You're done - hit Control + E to return to editing the main movie. You can now export your movie save in the knowledge that users will see how much percentage of the movie has been loaded.

Not all web hosts grant access to web server logs. And even if you do have access to them they may not be that useful. The solution is to write your own script which will log your own stats. And it can all be done without the use of a database. Though databases are great for this not everyone has a spare one so I am going to use nothing more complex than a text file to show the information.

The logging file

The first thing we need is a file to record each hit and log the information in a text file. This is done by creating a function and adding all the variables into it. We can then add information for these variables later in the tutorial.

<?php
function logthis ($sessionid, $pagevisited, $ip, $browser, $refer)
{
$log = fopen("log.txt","a");

$countryfile = fopen("http://ip-to-country.com/gert-country/?ip=$ip&user=guest&password=guest","r");
$country = fgets($countryfile,50);
fclose($countryfile);

This sets up the basic information for the log. I also used a tool which allows you to send an IP address and the site will return the country which that user is from. And therefore we can log which country each visitor comes from.

$now = date("d F Y h:i:s A");

fwrite($log,"$now,$sessionid,$pagevisited,$ip,$country,$browser,$refer\n");
$log = fclose($log);

}

?>

This code writes in the information. Well the top bit gets the date. But the second part at least does the interesting things. All the variables are lined up and the data is separated by comma’s to allow it to be analysed later. There is also the \n to indicate a new line should be gone to after the data is written in.

That is all the code for the logging file. Save it as log.php. We are now done with this file so you can close it down as everything else will be done from the other pages.

Code for the pages

For each of the pages you want to log the stats on you need to insert some code above the <html> tag to allow us to track the visitors to that page. So you will probably want to insert the code into all your pages.

There are two parts to the code that needs to be inserted into your pages. The first includes the log.php file into your page so we have the function. The second gives all the information to be included.

<?php

require 'log.php';
session_start();

logthishit(session_id(), $PHP_SELF, $REMOTE_ADDR, $HTTP_USER_AGENT, $HTTP_REFERER);

?>

After the include line there is a line telling PHP to start a session. Sessions are new to PHP4 and allow each user to be treated individually so you can work out when duplicate users are visiting different pages.

This code can be pasted into all your pages and remain relatively unchanged. The only bit which will need some tinkering with is the path to log.php. So for instance if you had a page in a games folder and log.php was in a folder called stats you would need to change log.php next to require to ../stats/log.php.

A few small tasks

You are almost done! Just a few small things to do and then we are finished. First open up your text editor, Notepad is fine, and save a blank file as log.txt in the same folder as you saved log.php. Once that is done upload the two files and any files which you added the code into to your web space.

It’s best to upload your files to the root directory of your website if you can. You then need to make sure that that text file has read and write properties. It may have already although if it doesn’t or your not sure then make sure by right clicking on it in your FTP client and look for a properties menu or something similar. This is usually how it’s accessed though it may vary depending on your FTP client.

Finally there is one more thing you may want to do. If all your files use .htm or a similar extension and you can only run PHP scripts on .php pages you will have a problem as you may not want to rename all the files. So if you can’t rename the pages and PHP scripts don’t work in .htm pages you need to edit your .htaccess file.

If you don’t already have one then you can copy the following code into a blank text file, save it as .htaccess and upload it to your web space. If you already have one then download the current one and add this code or modify the existing code to look like this.

AddType application/x-httpd-php .php .html .htm

You can add any other extensions you use to the end of these too.

Analysis & Conclusion

Now your server log is complete and the script will begin counting all your visitors and saving them in log.txt. When you want to view the log all you have to do is either point your browser to the file or download it using your FTP client and open it in a text editor.

That is your basic view, however if you would like something more complex then use a spreadsheet application such as Excel. You can open log.txt up in a spreadsheet and it should display fine as we added in the comma’s to separate the data.

You can also use the AutoFilter which can be found in the Tools menu at the top of Excel so you can select one piece of data to filter in the logs such as one users session id or one browser to display all the data from.

Now you not only have great logs but they look shiny too.

So you have your shiny new MySQL database your web host has given you and you are already to begin your PHP scripting. If not then you can get an account with all this from www.tripod.lycos.co.uk. Or you could when I wrote this anyway.

For those of you used to connecting to Microsoft Access Databases, like I am, the difference here is that rather than the database being a normal file like a word document or a music file which can be easily opened, etc, MySQL databases are stored on the server. So rather than connecting to a file you connect to the server.

First I am going to jump straight in to the code and then explain it after.

<?php
$db = mysql_connect("localhost", "username", "password");
mysql_select_db("database",$db);
?>

That is a basic connection. Ignoring the php open and close tags, the second link in the code makes the connection to the database of your choose. In this case it connects to a database simply called “database” so change this to your database name.

The top line tells the script where the database is. In most cases you can leave this as “localhost” as most hosts keep this as standard. If you get told your MySQL host is different though replace localhost with the new address your web host gives you.

Once you have established a connection you can then enter SQL underneath:

<?php
$db = mysql_connect("localhost", "username", "password");
mysql_select_db("database",$db);

$sql="SELECT * FROM members WHERE posts > 10";
$query=mysql_query($sql);
?>

In five lines you have connected to a database and even prepaed some SQL to select a record set from it. That is pretty simple I recon.

Worfolk Desktop News was an application which downloaded the latest news from Worfolk and displayed it in the application. The original application was built in flash and loaded the variables in from a text file stored on the Worfolk servers.

The text file was simple:

news=the news story...

Create a text file like this and upload it somethere, or even just leave it on your hard drive as long as you know the file path. Now to load it into the flash movie you use LoadVariables. Go to the first frame in your movie and go into actionscript. Now add a LoadVariables command and add in the url path or file path to your text file.

Once this is done you have the variables stored in your movie. Next create a text area and set it to dynamic text. Where it says “var” and has a space to enter a name such as “news,” or whatever name you gave your variable in the text file.

Now run your movie. If it worked right the text area should now display the value you have the variable. If you copied my text into your text file you should come out with “the news story…” If its blank you have probably given the wrong url or you have got different names for the variable in your text file then you do in your movie.

You can easily add CSS styles to your text. All you need to do is add a <p> style.

p {color: #000099; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif
}

Now whenever you have text inside the paragragh tag, it will use the above style. You can also add special headings.

p.h {color: #CC0000; font-size: large; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif
}

To use this in your text just add the code:

<p class="h">Some Headline</p>

You need to use CSS Styles for your texr as the W3C are cutting out the <font> tag from XHTML 1.0 Strict upwards. Although you can still use it in XHTML 1.0 Transitional, we think this will not be the case in later versions.

You can also use CSS to change the font of other tags such as your links. These include rollover, hit and visited pages. Take a look at this code that can be copied and pasted staight into your HTML pages.

<Style>
<!-- A {text-decoration: none}
A:hover {text-decoration: underline; color: #0DC450} -->
</Style>

This produces the blue to green underlined rollovers on this page.

There are 3 ways to add CSS into your web pages:

* External Style Sheets
* Internet Style Sheets
* Style Tags

External Style Sheets

These are style sheets saved as .css. You then link these into your page using the following tag.

<link href="global.css" type="text/css" rel="stylesheet" />

This style sheet is then included in your page when its in the browser.

Internal Style Sheets

This used a style tag, as you may have seen in serveral tutorials. Here is one we have for image rollovers.

<style type="text/css">
<!-- A {text-decoration: none}
A:hover {text-decoration: underline; color: #0DC450} -->
</style>

They are seperate from everything else but are included in the heag tag of your web page.

Style Tags

These are included inside your actual element. For instance if you wanted to change the border, of just one table, you could use the following code:

style='BORDER-BOTTOM: #84B953 1px solid'

This would just be included in the actual tag of your HTML element. Eg:

<table style='BORDER-BOTTOM: #84B953 1px solid'>...</table>