Redang Apps Progress

Sunday 9 February 2014

References

Behance. 2014. Character Designs. [online] Available at: https://www.behance.net/gallery/Character-Designs/10505063 [Accessed: 9 Feb 2014].

I will spend one hour’s time everyday to look at professional artwork in Behance. During the period of this assignment, a lot of people design character with this specific artstyle, so base on this reference I create my characters.

Behance. 2014. Flat Icons. [online] Available at: https://www.behance.net/gallery/Flat-Icons/12123407 [Accessed: 9 Feb 2014].

Flat design is one of the specific art style that a lot of designer use to design application due to apple mobile have change their design to flat design and this bring a large impact to the design industry (base on my personal perspective). So I will try to use this kind of design to create my application’s icons.

Behance. 2014. Discover Australia. [online] Available at: https://www.behance.net/gallery/Discover-Australia/10686829 [Accessed: 9 Feb 2014].

Discover Australia is a map design by a designer to show the famous travel location in Australia. This artwork gives me some idea of how to design my Redang Map. By using the local building to set as the benchmark to attach user.

Behance. 2014. NUI Archive Presentation. [online] Available at: https://www.behance.net/gallery/NUI-Archive-Presentation/12119949 [Accessed: 9 Feb 2014].

Simple outline icon is one of the styles that normally use in flat design. Simple and iconic symbol able to let user understand what is the message that the symbol bring out.

Behance. 2014. DREAM CLOUD. [online] Available at: https://www.behance.net/gallery/DREAM-CLOUD/12701583 [Accessed: 9 Feb 2014].

I found this reference while I am searching for flat design icon. This design used simple shape to form out and it link to my application design style. So I use this design to design my application’s icon.

Behance. 2014. Family pics icons. [online] Available at: https://www.behance.net/gallery/Family-pics-icons/7528133 [Accessed: 9 Feb 2014].

This art style is similar to NUI Archive Presentation. The design is form with basic outlines. So I use this reference to design icon and symbols.

Behance. 2014. Le Duo. [online] Available at: https://www.behance.net/gallery/Le-Duo/12103085 [Accessed: 9 Feb 2014].

This reference I found in Behance shows different kind of map design. The artworks use local iconic building and object to show different the location. The iconic objects also become one of the attractions when people see the artworks.

Berjaya-air.com. 2014. Your Getaway Airline | Berjaya Air. [online] Available at: http://www.berjaya-air.com/ [Accessed: 9 Feb 2014].

I found this website when I was searching for information that I will like to show in my Redang application. Basically I find this website after I research on google map. I collected the number, address and website address of the airport.

Bhaskaran, S. 2014. Using the tel: and sms: URIs | Adobe Developer Connection. [online] Available at: http://www.adobe.com/devnet/air/quick_start_as/quickstarts/qs_using_uris.html [Accessed: 9 Feb 2014].

This is a tutorial I find in Google while I searching for the tutorial to link a button to phone number and let user to call the hotel right after the user press the button. From this tutorial I understand that this function are only able for Android 2.2 device or emulator

CartoonSmart Blog. 2010. Free Accelerometer Tutorial with Actionscript 3, Flash CS5 and Device Central. [online] Available at: http://cartoonsmartblog.wordpress.com/2010/12/02/free-accelerometer-tutorial-with-actionscript-3-flash-cs5-and-device-central/ [Accessed: 9 Feb 2014].

This is a tutorial I find in Google while I searching for the tutorial to learn how operate Accelerometer and how to use AS3 to code Accelerometer. This function was used to navigate the map. But after Alpha and beta test, the user think it will be better if I remove the accelerometer.

Diveredang.com. 2014. Dive Packages | PADI SDI | Redang Pelangi Resort | Snorkelling Packages | Full Board Accommodation. [online] Available at: http://www.diveredang.com/ [Accessed: 9 Feb 2014].

Lagunaredang.com.my. 2014. Laguna Redang - Home. [online] Available at: https://www.lagunaredang.com.my/ [Accessed: 9 Feb 2014].

Lagunaredang.com.my. 2014. Laguna Redang - More More Tea Inn Gift Shop. [online] Available at: https://www.lagunaredang.com.my/facilities/more-more-tea-inn-gift-shop.html [Accessed: 9 Feb 2014].

I found this website when I was searching for information that I will like to show in my Redang application. Basically I find this website after I research on google map. I collected the address and information of the Laguna Redang More More Tea Inn.

Maps.google.com. 2014. Pulau Redang, Kuala Terengganu, Terengganu, Malaysia - Google Maps. [online] Available at: https://maps.google.com/maps?q=Pulau+Redang,+Kuala+Terengganu,+Terengganu,+Malaysia&hl=en&ll=5.787481,103.006954&spn=0.116818,0.181789&sll=37.0625,-95.677068&sspn=49.71116,93.076172&oq=pulau+re&hnear=Pulau+Redang,+Kuala+Terengganu,+Terengganu,+Malaysia&t=m&z=13 [Accessed: 9 Feb 2014].

