WEBEASY PRO 7 PWebsitebuilder Flash Tutorial
ADD AN ANIM-FX TO WEBEASY PRO 7 TUTORIAL
After downloading the Anim-Fx program.
Users that have a PC with Vista should move the entire Anim-Fx file from the C/Program files location (where it may be hidden) to DOCUMENTS.
To access the Anim-Fx application and create banners it is easier to do this now by opening DOCUMENTS > double click on Anim-Fx file > double click on Anim-Fx application. The Anim-Fx program will open.
CREATE AN ANIM-FX BANNER ANIMATION AND ADD TO WEBEASY PRO 7.
1. Create the banner animation in Anim-fx as usual.
2. Select SAVE SETTINGS and SAVE TEXTFILE in Anim-Fx.
3. Select HTML and open the Anim-Fx HTML page. Set scale to NO BORDER, then click GENERATE HTML.
4. Highlight the HTML code > right click > select COPY. For Webeasy Pro 7 users, you will need to paste this custom HTML script in later when you are
creating your web pages in Webeasy Pro 7.
Next, you need to move the 2 Anim-Fx saved files (the swf file and the txt file) into Webeasy. Here's how. Open DOCUMENTS > open Anim-Fx > scroll down the list of files until you find the swf and txt files that you created in Anim-Fx(2 separate lines). For example, if you created a "lightening" animation, you need to locate the lightening.swf file and the lightening.txt file.
Right click to select each file (holding shift key to get both) > COPY > open Webeasy and PASTE the swf file and txt file into the Webeasy window along the bottom of the screen. Alternatively, you can use the Browser in Webeasy to locate the Anim-Fx swf and txt files from your documents. The swf and txt files will appear as thumbnails in the window at the bottom of Webeasy.
TO ADD THE ANIM-FX BANNER TO A WEBEASY PAGE.
1. Drag and drop the txt file onto the webpage you are creating. A small text icon will appear. For example, place it in the top area of the page. Do this
first (see why later).
2. Drag and drop the swf file onto the page you are creating.
3. Click to SELECT the swf file box on the webpage. It needs to be selected for the next 2 steps.
4. Now, this is where you must paste in the custom HTML script you copied from Anim-Fx ! Here's how.
5. Under TOOLS, open the CUSTOM SCRIPT ASSISTANT. Make sure that OBJECT EVENTS is selected. In the CONTENTS window, highlight and
DELETE the HTML script that is currently in the box. Next, just right click in the CONTENTS window > and PASTE the custom HTML code that you copied from Anim-Fx. Select OK to apply. To see if your animation works, continue...
6. In webeasy, select BUILD > PREVIEW > the website preview window opens. Select BUILD AS HTML WITH CSS (first button in the dialog box) > OK.
7. Your Anim-fx Animation preview will appear and function.
1. You need to hide the little Anim-Fx text icon on your webpage or it will keep appearing in preview mode. To do this, just select the little text icon, then shrink it with the corner handles, and then move the swf file box over top of the icon to hide it. This is why we dragged and dropped the txt file onto the webpage first. (see above).
2. In Webeasy, you cannot resize the banner animation in the standard method by selecting and moving the corner handles. To resize your banner, you must: SELECT the banner > TOOLS > open the CUSTOM SCRIPT ASSISTANT > In the CONTENTS window, you will see the default width and height set at 600 X 300 (in 2 locations wthin the HTML script !). You can change the width and height to anything you like to customize the size of your banner. The default size 600X300 appears twice, so make sure to change the values in both areas. Select OK. You can only see the newly created size in the Webeasy preview mode (BUILD > PREVIEW > BUILD AS HTML with CSS > OK).
3. THERE ARE SOME WEBEASY "TEMPLATE" PAGES THAT WILL NOT SHOW THE ANIM-FX ANNIMATIONS !!! The BLANK PAGE templates seem to work best.
Time to get creative. You can move the banner around to different locations on your webpage. You can move the banner over top photo images, Change the height and width to match other images and graphics in any combination. You can select a TRANSPARENT background in Anim-Fx for your annimation and place it directly over a photo image. Remember to PREVIEW everything to see how it works. HAVE FUN !