What is brightness and contrast adjustment in digital photo editing?

---

colour adjustment: brightness and contrast

What is brightness and contrast colour adjustment?

The Brightness adjustment will make your image brighter as you increase its value.

The Contrast adjustment will make your lighter shades lighter and darker shades darker as you increase the value and will generally make your picture flatter as you decrease it.

We will be using the free online photo editing software pixlr.com to demonstrate the brightness and contrast adjustment.

1) Browse URL http://pixlr.com/editor/

The application starts with a wizard.

2) Copy the URL of the image below. (In Chrome Browser, right-click and select “Copy Image URL”).

3) Refer step 1. Click the option “Open image from URL”

4) Paste the URL (in Step 2) into the Open Dialog Box.

5) The image is loaded to the application.

6) Go to menu Adjustment/Brightness & Contrast...

7) By decreasing the Brightness value to -30, the colour for the sky and the sea could be improved.

However, the green trees on the island become too dark.

8) By decreasing the Contrast value to -30, the green trees look better.

However, the image looks flat, i.e the objects in the image are not distinct from one another.

From this example, we can conclude that Brightness and Contrast help to quickly improve the colours of the image. However, adjustments are applied to the entire image without considering the darkest and lightest part of the image which results in rather “flat” and less appealing outcome.

---

Setting up a ColdFusion site in Dreamweaver CS5

-----

 Requirements

User level

Beginning

Required products

• ColdFusion (Download trial)
• Dreamweaver CS5 (Download trial)

Sample files

• cf_test.zip (106 KB)

This article is extracted from http://www.adobe.com/devnet/dreamweaver/articles/setup_cf.html

Setting up a ColdFusion site in Dreamweaver CS5

Once you have installed ColdFusion, you're ready to start developing ColdFusion pages and applications in Dreamweaver. In order to display your pages in Live view or Preview In Browser, the dynamic code needs to be processed by the ColdFusion server. This means storing your pages inside the server's document root. If you followed the instructions in the preceding pages, the document root will be at the following location:

• Windows: C:\ColdFusion9\wwwroot
• Mac OS X: Applications/ColdFusion9/wwwroot

Note: Strictly speaking, you can store your ColdFusion files anywhere on your computer, but they need to be copied to the ColdFusion server whenever you view them. So, it's common practice to store them inside the document root in the first place. This avoids cluttering your hard disk with duplicate files.

Instead of accessing the files directly, you need to use a URL. The URL for the ColdFusion document root ishttp://localhost:8500/ or http://127.0.0.1:8500/. Both represent the same place: localhost is an alias for 127.0.0.1, the loopback IP address meaning this computer. The :8500 indicates the port used by a ColdFusion development server.

If you locate all your files in the wwwroot folder, you can create only one site. So, it's usually more efficient to develop your ColdFusion sites in a subfolder of wwwroot. You add the name of the subfolder to the end of the URL in the same way as you would for a subfolder in a live website. For example, if you create a site in a subfolder called cftest, the URL becomeshttp://localhost:8500/cftest/.

1. Download the sample files for this article (the link is on the first page), and unzip them.
2. Create a new folder called cftest in the ColdFusion server document root. In Windows, the folder will beC:\ColdFusion9\wwwroot\cftest. On a Mac, it will be Applications/ColdFusion9/wwwroot/cftest.
3. Copy the sample files into this folder. You should have three subfolders called _notes, assets, and data, and a file calledcomments.cfm (see Figure 15).

Figure 15. Place the sample files in a subfolder of the ColdFusion server's document root.

1. In Dreamweaver CS5, select Site > New Site.
2. In the Site Setup dialog box, type ColdFusion Test as the Site Name.
3. Click the Browse for Folder icon to the right of the Local Site Folder, navigate to the cftest folder in the ColdFusion server document root, and select it. On Windows, Local Site Folder should displayC:\ColdFusion9\wwwroot\cftest\ (see Figure 16). On a Mac, it should be /Applications/ColdFusion9/wwwroot/cftest.