I use Google maps to search Pulau Redang maps. I print screen the map so that I can create my own virtual maps. And base on the map I am able to find out what are the hotel and facilities available on the Island.

Redangislandresort.com. 2014. Redang Island Resort | Resort hotel in Redang Island, Pulau Redang, Terengganu, Malaysia. [online] Available at: http://www.redangislandresort.com/ [Accessed: 9 Feb 2014].

Redangmutiara.com.my. 2014. Home - Redang Mutiara Beach Resort. [online] Available at: http://www.redangmutiara.com.my/ [Accessed: 9 Feb 2014].

Republicofcode.com. 2014. AS3: Accelerometer. [online] Available at: http://www.republicofcode.com/tutorials/flash/as3accelerometer/ [Accessed: 9 Feb 2014].

This is a tutorial I find in Google while I searching for the tutorial to learn how operate Accelerometer and how to use AS3 to code Accelerometer. This website provide step-by-step tutorial and coding for me to download and explore with the coding.

Republicofcode.com. 2014. AS3: Linking to Another Webpage. [online] Available at: http://www.republicofcode.com/tutorials/flash/as3link/ [Accessed: 9 Feb 2014].

This is a tutorial I find in Google while I searching for the tutorial to link a button to the a specific website and let user to check out more information of the hotel right after the user press the button.

Saripacifica.com. 2014. Malaysia Hotel: Sari Pacific Resort & Spa | Official Website. [online] Available at: http://www.saripacifica.com/ [Accessed: 9 Feb 2014].

Snipplr.com. 2014. AS3: Exiting Android App - ActionScript 3 - Snipplr Social Snippet Repository. [online] Available at: http://snipplr.com/view/60824/as3-exiting-android-app/ [Accessed: 9 Feb 2014].

I found this tutorial to help me on accessing the button on an android mobile. Iphone and Android mobile is different. For Android devise, they are normal come with three buttons back home and multitasking button. Iphone only have one home button. So I need to know the way to access the back so for android user they are able to use the back button.

Thetaaras.com. 2014. Luxury Beach Resorts in Pulau Redang Island Malaysia - Official Website of The Taaras. [online] Available at: http://www.thetaaras.com/ [Accessed: 9 Feb 2014].

Tutorialsbyibrent.com. 2014. Tutorials by iBrent. [online] Available at: http://www.tutorialsbyibrent.com/ [Accessed: 9 Feb 2014].

I find this website through youtube video link. IBrent is youtuber that share As3 coding tutorial in youtube. Beside that he also share the files online, so user are able to download and try the code.

Wikitravel.org. 2014. Redang travel guide - Wikitravel. [online] Available at: http://wikitravel.org/en/Redang [Accessed: 9 Feb 2014].

I found this website when I was searching for information that I will like to show in my Redang application. Basically I find this website after I research on the food and facilities on Redang Island. This webpage provide me more detail about the facilities and restaurants.

YouTube. 2014. Accelerometer Code with Actionscript 3 and Flash CS5 - Part 1. [online] Available at: https://www.youtube.com/watch?v=KpTKkLgcdKI [Accessed: 9 Feb 2014].

This is a tutorial I find in Youtube while I searching for the tutorial to learn how operate Accelerometer and how to use AS3 to code Accelerometer. This youtube provide step-by-step tutorial.

YouTube. 2014. How a Smartphone Knows Up from Down (accelerometer). [online] Available at: https://www.youtube.com/watch?v=KZVgKu6v808 [Accessed: 9 Feb 2014].

This is a tutorial I find in Youtube while I searching for the tutorial to learn how operate Accelerometer. This video explains how does an accelerometer works and it provide some sample of an Accelerometer can do.

YouTube. 2014. Flash CS5.5: Android - Accelerometer Demo. [online] Available at: https://www.youtube.com/watch?v=nMdPs7097Kw [Accessed: 9 Feb 2014].

This is a tutorial I find in Youtube while I searching for the tutorial to learn how operate Accelerometer. This video shows the tutorial of how to create accelerometer with AS3 by iBrent.

YouTube. 2014. Flash CS5.5 Tutorial Android App Orientation Change Size Actionscript 3.0. [online] Available at: https://www.youtube.com/watch?v=TKtMEzzzf4I [Accessed: 9 Feb 2014]

This is a tutorial I find in Youtube while I searching for the tutorial to learn how operate Orientation. This video shows the tutorial of how to create Orientation with AS3 by iBrent. But I didn't apply this in my application because I want to create an application that user can use with one hand.

