I will be uploading some pictures to demonstrate most of the bits I have mentioned when I am not to busy.

First off you’ll need a camera, try and stay away from the generic ones and go for more prosumer camera, or a digital SLR if you really want to get into it. You won’t need a high megapixel camera, as the images are going on the web so a 3-6 megapixel camera will be fine.

I’ve been using the Fujifilm Finepix S5600 (or S5200 if you’re in the US), these days you can get it for around £130. I think this is one of the best value cameras around for its price. It is a prosumer camera with a fixed lens and is not a digital SLR camera.

I have also recently bought a Nikon D80 which is about £700 with all the lenses. This is a digital SLR and has changeable lenses, this is a much higher pixel camera and is much better quality but this purchase was due to us doing quite a bit more printed media which require a better camera but for web, the S5600 is fine and will be the main focus of this tutorial.

Other accessories that will be helpful:

• A Tripod - as some shots will need it if there is low light or the photos will blur.
• Wide conversion lens - this is a bolt on lens that gives similar effects of a wide angle lense (lets you see more).
• Macro conversion/Telephoto lens - this is a bolt on lens that will give you good close-up shots.
• Filters, other bolt lenses - the S5600 has a 50mm screw on adapter, check ebay you will be able to get hold of some interesting filters and lenses for the camera.

Camera Features
I won’t waste your time going through every feature, I’m sure you will know what the on/off button does, how to zoom in/out. But I will explain in brief what the advanced features such as shutter speed, exposure, aperture, white balance, and what they all mean, I will go in to a bit more detail in the taking the picture section.

ISO - this setting is how much the camera is sensitive to light. The S5600 ranges from 64 to 1600. The higher the ISO speed the more chance of noise and loss of picture quality.

The mode dial - The S5600 has quite a few options, what we are interested in is the M, A, S and P (these will also be the same on other cameras).

Shutter Speed
Correct exposure is the results between the right balance between the sutter speed and arpeture.

Shutter speed is how fast the shutter opens and closes to allow the light in to the camera’s image sensor (CMOS or CCD). You will need different speeds depending on the light and how fast the picture is (high speed for car driving past, low speed if a landscape picture).

Low shutter speeds will need to be used with a tripod or be placed on something stable. This stops the hand-shake effect and blurring the image.

Aperture
Aperture is the size of the hole the light goes though before it hits the camera’s image sensor (CMOS or CCD). This also dictates the depth of field (the area in focus). This is usually described as ‘f’ and is followed by a number. A high number represents a narrow aperture and gives focus to the whole picture this would be used on a landscape picture. A smaller number represents a large or wide aperture, this is used to focus on the object and the background/foreground is out of focus for use on a person’s face.

To get the right exposure, you may need to change the ISO setting to suit the shutter speed and aperture value.
M - Manual gives you manual control over the aperture and shutter speed
A – Apperture Priority lets you set the aperture and the camera will automatically set the shutter speed.
S –Shutter Speed Pioritry lets you set the shutter speed and the camera will automatically set the aperture.
P – is the same as auto but lets you to override any settings.

Other buttons:
Macro – this is ually a flower-like symbol that allows you to take close pictures in focus.
Manual focusing might be useful if you want your picture out of focus, if not then automatic focusing is usually all you will need.

If you need to focus on something that isn’t in the middle of the picture, move the camera so the item is, press the shutter button half way down, this will focus it, then move away and the camera should stay focused.

The flash must be used consideratly, using the flash tends to make the pictures look ‘washed out’ so try with natural light if you can.

To express motion in the subject - Change the mode to S. Select a slow shutter speed, make sure you use a tripod.
To freeze the subject - Change the mode to S. Select a fast shutter speed, If its dark you may need to change the ISO setting, but don’t take it too high or the quality of the picture will be reduced.

Taking the picture
There are a few rules or guidelines in photography that should be worth learning.

