1
Smart Apps Creator 3
Easiest Way to Design
Step by Step Book
*Some part of the manual and screenshots in this book are made with Smart Apps Creator 2,
but user interface are very similar to Smart Apps Creator 3 (which is released in 2017).
*In August 2018, we released AppSHOW application in GooglePlay and Apple Store. Users
are able to download to mobile device and view HTML5 right thru this app. Please search
AppShow in GooglePlay and Apple Store for further information.
*You are free to download all project files and graphic resources in this book thru
www.smartappscreator.com (In the site, search for support page > download page > Smart
Apps Creator 3 step-by-step tutorial resources)

2
Table of Content
Manual & Output Function
Ch. 0 Introduction ..........................................................................................................................P.3
0-1 Smart Apps Creator.................................................................................................................P. 3
0-2 Smart Apps Creator 3 Manual ...............................................................................................P. 5
0-3 Real-Time Test ......................................................................................................................P.22
0-4 Output to Android (.apk), iOS (.Xcodeproj), Windows (.exe), and HTML5 ..................p.24
Project Tutorial
Ch. 1 Universal Studio Map Guide......................................................................................P.37
Ch. 2 New York City Tourist Guide....................................................................................P.70
Ch. 3 Spot-the-difference.....................................................................................................P.91
Ch. 4 Advanced Skill – Whack-a-mole game design .........................................................P.112
Ch. 5 Chinese Character .....................................................................................................P.133
Appendix
Apple Store publish steps..................................................................................................P. 141
GooglePlay publish steps..................................................................................................P. 151
JSON database building steps...........................................................................................P. 161
Message Delivery steps.....................................................................................................P. 179
Excel sheet convert to JSON steps ..................................................................................P. 183
How to get images and music that you can reuse .................................................................. P. 186

3
Ch. 0 What is Smart Apps Creator 3
Interactive multimedia content app tool
Smart Apps Creator 3, is a powerful interactive multimedia content app tool. Operated as
offline PC software, its strong functionality and creativity helped all level users design and
publish apps easily without programming skill. Smart Apps Creator 3 converts .pdf file,
storyboard and creativity into Android, iOS app, exe file and Html5. Smart Apps Creator 3
builds wide-range of interactivity and animation which doesn’t require frustrating tech
knowledge.
.
Smart Apps Creator 3 features:
1. Output digital contents (pdf file, storyboard and vector) to Apple / Android app,
HTML5 webpage and exe file.
2. Insert webpage
3. Broadcast messages to your application
4. Real-Time Test app on Apple device before publishing
5. Support JSON database
6. Highly interactive with viewer, touch monitor and digital signage
7. Upload applications as HTML5
8. Intuitive dran n’ drop UI
9. Support animation and template

4
Award and Review:
1. Finalisted in GESS Dubai education award
2. Taiwan ICT Month award winning innovative software
3. 1000+ schools in Taiwan direct into curriculum. Highly credited among U.S. Hong
Kong, Singapore, Thailand and Malaysia education sectors
4. Get tremendous feedback in GESS Dubai and Worlddidac Bangkok.

5
Smart Apps Creator 3 Manual
5 main Sections:
1. Overflow: Includes smart button, save button, undo button and next button.
2. Tabs: Includes edit, insert, template, animation, interaction, page and Real-Time Test.
3. Navigation: includes preview and resource bank.
4. Canvas: includes main area, close preview button and close attribute button.
5. Attribute bar: includes attribute tab and layer tab
1. Overflow:

6
Select Smart button :
New: open new project file
Open: Open previous project file
Save: Save current project file
Save As: Save current project as another new file
Output: Output project to .Xcode, .apk, .exe and H5
Import Page: Import another project file pages into current project file
Test: Real-Time Test your project on Apple or Android device
Account Information: Activate or Deactivate serial number
About: Check version
Help: Online FAQ
Save
Undo
Redo
2. Tab
Edit Tab
Paste: Paste asset
Hot Key: Ctrl+V
Cut asset
Hot Key: Ctrl+X
Copy: Copy asset
Hot Key: Ctrl+C
Delete: Delete asset
Hot Key: Delete
New: Add a new page
Hot key: Ctrl+N
Font: Select fonts
Text size: Adjust text size

7
Background color: Set background color of
textbox.
Transparency: Set transparency of textbox
Bold text
Slide text
Underline
Delete line
change text colors
Add text frame and select colors.
Copy text format
Apply text format
Reduce space to the left margin
Add space to the left
margin
Adjust space to the right
margin
Symbols
Align left
Align center
Align right
Align left and right
Align left
Align center
Align right
Spread average on
horizon
Align up
Align center
vertically
Align down
Bring asset to the top
Bring asset forward
Bring asset to the
bottom
Bring asset backward

8
Spread average on
verticals
Insert images (support
JPEG、PNG、GIF format)
Insert text: insert text
and select typing
direction.
Print your current page
Print all pages of your
project
Print pages you selected
Preview current page
Preview from splash
screen
Real-Time Test Real-Time
Test (Please install Smart
Apps Creator application on
your smart device)
Real-Time Test window
Before starting Real-Time Test. make sure your firewall
didn't block real-time test; make sure your device and
computer are connected to the same Wifi Lan.
Insert Tab
Image: Insert a
image (support
JPEG、PNG、GIF)
Multiple Images:
Insert more than
one imags to
seperate pages.
(support JPEG、
PNG、GIF)
Audio: Insert .mp3
file.
Video: Insert .mp4
or YouTube link
(Only support H.264,
AAC128 .mp4)

9
Text: insert text and
select a direction.
TextInput: insert a
text box to let users
type from their
smart device
(support
interaction)
Bubble: Insert text
bubble
Formula: Insert and
edit formula symbol.
Symbol: Insert
symbol
Background: Insert
background pic
PDF: Insert PDF
(support original and
HD image)
Images Sequence:
you Insert multiple
images sequence
and play them
swiftly (Cause
animation effects)
Page Timer: Insert a
timer which is
exclusive for one
page.
Global Timer: Insert
a timer which
corresponds to
multiple pages.
Page Counter:
Insert a counter
which corresponds
to one page.
Global Counter:
Insert a counter
corresponds to
multiple pages.
Hotspot: A touch
sensor area. Can be
used as buttons or
interaction

10
Slide: Insert slides Button: combine two
images into button.
(pressed and
unpressed)
Webpage: Insert
webpage to your
project
HTML: Insert HTML
documents or HTML
folders
Map: Insert Google
map
Table: Connect and
review json data.
Template Tab
Select a template
and go to template
setting to insert
your images
Directory
 Horizontal
Slide Directory
 Vertical Slide
Directory
 Vertical Slide
Select
Directory

11
Associate
 Horizontal
Images
Sequence
 Vertical Images
Sequence
Photo
 Image
Horizontal
Slide
 Image Vertical
Slide
 Multiple Image
Scale
 Image
Horizontal
Scroll
 Image Vertical
Scroll
 Image Vertical
Interact
 Vertical
Shifting
Transition
Text
 Link-the-dots
(Vertical)
 Link-the-dots
(Horizontal)
Effect
 3D Gallery
 360 Rotation
Asset
 Camera

12
Animation Tab
Play All: Preview All animations of a asset.
Smart Apps Creator 3 includes 16
animations and one Advanced animation
Advanced animation: customize your own
animation moving route and its duration
Effect: Set the detail of your animation.
(Direction)
Ease: Set the dynamics of your animation.
There are 30 dynamics patterns you can
select.

13
Preview: preview the current animation of
your selected asset.
Loop: Loop animation or a asset
Stay on the End Status: Asset will stop at
the end of animation
Repeat: Set how many times you want to
repeat, maximum 59; minimum 1.
Duration: How fast do you want your
animation to be played?
Delay: delay playing animation
Add: Save animations
Interaction Tab
Interaction: Give an action to an asset, which responds with a behavior

