Advertisement
  1. Code
  2. Effects
Code

Create a Lytro-Esque Dynamically-Focused Photo in Flash

by
Difficulty:BeginnerLength:LongLanguages:

In this tutorial, I’ll show you how to mimic the photos created by the Lytro camera. The end result will allow you to create your own dynamic and interesting pictures to display on the web, allowing viewers to alter the focal point! No special camera required -- you can use any camera which allows manual focusing (which includes most phone cameras).


Final Result Preview

Let's take a look at the final result we will be working towards:

Click a guitar to focus on it.


Step 1: Setting Up

Camera

Before you start, make sure you have a camera that can select a focus point manually. In this tutorial you cannot use the focus lock method to change points of focus. A DSLR would be best when doing this tutorial but a compact camera with decent manual controls will be fine! Also make sure you have a sturdy tripod.

First, set your camera up on a tripod. Make sure it’s secure and not going to fall or move in any way because we don’t want the composition to change at all between the shots.

Ensure your subject remains static throughout taking your images, otherwise in the final result, your images will appear to move, and that wouldn’t look good at all!


Step 2: Shooting Modes

Manual Mode

To get a really effective image, your need to set your camera to a mode were you can control the aperture. This will allow you to set a wide aperture (Small f number), and blow the background (or foreground) out of focus. Remember, the lower the f number, the greater the blur!

Aperture Priority mode (A/Av on Canon) is a great mode which will allow you to set the aperture, and the camera will choose all the other settings for you. Though be warned, this mode may produce two images with slightly different exposures, and each may have slightly different color so be careful!

Manual mode (M) would be better because you can dial in the exposure settings, and keep your shots consistent. Manual white balance settings are also a good idea to keep the colors in your images consistent.

For this tutorial, I would recommend anywhere around f1 – f5.6, depending on the distance from your subject and the camera.


Step 2: Shooting

AutoFocus Markers

Now with a wide aperture selected on your camera (Small f number), move your AF marker over your foreground subject by using the directional pad on the back of your camera. Let the camera focus, and then shoot. Without moving your camera at all, select a new focus point in the background, focus, and then shoot as shown in the picture above.

A handy tip if you have a DSLR is to go into live view mode. Here you can select any point on the screen, allowing for a greater flexibility in choosing your points of focus. If you have a compact camera, use your control pad to select your focus point.

You should now have two images that are exactly the same, apart from the focal point. Keep shooting until you are happy with your composition and depth of field. Then transfer your photos to your computer and get started in Flash!


Step 3: Now Onto the Computer

Opening Photoshop

First set up a suitably named project folder. I always like to keep projects in clearly named folders so I can find them if I need to look back on what I’ve done at a later date. Here you will keep your original images, resized images, and your Flash/ActionScript files.

To make the images web-safe, we need to resize them. Open up your favourite image editor and just resize your photos to a suitable size you feel is appropriate. Here, I’ve resized them both to 600x400px, but you can use any size you wish, and make sure the ‘constrain proportions’ box is checked.

Next, save the images as a high quality JPEG. This is important because Flash will compress the whole file later, so losing image quality at this stage is pointless.


Step 4: Flash Setup

Resizing The Flash Stage

Boot up Flash, and open a new ActionScript 3.0 document. Click the edit button under the properties tab, and resize your stage to the size of your images; I picked 600x400px.


Step 5: Document Layers and Frames

Layers and Frames

Next, create two layers on your stage; name the bottom layer “Photos”, and the top layer “Buttons”. Add another key-frame on the “Photos” layer, but make sure on the “Buttons” layer, you just add another frame. See the picture above.

Next, import both your photos to the library, so drag and drop them both from your project folder into the library panel. Now make sure you have both of your photos on a different key-frame.

The photo layer is now complete!


Step 6: Button Masking

Masking With The Pen Tool
Filled In Mask

Now, we need to make the buttons that users will click on to change the focal point. To do this, we will mask the out of focus areas of both images, fill them, and then make them invisible.

First, select the first frame on the “Buttons” layer. Use the pen tool and mask the shape of the out of focus areas, and complete the path. You don’t need to be too accurate here; just make sure you get the general shape of the object.

Next, select the paint bucket tool and fill in the paths you just created. Delete the black stroke around the edges if necessary.


Step 7: Creating a Symbol

Converting To Symbol

Next, select the shapes and go-to Modify > Convert to Symbol (F8). Make sure the type of symbol is a button, and call this what you like. I have named my shape ‘Guitar1’.


Step 8: Making It Invisible

Invisible Button

