tat learning applications en

with Android Template

TAT#01E

Toni Setyawan, S.T., M.Pd. - flashbegin.com 1

Early Surgical Template Module PUBLISH TEMPLATE ADOBE FLASH PRO CS 6

TO ANDROID FILE (apk)

ACHIEVEMENT INDICATORS OF LEARNING

Readers can make a simple android application using Adobe Flash

CS 6

DESCRIPTION

Android is an operating system for mobile phones are popular.

As of November 2013, Android's market share is said to have

reached 80%. Of the 261.1 million smartphones were sold in

August, September, and October 2013, approximately 211 million

were Android devices.

Flash is a software that is able to create animations with ease.

To create a simulation or animation that has interactions with the

user, flash animations can be added additional programs are often

called Action Script. This interactive animation is suitable for making

learning applications. Besides being able to run autonomously /

stand alone flash can also be run using the internet browser, to

many websites that beautifies and adds animation to maximize the

functionality of the web.

By using Adobe Flash CS 6, we can publish the fla into apk or

app for mobile / tablet android. So for those of you who are used to

using flash to create a wide variety of both interactive animated or

not, you will easily be publish android application..


STEPS

1. Open Adobe Flash CS 6, wait until the display appears as

shown in the following pages

2. Then click open and select the file "AT Aplikasi Edukasi.fla". .

How to get the file reading section at the end of this module

CLOSING. This template takes the size of 480 x 800 according

to the screen size of the HP.

Open

State size

edit application setting


Tips : For ease in handling the file, preferably all related files in one project you gather in one folder. For example, the template fla file, the program icon, developer certificate and supporting media.

3. Next, let's try to make Android a way to publish a template into

android app (apk). The first step to change Android settings by

clicking "edit application settings" (wrench icon) as shown in

the image above.

4. After the display appears as shown below to change the

contents being expressed arrows 1 (apk file name published

results), 2 (name setekah applications installed on the device)

and 3 (settings screen). Other fields were ignored.

Tab Deployment

1. Apk file name results publish

2. Name of the appli- Cation after installed on a cell phone

3. Setting the display on the phone screen


5. Change parameters by clicking on the tab next deployment,

then the image will appear as in the following pages.

6. Fill Certificate by finding the position of a certificate along with

the password file by clicking the browse (4), example

"flashbegincom.p12" (certificate which I have) and password

flashbegin (5), then go to step 8 of this file can be found at

http://blog.flashbegin.com.

4. Certificate file name publishing your Android

5. Password you created when creating a certificate your Android

Create your own certificate


If you want to have it yourself, you can make it by clicking on

the Create button. Then fill in the appropriate fields as shown

by the arrows stuffing you want..

7. Before you proceed, make sure your computer is connected to

the Internet. After clicking the OK button will appear in

accordance with the file name listed in the columns save as. To

make the process of publishing the files should be placed into

the same directory as the fla file that you created.

8. Next, change the icon for the application that you created by

clicking on the Icon tab. Select the image size icon you have,

the greater the detail (I used to use size 72 x 72). You should

first create an image with the first image processing and then

export to png (transparent background familiar icon) and place

it in the directory where you create application.


9. Press the OK button and wait a moment. If successful then the

popup will appear as shown below.

Tab Icon


10. By using windows explorer make sure the apk file will appear in

the directory where you save the fla.

11. Then copy the apk file that you created to your mobile device.

12. Install the application you created with the way you install

other applications. If the process has been completed and

successfully install the program icon will appear as shown

above on the right. Picture icon that appears depends on the

image that you use

Apk File


13. Run the application that you created such as running other

applications, when the display appears as shown below, means

...

“Congratulations you have successfully membua android app!”


Surgical Template Module DEVELOPING LEARNING APPLICATION

WITH ADOBE FLASH PRO CS 6 ANDROID TEMPLATE

ACHIEVEMENT INDICATORS OF LEARNING

The user makes learning android application utilizing the

template using Adobe Flash Pro CS 6

DESCRIPTION

In developing learning media, developer must have reference

materials used for guidance. This reference materials such as :

1. idea / theme

2. competency map

3. concept map

4. outline of Contents Media

5. elaboration of material

6. flowchart

7. scrolls

All reference materials as controlling the development process in

order not to deviate from the initial concept development.

Maybe you are too busy preparing for a reference, but my

advice you should still think about though not put it in the paper.

When we develop instructional media with reference to the media

that you will develop competencies directed to achieve the goals

set.

EARLY STEPS

1. Open the Adobe Flash CS 6 then open the file " AT Aplikasi

Edukasi.fla ".


2. Adjust the scene that was in the template with the hierarchy

that you created. To understand see examples on the following

pages :

3. To make the adjustment, go to the pulldown menu at the scene

Docker Windows> Other Panels> Scene. If you correct the

command will appear as shown below :

4. Use the command delete duplicate scene to scene and

customize it.

Opening

Menu Utama

Pengantar Materi 1 Materi 2 Tes Closing

