Publishing Flash Content

In this tutorial, you will learn how to publish the content for web created in flash. As the content created in flash cannot be put on the website in the form of .swf format, we need to created an HTML file and embed the .swf file into it. We will use flash to do all this for us in this tutorial. To start with the tutorial, use the files created in the last tutorial or download the zipped file from the link (click here).  

This is part of a 6 part tutorial series on how to create a Flash website using Flash CS5. The tutorial covers the following : Creating a web template using Photoshop Importing a Photoshop file in Flash CS5 Adding sounds and animation to buttons Adding Animation and Button interactivity Adding a Preloader Publishing the Flash content

1. Unzip the downloaded file and open the index.fla file in your flash window.
   
   
2. Next, choose Window > Properties from the main menubar to open the Properties panel. Choose the Edit button on the right of the Profile property in the PUBLISH area. The Publish Settings window is displayed, refer Figure below.
   
   
   
   You can also open this window by choosing File > Publish Settings from the main menubar.
   
   
3. Next, choose the Formats tab from the window and make sure that only the checkbox on the right of the Flash option is checked. Choose the folder icon on the right of this option and locate the path of the root folder which has all the existing files of this tutorial. Uncheck the HTML checkbox. We will publish the HTML file for our preloader file.
   
   
4. Again, choose the Flash tab in the window to display the properties related to it.
   You can reduce the file size of the flash content by dragging the cursor on the right of the JPEG quality option in the window. Doing this will reduce the quality of all the JPEGs used in the project. We will leave it as it is for our tutorial.
   
   
5. Make sure that the Compress movie, Include hidden layers and the Include XMP metadata check boxes are selected in the SWF Settings area. Leave the other options untouched and choose the Publish button to publish the content as .swf.
   
   
6. Save the flash file and close it.
   
   
7. Next, open the pre_loader.fla file from the zipped folder that you downloaded in the beginning of this tutorial.
   
   
8. Next, choose File > Publish Settings from the main menubar to open the Publish Settings window.
   
   
9. Choose the Formats tab from the window and make sure that the check boxes are selected in front of the Flash and HTML options. Rename the HTML file as index.html and also choose the folder icon in front of both the options to the folder where other files exist.
   
   
10. Next, choose the HTML tab from the window. Choose percent from the dimensions drop-down. This will make sure that the entire flash window is displayed in the explorer on browsing.
    
    
11. Next, choose No Scale from the Scale drop-down. This will make sure that the flash contents do not get scaled with different resolutions of the user.
    
    
12. Uncheck the Show warning messages check box and choose the Publish button.
    
    
13. Open the folder that has all the published files and double-click on the index.html file to open the .swf file in the internet explorer, refer Figure below.
    
    
    The title of the file in the browser tab appears to be pre_loader. This can be changed by using any of HTML editing softwares such as Dreamweaver. We can also use flash to do so.
    
    
14. Select the index.html file from the folder where it is saved. Right-click on this icon and choose Open with > Flash CS5. The HTML content is opened in the Flash window, refer Figure below.
    
    
    
    
15. The title tag here contains the information for the title of the browser. Enter entheos jewells between the title tag, such that the code should look as given below.

<title> Entheos jewells </title>

16.  Save the file and open the html file in any of the web browser just to check that the title is coming as we mentioned in the last step, refer Figure below.

 

Now, you are ready to upload your website on the server and use it further.

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!