14
Touch: when an asset is touched
Appear: when an asset appears
Hide: when an asset is hidden
Animation Start: when an asset starts its animations.
Animation End: when an asset end its animation.
Play Begin: when an asset starts to play (video, music, images sequence, slides etc.)
Play End: when an asset ends playing (video, music, images sequence, slides etc.)
Enter Hotspot: When an selected asset is moved into a hotspot
Exit Hotspot: When an selected asset is moved out of a hotspot
Touch Items: When touch an asset (This function shows up mostly when a template is applied)
Subitem Switch Begin: Interaction happens when a asset is swiped/slided.
Subitem Swithc End: Interaction happens when a asset is swiped/slided.
Slide In: when an asset slides into a designated area under Image Vertical Interact template
Slide Out: when an asset is slid out of a designated area under Image Vertical Interact template
Counter Change: When counter change digits
All Matches Success: When all dots connected correctly on link-the-dots template
Single Matches Success: When single dots connected correctly on link-the-dots template
Single Matches Fail When single dots connected incorrectly on link-the-dots template
Slide Up: When slide up under hotspots.
Text Correct: When the app users type the correct text
Text Incorrect: When the app users type the incorrect text
Appear: An asset responds with appearing
Hide: An asset responds with hiding

15
Play Animation: An asset responds with playing animation
Play Single Animation: An asset responds with playing selected animation.
Stop Animation: An asset responds with stopping playing animation.
Pause Animation: An asset responds with pausing animation.
Play: An asset responds with playing video, music, images sequence, slides .etc
Stop: An asset responds with stoping playing video, music, images sequence, slides .etc
Pause: An asset responds with pausing video, music, images sequence, slides .etc
Increase Counter: An asset responds with increasing counter digits
Decrease Counter: An asset responds with decreasing counter digits
Reset Counter: : An asset responds with reseting counter digits
URL Change: : An asset responds with changing webpage
Switch To: : An asset responds with switching the current page to another.
Flip to: An asset responds with flipping current page to another (visual flipping effect).
Switch to: An asset responds with switching the current page to another.
Flip to the previous page: An asset responds with flipping current page to previous page (with flip-book
effect).
Back to the previouse page: An asset responds with flipping from previous page to current (visual flipping
effect).
Enable auto flip: An asset responds with Auto flip to the end page (Select “enable auto flip,” the function
is activated on next page).
Disable auto flip: An asset responds with disabling auto flip to the end page (Select “disable auto flip,” the
function will be activated on next page).
URL: An asset responds with linking to a webpage.
Play Background Music: An asset responds with playing background music
Stop Background Music: An asset responds with stopping playing background music.
Pause Background Music: An asset responds with pausing background music.
Call Phone: responds An asset responds with activating phone dialer.

16
Add: Save interaction.
Page Tab
Book Flip: Book flip
effect.
Corner Flip: Corner
flip effect.
Slide Flip: Slide flip
effect.
BGM: Background
music (background
music is applied to
all pages).
Navigate Setting:
Adjust the navigate
button at the corner
of screen.
HOME Page: Set
which page is
homepage (Start
page cannot be
home page)
Start Page Time: Set
start page seconds.
Close Navigation:
Disappear navigate
button.
Open Navigation:
Appear navigate
button.
Close Hand Flip:
Disable hand flip
function. Pages can
be flipped only
through button.
Open Hand Flip:
Enable hand flip
function.
Subpage: Only appear
after you select “Slide
Flip.” Set a page as
subpage and its
previous page will be
Import Page:
Import .ahl project
pages into the
current project.
(The .ahl project

17
seen as main page
automatically.
Subpage should be
arrived through slide
downward.
must use the same
screen size with the
current project)
Layout Setting: This function only show up under
mixed mode at the start of your project.
Right-click in the preview tab and add new Vertical
Section then go to layout setting, you will be able
to set switch between horizontal and vertical page.
Navigate and Resources:
Preview Tab: All
pages preview will
show up here.
Resource Bank: All
materials will show
up here as a list.
(Deleted materials
will also be found
here)
Canvas
Main Area is where you start everything. Insert an image outside the canvas can prevent
your images from being viewed while any function applied to the image still exist. There are
two arrows on the sides of canvas. One is for turning on/off the preview tab, the other one is
for turning on/off the attribute tab.

18
Attribute Tab
Attribute Tab contains Property and Layer as below:
Property tab contains Setting , Animation and
interaction :
Setting:
 Book Thumbnail：Thumbnail represents app icon in
the Smart Apps Creator mobile app during Real-Time
Test.
 App Name: Set your App Name. This name will be
your app name on smart device and SAC Viewer.
 Enable Push: Enable message delivery (Register for
this function)
 Push ID: Your push ID on the message delivery
platform (messages are insert from our platform)

19
Setting: (When not selecting anything)
 Page Width: Adjust main area page width (Default
setting is the project device’s width)
 Page Height: Adjust main area page height.
 Page Title: Set page title（Only shown up in magazine
book type under Real-Time Test）
 Page Description: Set page description（Only shown
up in magazine book type under Real-Time Test）
 Navigation Type: Navigate Type includes Interactive
book and magazine book. (magazine book shown up
only when slide flip is selected under page tab)
 Open Snap Shot Cache: Select navigate menu
under navigate setting, you would see preview image
of all page. Open Snap Shot Cache would adjust your
preview image to a higher resolution, but file size
would be bigger.
 Snap Shot By Hand: Check for snapping. Screenshot
will be the first one you snapped (If you updated
your page, screenshot will stay the same as your first
screenshot.)
 Page Type: Change your page status to Static Page:
Static Page: This page’s assets can be overlay to a selected
page. All assets stay functional.
 Flip Effect: Flip Effect includes fade, push, reveal,
move in, cube, such, flip and ripple

20
Setting (when select any asset)
 Adjust an asset’s coordinate, width, height, rotate
and opacity.
 Fit Aspect Ratio: Give your asset an average ratio
between width and height.
Setting (when select any asset)
 Hide object when browsing: When browsing, asset
would be hidden.
 Dragging: Check for allowing drag n’ drop
 Push Back After Dragging: Asset will jump back to the
original position after releasing dragging.
 Enlarge When Dragging: Asset will be enlarged when
dragging
 Allow Image Zoom: Include overall zoom and inside
zoom. Overall zoom let your asset zoom in the range
of screen. Inside zoom let your asset zoom in a
limited range.
 Set Link Target: Select an asset to be linked with the
current asset. When one asset is moved, the other
one will be moved together.
 Set Drag Route: Limit an asset’s dragging route (only
1 route can be set)
Slide binding (when select any asset)
 Bind Sliding in this page: Adjust the speed of sliding a

21
page（before activate this function, a page height
must be raised）
 Slide horizontal speed: 0-5
 Slide vertical speed: 0-5
 Bind Sliding between Pages: Bind sliding effects
between pages.
 Slide from x：Adjust the amount of horizontal
slide
 Slide from y：Adjust the amount of vertical slide
 Slide width: Adjust asset width when sliding
 Slide height: Adjust asset height when sliding
 Slide Opacity: Adjust asset opacity when sliding
Animation Tab
 Play animations when browsing: Animations would
be played automatically when browsing the current
page.
 Loop Animation: Animation would be replayed
unlimitedly
 Repeat Animations: Set how many times you want to
repeat the animations.
 Animation Sequence: drag n’ drop to change the
animations’ playing sequence
 : Use the bar to adjust asset
