You are on page 1of 8

!

"#$% '( )#*+,$-"


!"#$ & '( )


0sing a web biowsei, go to http:www.fluiuui.com anu click on )./ ().

Click on the 0$12 $2 button in the uppei iight coinei.
If you uon't have an account, then use youi email auuiess anu cieate one.
This way you will be able to save youi woik.
If you aie in ITP 14u, then youi gioup shoulu have an account. 0se the email
auuiess (itp14ugioup#gmail.com) anu the passwoiu that was emaileu to
you.

Stait by uouble clicking to auu a page.

To auu a new page at othei time, click on the 3 button on the top iight coinei.


!"#$% '( )#*+,$-"
!"#$ * '( )


Aftei uouble clicking on the page, two new things will pop-up:
1. )++"4+5 - wheie you can auu all the new wiugets
2. 6-17 - wheie you can cieate youi actual view anu uo piototyping

0n the Page view (i.e., the Scieen), theie aie S basic options:
1. 07**$218 - It has all the settings about the page like scieen size, uevice, page
oiientation, anu navigation piopeities.
2. 9"+27 - Clone by clicking this option, you can uuplicate the page. This
featuie is helpful when you have multiple pages oi you want to show the
flow in one view. Foi example, an aleit appeais on a view. You want to
show the flow by touching the button, thus making the aleit appeai. Then
you want to touch a button in the aleit view to navigate to anothei view oi
have the aleit view close.
S. :,$% - Nost of the uesigneis use this featuie a lot to exactly ueteimine
wheie you want to put youi wiuget oi stuff at theii exact position. Anu foi
this ieason, most of the uesigneis use 6;+*+8;+< to piototype final uesign
befoie staiting couing so that they can ueteimine the exact location of eveiy
item pixel by pixel.
4. =+*78 - Notes featuie is just to auu notes foi eveiy scieen.
S. >7"7*7 - Belete button to uelete the page you aie euiting.
!"#$% '( )#*+,$-"
!"#$ + '( )



6-17 07**$218?
6-17 )$*"7 - To give a title to the page.
@-A7 *;$8 *;7 8*-,* <-17 - This option sets the cuiient page as the staiting
page of youi app (i.e., the fiist scieen foi youi app).
'87 1,$% - Auus a giiu to the existing view.
>7B$C7 - Change the uevice you want youi page to be uesigneu foi such as
iPhone Su, 4, 4S, S, anuioiu phone, anuioiu tablet, anu iPau.
6-17 0$D7 - Change the wiuth anu height in case youi uevice is not piesent
in the list.



!"#$% '( )#*+,$-"
!"#$ , '( )


)++"4+5 is the main aiea fiom wheie you can uiag anu uiop items into youi
page. It contains all soits of wiugets to auu to youi page fiames.

Click on the E$,7F,-G7 pull-uown to see the vaiious looks of the wiugets. It
incluues Wiiefiame, iPhone, iPau, Anuioiu, Anuioiu-4, Anuioiu-Tablet, anu
Winuows-8.

Click on one of the wiugets anu uiag it onto youi page.
E$%17* +<*$+28?
>7"7*7 (tiash can) - to uelete the selecteu wiuget
0;-<7 (coloi wheel) - to change the coloi options
072% *+ 4-CA (squaies) - to senu to back, biing to fiont, senu backwaius, oi
senu foiwaius in ielation to othei objects
9"+87 (sheep) - to cut, copy, oi paste the object
)++"4+5 (wiench) - to show oi hiue the options
H$2A (chain) - to cieate a link to anothei scieen
!"#$% '( )#*+,$-"
!"#$ - '( )

'<"+-% I+#, +J2 $G-178?
1. In the Toolbox, click on the E$,7F,-G7 pull-uown.
2. At the bottom of the list unuei the !"#$ heauing, click on the '<"+-%8
option.
S. Click on the 9;++87 !$"78 button.
4. Finu anu select youi files.
S. Click on the 9;++87 button.
Youi uploaueu images will now be available unuei 0ploaus.



)+ -%% - 4-CA1,+#2% C+"+, *+ *;7 <-17?
Biag the Backgiounu wiuget fiom the toolbox on the left to youi page. You can
change the coloi by clicking on the coloi palette button.

0;-<7 options:
K-CA1,+#2% - the coloi of the shape
K+,%7, - the coloi of the boiuei
L<-C$*I - the tianspaiency. It ielates to what level uo you want to make
youi backgiounu tianspaient.
!"#$% '( )#*+,$-"
!"#$ . '( )
K+,%7, - the boiuei of the aiea. Not useu foi the backgiounu wiuget, but
useu foi othei wiugets such as Shapes.
.-%$#8 - the coinei iauius of the iectangle view. Not useu foi backgiounu
wiuget.
M7$1;* - the height of the aiea. Not useu foi the backgiounu wiuget, but
useu foi othei wiugets such as Shapes.
E$%*; - the wiuth of the aiea. Not useu foi the backgiounu wiuget, but
useu foi othei wiugets such as Shapes.

To uelete the backgiounu view, click on it anu click the *,-8; C-2 icon to the
left of the %&'&$ )*'#++# icon. You may also click the uelete button youi
keyboaiu.

9,7-*7 $2*7,-C*$B7 8C,7728?
1. In the Toolbox unuei Botspots, uiag one of the shapes.
2. Click on the H$2A option.
S. You will be given a blue aiiow. Biag it to anothei scieen anu ielease.
You now have cieateu inteiactive scieens. 0se this featuie to ueteimine the
flow of youi app.


!"#$% '( )#*+,$-"
!"#$ / '( )



0nce you aie uone with this app piototyping, you can test it out by clicking on
6HN/ button (gieen aiiow) on the top iight coinei of youi biowsei scieen. By
using youi mouse as a touch, you can see the flow of youi app.

0;-,7 *;7 <,+O7C*?
1. Click on the @72# icon (peison icon on the top iight coinei).
2. Click on the 6,+O7C*8 button.
S. Click on the blue bottom bai foi the pioject you want to shaie which will
give you access to the pioject's settings.
4. In the settings menu, click on the 0MN.P button.
S. Click on the option you woulu like:
Test on uevice
Link
Email
Expoit
Piint
Social

9+<I +27 <,+O7C* F,+G +27 -CC+#2* *+ -2+*;7, -CC+#2*?
1. Click on the @72# icon (peison icon on the top iight coinei).
2. Click on the 6,+O7C*8 button.
S. Click on the blue bottom bai foi the pioject you want to shaie which will
give you access to the pioject's settings.
4. In the settings menu, click on the )PHP6L.) button.
S. Entei the email auuiess of the account you want to senu a copy to such as
itp14ugioup#gmail.com.
6. Click the )PHP6L.) button.

The ieceiving account will neeu to sign out anu then sign in to see the new
pioject.


!"#$% '( )#*+,$-"
!"#$ ) '( )

This uocument was piepaieu by Poojan }haveii anu Tiina uiegoiy
foi the ITP 14u Nobile Application Technologies class at 0SC taught by Tiina uiegoiy.
In case of any queiies oi help, feel fiee to email Poojan at pjhaveiiusc.euu.

You might also like