The golden rule or the rule of thirds has been used as means of composition since the Greeks. If you divide the frame into two horizontal and two vertical lines and place the subject in these lines it is much more engading than just in the middle. Landscapes look better placed along horizontal lines, while portrates are better placed in vertical lines.
Lines look good if they are going towards or away from the subject. These can be anything that makes up our world, roads, paths, even the direction of people looking.

• Doorways, arches or foliage make good frames for the subject.
• Symmetery makes an image feel solid and ordered.
• Balance the image, things that are out of balance make the eyes look at the objects.

You may be asked to take portraits of people, if they are posing for the picture keep it quick and keep them entertained. With single portraits try and place a prop in the picture to give an idea of what he or she represents. If its a group try and get them all to stand in different lenghs to the camera (not lined up) unless you want them to and take pictures from all sides.

When people get pictures taken they normally have a ‘photo face’ which could look a bit lifeless or wooden, take two or three pictures when they may be expecting one, this way they will be more relaxed.

If the picture is not posed then it’s important to anticipate the moment, think to yourself what might happen soon and try to get in the right position. Make sure you pre-set the camera settings as you wont have time to set them up.

Lighting is very important, think about where the light is coming from.

If you are taking a picture of people outside, try not to get them to face the sun. This might seem a good idea but everyone starts to squint.

Silhouettes can be easily done by setting the camera up for the right exposure for the background. Then focusing in on the subject. A good way is often in front of the sun.

To create a movement of say a car or jogger, turn the flash on (even if its sunny) this will give a nice blur to the moving subject.

To create moving car lights, set up near a road or where you want to view the image, wait till its dark. Make the ISO very low, 64-100 and turn the shutter speed to 15 or 30 seconds.

If you want to give water some movement, keep the shutter speed slow.

If possible shoot in RAW mode over JPEG.RAW files do take up around 10MB on the 5 megapixel S5600 which is much larger than JPEG. But it gives you many more options. JPEG is a finshed image, RAW is the data from the camera without applying white balance, colour information, sharpness etc. Photoshop (im using CS3 not sure on previous versions) can read these files and allows you to set all the settings. This is very helpful if you get the white balance wrong or want a sharper/softer image.

To create 360s or panaramic views you will need a tripod. Once the camera is attached make sure the angle of the tripod stays the same. Now slightly move the camera round the tripod taking pictures every 20-30 degrees. Keep the exposure the same on the camera when taking the pictures or you will get dark and light spots and the 360 will look wrong. Edit these in photoshop, feather the left and right edges in photoshop and create a long collection of the photos that fade into each other so they look like they it is a 360. You will need to chop a few pixels from the top and bottom. Once thats done, duplicate the image and merge the duplicate with the original so you have 2×360 in lengh. Look though the 360 and find a small pixel, or something 1 pixel big that you can easily notice (obviously in zoom). Make a note of using guide lines of the 2 positions of the pixel in the 2×360 image. Now crop the image between the 2 guidelines giving you the perfect 360. You can import this into flash and create the moveable 360. I am currently writing a flash 360 that can be used on websites for free which will be available on www.nurvex.co.uk developer section soon.

Hope this helps any website designers or anyone else really that have no experience with photography who need to take some pictures for your project.

Check out their new search http://search.imagine-live.com/. I am quite sure it is a test page but still quite interesting. You will notice the map at the right hand side when you try to find something. This is what is hitting the iplocatethis.com service.
There is also quite a lot going on in the search engine world and a few similar projects from other search engines.

Check out:
Google’s http://www.searchmash.com/
Yahoo’s http://au.alpha.yahoo.com/
Ask.com’s http://www.ask.com/?ax=5

I have put together a Zip file that can be downloaded and easily installed that contains all the drivers, software and updates that can be installed in order to get the brightness working on your Sony Vaio laptop with Microsoft Windows Vista installed.

Grab the file here (16MB).
Let me know which laptops work and which laptops don’t.

The solution is basically a database or CSV of post codes, each record will contain the first part of the postcode and the latitude and longitude. What you will need is the SQL file or the CSV file and a bit of old school mathematics. I have also included the county or area in both SQL and CSV, you will not need these, but I have included them anyway as they might help you.

