with Android Template

TAT#02E

EASY WAY TO DEVELOP

KID JIGSAW GAMES

ACHIEVEMENT INDICATORS OF LEARNING

Readers can create / modify Kid Games Jigsaw simple application
using Adobe Flash CS6 Android Template.
DESCRIPTION
A jigsaw puzzle is a puzzle that requires the assembly of tiles
or pieces of each other so as to form a three-dimensional image or
structure. Jigsaw pieces can be made of cardboard, wood, plastic,
rubber, metal or foam. Jigsaw puzzles can range in difficulty from
very easy three-piece puzzles for toddlers to the current record
holder, Life - The Great Challenge, with a whopping 24,000 pieces!
Play jigsaw is exciting and intriguing. But often times we are
in repotkan with many pieces of pieces that we have to manage. In
this module we will discuss how to create a digital version of jigsaw
games using Adobe Flash Pro CS6 for android mobile devices. You
do not need to be confused to think about action script because we
have provided a template for your modifications. With minimal
experience and knowledge of action script, we are sure you are able
to create "Kid Jigsaw Games.
To reduce the effect of errors and facilitate finding out where
the mistakes so any changes do hold a trial run the program by
pressing ctrl-enter. When smoothly proceed further modification.
PREPARE STEPS
1. Open the Adobe Flash CS 6, wait until the display appears as
shown in the following pages.
Toni Setyawan, S.T., M.Pd. - flashbegin.com

Open

2. Then click open and select the file "AT Games Kid Jigsaw.fla".
How to get the file reading section at the end of this module.
3. Here we are treated to a flash document with a size of 480 x
800 in accordance with the majority of the screen size of mobile
devices, but you can merubahkan then adjust the zoom
according to your wishes.
4. flash document,

there

are

three

scenes

to simplify the

movement of the frame. Consider the following picture:

Clik the button to see the scene

Active scene

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

STEPS TO CHANGE OPENING

1. Change the active scene into scene opening

2. Notice the timeline as shown below

Frame with AS3

3. Make any changes to your taste. Good for layers, image,

animation or sound. In this stage you are free to change
anything except the position of the frame (at the end) that
contains action scripts and do not alter its contents AS3.
STEPS TO CHANGE CLOSING
1. Ubah scene aktifnya menjadi scene closing

2. Perhatikan timeline seperti gambar dibawah ini

Frame dengan AS3

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

3. Make any changes to your taste. Good for layers, image,

animation or sound. In this stage you are free to change
anything except the position of the frame (at the end) that
contains action scripts and do not alter its contents AS3
STEPS TO CHANGE LAYOUT
1. Change the active scene into scene core

In this scene there are several views that represent the core of
this application. Display / layouts in this template can all be
replaced or added to suit your taste. But if the media were
replaced have instant name must be replaced with similar
medium with instant same name. To maintain the smoothness
of the program, the media (and the button movieclip) should
not be replaced but only modified, so the media was not
replaced but altered. Here is the view that there is in this
template.

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

2. Be careful in changing the layout of the image on the left,

because the composition of the image such as a slider and will
be discussed in the next section.
3. The leftmost image is the display when selecting the image and
image types can slide up and down. The middle image display
when selecting the level and last while playing.
STES TO CHANGE INFORMATION
1. Still in the scene "core", the information is the display that
appears when the "i button" is clicked

2. To change it you can open a movie clip in the library with the
name "tekskerabat".

Double click here

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

3. After the click will appear as below

Sign if the view display

on stage is mc
tekskerabat

4. In this stage you can change anything according to your taste.

See the following figure :

Dont change

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

But do not change the properties of the movie clipnya symbol.

How to see the symbol of the properties is to right click on the
movie clip in the library and select Properties. Do not change
anything in the picture above, because it will make the action
script lost object to be called.
STEPS TO CHANGE JIGSAW PICTURE
1. Still in the scene "core", to replace the picture begins with a
double-click a movieclip with the name "mcgambar" in the
library.