sequence or delete assets.
Interaction Tab
Your materials’ interaction show up here.
: Use the bar to adjust asset sequence
or delete assets.

22
Layer
 Lock: Lock a selected asset so that the asset
can’t be edited
 Hide: Hide a selected asset from your screen.
 Drag and drop to adjust the asset sequence.
 : Use the bar to adjust asset
sequence or delete assets.
Real-time test:
Through wifi (LAN), Smart Apps Creator can send your apps to a Apple device to preview
instantly before publishing to Apple Store.
Attention:
The ip address is visual and can’t not be connected from other device.
Your computer and smart device should be connected to the same wifi (LAN)
If your smart device can not receive files, please don’t let your anti-virus block Smart Apps
Creator 3.
Steps:
1.Click the real-time test button at the corner of your screen
2.Select “Prepare to test”
3.Download Smart Apps Creator from Apple store/Google play to your smart device.

23
4. Copy and paste the ip address shown on your screen to Smart Apps Creator app

24
5. Finished.
XII. Output
Smart Apps Creator 3 output .Xcodeproj (iPad/iPhone), .apk (Android), .exe(Windows)
and HTML5 to your device.
i. Output .xcodeproj source file:
Click Smart button on the up-left of your screen.
Click Output.
Select the iOS icon and click submit.

25
You will get a zip file. Bring this zip file to Mac machine and follow the iOS development
publish procedure and you will be able to publish your apps to Apple store.

26
ii. Output .apk file
Click Output.
Select the Android icon and finish the blanks.
Attention:
Programme name must be started by “com.”
Programme name cannot be repeated if you have multiple apps to upload
Programme name can only be English
If Programme name stays the same, changing version code will let android users to update
apps version.

27
You will get a .apk file. Follow the Android development publish procedure and you will
be able to publish your apps to Google play.
iii. Output .exe file.
Click Output.
Select EXE icon and select Emulator style or Desktop style and submit. (The difference lies in
the display window)

28
You will get a .exe file. Left click to open it.
Emulator style

29
Desktop style
Output HTML5
Output your app to HTML5. Your app become cross-device and the time-consuming publish
steps are saved; Upload your apps to AppShow. Share your apps to social media and view

30
online.
Click on the upper-left corner of the interface.
Click output
Select HTML5 tab and click upload guide.

31
Register and sign in AppShow service

32
Select H5 Space >> New H5 Project

33
Complete all fields >> select your H5 Space number (1 free H5 Space is given to new
member.)
 H5 Name：Your HTML5 name
 Facebook Sharing Subject： This is not limited to Facebook. All social media
selection will use this field as title.
 Description：Your sharing description
Go back to Smart Apps Creator 3 window. Select zip file and submit

34
Select your zip file then upload file

35
After finish uploading, you will see different ways to view or share your HTML5.
Click H5 >> You will be able to view your app result thru browser, message delivery
will pop up from upper side
You can share your HTML5 thru social media shortcut

36
Manage your H5 space
Select H5 Project List to manage your H5 Space
Click link to view, share or check detail of your HTML5.
*In August 2017, we released AppSHOW application in GooglePlay and Apple Store.
Users are able to download to mobile device and view HTML5 right thru this app.
Please search AppShow in GooglePlay and Apple Store for further information

37
Ch. 1 Universal Studio Guide Map
This chapter we will use map guide as an example to introduce basic function of Smart
Apps Creator, including animation, hotspot and image sequence. We will also show you how
to accomplish a storyboard. Smart Apps Creator can finish almost any kinds of story, the only
limit is your imagination. From this chapter we will introduce all our amazing storyboard to
help you learn Smart Apps Creator and develop your skill.
1234
I. Start Smart Apps Creator
Install Smart Apps Creator, left-click and open it.
1
William Cho. Universal Studios @ Resorts World Sentosa. Digital image. Wikimedia Commons. Sep. 29 2010, 13:34. Accessed Dec
29, 2016. https://commons.wikimedia.org/wiki/File:Universal_Studios_Singapore_(5559170576).jpg.
2
Dawn Hudson. White Rabbit Herald. Digital image. Public Domain Pictures.net. Accessed Dec 29, 2016.
http://www.publicdomainpictures.net/view-image.php?image=116433&picture=white-rabbit-herald.
3
Simon Berry. YouTube icon square. Digital image. flickr. Jan. 9 2016. Accessed Dec 29, 2016.
https://www.flickr.com/photos/colalife/24270243225.
4
Openclipart-Vectors. Digital image. pixabay. July 13, 2013. Accessed Dec 29, 2016.
https://pixabay.com/zh/%E4%BD%8D%E7%BD%AE-%E5%9C%B0%E5%9B%BE-%E9%92%88-%E6%9F%A5%E6%98%8E-%E7%8
2%B9-%E6%8C%87%E9%92%88-%E8%B0%B7%E6%AD%8C%E5%9C%B0%E5%9B%BE-162102/

38
Select device and submit.
II. Start Page
In Smart Apps Creator, start page is a splash screen, its purpose is to show company
logo, studio name, branding etc. Insert cover page here:

39
Click image to insert start page background (.jpg or .png)
After insert the image, extend to the whole screen. Set “X” and ”Y” as “0” and width and
height as “1025” and “768” at your right side property bar.
5
5
William Cho. English: Universal Studios Singapore in the evening. Digital image. Wikimedia Commons. 11 September 2010, 19:33.

40
Insert text >> highlight the text >> select pristina font, size 72 and white color.
6
Apply Animation
Apply animation to your text: Select text box >> Animation >> Float in >> Add >>
animation will show up on your right side animation bar >> check “play when browsing” >>
See result please click Preview (at corner of your screen).
Accessed Dec 29, 2016. https://commons.wikimedia.org/wiki/File:Universal_Studios_of_Singapore_-_Disney.jpg
6
Ibid.

41
7
Did you see the difference?
Compare the Difference:
After seeing the result, just need one adjustment, we can help the animation run more
smoothly. Click property >> Setting >> check hide object when browsing >> click preview.
Preview and see if you can find the animation run more smoothly.
7
Ibid.

42
Interaction
Interaction is where you give image a responsive action. Let’s apply any animations to two
logos:
After applying animations to logos, select the text box >> go to Interaction >> select
Animation End >> Submit >> Select object: Smart Apps Creator logo >> select Play
Animation >> click Add >> then preview.
8
Note: Your animation will appear on right side interactivity bar.
8
Ibid.

43
Be sure to select the Smart Apps Creator logo and check “hide object when browsing.”
Repeat the same steps to the u-Smart Tech logo :
Select Smart Apps Creator logo >> go to Interaction >> select Animation End >>
Submit >> Select object: u-Smart Tech logo >> select Play Animation >> click Add >>
then preview.

44
9
Your animation will appear on right side interactivity bar.
Be sure to select the Smart Apps Creator logo and check “hide object when browsing.”
9
Ibid.

45
Set Start Page Time
You can set how long you want start page endure. Go to page tab >> you cans set at start
page time. (We will introduce here more in the future),
III. The homepage
To make project more attractive and vivid, we usually apply abundant animation in
different kinds of combination. In this section, we will show you how to apply animations
step by step; but don’t forget that you are always encouraged to develop your own
creativity.

46
101112
Get a black cover from Google. Go to Google >> search “black” >> select image tab >>
download a black cover; it will be used later.
10
11
Resorts World at Sentosa. Digital image. Resorts World at Sentosa. Accessed Dec 29,
2016, http://www.rwsentosa.com/language/zh-TW/Homepage/Attractions/UniversalStudiosSingapore/USSMap
12

47
(We already prepare you all materials, photo, and button etc in project file folder).
Insert >>background >> extrude >> select the Singapore universal studio background
Insert >>
insert and copy and paste 3 times to 13
13
13

