You might have noticed in either the Pictures Around The World or Europe section of this site that the navigation menu is a rather neat set of movie-clip buttons made in flash. People have been asking me if I could put up a tutorial as to how they were made so here it is! I use a mac though so anyone on another operating system trying to follow this tutorial may find that the layout of Flash differs somewhat from the pictures below. If so then that is unfortunate but hopefully the differences are not too great.
Movie clip buttons differ from regular buttons in really only one way; regular buttons are made up of just four frames; called up, over, down and hit, each one corresponding to a mouse event - movie clip buttons can have as many frames as we want. Mouse events are added in the form of Actionscript. This gives us the very nice added versatility of creating animations that are activated with a particular mouse event.
Movie clip buttons can be a great addition to your site so long as they have a meaningful place there. There’s no point uploading them onto every single page just for their own sake - they only complement a site, they won’t turn it onto an overnight success. Once you’ve found a legitimate reason for including them on your site, you need to learn how to make them. For this tutorial I used Adobe Illustrator and Flash CS3 - Illustrator is simply to vectorise a raster image so if you can do that in Flash or some other application then you won’t be needing it… a word or warning though - this tutorial has turned out to be quite long and has a lot of steps to follow so be prepared…
For my button in Pictures Around The World I first needed a map of the world. I found a suitable one by searching google images, here it is below. (Note that throughout this tutorial I use a small source image to create the vector image for bandwidth reasons, you could easily download a higher resolution one if you want to have finer detail or maybe country borders in the vectorised map)
We will use this map as a template to trace over and create as many buttons as we wish. We may want to zoom into this image a bit to trace each continent accurately so we’re going to vectorise the image using Illustrator. Open up the image above (or any other image of the world if you like, but it has to be a .png, as Illustrator doesn’t seem to allow the vectorisation of .jpgs as far as I can tell). Once the image is open you’ll see a “Live Trace” button above it. Click this and the image probably disappears - that’s OK, the threshold setting is just too low. Set it at 255 to reveal the new vector image - some countries such as Ireland and Britain look a bit rough so drop the threshold down to about 238 is give a more true to life view of the world. Beside “Threshold” there is the “Min Area” button - this controls the detail of the image, set this to zero pixels to reveal extra features such as the 5 Great Lakes in North America, which are hidden at higher minimum areas . Once we’re happy we can save the file as a .ai and open Flash for importing.
In Flash open a new file (I select a Flash File: Actionscript 2.0) and set the dimensions to those of our image (for the map above it’s 481×214). Go to File ->; Import ->; Import to library, import the saved .ai file, leave the import settings at their defaults and hit OK. We now have our vectorised map of the world on the Flash stage. Position it onto the stage canvas and rename the layer it’s on to “background”. We’re going to turn Africa into a movie-clip button now so create a new layer called Africa and zoom in about 400%. On the Africa layer, and with the Pencil Tool, trace around the coastline - we’ve changed the pencil colour here to grey so we can see the trace as we make it. If need be, the pencil strike thickness can be changed in the properties box (Window - Properties - Properties). Fill the tracing with any colour using the bucket fill tool. Things should look like the image below so far. Notice that the Africa tracing is on the “africa” layer.
Next, convert “Africa” to a movie-clip symbol by selecting everything on the Africa layer (which should be just Africa and any surrounding islands that we included) and going to Modify -> Convert To Symbol; select movie-clip as the type and called the button “africa_mc”. Everything on the Africa layer should now be grouped together as a movie-clip symbol. Open the properties palette and, with the movie-clip symbol selected on the stage, type in “africa_btn” into the text-box under “Movie Clip” - we’ll need this name later on. Double clicking on the tracing on the “africa” layer will bring us inside the symbol - we see that is has its own timeline within the main timeline, and it’s this new timeline we are going to work with. First we need to create four new layers; name them “labels”, “actions”, “stroke” and “background” (Insert -> Timeline ->; Layer), “stroke” can be renamed from the default “Layer1″. We’ll now work on each layer one at a time.
Since we only want the background colour to change, we’ll put the it into it’s own layer - the “background” layer surprisingly enough! Select all the background by shift-clicking the mainland and Madagascar. To move it from the stroke layer to the background layer without changing its position relative to the stroke, cut it using CTRL-X or CMD-X, switch to the background layer and paste it using CRTL-SHIFT-V (windows) or CMD-SHIFT-V (mac). If SHIFT isn’t held down the background will probably be pasted in the wrong place. Now we want to put some frames in the timeline so animations can be added; click on frame 33 in each layer and insert blank frames (Insert -> Timeline -> Frame). The number of frames is arbitrary - it all depends on how long we want the animations to run so feel free to change this number. In the “labels” layer, add a blank keyframe at frames 1, 10 and 24 (again change these numbers if the urge is too great). In the properties palette (Window -> Properties -> Properties), name frames 1, 10 and 24 “_off”, “_on” and “_remove”. These names are analogous to those of a regular button - “off” refers to the state when the mouse is not over the button, “on” refers to when it is over the button, and “remove” refers to when the mouse is pulled away from the button. We want an animation to occur at each state. Our stage should now look like below:
On to the “background” layer: the background layer should contain the fill colour of the button; Africa in this case. Since we want to apply animations to the fill at the “_on” and “_remove” states, we need to make it a movie-clip of its own. So we will have a movie-clip inside a movie-clip! Highlight all the fill and convert it to a movie-clip symbol in the same way as before - name it “africa_bg_mc”. If we don’t convert the fill to a movie-clip it will just be considered a static shape and animations won’t work. On frame ten and nineteen of the background layer, insert two keyframes and with the properties palette open, click on the new movie-clip in the stage. The properties palette should look something like this:
On the keyframe in frame nineteen, change the colour setting from “none” to “tint” and choose whatever colour and percentage is most suitable. Here we’ll choose 100% and a blue colour. Create a motion tween between frames ten and nineteen (right-click between the frames and choose Create Motion Tween). The colour of the fill should now transition from yellowish to blue between frames ten and nineteen - this is what will happen when we move our mouse over the button once we are finished. We need now to create a similar animation for when we move the mouse away from the button. Insert a keyframe on frames 24 and 33. In the properties palette, remove the tint from the button on frame 33 (change colour back to “none”) and create another motion tween between 24 and 33. Our stage should now look like this:
We’re nearly finished! Some actions are needed in the actions layer. By default, flash movies play automatically but we don’t want our movie-clip button playing by itself - it’s supposed to be only activated by the mouse hovering over it! Open the Actions palette (Window -> Actions) and in the first frame of the “Action” layer, write stop(); into the actions palette. Make sure you’ve clicked on the frame, not the movie-clip symbol when writing stop(); into the Actions palette. Add another stop(); action to frame nineteen, since we want the movie to stop playing once the animation triggered on a mouse over event is finished. The final step now is to add some actionscript to actually tell our flash button what the labels “_off”, “_on” and “_remove” mean. Click out of the movie-clip and back into the main timeline by clicking on “Scene 1″, just below the timelines. Create a new layer and name it “africa_actions”. Click on the first frame in the “africa_actions” layer (there should be a blank keyframe there already) and copy the following text into the actions palette:
this.africa_btn.onRollOut = function() {
africa_btn.gotoAndPlay(”_over”);
}
this.africa_btn.onRelease = function() {
getURL(”http://www.projectvisual.net”);
}
Now to explain the code above a little: this.africa_btn refers to surprisingly enough, the movie-clip button we named africa_btn earlier on. onRollOver refers to the state when the mouse is over the button referred to by “this.”, which in our case is “africa_btn”. The function that this.africa_btn.onRollOver is tied to is africa_btn.gotoAndPlay(”_on”). This tells the button to go to and play from the frame with the name “_on” within the movie-clip with the name “africa_btn”. The other two parts of the code have similar explanations. So, all things having gone well we should have a working movie-clip button of Africa. It can now be exported as a .swf file - although we may have to temporarily delete the original image of the world so that just the Africa button is exported - we don’t want to have the original image in our finished movie! If you have any questions on the above - maybe something isn’t clear - feel free to leave a comment!
Chromatic aberrations (commonly called colour fringing) are one of the most common and yet annoying photographic artifacts that occur in digital images. You’ll most likely find them in high contrast regions of your photos such as the edges of buildings or the branches of trees. They are caused by the fact that the visible spectrum is made up of not one but six monochromatic colours, (green, yellow, violet, blue, orange red) each with a unique wavelength. These differing wavelength alter the speed at which each colour enters a cameras lens, since the refractive index of the lens is wavelength dependant, and so dispersion of the colours can occur. This dispersion can be minimised by using specialist equipment such as an achromatic lens but that’s not much good advice if you’ve already shot a couple hundred pictures and now find green and purple fringing present. Don’t worry, there’s always hope! In Photoshop CS3 there are a number of ways to remove colour fringing with just a little effort.
1. The Sponge Tool.
The Sponge Tool in Photoshop can be used to either saturate or desaturate colour and is used in exactly the same way as the eraser, so is ideal if you want to remove small regions of colour fringing. It can be found in the tool bar as shown here on the right. Depending on Photoshop’s default settings the dodge tool or burn tool might be visible instead. Once you select the sponge tool you can set the brush size, choose saturate or desaturate, and choose the flow percentage (the pressure that the sponge is being pressed against the picture.) These settings should be visible just above the image, although it might be different on a windows machine - I am using a Mac. In any case, once you are satisfied with the setting you can sponge over the affected regions (using desaturate I would imagine) and gradually fade the fringing away to a non-noticeable greyish colour. It’s probably best to begin with a fairly low flow percentage (maybe 40%) and increase it once you gauge its effect.
2. Adjustment Layers.
This is most effective if you want to remove a lot of fringing of a particular colour in one swoop. When you first open you image, if the layers palette is open (Window -> Layers), you image should be present and called Background. It will also have a lock symbol beside it. Double click the image to convert it to a layer. Then add a Hue / Saturation layer (either by Layer -> New Adjustment Layer -> Hue/Saturation or adding it from the options at the bottom of the layers palette). The box below should appear.
What we want to do now is, using the Saturation (and possibly the Brightness) scale, desaturate all of a particular color fringing that is causing us grief, e.g. purple. “Master” refers to the entire image so lowering the saturation will desaturate the everything - not what we want! Click edit and change it any other colour, it doesn’t really matter which one since we’ll be choosing the colour we want directly from the image using the eyedropper - make sure the first one is selected in the Hue/Saturation box (see above) and select the colour we want to desaturate. You might have to zoom in first. Alter the brightness also if the desaturation is too bright.
Once this step is complete a mask layer might be necessary if any desirable purples in the image were unintentionally desaturated. In the Hue/Saturation layer to the right we can see a second blank box. This is the mask layer and will negate the effect of the adjustment layer that it’s attached to - it masks it, geddit? There’s more to masks but for the moment all we have to do is select the paintbrush, choose black as the paint colour and brush over any region in our image that we don’t want to be affected by the adjustment layer (it’s a good idea to turn on and off the adjustment layer using the eye symbol beside the layer to see what parts of the image were affected and which parts we have to mask).
Two easy ways to remove colour fringing!
Well it’s time for a bit more photography I think, and this time it’s a tutorial session. Before we continue I’ll just say that the title is a tad misleading - you can’t get a true HDR image from one RAW file. It cant be done - impossible! You can however create pseudo-HDRs from on RAW file; keep reading to find out how! The last time I published a post on photography (Bringing a scene to life with tone mapping…) I had just discovered the world of HDR or High Dynamic Range photography and now I’m hooked on it! How often have your holiday snaps looked so promising on your camera’s LCD display only for you to get home, upload them to your computer and find that they actually suck? “Where’s all the vibrant colour gone?! These are not the shots I took! What the hell happened all my beautiful pictures?!!” are probably some of the exclaimations that come to mind. I know; the same nut kicker has happened to me a bazillion times and it blows (or sucks, whichever you prefer). In Bringing a scene to life with tone mapping… I quickly showed you one of my more successful attempts at creating an HDR image from three differently exposed images. I was going to post a tutorial of how I did it but since then I’ve managed to create an HDR image from a single RAW image, so now I’m going to tell you how. On top is the original RAW image. Directly below is the final HDR image. NO other images were used to create the HDR and the tools I used were: Adobe Lightroom, Photomatix, and Gimp.
If you’re interested to learn how this transformation is achieved, read on…
1. Get the RAW image.
Most digital cameras will allow you to shoot in its native RAW format. RAW is essentialy the unprocessed data collected from the image sensor in a digital camera, so if you are shooting in jpeg format (even at max resolution fine) you are immediately losing some visual info. It might not be much but it still counts. If you want the best possible results I’d recommend you shoot your subject in your cameras RAW format as we’re going to be extracting the maximum amount of data possible from the image to create the HDR photo. Do you see where I’m going here? Use RAW!
2. Post-processing in Lightroom
Once you have the single RAW image, you’re then going to do a bit of post-processing and create two similar images, only with different exposure settings. I used Lightroom for this but I’m sure you can use Apple Aperture (I couldn’t as it doesn’t support the S9600 .RAF format), or possibly Photoshop. In Lightroom import your image and then go to the Develop stage. There you can quickly change the exposure settings (I used +2 and -2) and export the newly exposed images as TIFF files under File - Export… Set the file format to TIFF and compression to “none”. Call the files whatever you want.
Lightroom Devlop Stage. The exposure settings are under the ‘Basic’ drop-down menu on the right of the image. (Click for larger resolution)
3. Making the magic in Photomatix
Now comes the cool stuff. Open Photomatix and select either HDR - Generate, or Automate - Batch Processing. I use the former as I’m only using three images here. Select your images and wait for Photmatix to check the exposure levels. If it gets them wrong just enter them manually by clicking on the number beside each image; they should be “0″ and +/- the exposure you selected in Lightroom. Click OK, make sure that ‘Take tone curve of color profile’ is ticked and then hit OK again to generate the HDR. It will look rather unimpressive at first. That’s because no tone mapping has been applied yet. In Photomatix go to HDR - Tone Mapping and the HDR image will be opened as shown below:
Tone mapping in Photomatix. Here you can alter a great many things to tweak your image just the way you want it. (Click for larger resolution)
The best way to determine what each setting in Photomatix does it to set them at their extreme values to see the changes they make to your image. Personally I flood my photos with color even to the point of saturation sometimes. Once your happy with your settings hit apply and Photomatix wil create the HDR. It just needs to be saved now. I also used GIMP to convert from PNG to JPG (I keep my HDRs as PNG’s) and to add a bit of contrast to the JPG file to give the finished product as it is above. The essentials though are: a decent camera that can shoot a RAW format, a good post-processor like Aperture, Lightroom or Photoshop, and Photomatix. GIMP can be left as an after-thought.
So now you should know how it’s done, if not leave a comment and ask a question, otherwise get creating!
Related Articles:
What Is The Best Exposure Range For HDR Photos?
Creating Ultra Vibrant Tone-Mapped Surreal HDR Photos With Photomatix Pro
If you have a half decent camera and a passion of taking photos then you can easily turn a hobby into a great source of side income. There are literally millions of photo opportunities all around you, and you can bet someone in the world will pay for a photo you may have taken, whether it was during a once in a lifetime trip through the amazon jungles or merely snapping some lame ducks in a pond. If you do carry a camera around with you, (like myself), some subjects to look out for on your travels are:
1. Money
Check out any scam website that offers you the secrets of infinite wealth if only you’ll pay for the super special ebook it’s offering and you’ll more than likely see pictures of $100 notes and numerous coins seductively laid out across the top of the site. The con artists who set up these sites need money pictures! You could provide them, simply grab together some of your own cash (if needs be just withdraw a sizable amount from your bank account and lodge it again later), lay it out on a plain table, make sure there is good lighting, and snap away. If you can get these images into public viewing on the internet they can sell for big bucks!
2. Nature
Leaves, trees, the horizon, old stone walls (sorta nature), sunrises, sunsets, lakes, beaches, even rubbish dumps can stir the emotions of many and bring in plenty of extra cash. It’s often a good thing in these cases to use your macro setting and get really close to your subject to capture an original shot from a unique angle. There are bazillions of pictures of trees and flowers that could all be dumped in the category of ‘that’s nice’. You’ll need to think a little before going ahead with such shots.
3. Technology
Photos of the latest technologies are big business, just look in an argos catalogue! Where do you think all those photos come from? That’s right, budding and professional photographers like yourself. If you own an ipod (or other music player), a laptop, mobile phone or new TV then it can be worthwhile to take some time aside and get some really great looking images of them - the snazzier the better, after all in the materialistic world looks sell!
4. Faces, people.
Some of the most famous images ever taken are of people displaying emotions of joy, sadness, regret, surprise, hatred, shock… I could go on but you get the picture. The trick to a really great image is that the person / people are unaware they are being photographed - informing them will ruin any natural emotions you were hoping to capture - you’d probably be left with a stupid dumb-ass smile instead. One slightly sensitive issue when taking photos of people (apart from them going nuts because you’ve intruded on their privacy) is that if you plan to sell it then the model (whoever was in the picture) has certain rights over how their likeness will be used by you. In short you may need for them to sign a model release form - there plenty more on the subject over at Dan Heller Photography.
5. Buildings and Landscapes
This is a good one; no matter where you are living there will almost certainly be at least a couple of buildings or landmarks that are unique to your village, town or city - for example I live mostly in Dublin and its crowning glory is the useless 120-meter high Dublin Spire in the middle of the main street, here’s an image courtesy of wikipedia. Some of its more common names are The Pole in the Hole, The Spire in the Mire, and The Rod up to God. It’s absolutely nothing special to me since I pass by it nearly every day but I’m sure people who drive over the Golden Gate Bridge to work everyday say the same about that.
I haven’t talked about what you can actually do to start selling once you’ve built up a handy portfolio of images - I’ll leave that for a later post, right now your goal should be to take as many great photos as you can. The initial work you put in now will pay dividends in the future.
Following on from the article 7 reasons to take up photography, I’ve begun to experiment with what exactly my Finepix S9600 can do. I’m always amazed by those HDR (High Dynamic Range) images created from the blending of differently exposed pictures so I decided to try one myself. In the world of digital photography HDR typically refers to the combination and tone mapping of differently exposed images of the same scene. The scene I decided to shoot was a walkway on my college campus grounds - it was the easiest choice for me since I live there and there are plenty of features to make the shot an interesting one. So one morning at 6am I got up and headed out with my camera and tripod. It was still dark which was great since I wanted to capture the illumination of the streetlights in the picture. My first task was to take three photos each at a different exposure setting. While auto bracketing of ± 1EV is possible I wasn’t aware of this at the time so instead I simply left the apeture constant at F/4.5 and then set the shutter speed to 10s, 15s and 30s. In each case the ISO level was set at the minimum setting of 80 to reduce the amount of noise by as much as possible. The following three images are the single exposure images used to create the final exposure blended image:
ISO 80, Shutter speed: 30 seconds, F/4.5
ISO 80, Shutter speed: 15 seconds, F/4.5
ISO 80, Shutter speed: 10 seconds, F/4.5
As you can see from each image above, no one image gives a really great result; regions are either under- or overexposed depending on the camera settings used. There are plenty of ways I’m sure of blending these pictures together using either photoshop or GIMP but I’ve opted for Photomatix as the process is largely automatic and I’m more interested in good results rather than how to actually achieve the results. Photomatix will ask you for a number of images on your computer and then with a bit of photographic magic will automagically blend them together. The final task then is tone mapping, whereby one set of colours is mapped to another to produce the final picture below;
Final HDR image
The result is pretty dramatic, and the contrasting range in colour is much more pronounced than in the original three shots. Most of the ‘improvements’ in image quality is achieved using tone mapping and I’ll definitely be looking more into exactly how the technique works. I havn’t gone into any detail as to what settings I used etc so I’ll be posting a tutorial in the next few days I hope. Watch out for new pictures in the future!
(I’ve only uploaded low resolution images at 530×398 pixels for bandwidth reasons but I can upload higher resolutions if anyone is interested…)
With a keen eye, an apatite for discovery and some help from the right equipment, photography can be hugely rewarding. Gone are the days when great looking imagery could only be captured by professionals in the field; the advancements in digital photography now allows both amatuers and professionals alike to capture their most cherished moments in life. I’ve recently bought a Finepix S9600 (which I’ll probably write a personal review on soon) and I’m keen to explore its capabilities beyond its auto function, but for now here are some reasons that many people may decide to take up photography:
1. It teaches patience:
Not everything makes a great picture. Finding the scene that speaks to you is a personal journey and while you may spend many hours snapping not so interesting shots, you are constantly on the look out for that one great shot. Indeed you might look back on a days work and feel let down by the lack of quality images you have captured. These shots are not a waste of time. Think of them as trial runs. Don’t be discouraged by a lack of quick success. Photography is not something to be rushed, and it never should be. Savour the moment and know that it will happen. Enjoy the wait.
2. It will calm and relax you:
Amatuer photography is the antithesis of modern day life - everyone rushing from A to B, racing to catch a cab, bus or train. Worrying about deadlines that are forgotten about once they pass. Your only constraint is the light around you, and even then changing light can reveal new possibilites. Take your time when examing your subject, be it a person, landscape, building or plant. Dont feel rushed or tied to any external clock but your own; the world isn’t going anywhere.
3. Unlock your creativity
When an image strikes the retina of the eye the nerve impulses last about 1/25 seconds. This persistance of vision allows us to see the world as a continuous flow of motion rather than series of jittery images. This is also the only way we see the world naturally. Photography opens up other amazing possibilities. Techniques such a long exposure capture and exposure blending of multiple images produce surreal imagery that can provoke emotions of wonder and awe. Don’t be afriad of experimentation - if you don’t try you wont succeed.
4. Hone your attention to detail
We often go though our days simply doing the motions - familiar with both the present and future around us because we don’t look to see what else it there. Photography demands that one is curious about everything, it will challenge you to see the uniqueness and beauty in everything from the mundane to the wonderful. Don’t forget; mundane and wonderful needn’t be mutually exclusive, often it is the simplest of things that brings out our biggest response.
5. See the world in a diferent perspective:
We view our world from one perspective - our vision is elevated to about 5 - 6 feet off the ground. Many photographers starting out may take shots from this perspective but why not expand outside the box. Look up to the sky. Peer down to the ground. Orient your camera to view the world from the perspective of other animals! What would the world look like from the perspective of an ant on a tree, or a cat in long grass? Or a bird in the sky? (You may have to climb a tree for this one!)
6. Make some money
Stock photography businesses are a great place to start for any budding photographer to get their photographs noticed and it can make them a bit of money in the process. A good place to start is istockphoto. Becoming a member is free and you can immediately either browse existing photos or begin to upload your own for sale. It’s a quick and easy way to reach a very large target audience.
7. Success and satisfaction
That perfect shot can speak a thousand different words to a thousand different people and will last a lifetime.
Subscribe to the RSS Feed
