Smart Apps Creator 3 Eng Step-By-Step Book [PDF]

Zitiervorschau

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)

1

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

2

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. 6. 7. 8. 9.

Support JSON database Highly interactive with viewer, touch monitor and digital signage Upload applications as HTML5 Intuitive dran n’ drop UI Support animation and template

3

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.

4

Smart Apps Creator 3 Manual 5 main Sections: 1. 2. 3. 4. 5.

Overflow: Includes smart button, save button, undo button and next button. Tabs: Includes edit, insert, template, animation, interaction, page and Real-Time Test. Navigation: includes preview and resource bank. Canvas: includes main area, close preview button and close attribute button. Attribute bar: includes attribute tab and layer tab

1. Overflow:

5

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

New: Add a new page Hot key: Ctrl+N

Copy: Copy asset Hot Key: Ctrl+C Delete: Delete asset Hot Key: Delete Font: Select fonts Text size: Adjust text size

6

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. Reduce space to the left margin

Add space to the left margin Adjust space to the right

Copy text format Apply text format

margin

Symbols Align left Align center Align right Align left and right Align left Align center Align right

Bring asset to the top

Spread average on

Bring asset forward Bring asset to the

horizon

bottom

Align up

Bring asset backward

Align center vertically Align down 7

Spread average on verticals

Insert images (support

Print your current page

JPEG、PNG、GIF format)

Print all pages of your

Insert text: insert text

project

and select typing

Print pages you selected

direction.

Real-Time Test Real-Time

Preview current page

Test (Please install Smart

Preview from splash

Apps Creator application on

screen

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

Audio: Insert .mp3

image (support

file.

JPEG、PNG、GIF)

Video: Insert .mp4 Multiple Images:

or YouTube link

Insert more than

(Only support H.264,

one imags to

AAC128 .mp4)

seperate pages. (support JPEG、 PNG、GIF)

8

Text: insert text and

Formula: Insert and

select a direction.

edit formula symbol.

TextInput: insert a

Symbol: Insert

text box to let users

symbol

type from their smart device (support interaction) Bubble: Insert text bubble Background: Insert

PDF: Insert PDF

background pic

(support original and HD image)

Images Sequence:

Page Timer: Insert a

you Insert multiple

timer which is

images sequence

exclusive for one

and play them

page.

swiftly (Cause

Global Timer: Insert

animation effects)

a timer which corresponds to multiple pages.

Page Counter:

Hotspot: A touch

Insert a counter

sensor area. Can be

which corresponds

used as buttons or

to one page.

interaction

Global Counter: Insert a counter corresponds to multiple pages.

9

Slide: Insert slides

Button: combine two images into button. (pressed and unpressed)

Webpage: Insert

HTML: Insert HTML

webpage to your

documents or HTML

project

folders

Map: Insert Google

Table: Connect and

map

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 Select Directory

10

Slide

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 

11

Camera

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.

12

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

13

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 14

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.

15

Add: Save interaction.

Page Tab

Book Flip: Book flip

BGM: Background

effect.

music (background music is applied to

Corner Flip: Corner

all pages).

flip effect. Slide Flip: Slide flip effect. Navigate Setting:

HOME Page: Set

Adjust the navigate

which page is

button at the corner

homepage (Start

of screen.

page cannot be home page) Start Page Time: Set start page seconds.

Close Navigation:

Close Hand Flip:

Disappear navigate

Disable hand flip

button.

function. Pages can be flipped only

Open Navigation:

through button.

Appear navigate

Open Hand Flip:

button.

Enable hand flip function.

Subpage: Only appear

Import Page:

after you select “Slide

Import .ahl project

Flip.” Set a page as

pages into the

subpage and its

current project.

previous page will be

(The .ahl project

16

seen as main page

must use the same

automatically.

screen size with the

Subpage should be

current project)

arrived through slide downward. 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

Resource Bank: All

pages preview will

materials will show

show up here.

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.

17

Attribute Tab

Attribute Tab contains Property and Layer as below: Property tab contains Setting interaction 

, Animation

and

:

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)

18

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

19

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

20

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.

21

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.

22

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

23

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.

24

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.

25

ii.

Output .apk file

Click Smart button on the up-left of your screen.

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.

26

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 Smart button on the up-left of your screen.

Click Output.

Select EXE icon and select Emulator style or Desktop style and submit. (The difference lies in the display window)

27

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

Emulator style

28

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 29

online. Click

on the upper-left corner of the interface.

Click output

Select HTML5 tab and click upload guide.

30

Register and sign in AppShow service

31

Select H5 Space >> New H5 Project

32

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

33

Select your zip file then upload file

34

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

35

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

36

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/

37

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:

38

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.

39

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. 40

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. 41

Interaction Interaction is where you give logos:

image a responsive action. Let’s apply any animations to two

After applying animations to logos, select the text box >> go to Interaction >> select Animation End >> Submit >> Select object: Smart Apps Creator logo Animation >> click Add >> then preview.