48
14
Set Dragging
13
13
14
14
14
14
14

49
15
Let users drag pictures:
Select image >> go to setting >> check “Dragging.” If you don’t want enlarge animation then
cancel “Enlarge When Dragging.”
Put these four pictures 16
under rabbit images layers.
!! Please set picture layer as below.
15
niekverlann. Digital image. pixabay. Aug. 19, 2014. Accessed Dec 29, 2016. https://pixabay.com/p-1075789/?no_redirect
16
16
16
16

50
insert black cover to canvas>> go to property >> setting >> adjust opacity to
66%
17
17

51
>> insert and select >> go to animation >> select fade in >> repeat 8 times >> check
“play animation when browsing” >> your animation will appear on right side animation bar.
18
Insert and select >> put click image under the rabbit image layer >> go to
animation >> select move >> select move up under effect >> select “ease out cubic” under
the animation effect >> set displacement 300 >> check “play animation when browsing” >>
save.
17
18
Ibid.

52
19
Insert and select >> put finger picture onto the rabbit image layer >> go to
animation >> select move >> select move up under effect >> select “ease out cubic” under
the animation effect >> set displacement 300 >> check “play animation when browsing” >>
save.
19
Ibid.

53
20
Now, the click image is not visible because it is under the rabbit picture layer. Go to right side
layer tab >> select click image >> select interaction >> select animation end >> submit >>
select rabbit picture under object >> select hide >> add. (Thus, after the click image finish its
animation, rabbit picture will be hidden)
Repeat and apply the same steps to hide black cover, finger image and click image itself.
20
Ibid.

54
(Thus, after the click image finish its animation, finger image, black cover, click image and
rabbit picture would all be hidden)
Preview: Animation end:
21
IV. Link your pictures to webpage
Right-click a page in preview section >> select new page >> go to insert tab >> select
webpage. (The default webpage is Smart Apps Creator’s official site:
www.smartappscreator.com). Keep this page for later and create another new page.
21
Ibid.

55
22
Right-click a page in preview section >> select new page >> go to insert tab >> select
webpage >> now you have webpage on the canvas >> select website on the canvas >> Insert
Universal Studio Singapore website address on right side address bar >> apply:
https://www.rwsentosa.com/en/attractions/universal-studios-singapore/explore
22
Ibid
22

56
23
Go to homepage, now we are going to connect the pictures with their
website pages. 24
Select and in the layer tab. Repeat and apply the same interaction to
and .. Select the page (where you insert webpage) under switch to. (App users
could be directed to website after touching the image).25
26
V. Image sequence as opening animation
This chapter will show you an image sequence function, which can be used to create
animation. And animation can be used as the opening animation of the map. When we put a
series of similar pictures into sequence and play it with a high speed, it looks like an
animation. In the material file, you will find the images:
23
2016, http://www.rwsentosa.com/Homepage/Attractions/UniversalStudiosSingapore
23
23
23
24
24
2016, http://www.rwsentosa.com/Homepage/Attractions/UniversalStudiosSingapore
25
ibid
26
OpenClipart-Vectors. Digital image. Pixabay. Oct. 4, 2013. Accessed Dec 29, 2016.
https://pixabay.com/zh/%E7%AE%AD%E5%A4%B4-%E7%BB%BF%E8%89%B2-%E5%85%89%E9%9D%A2%E7%BA%B8-%E6%B3
%A8%E5%86%8C-%E4%B8%8A%E4%BC%A0-%E8%BF%94%E5%9B%9E%E9%A1%B5%E9%A6%96-145786/
26
JuralMin. Digital image. Pixabay. Oct. 4, 2013. Accessed Dec 29, 2016.
https://pixabay.com/zh/%E7%AE%AD%E5%A4%B4-%E7%BB%BF%E8%89%B2-%E5%85%89%E9%9D%A2%E7%BA%B8-%E6%B3
%A8%E5%86%8C-%E4%B8%8A%E4%BC%A0-%E8%BF%94%E5%9B%9E%E9%A1%B5%E9%A6%96-145786/

57
27
Create a new page >> go to insert >> images sequence >> ctrl + left-click select images >>
open.
28
Adjust the images sequence >> adjust the image speed interval (you can keep the default
setting) >> Submit.
27
28
Ibid

58
29
Select the images sequence >> cancel “loop” in setting under property >> check “play when
browsing” >> Preview.
29

59
30
VI. The map and the hot spot
Open a new page >> select new page >> go to insert >> background >> select unfolded map
>> go back to image sequence page >> select image sequence >> select interactivity tab >>
select play end >> select image sequence under object >> select switch to >> select unfolded
map page >> submit. (Try preview and see if, after the image sequence, app users will be
directed to the unfolded map page).
30

60
31
Now, again, in the unfolded map page, we want to direct our app users to their destination
after they put a feet 32
into hotspot. Here we will open a new map page for this area
and connect this area with the hotspot.
Select the unfolded map page >> go to insert >> select hotspot >> cover the hotspot to one
area of the map >> insert foot image .33
31
32
Karen Arnold. Black Footprints Clipart. Digital image. Public Domain Pictures.net. Accessed Dec 29, 2016.
http://www.publicdomainpictures.net/view-image.php?image=37255&picture=black-footprints-clipart
33
Ibid.

61
34
Create a new page >> insert >> background >> extrude >> select map1.
35
Go back to page 6 (unfolded map page), select foot image >> check “dragging” under setting
>> go to interaction >> enter hotspot >> select hotspot1 >> select foot image under object
>> select flip to >> select page 7 >> submit >> preview and see if it work properly. (Tips: You
34
35
Ibid.

62
can reduce your foot image size to make the hotspot more easily to sensor the foot image).
36
36

63
37
38
39
Repeat and apply the same steps we’ve learned to all areas of the map. Let app users be
able to tour the amusement park with this mobile map.
37
38
Ibid.
39
Ibid.

64
40
(Tips: Hotspot in Smart Apps Creator 3 can only be square; this may cause overlapping Try to
avoid overlapping)
VII. Elaborate the Area
Next, we are going to elaborate the area and set some button to let our app users touch.
41
40
Ibid.
41

65
Insert >> image >> insert banner and put it to the top-right corner >> insert text
“back to map” on the banner >> insert hotspot >> overlap the hotspot to every spot on
the map >> insert hotspot and overlap the hotspot to universal studio logo.
42
Insert >> bubble >> rectangle >> name the spot >> select font size, color and text box color,
check “hide object when browsing.”
42
Ibid.

66
Select text box >> go to animation >> select float in >> click save.
43
Insert hotspot and overlap it over “back to home” banner.
44
Now, we are going to apply interaction to hotspot1, 2 and 3
43
Ibid.
44
Ibid.

67
Select hotspot 1 >> interaction >> touch >> select text box under object >> play animation
>> add.
45
Select hotspot 2 >> interaction >> touch >> select hotspot2 under object >> flip to >> select
page 3 >> submit.
46
Select hotspot 3 >> interaction >> touch >> select hotspot 3 under object >> flip to >> select
45
Ibid.
46
Ibid.

68
page 1 >> submit.
47
Repeat and apply all the steps we’ve learned to every spot in every area and a reliable
mobile map for universal studio tourists.
48
VIII. Insert Music
Music is the most important part in digital multimedia. Go to Google >> search YouTube
47
Ibid.
48
geralt. Digital image. pixabay. Dec 6, 2016. Accessed Dec 29, 2016.
https://pixabay.com/zh/%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F-%E8%AF%B7%E6%B1%82-ipad-%E5%B9%B3%E6
%9D%BF%E7%94%B5%E8%84%91-%E5%9C%A8%E7%BA%BF-%E6%8A%80%E6%9C%AF-%E8%81%94%E7%B3%BB%E4%BA
%BA-%E6%95%B0%E5%AD%97-1883453/

