ActiveNotes "Creating Styles" Fusion Galleries Support Groups Site of the Year Paypal Store Web Hosting   Creating Styles for ActiveNotes This tutorial will cover how to create custom personalized frames for use with ActiveNotes. A good Graphics Editor and Graphics optimizer will be required. This  example will use Jasc's PaintShop Pro and Ulead's SmartSaver Pro. Getting Started Creating Styles for ActiveNotes is quite easy and this brief tutorial will have you creating styles in very little time. a few notes before we begin: 1.) Avoid creating styles with oval or round frames. Also avoid Frames in star or triangular shapes.. The very best shape to use is a square or rectangle. 2.) Saving the frame images as gifs allows you to set transparency for some really cool effects. 3.) Each frame set consists of 8 images: TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom and BottomRight. Let's begin. First let's look at how ActiveNotes displays the style for use and calls the individual images into play. Located in the NetObjects Fusion 7/Components/Bitmotion/ActiveNote/Styles directory you will see a series of directories containing the custom styles you received with ActiveNotes. For this tutorial we will be concentrating on the "Aqua" Style. Opening the Aqua Style Directory you will see a series of images as well as an ini file. The INI file is what ActiveNotes uses to create the frame Structure for you customized style. Mouseover here to have a look at the INI file in greater detail. Step 1 (PaintShop Pro) Open PaintShop Pro From the File Menu select "New" (for the preview image) width = 195 Height =195 DPI = 72 Background Color = White and Image Type = 24bit Click Okay Next Create a new image again this time 100 x 100 (or you can go greater if you like) repeating the DPI, Background Color and image type. This will be your frames image Next select the first preview image you created (195 x 195 ) From the Image Menu select Picture Frame. Once the Frame dialog pops up scroll until you find "Aqua Beveled" or what ever "rectangular" frame style you like. Click Next. The default (Frame "inside" the image) is what you want to use in order to keep your image size at 195 x 195. Click Finish. Repeat the steps again for the smaller image using the same style of picture frame. The next step is to save the images. How I do it is fairly simple Click File --> Save. The Explorer Dialog box will come up. Navigate to the NetObjects Fusion 7/Components/Bitmotion/ActiveNote/Styles directory. Right Click in an open area select "New" --> "Folder". An new folder is created. Rename the folder to the name you have chosen for your style. Once created select that directory and save your image (with the style name you have chosen) there in jpg format. Next save the smaller image as a gif (preferred) or a jpg in the same directory and adding a -x after the image name. Doing this lessens confusion as to which image is preview and which image is frame. For Example: Aqua.jpg for Preview and Aqua-x.gif or Aqua-x.jpg for Frames. Close PaintShop Pro (to conserve resources) Step 2 (SmartSaver Pro) Open SmartSaver Pro Click File --> Open --> browse for the preview image and "save optimized image". Click File --> Open again and select the frames image.. per example Aqua-x.gif Select View --> Zoom In --> 4X Next select Format --> Slice Evenly --> Entire table 3 columns and 3 rows. Click Okay Next step is to tighten the slices around the frame making sure you do not leave any white ( of course you can but why? ) Reduce the colors and optimize until you are satisfied that the image file size is reduced enough without sacrificing to much quality. Gifs are really good for these smaller sections of the frame. Gifs can also use white as transparent just in case you did not crop it all out. Once you have tighten the slices the next step is to save the optimized images This is performed by: Click File --> Save optimized image as.. You will notice it calls a HTML file name that is okay.. we will be discarding the HTML file, but it also creates the slices you need. So browse for your style directory and save it there. There is a option for saving images in a image directory... Uncheck that. Before closing Ulead after saving the images, make a note of the pixel widths of the right and left images and the pixel height of the top and bottom images. You will need these for the style ini file. Once saved and sizes noted close SmartSaver Pro Step 3 (renaming images) When SmartSaver Pro saves sliced images it creates images donating the table row and column in the file name. The images we are interested in are as follows 1 x1 , 1 x 2, 1 x 3 2 x 1, 2 x 3 3 x 1, 3 x 2, 3 x 3 Rename the image to: 1 x 1= TopLeft 1 x 2= Top 1 x 3 = TopRight 2 x 1 = Left 2 x 3 = Right 3 x 1 = BottomLeft 3 x 2 = Bottom 3 x 3 = BottomRight Step 4 (Finalizing INI File) Once finished renaming it is time to copy the INI file from another Style directory and save it to your new style directory. Once accomplished double click the ini file to edit it. The INI file is pretty straight forward and basically just change the values to correspond with your style. The Ini file contains the following parameters [style] This is the name and image you decide for the style display within NOF to represent the style name=Aqua preview=aqua.jpg [images] These are the images you will be creating to use to construct you ActiveNote topleft=topleft.gif top=top.gif topright=topright.gif left=left.gif right=right.gif bottomleft=bottomleft.gif bottom=bottom.gif bottomright=bottomright.gif [size] These are the width and height callouts for frame thickness you noted from SmartSaver Pro top=8 bottom=8 left=6 right=6 [options] This is the ActiveNote background color setting centerColor=#FFFFFF Once you have modified the INI file close it. Your new style is ready for you to use with ActiveNotes. Did you find this tutorial useful? Would like to view all of our tutorials and support pages? Join the NetObjects Fusion Users Group Community |  Fusion  |  Web Design  |  Hosting  |  Resources  |  gotFusion Store  |  Problems with this page?   All content copyright © 2002 gotFusion LLC.  The name gotFusion and the gotFusion ® logo are registered trademarks of gotFusion LLC Copyright, legal notice & privacy statement