Digital Watch Desktop Application

Category:


Digital Concept Watch Animation (User Interface) was the 1st part of the tutorial, The 2nd part of the tutorial is the conversion to a real time Digital Watch Desktop Application, please continue reading for the tutorial.


Digital Watch Desktop Application's User Interface has been designed in Adobe Illustrator CS3, and was later integrated to Adobe Flash CS5, Action Script3.0 along with Adobe Air.



Can't this product be designed in Adobe Flash CS3 ?


Ans : No.

Why ?


Ans : Because Adobe Air is a new feature in Adobe Flash CS5 and later versions, Adobe Air is used for packaging and creating Desktop and other phone applications for Windows and other platforms. Here are the screenshots tested on different Windows Operating Systems.

Windows 7



Windows XP



Application Features


  1. It displays your pc date and time, and can be changed with your pc date and time.
  2. It Animates random flashing colors every single sec.
  3. You can visit my website anytime by clicking on the link.
  4. You can also drag anywhere on the white transparent portion to move the watch from one place to another on the desktop.
  5. The application has a close button.
  6. The app is easily Installed and Uninstallable.
  7. Feel free to share with friends and family as a fun app.


Installation & Uninstall procedure.


Browse the file where you have saved it and select any one of the below files for installation.
  1. The Windows installation file, which is a white box icon file with an .exe extention. OR
  2. The Adobe Air file, which is a brown box icon file with an .air extension.
The below image shows the file types.

If selected the Windows installation file, a window will popup like the below image. Click on Continue and install the file.


If selected the Adobe Air installation file, a window will popup like the below image. Click on install.


For Uninstallation procedure. Go to Start > Control Panel > Programs > Uninstall a program. We have to look out for the file Digital Concept Watch and uninstall it. The below image shows the same.






Tutorial Part 1


Digital Concept Watch Animation - Adobe Illustrator CS3 Design (User Interface).



Tutorial Part 2


Digital Watch Desktop Application - Adobe Flash CS5 integration, Action Script 3.0, Adobe Air.


Resources required are :

Step 1


Open Adobe Flash Professional CS5 and select Action Script 3 template.


Step 2


Now we have to import the Adobe Illustrator Digital Watch Design into our Flash stage, so Go to File Menu > Import > Import to stage.


Step 3


Browse where you have saved the design provided by me, and on the drop down select All files. This will show you the illustrator file.


Step 4


On importing the Illustrator fie in Flash stage, we have to uncheck the layers which we don't want. Select the drop down Convert Layers to "Flash Layers", we have to select this option as to work beneath each layer independently to get the desired results.
Click on the check boxes Place objects at its original position and Set Stage size to same size as Illustrator artboard. (800 * 800). This will automatically resize our Flash stage document to the size of 800 * 800px. The below image shows the same.


Step 5


Change the stage background color to Black from the properties tab.


Step 6


This is what your timeline layer tab will look on import of the Illustrator file in Flash.
  • The Action Script, Clicker monthdatesechour, shadow dropped, exit button, lower body layers will be done later (i.e small blue arrow layers).
  • Change the Frames per Seconds timings from 24fps to 1.00fps. This is done because we want the to display and to animate time every sec flashing out random colors.
  • Also select the second square of the first layer and press down and hold shift key, and select the second square of the last layer in the Timeline panel, press F5. This will put a stop function to all the layers.
  • Later we can lock the layers by the lock icon. This will prevent you from accidentally working on another layer.


Step 7

On importing, we may have to make a few changes, as Adobe Flash CS5 does not support the text on path function. So the text may not be visible as per our design in Illustrator so delete the Light, Date/TM, New York etc as we don't need this. Also the Time, Hour, Date, Month, Year as these will be done dynamically in Flash. Delete the white dropped shadow drop down layer which was done in Illustrator. The below image shows the same. Hope you people are with me till here.


Step 8

To counter attack the problem of Flash CS5 not supporting text on path. You will have to export the text layer as a .png format from our Illustrator design to Flash. I have done the same as the image below and later used the transform tool to resize and fit it in our Flash stage document. Keeping in mind that this exported .png text will be above the "Metallic outer ring layer".


Step 9 App Body

In the timeline menu, create a new layer at the bottom and name it lower body. This will be the base of our application and we want it to be transparent. So go to Window Menu > Tool > and draw a square. Select the entire square with the help of Selection Tool (V). Tip : Keep the selection tool outside the square and drag totally across the other side of the square, this will select the entire square along with the outline of the square. Now press F8 it will then be converted to a symbol. Symbol type choose "Movie Clip".
Go to Window > Properties > now here in "Instance Name" type "body_mc". Don't mess this part up as this will be later used in our Action script. The image shows the same. The next part is of the body transparency settings.