69
library >> select attribution >> download one of your favorite music.
Go to page >> background music >> add background music >> select file. (This way, music
will be apply to all pages. Check next chapter to see how to insert music for seperate page)
49
49
49

70
IX. Homework
Design a guide map of your favorite place and see who has the best idea?
Ch. 1-1 Tourist Guide
I. Collect quality materials:
In this app project folder, you will see prepared images and materials for “New York City
Tourist Guide” app. They all came from www.pixabay.com or
www.youtube.com/audiolibrary/music . (If you use your own image, please make sure you
use CC0 authorized materials).
II. Start to build your app
1. Go to Smart Button (On the top-left of your screen)
2. Open a new project (Select a device. In this instruction, I use iPad retina)
*Android device can’t output iOS format.
*Apple device is able to output both iOS or Android format.

71
3. Make start page: Start page is an announce page (Splash screen) for your app. Go to insert
tab to insert an image then go to page tab to set your start page time.
4. Insert Tab: Start your app by inserting an image.

72
*In this lesson, I will focus only on outline of the story board. I will omit some repetitive
steps, if they aim only at bells and whistles.
5. Insert 2 image and make sure you have them on correct layer.
You can adjust image opacity from here:

73
6. Insert finger and apply animations to it. Remember click “play animation when browsing”
and save your animation. Here I repeat it by 4 times with 204 length under 1s duration.

74
7. Insert background music. Now background music will be automatically played. We will tell
you how to pause later.
7-2. Under page tab >> set your home page at 2 (In some page we will allow navigation
button to be opened, there is a home page button which will always send viewers back to
page 2 )

75
8. Add a new page: right click the page square and add new page.
9. Place all images and icons to its respective position and select text under insert tab to
insert textbox (You will find all materials in our app project folder)

76
You can adjust your textbox after you highlight it.
10. Select the speaker icon >> go to interaction tab >> select an touch behavior >> select a
target: icon itself >> select play background as response >> click save >> interaction will be
shown on right hand side
11. Select the stop icon >> go to interaction tab >> select an touch behaviour >> select
a target: icon itself >> select pause background as response >> click save >> interaction will
be shown on right hand side

77
12. Add a new page then select area map and set its interaction to direct our app viewers to
map page: add new page >> select area map >> select interaction >> select touch >> area
map >> Switch to page 3 >> save.
13. Page 3: Insert a black background and adjust its size and opacity like the image below
14. Insert all materials as the screenshot below

78
15. Make sure you have them in the right layers. I overlapped 5 map descriptions here:

79
16. Now we need to link maps and location: select maps >> check hide image when
browsing

80
17. Select locations >> go to interaction tab >> select touch >> its correspondent map
description >> play animation >> save. (Repeat these steps to 5 locations on the map)
18. Select locations >> go to interaction tab >> select touch >> select the other 4 map
descriptions >> select hide >> save. (Repeat these steps to 5 locations on the map)
19. Totally you will get 5 interactions on right-hand side for each location:

81
20. Help viewer go back to the previous page: Select arrow >> go to interaction tab >> select
touch >> select arrow >> select switch to page >> select destination page >> save.
21. Insert PDF street map: Create a new page >> insert new York map pdf and extend to
canvas >> you will find map show up under another section. (The function of section is that
it block viewers from getting across. The only way to reach other section is by setting
interaction and directing)

82
22. Insert an arrow and set interaction to direct viewers to the next map or to the previous
page or home page.
23. Link map page to the street map icon
24. Link tourist guide icon with URL:
https://www.nycgo.com/maps-guides/official-nyc-visitors-guide

83
25. Subway map page is the same steps: link subway page icon to a new page >> In new
page, insert >> subway map image >> adjust map size >> adjust edit area size (here I set edit
area size: 2048, 2219) >> insert an arrow to help app viewer back to previous page.
26. Photo template: Create a new page >> link photo template icon to the new page

84
27. Insert background picture and adjust its opacity >> go to template tab >> select photo >>
select image horizontal slide >> insert a TV frame image to combine with photo template
28. Set photo: select photo template >> click template setting on our right hand side >> add
photo and cancel visible navigation.

85
29. Make sure photo template layer is above TV frame layer.
30. Insert webpage: Link YouTube travel guide to a new page >> Under a new page, go to
insert >> webpage >> select the webpage >> add URL from the right hand side bar:
https://youtu.be/JtfZPgWxlMI >> adjust webpage size >> insert a black background and
adjust its opacity behind the webpage. Insert the rest materials and set their function as
instructed before. (You can also copy and paste the same icon from other page, their
interaction and animation will remain the same.)
*The latest version of Smart Apps Creator 3 will not show Youtube clip cover photo and will
be played outside the app, opening mobile phone browser.

86
31. *Please copy and paste YouTube share link from YouTube share tab (not browser url link):
32. Through link URL and insert webpage function, you are able to insert chat room, Google
Form, whiteboard, questionnaireand exchange rate machine to Smart Apps Creator 3:
https://tlk.io/nyc
http://www.exchange-rates.org/

87
33. Drag and drop your asset and Text-input function:
Drag and drop your content and cause a responsive reaction (This is our most unique
feature)
Insert all materials as below picture.
You may find text-input and hotspot (blue transparent square) from here:

88
Cover hotspot to picture (its layer must be above picture and frame, but below feet) >>
select feet >> go to interaction tab >> select enter hotspot >> select picture >> select appear
>> save.
*Please select picture and hide object when browsing
*Please select feet and check dragging
Set text-input: select text-input box >> go to interaction tab >> text correct >> insert an

89
answer you want >> appear >> save (now viewer can answer your question and get a
response)
Select text-input box >> on your right hand side >> give placeholder a text (this is the
watermark in the text-input box)

91
Ch. 2 Spot-the-difference
spot-the-difference is an great example in this lesson. We will go further to explore the skill
of interactivity. You will learn counter and timer and we will teach you how to use them and
how their connection is important in Smart Apps Creator. Smart Apps Creator is great
software to change your idea into reality without requiring complicated programming skill.
Remember, you are always welcome to design with your own creativity.
50
I. Share your start page with everybody
In the previous chapter, we had introduced you how to design a start page. Now you should
design your own and share with everybody.
50
niekverlann. Digital image. pixabay. Aug. 19, 2014. Accessed Dec 29, 2016.
https://pixabay.com/zh/%E6%99%BA%E8%83%BD%E6%89%8B%E6%9C%BA-%E7%94%B5%E8%AF%9D-%E6%8
9%93%E5%AD%97-%E9%94%AE%E6%8E%A7-%E7%A7%BB%E5%8A%A8-%E5%B1%8F%E5%B9%95-%E7%9F%A
D%E4%BF%A1-%E5%8F%91%E9%80%81-%E8%81%94%E7%B3%BB%E4%BA%BA-431231/