Scene Materi 1

Klik delete Scene

Double Klik untuk mengedit nama Scene

Scene Materi 2

Scene Pengantar

Scene Tes

Scene closing

Scene Menu

Scene Opening

Klik duplikat Scene


5. When the number of scenes are in accordance with the

hierarchy, then edit the scenes "opening" to your liking, by

means of the following.

6. Then change the animation as you want to edit an image and

process tween. (use science flash animation drawing)

7. When you change the location of the United States, please note

the opening frame fixed at the initial position and teralhir, see

the image below.

8. Try opening the display that you change the emulator provided

by way of flash or press ctrl-enter.

click to Edit Scene

Then chose opening

Frame with Script


STEPS TO EDIT MENU UTAMA

1. Next, change to the menu display in the scene "menu" key a

manner as the initial step in step No. 5.

2. Change button in the main menu as a hierarchy according to

your

3. Customize button to the menu you want to display. In the

example there are four scenes (pengantar, materi1, materi2

dan tes to be displayed, then there are 4 buttons to navigate.

4. Perform the delete button to reduce it to fit your hierarchy.

5. Duplicate button in the library by right click and then select the

duplicate, then fill in the name of the new results of duplicate

keys.

Button to Materi 1

Button to Materi 2

Button to Uji Kompetensi / Tes

Button to Keluar/closing

Button to Pengantar


6. If the library has emerged a new button, click and drug it to

the stage. Adjust the position of each key to match.

7. The text that appears in the new key is still in accordance with

the old key. To edit the text by double-clicking the button will

be changed.

8. Attach the United States for each button and adjust the

command as shown below :

1 2 3 4 5 6 7 8

//jangan diubah tbmetu.addEventListener(MouseEvent.MOUSE_UP,clikmetu); //ubah AS untuk memasang fungsi tombol menu utama; arahtombol("tbmenu0","pengantar"); arahtombol("tbmenu1","materi1"); arahtombol("tbmenu2","materi2"); arahtombol("tbmenu3","tes");

Action Script Explanation Line 2 : Do not change the Action Script in this frame Line 5 - 8 : function to direct the order button, one row of

buttons. Example: Button with the name of instant "tbmenu0" function to jump to a scene “pengantar”.

Right-click one of the button and select duplicate

AS3 to direct button, the row of the button example: Button with the name of instant "tbmenu0" function to jump to a scene “pengantar”


9. Try the function of each button on the main menu navigation

along with the emulator provided flash or press ctrl-enter.

STEP TO EDIT MATERI

These templates are introductory scene, the scene contents

only 1 frame. To make changes to the contents of your stay

dimkasud modify the display frame. If you want to make with a lot

of pages, you should modify the scene copied and materials.

In this scene there is a template material in 5 frames. Each

line represents a time frame on 1 page view, so do not make the

animation / tween here. Adjust the media contents of each frame

with the existing look like. Attain a scrip action on US layer remains

in such formations. If you will add or reduce the number of frames,

the US conditioning your first frame layer remains on the United

States. Step edit it as follows.

1. To change the content of the material, the first step is the

opening scene material in a way like the first step on step No.

5. Adjust the frame to the number of pages you want to

display.

2. Adjust the number of pages / frames in the following as

1 2

//angka 5 menandakan materi ini ada 5 frame. awalframemateri(5);

Pertahankan AS di awal frame


Action Script Explanation Line 2 : number 5 on the command function of this

material indicates there are 5 frames.

3. Enter all media (text, images, animations, video, etc.) in

accordance with your wishes. Here you drawing flash capability

is needed. To modify the material in a way:

To enter text by editing the text in the template, can also

set the position of the text. To change the contents of the

existing text in the template you just double click on the

text.

To insert an image by means of import and set at the state

or taken from the library by clicking and drug from the

library to the state.

To include animations, created first in the form of

animated movie clip in the library. Subsequently click and

drag the movie clip in the library to the state in

accordance with your wishes.

To enter the voice recommended using AS 3 script so it

will be easy to set up when the advent of sound.



5. When finished 1 lanjukan material into another material.

STEPS TO EDIT QUIS

In the template there is a multiple choice quiz that contains

15 kinds of questions that appear randomly 10 questions. The first

frame is the opening quiz, frame 2-31 contains problem and

settlement, as well as the frame 32 contains resumes quiz results.

Each question consists of 2 frames, 1 frame and contains about 1

frame containing the settlement. If you want to change the kind of


matter, the rule used susuaikan. For example there want to make

because there are 20 kinds of rules as it is the opening frame 1,

frame 2-41 contains problem and settlement, as well as resume

contains 42 quiz results. Step edit it as follows.

1. To change the contents of the quiz, the first step is to notice

the timeline of this template.

AS layer containing action script

Frame in the layer that contains the contents of the opener, questions, completion and resume.


2. Before filling the display about the first set in the Action Script

form quis on frame 1 as shown on the following page

1

2 3 4 5 6

//sesuaikan macam soal, tampil soal, respon dan penyelesaian; macamnya = 15; tampilnya = 10; bikinrandom(true); adarespon = true; adapenyelesaian = true;

Action Script Explanation Line 2 : macamnya = 15 meaning there are 15 kinds of

matter. Line 3 : tampilnya = 10 existing means for performing

quiz 10 questions. Line 4 : dirandom = true, means the emergence of matter

not made random order, if you want not random then the true word changed to false.

Line 5 : adarespon = true, means quis that you create display the correct response to each question wrong. Change so false when not wanted.

Line 6 : adapenyelesaian = true, means quis that you create display resolution of a matter. Change so false when not wanted.

3. In this template is opening the first frame and the last frame is

quis quis resume. Adjust the amount of frames with a wide set

of problems that exist for the quiz you created. When reduced,

you just remove the frame between 2-31 according to set your

quiz. When added, you just multiply the copied frames 2-31. It

must be remembered that the first problem is represented by

the two frames, so to copy or delete must be a pair. Adjust the

number of frames used to matter that you create.

4. Next, change the display problem with how to edit and adjust

the position as a regular flash editing. In addition to the

existing text in the image above, the matter can also add an

image or animation. Add the same way as the other flash

animation. All display the images on the following pages can be


adjusted its position. But the change should not be changed

radically since it will not eye-catching. Try to appear

harmonious to each question would be great. Navigation

buttons should also not be repositioned in order to sync with

the matter and more views. For details, see picture on next

page.

5. After about the display is adjusted, do not forget to change the

action script on it that contains the answer key. The trick is

This text will be generated automatically but change to identify the "about to". Double-click to change

This text contains questions that you want to display in the quiz. Double-click to change

This text contains the answer that you want to display in the quiz. Double-click to change

Navigasi Button


shown in the picture below

1 2

//sesuaikan kuncinya kuncinya("b");

Action Script Explanation Line 2 : letter "b" denotes the function key command in

the frame is the answer to question b. Adjust the answer key to the questions that appear

6. Next, change the display about the manner shown in the figure

on the following page

7. Action script settlement that are above the frame does not

Adjust the answer key to the questions that appear

This text was automatically generated results should not be changed.

This text contains explanations that you want to display in the quiz. Double-click to change

Navigation Button

All views in the above can be repositioned same as step 4

Button to go to the next question


need to be changed because it will ruin all the strands that

have been made. Just leave it as shown below.

1 2

//jangan diubah dipenyel();

Action Script Explanation Line 2 : Do not change the Action Script in this frame

8. Next, change the display resumes according to your taste.

Turning the same way as other display change that has been

discussed previously. For more details see the description in

the figure on the following page

Avigation button

All views in the above can be repositioned same as step 4

Button to repeat this quis

Comment quiz results

Respone each question

True asnwer

Wrong answer

Values obtained


9. If you want to display questions that are not 10, then you can

change the number of answers each question response to your

liking. Just copy the movieclip box below matter. Do not forget

to adjust Instant his name by an item in the response. Note the

picture on the following page:

10. Change also the action script on the frame above the frame

resume in a way that is shown in the picture below

1 2 3 4 5 6 7 8 9 10

11 12

//AS memberi komentar, sesuaikan if (betul == 10) { komentar.text = "Jawaban Anda sempurna"; } else { if (betul>7) { komentar.text = "Masih ada salahnya, belajar lagi ya!"; } else

res10 mean responses to questions # 10


13 14

15 16

{ komentar.text = "Anda harus belajar lagi!"; } }