YouTube. 2014. Flash CS5.5- iOS - Multitouch - Swipe - on an iPhone. [online] Available at: https://www.youtube.com/watch?v=Nesz5-NoTmk [Accessed: 9 Feb 2014].

This is a tutorial I find in Youtube while I searching for the tutorial to learn how operate Swipe function. This video shows the tutorial of how to create Swipe function with AS3 by iBrent. I use this to learn how to create a fancy menu give user a new experience of exploring a menu.

YouTube. 2014. Flash CS5.5: Android - Multitouch GESTURE - Zoom and Rotate setup. [online] Available at: https://www.youtube.com/watch?v=-vw_DmIusHE [Accessed: 9 Feb 2014].

This is a tutorial I find in Youtube while I searching for the tutorial to learn how to use pitch gesture to enlarge the maps. This video shows the tutorial of how to enlarge an image with AS3 by iBrent. I use this to learn how to create a pitch gesture for user to enlarge the map.

YouTube. 2014. FB4.5: AS Mobile - Android - Multitouch GESTURE_PAN setup. [online] Available at: https://www.youtube.com/watch?v=eqlbJrzvk68 [Accessed: 9 Feb 2014].

This is a tutorial I find in Youtube while I searching for the tutorial to learn how to use pan gesture. This video shows the tutorial of how to create a pan gesture with AS3. I use this tutorial to learn how to create a pan gesture for user to have another option to navigate the app besides using Accelerometer. But after Alpha test I replace pan gesture with touch and drag gesture.

YouTube. 2014. Flash CS5.5 Tutorial Android App APK File Application Publish Settings. [online] Available at: https://www.youtube.com/watch?v=H7eoxjUncHM [Accessed: 9 Feb 2014].

I find this tutorial to learn how to upload my application from my laptop to my android device. This tutorial teaches me how to create the license and the APK file to upload to my device and download it from my device.

Saturday 8 February 2014

Redang Application

Final video run through (desktop version)

Final video run through (Mobile version)

Second Alpha test On Mobile

After fixing the error i had base on the first alpha test, i did another more official alpha with my classmate. I reuse the alpha test form that was given by Zui last semester to run a few alpha tests. And below is some photo of the test. Total of 5 people involve in this test .

And this is the video of the application on mobile.

And the is the result i get base on the alpha test.

1) Broken Link:

Melissa : Some of the link have bugs.

Charissa: Not that i know of

Leon: Taraas page have broken link when click back to maps

Jeremy :1 lor

Angela: Taraas page broken

2)Glitch of programming:

Melissa : map accelerometer can be remove

Charissa: Take away the accelerometer

Leon: Taraas broken link, remove accelerometer

Jeremy: refer on top

Angela: Refer to Broken Link

3) Errors of intruction

Melissa: -

Charissa: Ok, Good

Leon: Ok

Jeremy: Clear (i think should have a button to go to the tutorial page)

Angela:Clear

4) Design Issue:

Melissa: Location Icon can be bigger, Tree too big, the building can be bigger, smaller menu button, remove shadow for fonts.

Charissa: Drop shadow of words can be nearer to the white text. Cause it looks like two sentences overlayed rather than a shadow. Put the text (Redang Map or put a compass there .Put some sound like click the food and restaurant the got cooking sound.

Leon: Fine, cartoon style. Font don't drop shadow.

Jeremy: Drop shadow on menu too dark and far.

Angela: Font remove shadow for list.

5) Audio component issues?

Melissa: -

Charissa: input sound effects

Leon: -

Jeremy: -

Angela : -

6)Proper action and feedback

Melissa:-

Charissa: Got the alert. good. maybe if you click the icon then pop up a short description.

Leon: For the main menu button can put some hint

Jeremy: Need to show that main menu is swipeable. On dedicated menu bar which is always consistent on one spot

Angela: put glow show so can know where to click . Put arrow for swipeable menu.

7)Proper navigation:

Melissa: Sliding sign and remove accelerometer.

Charissa: Ok. everything is fine accept for the accelerometer.

Leon: Accelerometer can remove

Jeremy : Accelerometer move to slow.One finger gesture instead of two

Angela: Remove Accelerometer

8) Overall performance:

Melissa: Ok lo.Fixed the bug lo. like the graphic lo

Charissa: Good! abit more refinement to make it more exciting like the cloud.

Leon: Ok. Some minor bugs

Jeremy : Good

Angela: Ok overall. Lost in maps about the user flow. If good that i can access to gps or map.

Refinement:

So base one the comment i fixed the error and did some refinement on the design and coding

Design:

i remove the the accelerometer from the application and change the pan gesture to click and drag gesture to provide user a more user friendly application.

For the information page instead of putting info i replace it with button so when user tap on the button they will be lead to their website , google and calling page.

