If you have no idea what is Tilt-Shift. Probably you can have a short read on it at wikipedia. But perhaps to some, when done right, can produce really unexpected and sweet result (look at UNIQLO CALENDER). While to other, it’s being done to death. Of course, this is merely a quick tidbits on how you can “almost” achieve the effect without even touching Photoshop or other image editing tool, but with just few line of Actionscript. And yes, designers can do it too!
Demo : See it in action!
Download : The Source file. (Flash CS3, AS3)
It would take roughly, probably not more than 5 minutes to get this done. No really.
First you’ll need to launch up your Flash application, which most developer would call it IDE. Select on File File (Actionscript 3.0) and click on OK.
Next you will need to create 4 layer for this tutorial. Which consists of
- A/S (for actionscripting)
- mcMask (for the mask movieclip)
- mcBlur (for the movieclip that would be blurred)
- mcClear (for the movieclip that uses the same image as mcBlur, but, not blurred)
Although not necessary, I have set my stage size to correspond with the image size that I have, for instance, 900 pixel width by 600 pixel height.
When you have done the basic setup. You will need import the image of your choice to the stage. It is recommended that you get image that is shot from a very high angle, such as bird eye view of a place. (Imagine yourself being at top of the Eiffel Tower looking down)
Once import is done. right click on the image and select CONVERT TO SYMBOL. This would bring up the dialog for you to give a name to the image. Once you have decided on a name, select TYPE –> Movie Clip and click on OK.
After the symbol has been converted to a movie clip symbol. Cut the instance and paste it on the mcClear layer, give it an instance name, called mc_clear.
Copy and paste the same instance on the mcBlur layer. And give it a different name, mc_blur.
Right after you have given an instance name mc_blur. While the instance is still selected, on the PROPERTIES panel, click on FILTERS, and click on Add filter. Select Blur from the list.
For this example we will be using value as per picture above. You can experiment around with different filters.
We will now proceed with creating the mask movieclip that has a gradient. To avoid from clicking on the wrong layer while working on the next step, we can now lock both the mcBlur and mcClear layer.
Now on the mcMask layer, using the Oval Shape tool, we need to create an oval shape that fits across the entire picture. Like shown above, choose a radial gradient (as pictured). We will tweak with a bit of setting later.
We will now do some adjustment on the shape’s colour through the COLOR palette located on the right side of your Flash software. If you can’t see yours, you can go to WINDOW –> COLOR to bring up the panel.
While the shape is still being selected, we will select one marker of the gradient and tone its ALPHA down to 0%, this would make the one part of the shape being transparent. It doesn’t matter what colour it would be, as long one side of the marker is OPAQUE at 100% and the other side of the marker is transparent (at 0%).
This is generally how it would look like after the adjustment. Of course if it doesn’t look as what you intended it to be, you can always do fine detail adjustment on the alignment of the gradient.
Select the Gradient Transform Tool.
And when you select the shape with the tool is being used, you would see a different set of command you can alter the appearance of the gradient. It takes a bit of time to get use to it. But it is pretty easy to understand the idea on how to manipulate the tool.
When you are satisfied with the fine tuning, this probably is what I wanted. We can now proceed to converting this shape to a movieclip as well. When the shape is converted to a movieclip symbol, give the instance a name, mc_mask.
Congratulations, we had already completed the first part of the tutorial, and I hope it’s a breeze, just 1 image, and 1 shape is needed. And below is a the other part where you will need to use only few lines of actionscript to see the magic in work.
Now on the final bit of this, we will write all of our codes on the A/S layer. As you can see, it is really a good practice and important to correctly data-type your variables on declaring it. This not only improves performance, but it aids A LOT as your code grows. And to be honest, I can’t remember every single function or methods available, that is why by data-typing it, I felt it’s really much more faster in development.
The complete code. Let’s give it a try and see if it works as intended. If you look closely, the mcBlur’s center would be masked away by the gradient mask.
But definitely it wouldn’t be the desired result we wanted, so to fix this, thus we will swap the location of the layer between mcBlur and mcClear, with mcClear’s layer at the top and mcBlur at the bottom (refer to the top of this post for comparison).
And a bit of change in the code, instead of masking away the mcBlur, we would be gradually mask the mcClear from the center, and with an effect that it blurs off the edge. And when you do a test run on this. You would eventually get results as below :
And that’s about it! I’d hope that you throughfully enjoy the experience in reading this, because it doesn’t need to be a rocket science to create such an interesting effect, yet, there is so many possibilites to expand from this. Of course for performance wise, I would do the steps above entirely using code, but it would defeats the purpose of allowing designer to adapt to such great effects Flash offers.
Demo : See it in action!
Download : The Source file. (Flash CS3, AS3)
Tell me what you think about the tutorial above, it might not be as mindblowing compared to the others you have been reading, but I’d hope it would help you in your future projects or experiments. If you have any questions and comments, drop it down below, would be gladly to answer right away 
Cheerios!
You might also like this :
