Looking for a way to make three sliders affect an image (as a teaching tool)

Question

I tried looking for this in search, but it is a lot of individual things packed together. What I am looking to make for my students is an interactive display of the triangle of exposure on a camera.

It has three sliders that show what happens with different settings. One is ISO (controls dark and lightness), another is shutter speed (which controls background blur/depth of field), and aperture, which controls motion blur. I was able to make a slider that effectively changes the test image in darkness. I am currently working on the slider for shutter speed.

I am wondering if the interaction between the sliders would be better accomplished through switching between PRE-PHOTOSHOPPED images by substitution, or using AS3 to accomplish changes on the fly. For instance, if they move the sliders for shutter speed and ISO at the same time, it gets dark AND has background blur. do I need to pre-photoshop every possible option, and switch symbols, or can I do it interactively with AS3?

Here is my code:

import flash.utils.getDefinitionByName;
        import fl.motion.Color;

import fl.events.SliderEvent;
var myImageName1 = "blurback.jpg";
var classRef:Class = getDefinitionByName(myImageName1) as Class;
var instance:MovieClip = new classRef();




var c:Color=new Color();
var color = "#000000";


ISO.addEventListener(SliderEvent.CHANGE, sliderChanged);
aperture.addEventListener(SliderEvent.CHANGE, apertureChanged);



function sliderChanged(evt:SliderEvent):void {

tintClip();

}



/*
The 'setTint' method of of the Color class takes two parameters: tint 
       multiplier, 
(a number between 0 and 1), and a tint color.

The tint multiplier, is determined by the positon of the slider, 'val'      
and equals val/100.
The tint color, 'color', is determined by the color selected
in the picker. 
*/

function tintClip():void {



var val:Number=ISO.value;

c.setTint(color,val/10);

kitty.transform.colorTransform=c;



}
function apertureChanged(evt:SliderEvent):void {

gotoAndPlay(2);


/*kitty.addChild(instance);*/

}

I am still experimenting with the second slider, so the gotoand play is a work in progress on substituting a pre-background-blurred image when the slider is slid.

Here is a pic of the final image, with the sliders named appropriately. link: Final image

Answer 1

One is ISO (controls dark and lightness), another is shutter speed (which controls background blur/depth of field), and aperture, which controls motion blur.

ahem

All of the three settings influence the exposure value, making the image lighter or darker. Additionally:

• ISO has an effect on noise in the image, which can severely degrade image quality
• shutter speed is actually the one influencing motion blur and visibility of camera shake
• aperture (among other things) influences depth of field

I am wondering if the interaction between the sliders would be better accomplished through switching between PRE-PHOTOSHOPPED images by substitution, or using AS3 to accomplish changes on the fly.

Neither of them is a good option.

• Recreating the effects of the different settings with As3 realistically will take a lot more time (if possible at all) than simply having several images.
• Recreating the effects in photoshop is probably easier as it is equipped with dozens of photo editing tools, but you'd still have to create the effect realistically.

Instead of photoshopping things, show your students the real deal:

1. Setup a subject in front of a background to show possible changes in depth of field
2. Include a solid color area where noise will be easy to see. This could be the background.
3. Add some motion, to show motion blur. A fan as a subject comes to mind.

Then take those images by varying the settings. Sure, with 5 different values each, you get 125 images. But you get real world example photos. Keep the resolution low, so that the image files aren't too big. Process them by reducing resolution further to a reasonable size, say 800 x 600.

With the images created load them into your swf with the Loader class. The easiest way to keep track of them is to have a three dimensional array of Loader objects. Each slider then manipulates one index to change the image.