92
II. Homepage
Insert back ground>> insert text box >> put in the word “spot the difference / find the
difference and win the trophy” >> select balthazar font >> insert image .51
52
Select >> go to animation >> select seesaw >> check loop >> add >> check play
animation when browsing.
51
Creozavr, Digital image, pixabay, May 2016, Accessed Dec 29 2016,
https://pixabay.com/zh/%E6%81%90%E6%85%8C-%E5%A4%A7%E7%9C%BC%E7%9D%9B-%E6%9B%B2%E7%BA%BF%E6%89
%8B-%E5%8A%A8%E7%94%BB%E7%89%87-%E4%B8%89%E6%A0%B9%E5%A4%B4%E5%8F%91-%E6%83%8A%E5%8F%AB-
%E4%BA%BA%E4%B8%8D%E4%B8%BA%E5%B7%B1-1393619/
51
Geralt, Digital image, pixabay, April 17, 2015, Accessed Dec 29 2016,
https://pixabay.com/zh/%E5%90%AF%E5%8A%A8-%E6%89%8B-%E6%89%8B%E6%8C%87-%E8%AE%BE%E8%AE%A1-%E8%A7
%A6%E6%91%B8-%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1-%E6%8C%89%E9%92%AE-%E6%97%B6%E5%B0%9
A-%E8%AE%A1%E7%AE%97%E6%9C%BA-725136/
52
Nikiko, Digital image, pixabay, Sept. 14, 2014, Accessed Dec 29 2016,
https://pixabay.com/zh/%E7%A0%96-%E5%A2%99-%E7%9F%B3%E5%A4%B4-%E7%BB%93%E6%9E%84-%E7%9F%B3%E6%9D
%90%E5%A2%99-%E7%BA%B9%E7%90%86-%E8%83%8C%E6%99%AF-459299/

93
53
See if you complete the homepage.
53
Ibid.

94
54
Create a new page >> select >> interaction >> touch >> select under object
>> flip to >> select page 2 >> submit. (Now, our app users will be directed to page 2, when
they touch ).55
56
III. Spot the difference 1 – Insert all materials
54
Ibid.
55
Ibid.
56
Ibid.

95
Insert >> background >> extrude >> select >> insert >> image >> select
>> adjust its size and position to “x: 0,” ”y: 202,” ”width: 1024” and ”height:
565.”57
Select layer tab >> select >> click lock (thus, we won’t be able to accidently
move the picture while we are editing the page.)58
59
Insert >> hostspot >> cover the hotspot1 to the area below (make sure this hotspot is at the
bottom of all hotspots)>> insert image >> select >> copy and paste three times >> place
to the position below >>
Insert >> timer >> page timer >> adjust timer box >> go to property >> setting >> check
timer(ms)
57
jjron, Globe_and_high_court.jpg, Digital image. Wikimedia Commons. 8 June 2009, 01:38 (UTC). Accessed Dec 29,
https://commons.wikimedia.org/wiki/File:Globe_and_high_court_(Spot_the_difference).jpg
58
Ibid.
59
Ibid.

96
60
Tips!! Layer plays an important role in Smart Apps Creator. Always check that your materials
are on the right position or you may not be able to trigger the interaction when you touch
your items.
Place timer to the position below and check “play when browsing” as below.
60
Ibid.

97
61
Insert and adjust four hotspots and cover them to the different spot as below. Make sure
these hotspots are all above the hotspot1
61
Ibid.

98
62
Insert >> copy and paste 4 times and cover them to the hotspot2~5>> go to layer >>
move all under the hotspot2~5 as below >> check “hide object when browsing” for all
62
Ibid.

99
Adjust the display size of your current page >> insert >> audio >> local audio >> select
“sound for the right answer” >> repeat the steps again > select sound for the wrong answer
>> move these two audio bar out of the current page as below.
63
preview your screen as below.
63
Ibid.

100
64
IV. Set Interaction
Select and apply interaction to hotspot2~5
Select hotspot2 >> interaction >> touch >> select under object >> appear >> add.
64
Ibid.

101
65
Select hotspot2 >> interaction >> touch >> select sound for answering correctly under object
>> play >> add
66
65
Ibid.
66
Ibid.

102
Preview your interaction
67
Repeat and apply the interaction and audio sound to hotspot3~5.
Preview result as below:
68
V. Set losing health
The reason why put a hotspot1 under all other hostspots is because when player didn’t hit
the right answer he/she will hit hotspot1 and by, hitting hotspot1, we want to make user
lose health.
Select hotspot1 >> interaction >> touch >> select sound for wrong answer under object >>
play >> add.
67
Ethan Hein, Best sound ever, Digital image, flickr, Aug. 22 2008, Accessed Dec, 30 2016. https://www.flickr.com/photos/ethanhein/2787035531
68
Ibid.
Click

103
69
Insert >> counter >> page counter >> move the counter box out of the canvas.
70
Select hotspot1 >> interaction >> touch >> select counter under object >> increase digit >>
submit. (Therefore, if players hit the hotspot1 area, counter will increase 1 digit. Next step
we will set that digit 1 equals losing 1 health)
69
Ibid.
70
Ibid.

104
71
Select counter >> interaction >> counter change >> digit 1 >> submit >> select a health
under object >> hide >> add.
72
71
Ibid.
72
Ibid.

105
Repeat and apply the same steps to the other health.
73
VI. How to go back to homepage and go to the next chapter
Insert >> timer >> setting >> adjust the maximum time to 1 second
73
Ibid.

