Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Archived:Prototyping your application through Flowella

From Wiki
Jump to: navigation, search

Archived.pngAquivado: Este artigo foi arquivado, pois o conteúdo não é mais considerado relevante para se criar soluções comerciais atuais. Se você achar que este artigo ainda é importante, inclua o template {{ForArchiveReview|escreva a sua justificativa}}.

All PySymbian articles have been archived. PySymbian is no longer maintained by Nokia and is not guaranteed to work on more recent Symbian devices. It is not possible to submit apps to Nokia Store.

Article Metadata
Keywords: QStringList
Created: girishpadia (03 Mar 2011)
Last edited: hamishwillee (31 May 2013)

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.


Flowella Prerequisites

You need to download Adobe Air from Install the Adobe Air in your computer.

Flowella Download

Flowella can be downloaded from 8414bfbade57/Flowella.html

Installing Flowella

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.

Article 3 image 2.png

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

Flowella screen is divided into main five areas as shown in following figure. Article 3 image 1.png

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. Article 3 image 3.png

Creating Hotspots and linking them to other Image

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. Article 3 image 4.png

Article 3 image 5.png

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.

This page was last modified on 31 May 2013, at 01:10.
36 page views in the last 30 days.