Double click here

2. Will then appear as shown below.

Tanda jika view tampilan

di stage adalah mc
mcgambar
Ancor movie clip

From the picture above there are two things that need our
attention. First make sure if you're really editing mcgambar by
Toni Setyawan, S.T., M.Pd. - flashbegin.com

looking at the sign on the left above. Both ancor movie clip or a
point 0, 0 of movie clip should be at the top left end of the
image that we created. This is to ensure that the image display
and porongannya line with our expectations.
3. Note timelline movieclip as shown below.

AS3 layer is the layer that contains the script in the first frame.
Let it remain like this condition.
4. Picture layer is the layer that contains the images that will be
presented in a jigsaw games. Each frame contains one kind of
image.
5. To replace it you just remove the image on the layer and
replace with a new image.
Tips : There are two things to consider in the process of
changing images, the images are mounted using the size
of 400 X 400 pixels and replace it with another image of
the same size. Two sure ancor fixed position at the top
left corner of the image.
STEPS TO ADD JIGSAW PICTURE
1. Still in "mcgambar" and note the following Timeline
Right-click and
select Insert
Blank Keyframe
or press F7

Keyframe
appears
empty

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

2. Fill in the empty frame with the new image that you want.
(remember the tips in the previous step on the size and position
of the image)
3. Change the active scene into scene "cores". Notice his timeline.

Action Script window will appear as shown below

4. Change the 8 to 9 which means there are 9 kinds of images.

5. Edit movieclip named "mcisipic" by double-clicking its name in
the library.

Double click here

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

Click and drag the "mcgambar" in the library to the stage and
plug in the bottom of the order. Arrange two columns down the
image, add it to the next line and do not change the
composition of the two columns. So add an image in multiples of
2 so that the composition of the image remains tersusum neat
option.
Tips : Tetap susun dua kolom kebawah, ini adalah desain yang
dibuat untuk memudahkan dalam memodifikasi games
jigsaw ini dengan macam gambar yang beragam.
Tips : Tampilan semua gambar akan sama tetapi pada saat
program dijalankan akan muncul gambar yang berbeda
beda sesuai dengan urutan yang ada di mcgambar.
6. Name the instant at mcgambar new entries with the name
"tbpic9" as before "tbpic8".

Instant name

Tips : The name you enter must be in accordance with the rules
that have been set. This concerns the accuracy of the
action script to call the movie clip.
Tips : Click the movie clip to bring up propertiesnya.
7. Try the result of the modifications you have done by pressing
ctrl-enter. On select new image should appear pillihan with the
new image. When a new image is clicked will jump to display
the level of choice. Once the level selected will appear
immediately Jigsaw pieces with a new image.
Toni Setyawan, S.T., M.Pd. - flashbegin.com

10

STEPS TO CHANGE JIGSAW CUT

1. Still in the scene "core", select the level that you want to change
the flow of the pieces. Consider the following timeline image

Frame containing level 1

Frame containing level 2

Frame containing level 4

Frame containing level 3

2. To facilitate modifications eliminate the display of all layers

except the target and under.

3. Select the layer you want to change, then double click on the
state line rectangle which means entering into grub

Sign of entry to the Group

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

11

4. After that there could change the flow of pieces to your taste.
Suppose as shown below

Tips : Here you are only allowed to replace the piece without
increasing the number of pieces. If you want to increase
the number of pieces should use the step "increase the
level.
5. In this example we choose to change the ledge pieces at level 1
then the next step is to adjust the pieces in movieclipnya with
the plot. See in llibrary
Mc pot for level 1

6. Currently we are only making the flow potonganya but have not
changed the piece itself. To customize pieces with the plot. Let's
take the example of changing the mc Obj 1-1 pieces, then
double click on the mc.
Toni Setyawan, S.T., M.Pd. - flashbegin.com

12

Layer Action Script

