Archive for the ‘Tech’ Category

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>

CSS stands for Cascading Style Sheets.

CSS Styles are used to define how to display HTML elements. Styles are normally stored in internet or external style sheets. Styles were added to HTML 4.0 because developers disliked having to define every bit of text using tags like <font>. External CSS files are stored using the .css extention though they can be saved in HTML format. Multiple style definitions will cascade into one,

External style sheets can save you a lot of time, as you can change the look of the page, just by changing the external file. CSS Style Sheets are supported by both Nescape 4.0 and Internet Explorer 4.0.

CSS cascades

You may have multiple style sheets saying different things in your document. In this case they will be ordered in priority as follows:

1) Inline Style Sheets (inside an element)
2) Internal Style Sheets (inside the head tag)
3) External Style Sheets
4) Browser Default

So for instance an inline style tag would overrule and internal style sheet, but a browser default would not overrule an external style sheet.

Images can be embedded in a page using only one tag. There are examples of images on this page – the top header secton contains three images.

The basic syntax is as follows.

<img src="location.gif" width="300" height="100" border="0" alt="Description text">

For a basic image tag all you need is <img src=”location.gif” alt=”description”>. If you do this the image will display at its normal size although it is always a good idea to add a width and height tag.

The alt property defines the text that is displayed when the image is missing, it is displayed where the image should be. An example is shown below.

<img src="fakelocation.gif" width="200" height="100" alt="Here is an example">

Would produce:

Here is an example

To add a link round an image simply do it like a normal hyperlink

<a href="targetpage.html"><img src="location.gif" border="0></a>

The doctype tag tells the browser what standard the page conforms to. Until now doctypes did not have to be including but with the creation of XHMTL 1.0, they must know be put in. Doctype tags go above your head tag. There are three types of doctype tags. Strict, transitional and frameset.

Strict

Strict is the hardest standard to compy with. If you add a strict doctype to your document, you can’t use deprecated tags, and traditionally a lot of websites have stayed away – but more and more are coming round to the idea of tigher standards.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional

This is the most commonly used doctype as it allows you to keep some of the old tags but still lets you move on to XHTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset

This is for frameset pages (as you have probably guessed).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

This page covers the tags you will most commonly use in HTML that are the most basic although it does not cover page structure. See the next page for that.

Paragraphs

This signifies that the text within should be in its own paragraph. There is a break between each paragraph such as the space between the introduction text and this section.

<p>Your text goes here</p>
<p>Putting more text here would create a gap between them</p>

Line breaks

This is where you want to start a new line but do not want a gap in between them.
Such as here. The previous line was not finished but a new one was started. This is a single tag which does not require closing.

Some text here<br />
This text would be on the line below

Comments

If you want to add some notes into your page you can do it using a comment tag. These are good to remind you what every does or where a particular section starts.

<!-- your comment goes here -->

Comments will not display in the browser although if anyone goes through your sourcecode they will be able to see it so do not put private information in there.

Horizontal Lines

With the advent of borders and more color options in HTML, the horizontal line has become less used these days but is still good to easily section off different parts of the page.

<hr />

Headings

Rather than having to change title text with color, size and weight you can simply replace your <p> tags with title tags. There are 6 different titles that are built into HTML.

<h1>Here is a heading</h1>
<h2>Here is a heading</h2>
<h3>Here is a heading</h3>
<h4>Here is a heading</h4>
<h5>Here is a heading</h5>
<h6>Here is a heading</h6>

CSS has made these tags less needed although they are easy to use and help with search engine optimisation. A blank line is also automatically added after a heading.