Figure 16. Create the basic site definition in Dreamweaver CS5.

1. You don't need to define the testing server for a site until you're ready to start testing, so you could click Save at this point. However, since you're going to test the site immediately, select Servers from the list on the left of the Site Setup dialog box.
2. Click the plus (+) button at the bottom left of the Servers panel to add a new server.
3. With the Basic button selected at the top of the dialog box that opens, select Local/Network from the list of Connect Using options. Although there is also an RDS option, using Local/Network is quicker and easier when working with a local development server.
4. Give the server a name, such as Local Testing.
5. Set the Server Folder text field to the same value as you used for Local Site Folder. On Windows, this isC:\ColdFusion9\wwwroot\cftest\, and on a Mac, /Applications/ColdFusion9/wwwroot/cftest.
6. Type the URL for the testing server in the Web URL text field (see Figure 17). On both Windows and Mac, this ishttp://localhost:8500/cftest/.

Figure 17. Specify the basic settings for the testing server.

1. Click Advanced at the top of the dialog box. For the Server Model select ColdFusion (see Figure 18), and click Save.

Figure 18. Set the Server Model option to ColdFusion.

1. Make sure the Remote check box is deselected and the Testing check box is selected (see Figure 19), and click Save to complete the site and testing server setup.

Figure 19. Make sure the Testing check box is selected.

The Dreamweaver site is now defined and the sample files installed. The next step is to connect to the sample database included in the sample files.

Connecting to a database

This section describes how to create a connection to a sample database. The sample files you copied in the previous section include an embedded Derby database. Derby is supported in all operating systems that ColdFusion supports and is therefore a great solution for cross-platform development.

When developing a ColdFusion web application in Dreamweaver, you connect to a database by selecting a ColdFusion data source defined in ColdFusion Administrator, the server's management console. A ColdFusion data source is a type of shortcut to a database. Dreamweaver uses the data source to create a connection to the database.

For information on connecting to other database systems, see Database connections for ColdFusion developers (link to DW CS5 help page) in the Dreamweaver online help.

Create a ColdFusion data source

To create a ColdFusion data source, follow these steps:

1. First, you need a ColdFusion page open in the Dreamweaver Document window. Although the sample files containcomments.cfm, it contains a reference to a data source that doesn't yet exist. So select File > New, and create a blank ColdFusion page. There's no need to save it, because it will be deleted once the data source has been established.
2. Choose Window > Databases to open the Databases panel (or press Ctrl+Shift+F10 on Windows or Shift+Cmd+F10 on Mac OS X). There should be check marks against the first three items. The next stage is to specify the RDS login information for the ColdFusion server. Click the link in item 4 (see Figure 20).

Figure 20. Set the RDS login information for the ColdFusion server.

1. In the dialog box that opens, type admin as the User Name.
2. Type the RDS password you created for the ColdFusion administrator as the Password, and click OK.
3. Click the data source link in item 5. If it's no longer visible in the Databases panel, switch to the Bindings panel, and click the data source link there. This launches the ColdFusion Administrator in your default browser. Enter your ColdFusion administrator password if necessary.
4. The ColdFusion Administrator should open automatically in the Data Sources screen. If it doesn't, select the Data Sources link in the left sidebar.
5. In the Data Source Name text box, type connTownsend (no spaces).
6. Select Apache Derby Embedded from the Driver list.
7. Click Add.
8. Click the Browse Server button next to the Database File text box, and then locate and select the conntownsend2 folder.
9. The folder should be located in the following folder:
10. \ColdFusion9\wwwroot\cftest\data\conntownsend2
11. Ensure that Create Database is not selected.

1. Click Submit to accept your choices.
2. In Dreamweaver, click the Refresh icon at the top right of the Databases panel (see Figure 21) to display the database connection. Expand the connTownsend branch and then the Tables branch to show three tables.

Figure 21. Click refresh and expand the tables in the Databases panel.

1. Close the blank ColdFusion page, and open comments.cfm in the Document window.
2. The central section contains dynamic text objects highlighted in light blue (see Figure 22).

