1. Overview
In this project we want to create a floating window on the desktop. The background shows around the borders and through the "mouth". We can drag the image on the desktop with the left (circular green) eye and close the window with the right (elliptical blue) eye. We have illustrated adding text with the word "hello".
This image is composed entirely of html elements and we have the usual html elements available to use: CSS, JavaScript, linked pages, internet connectivity, etc. The artwork and html here are kept ultra simple so that you can easily comprehend what is essential without being bogged down.
|
2. Artwork
 
We need a background image which meets several requirements. (a) The background is rectangular with every transparent pixel colored the color pink shown (RGB #E008E0). (b) The transition from transparent to visible must be a hard transition, not a gradual transition (also known as anti-aliased). Other transitions may be anti-aliased or not and only the transparent border must be abrupt. (c) We strongly recommend GIF format over PNG because it is easier to verify that requirement b is met. We assume from here on that you are using GIF. (d) The underlying transparency features of GIF may not be used. The background #E008E0 must be visible, just as it is here.
The overlay (here "eyes") meet somewhat different requirements. We need an overlay to implement window dragging and closing the window. There is a single image. (a) The leftmost 50% of image is used for dragging. The rightmost 50% close the window when clicked. (b) The overlay may be GIF, JPG, or PNG. You can use color blending or underlying image format transparency (JPG has no underlying transparency). Here, the eyes background is dropped out using GIF transparency (c) If you use the #E008E0 color and make it visible, it will open a hole in the overall image and create a space that cannot respond to mouse activity. This example uses the #E008E0 color in the background only and not at all in the overlay.
The background and overlay must be separate image files. Obviously, they must be designed to fit together and we will do that in a later step. There are several stock overlay images and you can use one of ours rather than create your own here.
|
3. Create new project
Open the Adv Open tab. To do that, click the Advanced tab on the top row and then the Adv Open tab on the bottom row. You can see from the screen shot that the top and bottom row selections are highlighted to show the steps used to reach the tab. In subsequent explanations, we may drop the explanation of how to reach the tab.
Create a project name in lower case having no spaces in it and ending with "_base". Use underscore, not a minus sign. The company or author name is optional for this example because we will be creating a direct execute result without an installer. Click Create new project.
|
4a. Set up framing parameters: select frame type
You will be taken to the Server tab. Do not enable the server. Either click Next or Framing to end up at the Framing tab (shown).
Select HTA window frame and options shown. Click Select.
4b. Set up framing parameters: window size
Enter the width and height of your background, created in step 2.
Set X,Y scrolling to 0,0 and pick a meaningful name for your project which distinguishes
it from other running windows. Click the button to advance.
4c. Set up framing parameters: url
Enter the file name and html extension. Do not add the file path or any "http:" prefix. This name is not arbitrary. You will create an html page later and this is the name you intend to give it.
|
5. Select icon
Select an icon for the EXE file created. This icon does not show when the EXE is run but does show before it is run. You may select a stock icon or define a 32x32x256 color icon in ICO format to use. Here, are default icon is 9 and we have selected number 45. Click Select Icon to advance. Note the icon changes in upper left of HtmlApp Studio changes to reflect our choice. |
6a. Define include files: open explorer
Click the Manage this project folder button to open an explorer window.
6b. Define include files: manage the contents
Copy your background and overlay from step 2 into this folder. Create an html file having the name you gave in step 4c. The key part of the html is the body tag uses your background as the background for your html and the width of the body is the same as the width of the background (to cut it off from repeating). The other two files and the folder are maintained by HtmlApp Studio. Close the editing and explorer windows, then click the Return to Includes link in HtmlApp Studio.
If you close HtmlApp Studio by mistake, restart and continue at 6c below.
Here we have a single html file. Your project may be more complex and you would add more html, css, js, and other resources in the project directory. Each html file should have a background, probably the same background for all although there are interesting effects available by varying the background. The overlay will be the same for all pages.
6c. Define include files: determine actions
Mark the target.hta file as run as normal. The overlay will not be added to the EXE file at this step and should be bypassed. We have added it to the project directory so that we have a convenient way to find it. All other files are marked unpack to destination. Click Select files.
|
7. Package
We are not using any options on this page. Click Update Packaging options or compile.
|
8. Compile and run
After compilation is complete, there is a link for our project "howto_base". Click the link to get a Run/Save dialog. Click run in each dialog. In the registered version, you will get an additional notice which is not present in the registered version. The base project shows in an ordinary window. The background is slightly cut off by the window borders because we set the size to that of the background. The pink background is visible. This is normal and here were have merely defined the base project. Next, we will use the Borderless Wizard to tie together the elements we have defined.
|
9. Select base project
In the Borderless tab, select the base project we defined. The hademo and thermometer base projects are built in to HtmlApp Studio. To work with these or any base projects, we would start with this step. Here, we have shown how to build our own base project. Click button to advance to page 2.
|
10. Identify graphic files
We have several options for identifying the background image and overlay file. The background image created has been auto-recognized (the program looks for the largest image in the project directory) so we use that for the background. If we use some other image, we need to make sure our html in step 6b matches.
We browse the file system to identify the overlay ("eyes"). We could also have reviewed the built-in overlay images. Click Page 3 to advance.
|
11. Place the overlay
We position the eyes on the image via drag and drop or direct entry of coordinates. The image on left shows an overview and the one on the right shows a close-up centered on the overlay for fine positioning. Click Finish to advance. We reach the same compile screen as step 8. Running the file gives the result in step 1, our goal.
|
|
