A PageCharmer applet is customized by changing control properties in its corresponding AppletSet'r.
Values can be changed by selecting, deleting, and then typing in a new value to a field property, or by selecting a new value from a pop-up list.
Note that the "Enter" key must be pressed after typing in a new value (not necessary when a value is selected from a pop-up list).
Macintosh users, note that the "Return" key must be pressed after typing in a new value (not necessary when a value is selected from a pop-up list). If your keyboard does not have a key labeled "Return", press the key marked "Enter" that's next to the alphabet keys on your keyboard (not the Enter key next to the numbers on your keyboard, this key usually has a different ASCII code associated with it). Don't use the "Enter" key (sometimes also labeled "Return") next to the number keypad on your keyboard. Doing so will add an invisible character to the value. (If you accidentally press this key, simply backspace, or select the entire value and retype.)
Each change made to an applet is viewed in real-time.
The "HTML" button at the bottom of the AppletSet'r display generates all the HTML code necessary for the customized applet to run when the applet functions as desired; simply click this button, then copy and paste the generated HTML code from the window into your Web page. The applet will appear exactly where you paste the code. You must make sure your Web site is organized properly in order for the code to find the applets, and any associated .gif files and .au files. For more information on how these files should be organized and uploaded to your Web site, see the section titled "Organizing Directories and Uploading."
This is an example of an applet with its corresponding AppletSet'r.
While using a PageCharmer applet and its corresponding AppletSet'r, the applet remains centered within a gray rectangle called the "Canvas." Changes made to the applet's Width and Height properties do not affect the size of the Canvas. Ultimately, only the customized applet will be used in a Web page. The Canvas is only used as the working space during the customization process.
Most PageCharmer applets have the ability to change colors in the AppletSet'r. Color properties can be selected from a pop-up menu; which contains the basic Java colors. By selecting "other" and then entering in any hexadecimal color code, you can create different colors.
A hexadecimal color value uses a six digit format, which can be thought of as three hexadecimal values representing Red, Green, and Blue. Each hexadecimal value consists of two digits where the minimum value is "00" and the maximum value is "FF" (in decimal, this equals a range from 0 to 255) Using this simple color system, over 16 million color combinations are possible.
If you are not familiar with Red, Green, Blue color mixing, or the hexadecimal number system, you can quickly see how these colors are created by selecting several colors from an AppletSet'r color pop-up menu then reviewing the hexadecimal color values. Notice how each set of two digits represent the relative intensity of a color. A low value, 00, indicates a dark value. But FF, indicates a bright value. Keep in mind that 000000 is black and FFFFFF is white.
Tip: When you have a specific RGB color that you want to include in your applet, point your browser to Mediarama. They convert RGB colors and even show you what your colors will look like together on a Web page as well as provide you with the correct hexadecimal code to use.
Some PageCharmer applets have the ability to change the "BGColor" (background color) of the applet--not the Applet Canvas. The full versatility of this option becomes clear when you have a transparent GIF image in the foreground or background.
Tip:In the LiveG-Ticker and LiveG-Marquee you can use transparent background and foreground images, then use the "BGColor" (background color) as yet another layer to the applet. The "BGColor" must always be a solid color and be chosen from one of the basic colors in the pop-up menu or entered using a hexadecimal color value.
All of the AppletSet'rs have an "HREF" field. This property represents the URL (address) that the browser loads when the applet is clicked on. Use the list below for a reference to different types of URLs:
other pages, not on your computer -- http://www.outthere.com/whatever.html
local pages, on your computer -- whatever.html
electronic mail -- mailto:somebody@outthere.edu
an FTP site -- ftp://ftp.outthere.edu
a Gopher site -- gopher://gopher.outthere.edu
a Usenet newsgroup -- news://news.outthere.edu
To create a link from an applet in a frame, you must use the "Target" value. Use the list below for a reference:
_top -- this will cause the URL specified in the HREF to load into the entire browser window, thus removing any frames.
_blank -- this will cause the URL specified in the HREF to load into a new unnamed browser window.
_self -- this will cause the URL specified in the HREF to load over the current frame (the frame in which the applet currently resides).
_parent -- this will cause the URL specified in the HREF to load into the frame set's parent window.
name -- (name = title of frame) this will cause the URL specified in the HREF to load into a specified frame.
Each applet, with an active URL field, can display a message at the bottom of most browser windows. This is done by filling in the "Status" field with your desired text message. The text will appear every time the applet is rolled over by the cursor. Use it to inform the viewer the destination of the link, the title of the next page, or anything else that you would like.
Images used as foreground images in the LiveG-Ticker and LiveG-Marquee applets can be .gif files or .jpg files. GIF files are recommended for most of the time. In many cases, a transparent GIF image is preferred (sometimes called GIF89a). This can best be achieved using Adobe Photoshop. For information, see Creating Transparent GIF Images.
Tip: Most of the images in the PageCharmer Graphics Library for use with the LiveG-Ticker, LiveG-Marquee, and LiveT-Ticker were created at a maximum height of 90 pixels. For example, when creating an image to go with a provided landscape background, a foreground image more than 90 pixels tall will run over the intended landscape size. See example below:
Tip: Modified any graphic, using a graphics program, to suit your particular needs. Like the company logo that has been added to the "truck.gif" image that you'll find included in PageCharmer.
Images used as background images in the LiveG-Ticker and LiveG-Marquee (plus LiveT-Ticker) applets can also be .gif or .jpg images. Background images that are smaller than the actual area of the applet will be tiled, that is repeated to fill the entire applet area. Experiment by making backgrounds as small as possible. Tiled backgrounds can make your applets very small and this quick to download from the Web.
With the LiveG-Ticker and LiveG-Marquee it is possible to have two backgrounds by creating a transparent image, then assigning a "BGColor" (background color) behind it. See Creating Transparent GIF Images for details.
Images used as background images in the LiveT-Ticker applet can be .gif or .jpg images. Background images that are smaller than the actual area of the applet will be tiled, that is repeated to fill the entire applet area. Experiment by making backgrounds as small as possible. Tiled backgrounds can make your applets very small and this quick to download from the Web.
With the LiveT-Ticker it possible to have two backgrounds by creating a transparent image then assigning a "BGColor" (background color) behind it. See Creating Transparent GIF Images for details.
Images used by the LiveG-Button, LiveGT-Button and LiveG-Map applets can display three different states, think of a state as a single animation cell. As your cursor rolls over the image the 2nd state (cell) is revealed; click the image and the 3rd state (cell) appears. Ta Daaa! The three states equal a three cell animation. This means you can now add dynamic animation to your buttons and your image maps by creating unique images for each state. The following example illustrates the state structure. View this example working.
|
|
|
The number of tiles used in the creation process for the LiveG-Button and LiveGT-Button is different from that of the LiveG-Map so they are covered separately below:
LiveG-Button and LiveGT-Button: These images must always have three-tiles. Their AppletSet'rs assume the Width and Height properties of a button based on a three-tiled vertical set-up. For example, if the image is 50 pixels wide by 150 pixels high, the LiveG-Button AppletSet'r will automatically enter values of Width=50, and Height=50.
LiveG-Map: These images can be created as a single image, a two-tile image or a three-tile image. For this reason the AppletSet'r never checks for a width and height. They must always be entered into the LiveG-Map AppletSet'r manually. If your image is tiled, see the following chart for the correct width and height values:
| Horiz/Vert | Two-Tiled Image | Three-Tiled Image |
|---|---|---|
| Horizontal Tiles | Width = 1/2 Actual Image Width Height = Actual Image Height |
Width = 1/3 Actual Image Width Height = Actual Image Height |
| Vertical Tiles | Width = Actual Image Width Height = 1/2 Actual Image Height |
Width = Actual Image Width Height = 1/3 Actual Image Height |
Please note that extremely complex image maps (image maps with 20 or more areas) can take a minute or longer, to generate the HTML code after the "Create HTML" button has been clicked. The actual time depends on your computer's speed.
Tip: Consider making your images transparent whenever possible. See Creating Transparent GIF Images for details. And to make GIF images as small as possible, we recommend using the GIF compression service offered by GIFWizard.
The images created for the LiveT-Marquee can be two types, a single image, or an animated image. Similar to the tiled images used by the LiveG-Button, LiveGT-Button and LiveG-Map applets, animated frames for the LiveT-Marquee must be created as tiled GIF images. Tiled frames can be two or more tiles (there is no limit to the number of tiles you can use, but the more tiles you use, the longer they will require to download and run).
It is important to note that tiled frames must be precisely aligned. There can be no space between each tile. Creating these images must be done with a pixel-accurate graphics program such as Adobe Photoshop. Both vertical and horizontal alignment of tiled frames is necessary for the applet to animate properly.
Tip: It takes at least three frames to show directional movement in an animation.
While most everyone these days uses a Java-capable browser, not everyone may have Java turned "on." Therefore, it's a good idea to create a text alternative that will be displayed where your PageCharmer applet is supposed to appear. This is very easy to do.
When a Web browser displays a Web page, it reads the HTML code in the Web page sequentially. When the browser encounters an "<APPLET..." tag, it ignores everything but the "<PARAM..." tags until it reaches the "</Applet>" tag. Browsers with Java turned "off" (and browsers that are not Java-capable) will ignore the "<APPLET..." and "<PARAM..." tags and instead process any embedded tags it recognizes. Thus, tags placed within the "<APPLET..." and "</APPLET>" tags that are not "<PARAM..." tags are considered alternative HTML.
The example below illustrates where to place alternative HTML code in a typical PageCharmer applet.
After carefully designing your Web page its no wonder you want every viewer to experience your intended look and feel. Using image alternatives will allow for that. While most everyone these days uses a Java-capable browser, not everyone may have Java turned "on." Therefore, it's a good idea to create an image alternative to be displayed where your PageCharmer applet is supposed to appear.
This is easy to do while you are creating your custom images. Simply create an identical static graphic that will be displayed in place of the PageCharmer image.
When a Web browser displays a Web page, it reads the HTML code in the Web page sequentially. When the browser encounters an "<APPLET..." tag, it ignores everything but the "<PARAM..." tags until it reaches the "</Applet>" tag. Browsers with Java turned "off" (and browsers that are not Java-capable) will ignore the "<APPLET..." and "<PARAM..." tags and instead process any embedded tags it recognizes. Thus, tags placed within the "<APPLET..." and "</APPLET>" tags that are not "<PARAM..." tags are considered alternative HTML.
The example below illustrates where to place alternative HTML code in a typical PageCharmer applet.
All sounds used by PageCharmer Java applets must be .au files.
If you are using a Macintosh, we recommend the use of the Shareware utility ConvertMachine version 1.2 or later to create or to convert to .au files.
If you are using Windows® 3.1, Windows 95®, or Windows NT®, we recommend the use of the Shareware utility Cool Edit® version 1.53 or later to create or to convert to .au files.
PageCharmer | Banners | Examples | Demos | Contest | User Forum | Weekly Graphic | Details | Pricing | Order Online | Tips | Specs