Download the CSV here.

Download the SQL here.

To calculate the distance between the two points of latitude I will use the Haversine formula. This basically means the shortest distance over the earth’s surface as the crow fly’s (ignores any hills etc.). It is spherical trigonometry, much better than normal trigonometry as we are calculating the distances from two points on the earth’s surface. The Haversin formula assumes the earth is a perfect sphere which it is not, it is more ellipsoidal. Therefore this formula will work well for small distances and as we are working with just UK post codes then this is acceptable error margin. If you are looking to develop a project that uses world wide distances then you would probably be best looking at the Vencety formula.

The Haversine Formula Method

The first point we will use is CB2 (Cambridge) lat: 52.163, long: 0.133
The first point we will use is SS4 (Southend on Sea) lat: 51.594, long: 0.715$lat1 = 52.163 latitude of the first point
$long1 = 0.133 longitude of the first point

$lat2 = 51.594 latitude of the second point
$long2 = 0.715 longitude of the second point

$earth = 6373 the Earth’s mean radius, 6373 KM (according to wikipedia) we can also use miles 3960.

sine angle of lattitude
$sinelat = sin ( $lat2 - $lat1 )

sine angle of longitude
$sinelong= sin ( $long2 - $long1 )

and the rest of the haversine formula
$a = ( $sinlat * $sinlat ) + cos ( $lat1 ) * cos ( $lat2 ) * ( $sinlong * $sinlong )

$c = 2 * asin ( min ( 1 , sqrt ( $a ) ) )

$d = round ( $earth * $c )

So the direct distance from post code CB2 to SS4 is 47 miles which is about right.

The above formula as a function:
< ?php

function getDistance($lat1, $long1, $lat2, $long2)
{
//$earth = 6371; //km change accordingly
$earth = 3960; //miles

//Point 1 cords
$lat1 = deg2rad($lat1);
$long1= deg2rad($long1);

//Point 2 cords
$lat2 = deg2rad($lat2);
$long2= deg2rad($long2);

//Haversine Formula
$dlong=$long2-$long1;
$dlat=$lat2-$lat1;

$sinlat=sin($dlat/2);
$sinlong=sin($dlong/2);

$a=($sinlat*$sinlat)+cos($lat1)*cos($lat2)*($sinlong*$sinlong);

$c=2*asin(min(1,sqrt($a)));

$d=round($earth*$c);

return $d;
}

// pull cords out of database

echo "Distance in miles from CB2 to SS4: ".getDistance(52.163, 0.133, 51.594, 0.715);
?>

I have also packaged a demo application to give you a better understanding.

You can view the demo working here.
You can view the source code or download it all zipped up.

I have seen quite a few flash videos around the internet, but trying to create a transparent flash video for a website proved tricky with not having any experience with video before. I tried a few products out there but i found the most advanced but still easy to use was Adobe After Effects 7.0 Pro + Macromedia Flash 8. There was an option available to export straight to FLV (Flash Video) in After Effects.

Now it was shooting time, we rented out an hour or two at a local ‘learning center’ where we blagged that we where doing a website on internet safety. They had the chroma key set up and we where ready to roll. Shot a good few shots and back to the lab to see what I could come up with.

Reading through google there was a lot of information telling me how I should go about this. Taking the first few tutorials I started keying out Colour Ranges and Colour Keys. This took quite a while to get right, the edges where jagged and for some reason the subject had a reflective green glow within them. Which merged into the background every now and then. All the tutorials that I found, the subject was crisp and there was not a touch of green on the subject at all. After a good half a week of messing and exploring the Colour Key and Colour Ranges I decided to have a play with some of the other tools located in the Keying tab. As I found out some more information on the other tools I found a much easier and quicker way of doing this, so here it is…

Load up After Effects

1) Have the videos ready, we had it in raw .avi format so I would suggest something that isn’t too compressed. File->Import->Import File and import the video files.

