HTML , Flash and other tutorials

Importing Flash animations into WebStudio.

I had a hard time figuring out how WebStudio works, as I'm not used to HTML editors that automatically put files into predefined directories. For each page the application creates a unique directory. Each directory contains all the graphical elements for that particular page, including the animations I created. Just follow the steps below to import a Flash animation into WebStudio.

Note Webstudio 4.0 users: The author of Webstudio has made some big improvements in Web Studio 4.0. Please check out the Webstudio 4.0. Flash Tutorial

For earlier versions of Webstudio:

1. To start, create your Flash animation.

2. Save the created animation.

3. Open WebStudio.

4. Create a new document.

5. Drag and drop the HTML object onto your page. The HTML object can be found in your -view/galleries/"Cool Stuff"/the box with the <html><head> tags (Figure 1)

Figure 1
Insert Flash into WebStudio

6. Right click on the HTML object and select "Properties".

7. Now the "Object properties" window pops up.

8. First, attach the Flash animation to the HTML page. To do this click on the "Attached Files" tab - and then on the "Add files to List" Button. Browse to your Flash animation and select it.

9. Next you must insert the special HTML code that is required for all Flash animations. To do this copy and paste the HTML code as generated in one of the Amara Flash Software applications when you saved the SWF File (Figure 2).

Figure 2
Importing Flash in WebStudio

11. Now, strangely enough, you are not done yet. WebStudio requires you to add $thisfolderurl$ in front of your Flash animation. My Flash animation is named animation.swf and I must rename this to $thisfolderurl$animation.swf (figure 3). Note that you must do this twice!

Figure 3
importing animation into Webstudio

12. Click "OK" to close the object properties window and to save all your data.

13. Click on "Preview/Preview this page" to see the final HTML page.

14. To stop the Preview click on "File/Close Preview".

15. To save your website select "Website/Save Website to Hard drive".

16. When you check the directory structure of the website you just created on your hard drive you will see that WebStudio created a "Page_1" directory. In this directory it stores the Flash animation, hence the strange $thisfolderurl$ piece of code I instructed you to add earlier. If you open the code of the HTML page in Notepad, you will see that the path to the file is "Page_1/animation.swf".

17. Finally, if you want to change the dimensions of the animation, you must change the "width" and "height" tag directly in the HTML content area.