8

Note: Your animation will appear on right side interactivity bar.

8

Ibid. 42

>> select Play

Be sure to select the Smart Apps Creator logo

Repeat the same steps to the u-Smart Tech logo Select Smart Apps Creator logo

and check “hide object when browsing.”

:

>> go to Interaction >> select Animation End >>

Submit >> Select object: u-Smart Tech logo

>> select Play Animation >> click Add >>

then preview.

43

9

Your animation will appear on

right side interactivity bar.

Be sure to select the Smart Apps Creator logo

9

Ibid. 44

and check “hide object when browsing.”

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.

45

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

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. 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 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.

46

(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

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. 13 Simon Berry. YouTube icon square. Digital image. flickr. Jan. 9 2016. Accessed Dec 29, 2016. https://www.flickr.com/photos/colalife/24270243225.

47

14

Set Dragging

13

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/ 13 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 14 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. 14

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. 14 Simon Berry. YouTube icon square. Digital image. flickr. Jan. 9 2016. Accessed Dec 29, 2016. https://www.flickr.com/photos/colalife/24270243225. 14 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/ 14 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

48

15

Let users drag pictures: Select image >> go to setting >> check “Dragging.” If you don’t want enlarge animation then cancel “Enlarge When Dragging.”

16

Put these four pictures

under rabbit images layers.

!! Please set picture layer as below.

15 16

niekverlann. Digital image. pixabay. Aug. 19, 2014. Accessed Dec 29, 2016. https://pixabay.com/p-1075789/?no_redirect

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. 16 Simon Berry. YouTube icon square. Digital image. flickr. Jan. 9 2016. Accessed Dec 29, 2016. https://www.flickr.com/photos/colalife/24270243225. 16 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/ 16 Resorts World at Sentosa. Digital image. Resorts World at Sentosa. Accessed Dec 29,

49

insert black cover

to canvas>> go to property >> setting >> adjust opacity to

66%

17

17

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.

50

>> 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

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. 18

Ibid. 51

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. 52

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. 53

(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. 54

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 22

Ibid

William Cho. English: Universal Studios Singapore in the evening. Digital image. Wikimedia Commons. 11 September 2010, 19:33. Accessed Dec 29, 2016. https://commons.wikimedia.org/wiki/File:Universal_Studios_of_Singapore_-_Disney.jpg

55

23

Go to homepage, now we are going to connect the pictures website pages. Select

24

and

and

with their

in the layer tab. Repeat and apply the same interaction to

.. 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

Resorts World at Sentosa. Digital image. Resorts World at Sentosa. Accessed Dec 29, 2016, http://www.rwsentosa.com/Homepage/Attractions/UniversalStudiosSingapore 23 William Cho. English: Universal Studios Singapore in the evening. Digital image. Wikimedia Commons. 11 September 2010, 19:33. Accessed Dec 29, 2016. https://commons.wikimedia.org/wiki/File:Universal_Studios_of_Singapore_-_Disney.jpg 23

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. 23 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. 24 Simon Berry. YouTube icon square. Digital image. flickr. Jan. 9 2016. Accessed Dec 29, 2016. https://www.flickr.com/photos/colalife/24270243225. 24 Resorts World at Sentosa. Digital image. Resorts World at Sentosa. Accessed Dec 29, 2016, http://www.rwsentosa.com/Homepage/Attractions/UniversalStudiosSingapore 25 26

ibid

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/

56

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

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 28

Ibid 57

29

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

29

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

58

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

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

59

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

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 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. 60

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

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 35

Ibid. 61

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

36

36

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

62

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

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 38 39

Ibid. Ibid. 63

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 41

Ibid.

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

64

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. 65

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 44

Ibid. Ibid. 66

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 46

Ibid. Ibid. 67

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 48

Ibid.

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/

68

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

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. 49 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.

69

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.

70

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.

71

*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:

72

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.

73

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 )

74

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)

75

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 76

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

77

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

78

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

79

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:

80

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)

81

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

82

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

83

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.

84

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.

85

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/

86

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:

87

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 88

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)

89

90

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/ 91

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/

92

53

See if you complete the homepage.

53

Ibid. 93

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. 54 55 56

Spot the difference 1 – Insert all materials

Ibid. Ibid. Ibid. 94

Insert >> background >> extrude >> select

>> insert >> image >> select

>> adjust its size and position to “x: 0,” ”y: 202,” ”width: 1024” and ”height: 57

565.”

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 59

Ibid. Ibid. 95

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. 96

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. 97

62

Insert move all

62

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

Ibid. 98

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. 99

64

IV.

Set Interaction

Select and apply interaction to hotspot2~5 Select hotspot2 >> interaction >> touch >> select

64

Ibid. 100

under object >> appear >> add.

65

Select hotspot2 >> interaction >> touch >> select sound for answering correctly under object >> play >> add

66

65 66