Action Script Explanation Line 2 : ten figures show if all the correct answers. Line 4 : "Jawaban Anda sempurna" comment when all

the correct answers. (10). Line 8 : 7 graduation is the limit specified. Line 10 : " Anda lulus tapi masih ada salahnya, belajar

lagi ya!" graduation intemperate comments when specified (7).

Line 14 : " Anda tidak lulus, ayo belajar lebih giat lagi!" comment when not specified graduation intemperate.

Tips : AS3 change the advice shown, do not alter the other Action Script.



FINAL STEPS

1. The final step is to change closing by opening the closing scene

in a way as the early step in step #5.

2. Edit the closing scene to your liking, with rules such as

changing the opening scene.

3. Save the template with a new name and then publish to the

apk. Before its way to the user, the application should try to be

detailed in an actual device, so that there are no errors in the

implementation.


CLOSING

The last step in order to flash this document can be published

or android app apk file we've discussed in the blog. To learn please

visit:

http://flashbegin.com

After the surgical study and understand this module means

you are able to create media-based learning android application.

Furthermore, to know how to get the “AT Aplikasi Edukasi.fla” visit

our blog at

http://temp.flashbegin.com

Toni Setyawan, S.T., M.Pd. - flashbegin.com

how to get template fla, visit :

http://temp.flashbegin.com

or

email me : [email protected] subject : “need flashbegin template”

flashbegin.com Tutorial Android Template (TAT)

tat learning applications en

Software