Download - 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..
Toni Setyawan, S.T., M.Pd. - flashbegin.com 2
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 3
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 4
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 5
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.
Toni Setyawan, S.T., M.Pd. - flashbegin.com 6
9. Press the OK button and wait a moment. If successful then the
popup will appear as shown below.
Tab Icon
Toni Setyawan, S.T., M.Pd. - flashbegin.com 7
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 8
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!”
Toni Setyawan, S.T., M.Pd. - flashbegin.com 9
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 ".
Toni Setyawan, S.T., M.Pd. - flashbegin.com 10
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 11
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 12
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 13
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”
Toni Setyawan, S.T., M.Pd. - flashbegin.com 14
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 15
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.
4. Try the function of each button on the main menu navigation
along with the emulator provided flash or press ctrl-enter.
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 16
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.
Toni Setyawan, S.T., M.Pd. - flashbegin.com 17
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 18
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 19
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 20
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 21
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
Toni Setyawan, S.T., M.Pd. - flashbegin.com 22
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.
11. Try the function of each button on the main menu navigation
along with the emulator provided flash or press ctrl-enter.
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.
Toni Setyawan, S.T., M.Pd. - flashbegin.com 23
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)