Layer test objecs
Layer masking for gambar
Layer for mcgambar

7. Look at the picture above, to change the shape of the pieces

then we have to change the form in the layer mask. To facilitate
the process, create a new document with a white color and copy
groove stage pieces into a new document, then press Ctrl-B to
eliminate the groove groub in pieces.

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

13

8. Then create a shape with the piece groove.

Pieces 1
Pieces 2

Pieces 3

9. Copy the movie clip pieces into pieces. Pieces 1 for "mc Obj 11", 2 Pieces to "mc Obj 1-2" and 3 Pieces to "mc Obj 1-3", then
centerkan to ancor either vertically or horizontally.

sempurnakan

Tips : For memperbudah and enhance the position at the end of

regulation, reposition the mask shape on the x and y
coordinates with numbers easily. Example x: -108.5
changed to -110 and Y: -156.80 be - 155

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

14

10. Adjust the position of "mcgambar" in accordance with the

groove pieces. For conditioning your first piece for "mcgambar"
the top left. See the next page.

11. Lock all layers, then you will get something like the image
below.

12. Perform steps 9-11 for the other pieces on the movie clip "mc
Obj 1-2" and "1-3 mc Obj".
Toni Setyawan, S.T., M.Pd. - flashbegin.com

15

13. Once all the pieces have been appropriate, the next step is to
set the correct point for all the pieces.

point of truth
mc Obj 1-1

point of truth
target1

Move layer target to

the top layer pic

14. Arrange the pieces and to facilitate the setting point of the truth
moved while the target layer to the top layer pic. Then bring the
point of truth in the target layer to the pieces of truth point. Do
not be mistaken, the point of truth with instant name "target1"
point to the truth mc clip "mc Obj 1-1", "target2" point to the
truth mc clip "mc Obj 1-2" and "target3" mc clip to the point of
truth "Obj 1-3 mc ".
Tips : mc set pieces and carefully targeted to produce a perfect
image composition results.
Toni Setyawan, S.T., M.Pd. - flashbegin.com

16

STEPS TO ADD LEVEL

1. Masih dalam scene core, pilih level yang akan anda ubah alur
potongannya. Perhatikan gambar timeline berikut

Frame that contains level 1

Frame that contains level 2

Frame that contains level 4

Frame that contains level 3

2. To increase the level, means we have to add to the frame. The

first step is to make the back of an empty frame in the layer
"pic" and layer "target". Right-click the last frame then select
insert blank keyframe. Adjust the other frame and see the
results as shown below

3. At the target layer, make a rectangular image and cuts

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

17

4. In the previous picture, there are 16 pieces, this means that we

have to copy the "mc Obj x1" to "mc Obj 5.1" and so on a
number of 16 new movieclip.
5. Next, change the sprite each motorcycle according to the groove
cut in the same manner as steps 7-12 on STEPS TO CHANGE
JIGSAW CUT.
6. Once the piece is complete enter the movie clip "Target" from
the library to the stage by clicking and drug. Copy as many as
16 (since there are 16 pieces) and give instant sequentially
name "target1", "target2" and so on.

7. The key to the target layer and the next steps to fill a new
frame on the layer pic.
8. Enter by clicking and drug movie clip "mc Obj 5.1" and
seterusmya into the stage. Name the instant sequentially
"obj1", "obj2" and so on.
9. Stacking "mc Obj 5.1" and adjust the target in the same way as
step 13-14 on STEPS TO CHANGE JIGSAW CUT.
Tips : mc set pieces and carefully targeted to produce a perfect
image composition results.
Tips : store and try on every modification, if an error occurs you
will easily find out which parts of the program that makes
the error.

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

18

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 Games Kid Jigsaw.fla
visit our blog at

http://temp.flashbegin.com

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

19

flashbegin.com
Tutorial Android Template (TAT)

how to get template fla, visit :

http://temp.flashbegin.com
or

email me : tonimation@gmail.com
subject : need flashbegin template

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