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)