Step 9.1

Body Settings.
Please have a look for the size of the square and in Color Effect > Style, select Alpha 26%. This will give our body which was converted to symbol a transparent look.


Step 10 Close Button

For the Close button on a new layer in the Timeline panel above the lower body layer, again make a small square. Fill it with color "Black". Now make an "X" mark on it with the "Pen tool (P)".
Then select the square and the "X" mark, and press F8. Convert it to symbol again. Symbol Type "Movie clip".
Go to Window > Properties > now here in "Instance Name" type "close_btn". In the next step we have the drop shadow settings.


Step 10.1

Close Button Settings.
Check the below image for the size of the button. In the Properties > Filters > Add filter > Drop Shadow. Please have a look for the drop shadow settings.


Step 11 Watch Body Shadow

Like all desktop apps have shadow, we are going to give our Digital Watch shadow too. So select the last layer of the Digital Watch body design, it maybe the third last layer or so. Have a look at the below image to know exactly what I am saying. Now we have to drop the shadow for this. So just select that part of the design and press F8, it will be converted to symbol. Symbol type "Movie Clip".
Here we are not going to give an instance name, as only objects which will appear in Action script are being given instance names. The next step is the watch body shadow settings.


Step 11.1

Watch Body Shadow settings
Filters > Add Filter > Drop Shadow.


Step 12 Hour/Min/Date/Month/Year

Here comes the important part, In the next steps I will be showing you how I did the Timer and Date Animation.


Step 13 Hour

On a new layer, name it "time,date,month,year" etc. Go to Window Menu > Tool > use the text tool "T" and make a square. In the next step is the settings for the Hour text animation.


Step 13.1

Hour Settings
  • In instance name type "hours_txt".
  • Choose : Classic Text : Dynamic Text.
  • Character : Family : Digital 7 (The font we have download from the start of our tutorial in resources)
  • Size : 44pt
  • Color Code: #66FFFF
  • Anti-alias Tip: This is very important as the rendered output can be changed accordingly Bitmap text [no anti-alias].
  • Also Embed the font Digital 7, as the app will render the font in bitmap text for those who don't have the font.
  • Add Gradient Glow to the text, for this Properties Window > Filers > Add Filter > Gradient Glow.


Step 13.2

Hour Settings continued
Gradient Glow setting cont.


Step 14 IS TO

Now for the isto, on the same layer which you have named as "time,date,month,year" etc make a rectangle with the help of text tool "T" after the hours and type in Colon i.e ":" See below image.


Step 14.1

ISTO Settings
  • In instance name type "isto2_txt".
  • Choose : Classic Text : Dynamic Text.
  • Character : Family : Digital 7
  • Size : 45pt
  • Color Code: #66FFFF
  • Anti-alias : Bitmap text [no anti-alias].
  • Also Embed the font Digital 7
  • Add Gradient Glow to the text, for this Properties Window > Filers > Add Filter > Gradient Glow.


Step 15 Minutes

Now for the Minutes, on the same layer which you have named as "time,date,month,year" etc make a square with the help of text tool "T" after the isto. See below image.


Step 15.1

Minutes Settings
  • In instance name type "minutes_txt".
  • Choose : Classic Text : Dynamic Text.
  • Character : Family : Digital 7
  • Size : 44pt
  • Color Code: #66FFFF
  • Anti-alias : Bitmap text [no anti-alias].
  • Also Embed the font Digital 7
  • Add Gradient Glow to the text, for this Properties Window > Filers > Add Filter > Gradient Glow.(Same gradient glow settings)


Step 16 AM/PM

AM/PM, for this again on the same layer which you have named as "time,date,month,year" etc make a square with the help of text tool "T" after the minutes and select the character fill color as "black". As we want to show the AM/PM text only in black color. See below image.


Step 16.1

AM/PM Settings
  • In instance name type "ampm_txt".
  • Choose : Classic Text : Dynamic Text.
  • Character : Family : Digital 7
  • Size : 22pt
  • Color : Black
  • Anti-alias : Bitmap text [no anti-alias].
  • Also Embed the font Digital 7
  • Add Gradient Glow to the text, for this Properties Window > Filers > Add Filter > Gradient Glow.(Same gradient glow settings)
Please have a look at the below image.


Step 17 Date

Date on the same layer which you have named as "time,date,month,year" etc make a square with the help of text tool "T" below the Hour. See below image.


Step 17.1