The video files will appear in the project box at the top left (you might need to click the project tab).

2) Then drag the video to the timeline at the bottom of the window, this will populate the timeline with your video. The video will also appear in the middle of the screen.

3) First, if the subject is quite stationary you can cut round it with the pen tool from the menu bar at the top.

Move the current frame left to right using the timeline at the bottom to get a rough idea of where the subject moves to (you can always change it later so dont worry too much). Cut round the subject and the outside will now appear transparent as above.

4) Now you can add the Linear Colour Key from the Effects & Presets box on the right. Drag the icon of the Linear Colour Key into the timeline where the video is now located. The options will appear to the left, select the Key Colour Dropper (not the default colour blue, the dropper next to it). Pick an average background colour, if its green or blue or any other colour for that matter.

If your background is not very consistant then you can use the dropper + tool in between the two previews. Now move the Matching Tolerance value to suit the subject and video, it will differ from video to video. We also used the Matching Softness to 10% to give a soft edge. Don’t spend all your time trying to get rid of all the blue or green, you need to have all of the subject viewable with a small glow of the background colour behind them.

5) Now add the Spill Suppressor effect from the effects box at the right. Click the Colour To Suppress dropper (not the blue the dropper to the right of it) and locate a green on the subject. You may want to turn the Linear Colour Key effect off to locate a decent colour, to do this just press the F icon left of the Linear Colour Key title in the Effects Controls box at the top left. Leave the Colour Accuracy to Faster and Suppression to 100.

6) Make sure you have turned the Linear Colour Key effect back on if you have turned it off. Now locate the Matte tab on the Effects & Presets box to the right. Drag over the Matte Choker. This will quickly smoothen all the sides and remove any .

If two parts of the subject are merging together which shouldn’t be try changing the Matching Tolerance option of the Linear Colour Key effect to a higher value. You may need to tweak a few of the settings to get it looking perfect. You should get the effects that I have as seen below:

Quick Tip
There is one last trick you can do. The Spill Suppressor darkens out any over spill from the green background onto the subject. Now this is great if you have a subject that there is not much spill, but like ours there is quite some green on the subject. If your subject is roughly the same colour, like ours yellow, try this to see if you get a better result. Delete the spill suppressor by clicking the effect and pressing delete. Now add the Hue & Saturation Effect from the effects and presets box. Select the Channel Control box, if you have a green screen then select Greens, if yours was blue select Blues. Now a few small icons will appear above the green on the second colour line. Move the last icon to the end of the bar, do the same with the 2nd and 3rd. You may also want to move the first icon left a touch to cover all the green as shown below.

Now change the Green Hue knob to what ever colour your subject is, we used -116 . This gave us a yellow to orange hue which replaced the green. This looks much better than darkening the edges but will only work if the subject is roughly one colour.

7) Now go to the top menu and click Composition->Composition Settings. Change the Width and Height to the values you need.

8) File->Export->Macromedia Flash Video (FLV). Change the profile to Flash 8 - Medium Quality, click Show Advanced Settings, click Encode alpha channel. You might want to change the frame rate to 8 or 10 to save some space if it will be downloaded off the web.

Now for the flash!

9) Open up Macromedia Flash 8. Start a new project. Save it in the same directory as your FLV video you have just made. Go to File->Import->Import Video. Browse for your video, it will then show you the full path. If you are planning to upload this then I would advise just putting the video file name rather than the full path, as it will try and locate it based on that path when its uploaded. You will need to choose Progressive download from a web server, you can choose Embed video in SWF and play in timeline. But the latter only plays while when the flash is fully loaded while the first streams it. Select none for the skin and drop the video object in your workspace.

There is a lot more we can do with FLV in flash using actionscript but ill post more information in another blog entry at a later date.
10) Now all you need to do is add some html:

< param name=“wmode” value=“transparent”>

Below the object

wmode=“transparent”

In the embed tag. Now you should have a transparent flash that can be overlayed on to your website!