Figure 22. The sample page contains ColdFusion dynamic text objects.

1. Click Live View. Dreamweaver connects to the database through the ColdFusion server, and displays the results from the database (see Figure 23).

Figure 23. In Live view the page is populated with data drawn from the database.

To learn more about creating web applications with ColdFusion, visit the Getting Started page in the ColdFusion Developer Center.

Flash Builder: Creating App Icon

-----

Flash Builder 46 Creating Converter 4 App Icon

CREATING ICON

1) For this exercise, a sample icon has been downloaded from http://files.softicons.com/download/application-icons/mega-pack-icons-1-by-nikolay-verin/png/256/Any%20DVD%20Converter.png

2) To generate various icon sizes automatically, browse URL http://makeappicon.com/

3) Upload the above icon image using the upload button

4) The site will convert the icon into Android icon sizes.

Click Android button.

Download the files and name them logo36x36.png, logo48x48.png and logo72x72.png respectively.

5) Open your project file, e.g., download Converter4.fxp file and import into your Flash Builder.

6) Drag the images to your project's asset folder.

6) Edit the Application Descriptor File.

6a) Find the file, e.g., Converter4-app.xml

6b) Open the file and look for the icon section.

6c) Delete the codes marked by the red rectangle (refer the above screenshot).

6d) Insert the file paths assets/logo36x36.png, assets/logo48x48.png and assets/logo72x72.png in between the remaining tags.

6e) Outcome:

7) Build the Android App and install it to the Android Device.

Notice that the logo appears as the App Icon.

Flash Builder: Easy Way To Export Mobile Project To Android APK File

Flash Builder 46 Easy Way To Export Mobile Project To Android APK File

1) Open your project.

2) Go to File/Export...

3) In the Export Window, select Flash Builder/Release Build.

4) Select only Google Android. Click Next.

5) Export Release Build Window

5a) In Deployment Tab...

Select Install and launch application on any connected devices

Export Options: Select Export application with captive runtime.

5b) Digital Signature Tab.

Create a self-signed certificate.

Simply type "a" for all the required fields as shown below.

Outcome:

5c) Click Finish.

6) Search the generated .apk file (in the example above) in the project folder.

Notice that Converter4.apk is at the bottom of the file list.

You can copy this file to an Android machine and install it manually.

7) You can send the file to an Android device via few ways:

7a) USB connection (transfer via cable connection)

7b) Internet (upload a site and use Android to download the file from the site)

7c) Wifi Sharing App (Install an app such as WebSharing Lite, activate the sharing mode and use your PC Web Browser to access the Android device and copy file into the device)

*** As an alternative to Step 5a, you can select Export Options: Export application that uses a shared AIR runtime.

As a result, you get a much smaller file as shown below. However, the user needs to install AIR first before running the app.

DOWNLOAD: Converter.apk 

Flash Builder: Creating Converter App 4 (Orientation, Function and Background Image)

Flash Builder 46 Creating Converter App 4 (Orientation, Function and Background Image)

1) Create new Flex Mobile Project.

1a) Project Location.

        Project name: Converter4

1b) Mobile Settings.

        Target platforms: all.

        Application Template:View.

1c) Server Settings.

        Application server type: None.

1d) Build Paths.

        Application ID: com.example.converter4

2) Project creation done.

3) Set Device:Samsung Galaxy Ace and Switch to Design mode.

4) Set Run Configuration.

        Target Platform: Google Android

        Launch Method: On Desktop:Samsung Galaxy Ace

5) Add components to View.

5a) Switch to Source Mode.

5b) Highlight </fx:Declarations> tag.

5c) Replace with the following codes:

        <fx:Declarations>

                <s:RadioButtonGroup id="radiogroup1"/>

        </fx:Declarations>

        <s:Group width="100%">

                <s:Group width="100%" height="100%">                

                        <s:Label id="label1" x="10" y="10" text="Select Measurement:"/>

                        <s:VGroup x="10" y="29">

                                <s:RadioButton id="radioButton1" label="Inch"