Double click on your new button, and you will then enter the button isolation mode. Here you can edit the states of the button.

In this case, we want to make it invisible, so click and drag from the ‘UP’ state, and release over the ‘HIT’ state.

Then return to your original timeline and your shape should have a see-through mask. Congrats! You just made an invisible button!

Blue Mask

Step 9: Naming Your Button

Naming Buttons

The next step is to name this button. While it is selected, on the right panel, under the properties tab, name your button ‘btn_back’.


Step 10: More Button Masking!

Both Masks

Next, click on the next frame on your “Buttons” layer over the second image, so the other part of the image is out of focus. This just makes it clearer to see where to mask.

Now do exactly the same as before:

  • Mask the out of focus area with the pen tool.
  • Fill it with the paint bucket tool and delete the black stroke around the button.
  • Convert it to a symbol. (F8) (Remember to make sure the type of symbol is a button, and you call it a different name than before. I have named mine ‘Guitar2’.
  • Double click the new button, and drag from the ‘UP’ state, to the ‘HIT’ state.
  • Return to the timeline.

Now, name this new button, ‘btn_fore’.

You should now have two transparent buttons that span over both images as shown. They may overlap slightly, but this does not matter too much. The buttons layer is now complete!


Step 11: Preparing to Code Your File

Setting Up To Code

The final part is to create the code which will make the buttons work. This step involves the use of document classes so use this tutorial to help you understand them if you are new to them, or just want a refresh.

First, locate the ‘Class’ box in your FLA file under the properties panel. In here, type Main. This is now the name of your document class, and will be the name of your ActionScript file that you will be creating next.

Next, go to File > ActionScript settings. You need to un-check the box that says ‘Automatically declare stage instances’. This means that you have to now manually declare the two buttons in code, which is what we want. (The location of this dialog may be different in earlier versions of Flash, so if you cannot find it, use a search engine.)


Step 12: Building the Code

Coding Step 1

Next it’s time to create the ActionScript file that holds all our code in. Click File > New > ActionScript file.

Now save this as Main.as, and make sure it is held within the same file directory as the FLA file. Now, the FLA and ActionScript file are linked!

First, use this piece of code as your base:

I have included an import statement for MovieClip to start with, but we will be adding more statements as we go along.


Step 13: Building the Buttons

To start, you need to declare your 2 buttons as variables. These go between public class Main extends MovieClip and before public function Main():

To make Flash understand what SimpleButton is, you need to add this with the other import statement at the top:

After you have done that, your code should look like this:


Step 14: Stopping on the First Frame

The next step is to make sure the clip stops on the first photo. To do this, simply add a stop() command inside the public function Main()


Step 15: Adding Event Listeners

Coding Step 2

The next step is to add event listeners. These go inside public function Main(), and below the stop(); command you just added. You must have an event listener for both buttons; btn_back and btn_fore, so first create one for the back button:

Now create another event listener for the next button. You need to simply change the name of both the button, and the name of the function:

First, I’m referencing the button name btn_back. Then I’m adding the event listener via .addEventListener. In the brackets, MouseEvent.CLICK is simply telling it to listen for a click on the button. Finally we're telling it that, when the button is clicked, it should call onClickBackground() -- we will create this function next.

Now, because we have used mouse events, we need to put an import statement at the top along with the other statements to make Flash understand what one is. Add this line below the other imports:

Your code should now look like this:


Step 16: Adding Functions

Finally, two public functions need to be created to tell the buttons we made what to do. Add these inside the public class Main extends MovieClip, but below the public function Main():void.

The names of the functions must match the names in the event listeners. So in this case onClickBackground, and onClickForeground:

Inside the function, we need to tell Flash which frame to go to when the button is clicked. The simplest method is to use gotoAndStop(). The number inside the brackets denotes the frame number that Flash will go to. Simply add the number 2 for the onClickBackground function, and the number 1 for the onClickForeground function.

A complete example of the code is below to help you understand the complete ActionScript code:

The only thing left to do now is to test the movie, so go to Control > Test Movie > Test (or hit Ctrl + Enter). It should be working perfectly! Now all that’s left to do is publish it, and share it on the web!

Conclusion

You have now made a Lytro style photo animation! This is just an example of how to use this technique to mimic the Lytro camera images. Use this technique to create compositions and effects of your own for your portfolio, website or blog!

To take it a step further, you could create your own effects and transitions between frames to give your project a personal touch.

Thanks for reading, and I hope you enjoyed this tutorial. Let me know what you think! Now let’s see some of your own. Pop a link in the comments below!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.