Archived:Prototyping your application through Flowella
I have discussed some issues and requirements of pre-planning before application development in my previous articles which are useful to read before starting the application design. Many of the developers are developing nice applications here and publishing them on Nokia Developer. Nokia Developer has become a very large family now. Developers from the whole world are contributing their codes for helping others in the user community to avail the expertise of the developers. But I have not seen yet a proper documentation describing a prototype. Prototype is the most useful method to document your application design. Prototyping can be used to document your application, your current design and future plans and progress. It is said that one picture can serve as a page to represent the application attributes. Luckily, Nokia has taken care of all the perspectives of application design. They have given nice software named Flowella to prototype application.
You need to download Adobe Air from http://get.adobe.com/air/otherversions/ Install the Adobe Air in your computer.
Flowella can be downloaded from www.forum.nokia.com/info/sw.nokia.com/id/7557c13f-0b43-4805-85ce- 8414bfbade57/Flowella.html
Flowella download comes into zip format; it needs to be unzipped in order to use it. Flowella comes with installation file, Flowella release note, Flowella tutorial and an example application “Podcast”. Open the Flowella-1.0.air file from unzipped folder into Adobe Air. The installation will start automatically. Follow the routine installation instruction to install Flowella.
Creating a project in Flowella
Here I am trying to prototype “How to send SMS” on Nokia mobile touch phones. All the Nokia mobile users are aware that in order to send SMS we follow a sequence: 1) Open Menu (2) Click on Messaging (3) Click on New Message (4) A message window will open where click on “TO” and write mobile number to whom we need to send SMS (5) Type The message (6) Click on send sms and (7) The message will be sent. To prototype this events let us create a folder “sendSMS” in the computer. Create another folder named “Assets” within the “sendSMS” folder. You need images of your application to show graphical representation of your application. I have captured few mobile screen images while sending sms. Store all these images into “Assets” folder within “sendSMS” folder. Now we are ready to prepare prototype of our application using Flowella. Open the Flowella from its installed location. As soon as Flowella opens, it will prompt you to create a new project or you can go to File menu and click “New”. You will be prompted for Project settings as shown in the image below. These project settings can be changed later on by clicking Project menu -> Edit setting later if required.
Here, you must take care that the images you captured should be of same size of the width and height of the project. This will result into occupying full screen in your mobile when you export your project to mobile device. (This will be discussed later on). Click on “Start Work!” button to create your project.
Flowella User Interface Work Areas
1. Library 2. Workspace 3. Toolbox 4. Menu bar 5. Preview window (This window will appear once you click on the preview button in the toolbox)
Importing Images to Library Area
Now we are ready to create a project. We have images of our application in Asset folder as mentioned earlier. Open the folder and drag and drop images into Library area. These images will be now shown as thumbnails into Library area. Drag and drop the first screen of your application into Workspace. You will see the START POINT (located at middle top of Workspace) automatically points to first image placed into workspace. You need to drag and drop all images into work space so that it looks like below figure.
Hotspot is an area on an image that when pressed by a user causes another image linked to the hotspot to open. To define a hotspot on the first image, click on it. The image will be opened into a new zoomed window. Drag your mouse on Messaging area to define it as hotspot. Hotspot can be resized, deleted or changed. You can see an arrow at the middle of hotspot. Drag this arrow to point it out to next image. This indicates when you click on hotspot of first image; the second image will be opened. Please see below two images describing how to create hotspot and how all images are linked. Please note that an image can have more than one hotspot but one hotspot can be linked to one image only and one image may be referenced by more than one hotspot also. Similarly you can define hotspot in all image and link to other image.
Save the Project
Goto File menu and Save project. Name it “sendSMS”. The extension of the project is “flo”. This flo file is a simple XML file which can be modified later if required.
Exporting the Project
Once you have finished, you can export your project into the following three different formats. 1. Export Flash (Ctrl + Shift + F) 2. Export WRT (Ctrl + Shift + W) 3. Export QML (Ctrl + Shift + Q) You can install this exported file into your mobile device or show flash file on PC as a prototype.
You can download a nice tutorial about Flowella from the Nokia Developer website by following link and can see videos of Flowella also. http://www.developer.nokia.com/info/sw.nokia.com/id/75784faa-6619-4b8a-bd7d-ea7fdf9b8271/Flowella_Tutorial_v1_0_en.pdf.html