groupName="radiogroup1"/>

                                <s:RadioButton id="radioButton2" label="Centimeter"
groupName="radiogroup1"/>

                        </s:VGroup>

                        <s:Label id="label2" x="10" y="111" text="Input value:"/>

                        <!-- SLIDER -->

                </s:Group>        

                <s:Group width="100%" height="100%">

                        <s:Label id="label3" x="10" y="226" text="Inch:"/>

                        <s:TextInput id="text2" x="10" y="249" width="200"/>

                        <s:Label id="label4" x="10" y="290" text="Centimeter"/>

                        <s:TextInput id="text3" x="10" y="313" width="200"/>

                </s:Group>

        </s:Group>

5d) Outcome:

5e) Check in Design Mode.

6) Change the View Title.

6a) Double-click the HomeView caption and replace with Converter.

6b) Notice that the Title value is updated in the Properties panel.

7) Add the HSlider component.

7a) Add to the empty area between Input value: and Inch:.

7b) Check in Source Code that your component goes to the right group.

7c) If it doesn't (like the above example), move it manually.

8) Edit HSlider properties.

8a) In the Outline Panel, select Hslider component.

8b) In the Properties Panel, set the ID:hslider1.

8c) In the Properties Panel, click the drop-down button for On Change and select Generate Event Handler.

8c) Flash Builder will auto generate the codes and show them in Source Mode.

Scroll to find the function definition section ( in <fx:Script> ).

8d) Replace //TODO Auto-generated method stub with the following codes:

9) Run and Test.

a) Inch.

b) Centimeter.

10) Add the landscape state.

10a) Add the state.

10b) Select landscape state.

10c) Select the outer <s:Group>.

10c) In Properties Panel, set Layout: sparks.layouts.HorizontalLayout.

10d) Possible outcome:

11) Edit the codes.

11a) Switch to Source Mode.

11b) Edit both the inner <s:Group> by adding width.landscape="40%"

11c) Edit the hslider1 by adding width.landscape="100%"

12) Change state1 state to portrait.

12a) In States panel, edit as follows:

12b) Select portrait state.

12c) Select the outer <s:Group>

12d) In Properties Panel, set Layout: sparks.layouts.VerticalLayout.

12e) Check in Source Mode that the <s:states> codes are correct as follows:

13) Reposition the coordinates for objects in the second inner <s:Group> with the new values as follows:

                        <s:Label id="label3" x="10" y="10" text="Inch:"/>

                        <s:TextInput id="text2" x="10" y="30" width="200"/>

                        <s:Label id="label4" x="10" y="70" text="Centimeter"/>

                        <s:TextInput id="text3" x="10" y="90" width="200"/>

14) Check the outcome of your code changes.

15) Run and test orientation.

15a) Portrait.

15b) Landscape.

16) Add a background colour.

16a) Find the <s:View> tag (on top most part of the codes).

16b) Add the code backgroundColor="#d39d56".

16c) Outcome:

17) Add an image to create background effect for the first inner <s:Group>

17a) Find the beginning of the first inner <s:Group>

17b) Add the following codes on top of other component codes:

                <s:Image x="0" y="0" width="100%" height="100%" scaleMode="stretch"/>

17c) Switch to Design Mode. Go to Outline panel and select the Image component.

17d) Go to Properties panel and find the Source field.

17e) Save the image below as converter.jpg .

17f) Click the drop-down button for the Source and select Single Bitmap.

17g) Select the copy asset option.

17h) Check the codes.

i) Check the codes for <s:Image>. Edit if necessary so that it looks like below.

ii) Add the following codes to the outer <s:Group> to fully wrap the entire screen:

        width="100%" height="100%"

18) Add bold effect to the labels.

18a) Switch to Design Mode.

18b) Use [Select]+[Click] technique to select the two labels below.

18c) Go to Properties Panel. Find the fontWeight item and set as bold.

DOWNLOAD: Project File (Complete)