for the swipeable menu i put in hint to show the menu is swipeable.

I add in animated cloud to make the map not that borrow and i had make the building bigger.

I remove the drop shadow from the font so it is not that confusing.

i have make the location icon become bigger so it is easier to been spot.

I also add in a intro pop up before entering the information page. Below is the design of the pop up information box.

Friday 7 February 2014

Week 11 part 2

Link to website and access to phone call

After finishing most of the page linking, to make the Application more functionable and user friendly for the user. Instate just let you saw the information. I make the info clickable and link them to the website able to let the user call.

I search through internet to find some relevant code so that i can understand how does the coding work

Link to URL

From this website i understand how to navigateToURL to create a link to URL

first i need to import the event into flash before i code.

for call, the latest SDK and AIR provide the new function to access and call and sms with the code "tel" and "sms"

Access to phone Keyboard (NativeApplication)
Android devices have their own back button and iphone don't have so when creating iphone application user need to create their own back button but android we are able to access to their keyboard and use the back button.

I find this tutorial that available online.

http://snipplr.com/view/60824/as3-exiting-android-app/

so base on the tutorial i first import the system,

that i create a function

and last i command which will i go after i press the key back.

Upload to mobile (TESTFLIGHT)

after double check on the function on laptop i search on internet how to upload the files to android mobile. So this the tutorial i found on youtube.

base on the tutorial create the license and instead of using cable to transfer the files i uses TestFlight a software that was introduced by yi wei. Test flight is a website design for app developer to use for user test and let developer trouble shoot their application.

I include the 3 different size of icon just in case the screen icon do not fit. Then tick on the abilities that redang app will access the publish the apk files.

After finish publishing i login to test flight website to upload the apk files. When the files finished upload i notify and update the user so that they can download the apps.

I launch the testflight apps in my phone

then i click on the latest version to download onto my mobiles

when the application finish download you will able to see the icon on your phone.

so that the way i upload the app to my mobile.

Monday 27 January 2014

Week 11

After testing and testing the ui and function i try to find out some better solution for the application. I try to make the user interface and user experience more user friendly.

I create a new button and the hotel and facilities page a new button to show where is the location of the current hotel.

I enter some code to make the marker visible that when trigger the button, I share the function across the actionscript so that when the marker can be trigger from other actionscript.

first i code the marker to be invisible;

After that i create a button for user to go to the map and show the location of the hotel or shop

I give a function to the button to tell him go to map page create a share function

The share will add inside the redangmapMC actionscript so when the button click the marker will be show.

Saturday 25 January 2014

Week 10

After collect some alpha test information, i base on the problem try to refine my design and some of the coding.

First i fixed the most important problem of all which is the application is too lag.

Base on that, instead of importing vector image. Some of the elements that were used in the application, I replace it with png format images. So the files is smaller and the application no need to generate pixel by pixel.

For the rest of the survey i get i will create a tutorial page to tell the user what are the gesture are include in this application.

Before that i finish up the design before i start fixing the minor error.

I add in the food court and restaurant design.

I also finish up with all the information page.

After that i try to find out the way to fix some minor error of application to make it more user friendly.

In the redang map page the map will move out of the stage while using pan gesture or accelerometer so i need limit the error so i need to came a calculation to make a condition to let the AS3 to check before the user can use the gesture.

Before:

After i type in this coding

Friday 17 January 2014

Week 9 Alpha Test

17/1/2014

Today i able to borrow a mobile device from a class. While the lecturer help us to borrow the mobile phone, i am able to ask for permission to do a short alpha test with my classmate.

First i used testflight you share and upload my redang application to an android device. I able to start my alpha test with few of the classmate due to the time and other classmate were using the devices.
So basically the alpha test was run in verbal format.

Some of the classmates volunteer themselves to help me on the test . There are four person involve in this test.

And from what i note down during the alpha test is :

4 out of 4 say the application is too lag and slow in response.

3 out of 4 don't really know the menu page can use swipe gesture to check on the button .

4 out of 4 don't know what is pan gesture.

2 out of 4 know that the map can be enlarge by pitch and scale gesture.

2 out of 4 think that Accelerometer is unnecessary to put into this application.

Due to the among of time i have this i what i have note down for the problem.

I realise that by dragging in vector as a image will make the the application file become bigger and every time a user move the image the phone will generate the pixel every time and that is the reason why the application will become so slow. I have change most of the image into png files so can make the application even smoother.

For the gesture i will design a loading pack and step to teach the user how to function this application.

As for the main menu page i will design hits below the button to teach user to swipe to the left to explore the buttons and when it reach the last button i will show hint to swipe to the right to go back to previous button.

I will run another alpha test after i have fixed the bug so that i collect even more data about how the user interface design help the application.