Date Setting
  • In instance name type "date_txt".
  • Choose : Classic Text : Dynamic Text.
  • Character : Family : Digital 7
  • Size : 25pt
  • Color Code: #66FFFF
  • Anti-alias : Bitmap text [no anti-alias].
  • Also Embed the font Digital 7
  • Add Gradient Glow to the text, for this Properties Window > Filers > Add Filter > Gradient Glow.(Same gradient glow settings)
Please have a look at the below image.


Step 18 Month

Again on the same layer which you have named as "time,date,month,year" etc make a square with the text tool "T" next to the Date square. Please have a look at the below image.


Step 18.1

Month Setting
  • In instance name type "month_txt".
  • Choose : Classic Text : Dynamic Text.
  • Character : Family : Digital 7
  • Size : 25pt
  • Color Code: #66FFFF
  • Anti-alias : Bitmap text [no anti-alias].
  • Also Embed the font Digital 7
  • Add Gradient Glow to the text, for this Properties Window > Filers > Add Filter > Gradient Glow.(Same gradient glow settings)
Please have a look at the below image.


Step 19 Year

For the Year on the same layer which you have named as "time,date,month,year" etc make a square with the text tool "T" next to the Month square. Please have a look at the below image.


Step 19.1

Year setting
  • In instance name type "year_txt".
  • Choose : Classic Text : Dynamic Text.
  • Character : Family : Digital 7
  • Size : 25pt
  • Color Code: #66FFFF
  • Anti-alias : Bitmap text [no anti-alias].
  • Also Embed the font Digital 7
  • Add Gradient Glow to the text, for this Properties Window > Filers > Add Filter > Gradient Glow.(Same gradient glow settings)
Please have a look at the below image.

Hope you people have understood till here, as I have kept it detailed and simple as possible so that even the first time flash user can understand these steps.

Step 20 Action Script 3.0

For the Action Script, create a new layer at the top above all the layers, rename it as Action Script. Right Click on the first rectangle box as show in the below image. A new window will open in Flash, go to the last option i.e Actions. Here you will have to paste the script provided by me in the notepad from the downloaded resources at the start of the tutorial.
In the next four steps I have explained in screenshots a little about how and where exactly the instances are affected for which you have been writing for action script that has been placed.



Step 20.1

If you will recall, we have been writing instance names such as "date_txt, month_txt, year_txt, ampm_txt" i.e (Steps 17,18,19,16) in the properties window, this is where all the script has been used. The below image shows the same.



Step 20.2

The hour_txt, minutes_txt has been written here i.e(Steps 13,15).



Step 20.3

This is the important step as we want our Timer to display random flashing colors, so I have imported flash.geom.ColorTransform and to start the timer I have imported the Timer utils.
Also I have mentioned in Flash for which instances I want the color to be changing. It is to be noted that here I have not mentioned am/pm instance. So it renders as Black only i.e.(Step 16). And later the Even Timer starts.



Step 20.4

If we recall I had mentioned to make a close button with the instance name as "close_btn" which was in Step 10, so here the below image it tell the application on click of button "exit" the application.
Moreover the square i.e app body symbol which we created in Step 9 with the instance name such as "body_mc" here we have used it, in the below image the script tells the application that on drag of the app from one place to another to reduce its transparency by reducing its Alpha =0.1 and on leaving the app to leave the transparency by Alpha =1. This is how we get the app transparent on dragging it.



Step 21 Publishing





Step 21.1



For the publishing part click on Aodbe Air 2 - Settings. Application and Installer settings panel - General settings will open. Browse where you want the output file and click on Windows Installer (.exe)

Windows Style : Custom Chrome (transparent), click on all the below profiles. Include the swf and xml files. Please have a look at the below image.



Step 21.2



Now go to the signature tab in Application and Installer settings panel - Signature. Click on use a code signing certificate, browse where you want to have it in the output folder. Check on Timestamp.



Step 21.3



Then go to the icon tab in Application and Installer settings panel - Icon tab. For making the icons, we have to export the png files from illustrator in web format. For the sizes 16x16, 32x32, 48x48, 128x128. Click on the icon 16x16 browse it will appear in the previews. Do the same for other icons as well.



Step 21.4



After the all the above is done and said, now go to the advanced tab in Application and Installer settings panel - Advance tab. Click on the plus sign and add the icons when the file type settings panel window opens. Later Click on "ok" and "publish". And finally we are done.



Step 21.5



Finally on publishing we get the below files. Digital Concept Watch.air Digital Concept Watch.exe



Hope you liked the tutorial, feel free to comment below and share this tutorial by linking it to your websites.

No comments:

Post a Comment

Goddy Designs © 2011. Powered by Blogger.