Ibid. Ibid. 101

Preview your interaction

Click 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 68

Ethan Hein, Best sound ever, Digital image, flickr, Aug. 22 2008, Accessed Dec, 30 2016. https://www.flickr.com/photos/ethanhein/2787035531

Ibid. 102

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 70

Ibid. Ibid. 103

71

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

72

71 72

Ibid. Ibid. 104

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. 105

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. 106

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 76

Ibid. Ibid. 107

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. 108

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

109

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

110

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 81 82

Ibid. Game over, maklay62, Digital image. pixabay. June 2016, Accessed Dec 29, 2016. https://pixabay.com/p-1432947/?no_redirect Win, 568647, Digital image. pixabay. Jan. 22, 2015, Accessed Dec 29, 2016. https://pixabay.com/p-606689/?no_redirect

111

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)

112

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 113

>>

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.”

114

After the animation end we want to direct the page to the opening page of the game.

Create a new page >> select 2 >> submit >> select

>> interaction >> animation end >> single animation end: under object >> flip to >> select page 2 >> submit

115

Insert >> select background >> adjust the background size and fill the page >> go to layer and lock the image

Insert text,

,

as below: 116

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:

117

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.

118

Preview. Moles will move up and down:

Insert >> images sequence >> set image changing interval 42 >> submit >> check “hide object when browsing.”

119

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. 120

sequence 3 times >> cover the three image sequence above each mole as below. On canvas:

85

In preview mode:

III. 85

Set interaction

Ibid. 121

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 step 6 of below picture – first stop appear >> let

,

,

and

animation >> hide

play sequence >> let

>> select their response (see >> let

appear >> let

stop play sequence).86

87

Apply the same instructions to the other 2 moles as below:

86 87

Ibid. Ibid. 122

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. 123

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 90 91

Ibid. Ibid. Ibid. 124

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

125

Select word tool option

Type and save as png

Go to page 4 >> change text and insert new them. (see below)

126

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 93

Ibid. Ibid. 127

94

Same animation

95

94 95

Ibid. Ibid. 128

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 97

Ibid. Ibid. 129

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. 130

*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. 131

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. 132

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

133

Set interaction to select

III.

:

>> interaction >> touch >> select

under object >> flip to >> page 2.

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” 134

for three of them.

Apply animation to the three word parts.

Select Select Select

IV. Select

>> animation >> wipe >> select wipe down >> add. >> animation >> wipe >> select wipe right >> add. >> animation >> wipe >> select right >> add.

Set Interaction >> interaction >> touch >> select

135

under object >> play animation >> add.

Select

>> interaction >> animation end >>

under object >> play animation >> add

Select >> interaction >> animation end >> select animation >> add

136

under object >> play

Select >> interaction >> animation end >> select text box under object >> play animation >> add

Apply the animation and interaction to the other picture.

137

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:

138

Select navigation >> adjust the size or replace it with image

Preview:

139

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.

140

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.

141

3, Import finished.

4, Set info

142

5, Set In-App Purchase

6, General Setting

143

7, Build Settings

7.1, Code Signing Identity

144

7.2, Code Signing Identity—Any iOS SDK

7.3, Provisioning Profile

145

7.4, Provisioning Profile

8.1, Make App

146

8.2, Make App

8.3, Make App

147

9.1, Submit to App Store

9.2, Submit to App Store

148

9.3, Submit to App Store

10.1, Complete Submission

149

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

150

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 151

Pay 25USD to buy developer’s account

Click “create application”

152

Fill in the blank

153

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

154

Follow the instruction and fill in the blanks

Read the instruction and upload the screenshots that match its requirement.

155

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”

156

Its system will detect which part you are missing.

Complete “Content Rating”

157

Click “Calculate Rating”

Set “Pricing & Distrubution”

158

Complete four tabs >> they will all marked green

Select publish

159

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

160

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.

161

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:

162

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.

163

Select the table >> select IMG under Image View >> select Name and desc under Label

Select table setting >> you will see a pop-up windows

164

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

165

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.”

166

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.

167

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 168

Select “A” and set x : 0px, y : 0px, width: 280px, height: 350px

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

169

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:

170

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)

171

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

172

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

173

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.

174

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.

175

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.

176

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.

177

178

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 179

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

Insert your subject, content and click next.

180

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)

181

Message Delivered

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

182

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

Click link to review message

183

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

b. c.

and paste your image URL to a cell. (your URL must be include .jpg ,png, or other file format) The first row must be data title for each column. 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

184

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.

185

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： Convert

*Please include URL “http://” or “https://”

186

After your conversion, please copy and paste your URL to Smart Apps Creator 3 Copy

How to acquire legal images and music that you can reuse Go to Google >> search, for example, car

187

Select image tab

Select tool

188

Select usage right >> labeled for reuse >> images here are mostly CC0 copy right and are free to use

Search YouTube Library on Google.

189

Select attribution and download.

190