106
Select counter >> interaction >> counter change to 3 >> select timer under object >> play >>
add.
74
Select timer >> interaction >> timer end >> select background under object >> flip to >>
hompage submit. (After players give the wrong answer three times, health will be deducted
74
Ibid.

107
and, after health are gone, page will be directed to homepage. Next, we will set page
directed to next chapter if players find all differences.)
75
Insert >> counter >> page counter >> move the counter box out of the canvas.
76
Select hotspot2 >> interaction >> touch >> select counter under object (Please select the
75
Ibid.
76
Ibid.

108
new counter added in previous steps) >> increase counter >> digit: 4 >> submit
77
Apply steps to all hotspot2~5 (Therefore players hit correct hotspot, counter will increase 4
digits.
Open a new page >> go back to page 2 >> select counter >> interaction >> counter change
>> digit: 16 >> select background under object >> flip to >> new page >> submit. (Thus, after
players find all the different spot, page will be directed to next chapter)
77
Ibid.

109
78
Now we’ve teach you how to design a successful spot-the-difference page. Apply all your
knowledge to design your own page and share with your fellow.
VII. Design the last page
At your last page >> Insert >> image >> open >> select >> check hide object
when browsing. In the previous steps we’ve learned when counter change to 16 digit, page
will be flipped. Now, again, set when counter change to 16 digit, trophy appears.
Select a counter >> interaction >> counter change >> digit: 16 >> submit >> select trophy
under object >> appear >> add.
78

110
79
VIII. Insert Music
Go to Google >> search YouTube library >> select attribution >> download one of your
favorite music.
79
Trophy, deedster, Digital image. pixabay. June 2016, Accessed Dec 29, 2016. https://pixabay.com/p-1414791/?no_redirect

111
Go to page >> background music >> add background music >> select file.
IX. Homework:
Finish your own spot-the-difference game. Let your creativity be develop.
808182
80
Ibid.
81
Game over, maklay62, Digital image. pixabay. June 2016, Accessed Dec 29, 2016. https://pixabay.com/p-1432947/?no_redirect
82
Win, 568647, Digital image. pixabay. Jan. 22, 2015, Accessed Dec 29, 2016. https://pixabay.com/p-606689/?no_redirect

112
CH.3 Advanced skill - Whack-a-mole game design
In this and next chapter, we will go further to introduce more complicated story design. We
will design whack-a-mole game. In this game, more animations and interactions would be
involved and I will not demonstrate what I’ve mentioned in previous chapters. Please make
sure you’ve gone through all lessons in previous chapters.
Click smart button on the top-left of your screen
Click new
Select your device (here we will use iphone 6s vertical)

113
I. What do we do if we want to skip the start page?
Insert an image to start page and page 1 >> select start page >> select page tab >> reduce
start page time to 0.5 second. (In preview mode, the start page will be quickly switched to
page 1).
Apply two animations to the mole.
Shrink the canvas size by adjust the size bar at the bottom-right corner >> insert >>

114
move it out of the canvas and place it right under the table >> animation >> move >> select
ease out circle >> adjust displacement to 440 >> add
Insert another animation
Select >> animation >> zoom in/out >> check stay on the end status >> adjust
duration to 2.50 >> save >> check “play animation when browsing.”

115
After the animation end we want to direct the page to the opening page of the game.
Create a new page >> select >> interaction >> animation end >> single animation end:
2 >> submit >> select under object >> flip to >> select page 2 >> submit

116
Insert >> select background >> adjust the background size and fill the page >> go to layer
and lock the image
Insert text, , as below:

117
Create a new page >> go back to page 2 >> Select >> interaction >> touch >>
background under object >> flip to >> select page 3 >> submit.
II. Start designing whack-a-mole
Insert background >> insert pictures and text as below:

118
Apply same animation, but with different duration, to each mole.
Select mole >> animation >> move >> select move up under effect >> set duration 1, 0.75,
0.5 to each mole >> set displacement 300 >> add.
Check “play animation when browsing” and ”loop animation” to each mole.

119
Preview. Moles will move up and down:
Insert >> images sequence >> set image changing interval 42 >> submit >> check “hide
object when browsing.”

120
Insert correct and wrong answer pictures and place them to the position as below >> check
“hide object when browsing” for .83
84
Insert images sequence >> select >> submit >> copy and paste image
83
Wrong&Correct, Clker-Free-Vector-Image. Digital image. pixabay. April 13, 2012, Accessed Dec 29,
https://pixabay.com/p-32259/?no_redirect
84
Ibid.

121
sequence 3 times >> cover the three image sequence above each mole
as below.
On canvas:
85
In preview mode:
III. Set interaction
85
Ibid.

122
Now apply multiple interactions to (Now the image is covered, it would be wise to
select mole from layer tab). Select >> interaction >> touch >> under object, one by
one you need apply interaction to , , and >> select their response (see
step 6 of below picture – first stop animation >> hide >> let appear >> let
appear >> let play sequence >> let stop play sequence).86
87
Apply the same instructions to the other 2 moles as below:
86
Ibid.
87
Ibid.

123
88
IV. Design next page
Copy and paste page for an efficient design. (All material, animation and interaction will be
copied and pasted)
88
Ibid.

124
89
Go back to page 3 >> insert timer >> set the time to 2 second >
90
select >> interaction >> touch >> timer >> play >> save.
91
Select timer >> interaction >> timer end >> select background under object >> flip to >>
89
Ibid.
90
Ibid.
91
Ibid.

125
select page 4.
V. Make your own word card
Smart Apps Creator 3 doesn’t come with photo editing function, we will have to go to free
online photo editor tool like, https://pixlr.com/editor/ , to edit our image. Go to pixlr editor
and open

126
Select word tool option
Type and save as png
Go to page 4 >> change text and insert new them. (see below)

127
92
Adjust word card size and put them to the same layer as previous truth and false card.
93
Delete and replace the previous word card with new word card. Apply same animation and
interaction to the new word card. (see below)
92
Ibid.
93
Ibid.

128
94
Same animation
95
94
Ibid.
95
Ibid.

129
Same interaction
96
VI. How to record your grade
Go to page 3 >> click insert tab >> counter >> global counter >> select the word card with
correct answer >> interaction >> touch >> select counter under object >> increase counter
>> 1 digit >> submit.
97
96
Ibid.
97
Ibid.

130
Insert >> image >> grade board >> place the grade board at the bottom corner >> drag
counter onto the board.
98
Insert global counter and apply increase digit interaction to all page and word cards,
throughout the game pages, counter will continuously increase digit when users hit correct
answers.
VII. Last page
Insert below images to two separate pages. One is success page, the other one is failure
page.
98
Ibid.

131
*In this lesson, the game is consist of 3 pages, so we set score 1 and 2 will failure the game,
only score 3 will win the game
(So far we’ve totally inserted 3 counters) Select the final counter >> interaction >> counter
change >> 3 digit >> submit >> select background under object >> flip to >> select success
page >>
Apply the above interaction to counter again, but set the counter change digit at 1 and 2 and
direct to failure page
99
99
Ibid.

132
Counter change to 3 >> page will flip to success page.
100
VIII. Homework
Design a whack-a-mole game that contains 5 pages and share it with your friends.
100
Ibid.

133
CH4. Chinese Character
Smart Apps Creator 3 is able to design multimedia interactive apps for learning Chinese
character.
I. Set start page
Insert text, background and image as below
101
II. Design a content
Insert text, background and image as below. In this app, we need to build four pages for
each word lesson.
101
Chinese Hanzi. Peter Griffin. Digital image. Public Domain Pictures.net., Accessed Dec 29, 2016.
http://www.publicdomainpictures.net/view-image.php?image=19533&picture=chinesische-hanzihttp://www.publicdomainpictures.net/view-image
.php?image=19533&picture=chinesische-hanzi

134
Set interaction to :
select >> interaction >> touch >> select under object >> flip to >> page 2.
III. First character page
Most images I add here are already saved along with the project file (.ahl), they are not
saved in lesson folders. To find related images, go to resource >> and find the word parts
images then drag n drop to the canvas.
Move the word parts to the correspondent position and check “hide object when browsing”

135
for three of them.
Apply animation to the three word parts.
Select >> animation >> wipe >> select wipe down >> add.
Select >> animation >> wipe >> select wipe right >> add.
Select >> animation >> wipe >> select right >> add.
IV. Set Interaction
Select >> interaction >> touch >> select under object >> play animation >> add.

136
Select >> interaction >> animation end >> under object >> play animation >> add
Select >> interaction >> animation end >> select under object >> play
animation >> add

137
Select >> interaction >> animation end >> select text box under object >> play
animation >> add
Apply the animation and interaction to the other picture.

138
The number list in resource tab correspond the correct sequence of writing the word.
V. Use navigation button
While we are building the content, don’t forget to design how to direct users back to
homepage. In previous chapters, we insert images or buttons to direct our users to
homepage; but, in Smart Apps Creator, we also have the built-in navigation button that
could be helpful.
Select a page >> go to page tab >> turn on navigation page as below
Navigation page on:
Navigation page off:

139
Select navigation >> adjust the size or replace it with image
Preview:

140
HOME Page: Set a page as homepage
Close Flip Sensor: Turn off the hand flip function
VI. Homework
Design your own Chinese character, learn the definition and share with friend.

141
Appendix
Apple Store Publish Steps
Before publishing, please prepare:
A Mac
iOS Xcode
Development Account
HLIOSPublisher (In Smart Apps Creator file folder)
Book File (Output from Smart Apps Creator)
Bring your HLIOSPublisher and book files to Mac and open it with Xcode.
2, Import project file.

142
3, Import finished.
4, Set info

143
5, Set In-App Purchase
6, General Setting

144
7, Build Settings
7.1, Code Signing Identity

145
7.2, Code Signing Identity—Any iOS SDK
7.3, Provisioning Profile

146
7.4, Provisioning Profile
8.1, Make App

147
8.2, Make App
8.3, Make App

148
9.1, Submit to App Store

149
10.1, Complete Submission

150
11.1, Go to iTunes Connect to upload app and follow Apple Store’s steps

151
Googleplay publish steps
Output .apk >> fill in the blanks. (Programme Name must start by “com.” Followed by your
own characters)
Go to http://developer.android.com/index.html >> select DEVELOPER CONSOLE
Follow Google Play’s process >> check agree >> continue to payment

152
Pay 25USD to buy developer’s account
Click “create application”

154
There are four tab that you need to complete. Each of them is marked by a icon.
Select APK tab >> upload your .apk file
Uploading

155
Follow the instruction and fill in the blanks
Read the instruction and upload the screenshots that match its requirement.

156
DO NOT check “Not submitting a privacy policy” >> copy and paste the privacy policy URL we
prepared for you. http://smartappscreator.com/privacy/
(You can write your own privacy policy and copy URL to here.)
After finishing, click “Why can’t I publish”

157
Its system will detect which part you are missing.
Complete “Content Rating”

158
Click “Calculate Rating”
Set “Pricing & Distrubution”

159
Complete four tabs >> they will all marked green
Select publish

160
Your app will be shown on ALL APPLICATION tab. STATUS is Pending publication. Now wait
for Google’s verification.

161
JSON database building steps:
How to use Table in Smart Apps Creator
Smart Apps Creator 3 table function lets you view JSON data through URL. Simply insert
URL of JSON format data. (Users can build their own database and change the data source to
JSON format.)
Step by step tutorial: Click Insert >> select Table.
In attribute section you can see more detail adjustments.

162
Copy and paste the URL http://www.smartappscreator.com/index.php?m=Wsell&a=json
(You can also search for “opendata” for more URL that is linked to data in JSON format )
Select the table and select Service Setting in the attribute tab
Copy and paste URL >> select GET >> click Run >> data will be import in the windows below:

163
Click submit. Table will receive JSON format data.
Go to the bottom-right corner to adjust the label that corresponds the position of the table.

164
Select the table >> select IMG under Image View >> select Name and desc under Label
Select table setting >> you will see a pop-up windows

165
Select Text >> you will see a textbox >> select the textbox >> at the bottom right corner you
will see name and text >> insert “priceT” for name and “price:” for text

166
Insert textbox again >> then insert “price” for name >> submit.
Select the table >> under setting you will see we just added two new label “priceT”
and ”price.”

167
For PriceT, we already give it a text, “price”; so we will see the text on our screen, under the
setting we don’t adjust anything. For price, we didn’t give it a text, under the setting, we can
change it to price number so that the two label can be placed together to display price.
Now we are going to adjust the display to make the table more comfortable.

168
Select table and adjust its position and size to: x:167px, y:0px, width:650px, height:768px
Change the background color to grey (CCCCCC)
Go to Table Setting >> set width and height 650px and 340px
Select Image View and set x : 0px, y : 0p, width: 280px, height: 350px

169
Select “A” and set x : 0px, y : 0px, width: 280px, height: 350px
Select “B” and set x : 290px, y : 70px, width: 350px, height: 220px

170
Select “Price:” and set x: 300px, y: 305px, width: 40px, height: 20px
Select “Label” and set x: 360px, y : 305px, width: 40px, height: 20px
Now your table can be adjusted according your request:

171
Security Application
For people who want to protect their data from being exchanged can select https (if your
website is https) under service setting >> insert only www.smartappscreator.com/index.php
>> select GET >> select URL Params >> change “Add Header Name” to “m” and ad Wsell as
value >> change “Add Header Name” to “a” and add json as Value >> select Run to retrieve
data. (If you program your own URL, you can alternate between GET and POST to limit URL
users by giving correct value)

172
Opendata Application
On the Internet, there are huge amount of opendata that can be public accessed. Here we
only take one website as an example. Go to http://digiark.ntmofa.gov.tw >> find any JSON
data and get its URL (here we already get one URL for you) URL :
http://digiark.ntmofa.gov.tw/web2/getMetadataList.aspx?format=opendata
*The above site is expired, please access https://data.cdc.gov.tw/en/ to search for JSON data
and insert to table. You may continue to read the instructions for more information.
Insert table >> select service setting >> paste URL >> run >> submit
Select table setting and set width and height: 1024px and 350px
Select Image View and set x: 0px, y: 0px, width: 345px, height: 350px

173
Select Lable A and set x: 373px, y: 20px, width: 650px, height: 30px
Select Lable B and set x: 365px, y: 70px, width: 630px, height: 265px
Under setting select Image under Image View
Select Subject under Label

174
Select Content under Label
Application of json and key
Here we are going to introduce an advanced application of json.
Go to URL : http://www.u-smart.com.tw/test/t2.php >> Ctrl+F search for KeyA and KeyB >>
you will see KeyA and KeyB are both with quotation: “”.
Insert table >> service setting >> insert URL >> Run >> Submit >> you will see KeyA and KeyB
under setting >> create another page >> insert another table >> set the two table with KeyA
and KeyB respectively to compare their difference.

175
Under KeyB, your image View and the other two label can be set as a1, a2 and a3.
Under KeyA, your image View and the other two label can be set as Bill, Mark and Steve.
We found that the “KeyA” or “KeyB” will result in different value.
How to set responsive interaction on table function
Step 1: After you’ve inserted a table in Smart Apps Creator 3, select table >> interaction >>
touch item.
Step 2: Select an item which you want to apply responsive interaction. Select key >> select
value >> submit.

176
Step 3: For object, please select table >> for response, please select an option (Here we
select switch) >> then please click add.
Now we finished responsive interaction on table function, repeat above steps according to
your needs to make your database more interactive with viewers.

177
Link your data base to a website
If you have large numbers of url link for each item in your excel sheet, Smart Apps Creator 3
can direct these url links to destination website.
Step 1: Select table >> check “Click item open URL” >> select the cell title that match URL
link column in your excel sheet >> then your url links are set.

179
Message Delivery steps
Open your Smart Apps Creator 3 >> check the Enable Push field >> click Apply Push ID
Sign In AppShow service
Insert your app name and click apply app id

180
Copy and paste App ID into your Smart Apps Creator 3, position show below. Then click next.
Insert your subject, content and click next.

181
Check the box which correspond your App ID.
Submit and confirm your u-Coins payment. (50 u-Coins will be given to new registered
members)

182
Message Delivered
Your message will be delivered to the app that connected to the App ID.

183
Manage your message
Go to App project list to delete or review your messages
Click link to review message

184
Excel To JSON Tutorial (For users who don’t know how to build JSON
database)
1. Prepare a Excel sheet
Insert your data on a excel sheet >> Save your excel data as .xlsx format >> In this example,
there are 2 rows of data. A1 to D1 are title (and can only be title) for each column. A2 to D2
are your real data details.
a. If your data includes images, please upload your images to an online space then copy
and paste your image URL to a cell. (your URL must be include .jpg ,png, or other file
format)
b. The first row must be data title for each column.
c. When saving as .xlsx, please do not use symbol (!@#$^%& etc.) in your file name
2. Convert your .xlsx to .JSON
Go to AppShow service >> Select Excel to .JSON >> Insert your excel title and upload
your .xlsx >> Select your .JSON space >> Click upload file

185
After uploading, click Link
Copy and Paste the generated URL to table function. Your data could be viewed in apps as a
result. (Please read table view function tutorial in Smart Apps Creator 3 program folder.)
3. You can update your data anytime you want. Just delete the previous file and upload
a new .xlsx by selecting the same project ID. Then your app would load the latest
data.

186
JSON Cross Domain Policy
While accessing database, the data may not be performed successfully on Html5 since a
Cross Domain Access Policies in web browser. Here we offer a way to help you:
Insert JSON URL：
*Please include URL “http://” or “https://” Convert

187
After your conversion, please copy and paste your URL to Smart Apps Creator 3
How to acquire legal images and music that you can reuse
Go to Google >> search, for example, car
Copy

188
Select image tab
Select tool

189
Select usage right >> labeled for reuse >> images here are mostly CC0 copy right and are free
to use
Search YouTube Library on Google.

190
Select attribution and download.

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

More from Ir. Haitan Rachman MT, KMPC

More from Ir. Haitan Rachman MT, KMPC (20)

Recently uploaded

Recently uploaded (20)