20150101

How to make a simple and engaging GUI application for windows | SLIDE 2

Welcome Back ,

This is the second slide on how to make your own simple and elegant application for windows If you haven't seen the first slide have a look  here .

We have already setup our basic platform from the last slide over which we will develop our calculator application 

Now on you will be dealing with ActionScript 3 which is similar to javascript

Step 3 Setting up components for calculator 

Go to bottom left hand corner of your window in the timeline right-click on Actions layer name
then click on Insert layer a new layer named Layer 2 would appear right click on this new layer
and click on lock others option

keep this layer 2 selected , Now we will create our buttons for the calculator  , we will design a single button that will have a variable field for number so that we can use the same button for every digit by programmatically changing the value of each button .

> Creating Buttons 

goto Insert ->New Symbol (or press ctrl + F8 )

in the Create New Symbol dialog box  name the new symbol as buttons and  select Type as Movie clip  and click OK

Now a new window will open you will have to design your button here just as you would design it in ms paint but don't label it with any digit yet , Don't create large buttons  because keep in mind you will have to keep all the 10 buttons[ 0 to 9 ] + Addition button +  Subtraction  + Equal to button + a display screen into that window .

After you finish drawing out the button like something very simple like this one

  click on text button in Tools palette  and then click on the center of the button you just drew

  
 Then a text box would appear ,now go to right hand side of your window in the property pane change the instance name to value and press enter after editing the instance name  and change text type to dynamic text as shown in the picture .



also make the text box un-selectable by un-selecting the selectable button in character pan on right hand side below properties (though unselecting is not necessary but it is highly recommended )


Now click on scene 1 on upper right hand corner of your screen just below your project name
you will reach the original window you were on .

Goto  window -> Library

in  library find Buttons and drag and drop it onto the stage (stage is the the actual window you are working on in other words the place your buttons would be located ) ,You will have to do this multiple times  once for each button and arrange the buttons like you would on a calculator this is the beauty of Flash based designing you have an alternative WYSIWYG  method available for many tasks .


Now comes the tedious part think of all the buttons you have put on the stage as objects and these objects don't have a name yet, And  they are of the user defined type of Button which have one property namely value which also needs to be set .

Before we set the property of the buttons you will have to name each one of them , the instance name is a way to name these objects
click on the object(button) you would want to name/want to have the value  '1' now go to property menu and in place of instance name write one (this is case sensitive use lower case only) and press Enter 

Remember to press  enter after renaming an instance name, It  is very important 


Now select button you want to have value 2 and go to properties and change its instance name to two (use lower case only) and press enter  



Similarly name all the rest instances
three, four, five, six, seven,eight , nine, zero , plus , minus, multiply , divide , equals

while naming keep in mind
name them exactly the same as written above and don't change case and don't use any spaces while naming them 

and in the photos above i have dragged only 14 buttons on the screen you will need to drag and drop one more button on the screen for equals button (by going to library and finding buttons and dragging the additional button onto the screen)




You can download a sample .fla file with these steps completed here

now in the timeline , select layer 2 then click on actions if you can't find it click on
 windows -> Actions  now  in the Actions copy paste this code 

1
2
3
4
5
6
7
8
9
one.embedFonts = false;
two.embedFonts = false;
three.embedFonts = false;
four.embedFonts = false;
five.embedFonts = false;
six.embedFonts = false;
seven.embedFonts = false;
eight.embedFonts = false;
nine.embedFonts = false;
zero.embedFonts = false;
plus.embedFonts = false;
minus.embedFonts = false;
multiply.embedFonts = false;
divide.embedFonts = false;
equals.embedFonts = false;

one.value.text="1";
two.value.text="2";
three.value.text="3";
four.value.text="4";
five.value.text="5";
six.value.text="6";
seven.value.text="7";
eight.value.text="8";
nine.value.text="9";
zero.value.text="0";
plus.value.text="+";
minus.value.text="-";
multiply.value.text="*";
divide.value.text="/";
equals.value.text="=";


now click on the stage and now lets save what we have created to far go to 
File - > Save As and create a folder named calculator and save this .fla file there  
 
what this code does is ,it sets the parameter (values) of the objects now you can run what we have done so far by going to Control -> Test 
you should see something like this  


Now you are one step away from making and publishing this calculator application 

Feel free to comment if you are facing any difficulties in getting this up and running  


coming soon : How to make a simple and engaging GUI application for windows | SLIDE 3


1 comment:

  1. Anonymous1/01/2015

    When will you write the next part ?

    ReplyDelete

Share your thoughts