Home
| Work & Business
| Websites & Web Pages
| Create a Website
| How to Create Your Own Website in Flash Media
How to Create Your Own Website in Flash Media
by Crystal Street
-
Overview
Adobe Flash is utilized to create a website rich with interactivity and multimedia experiences for the user. Vector graphics, ActionScripting and externally loading media are just a few of the powerful features that make Flash an ideal program for building a technologically rich interactivity project or website. While the options are limitless for building sites with Flash, this article will explore the very basic task of building a simple two-page website.
Flash provides a multitude of interactivity options for building a website.
a2a9acb2-01b7-56eb-67b6-59178df3816c300400
-
Creating the First Page
-
Open Flash Professional and select "File" > "New." The "New Document" window will prompt you to select the type of project to create. The options range from an interactive Flash File with ActionScript 3.0 to a Flash JavaScript File. For the purposes of this tutorial, select the "Flash File (ActionScript 2.0)."
-
Go to "Properties," select "Size" and set the pixel dimensions of your website. A majority of users view websites with a width of 1024 pixels and height of 768 pixels or higher. Set the color of your site by choosing "Background" and apply the proper color and select your Frame Rate to either 15 or 30 fps, or frames per second.
-
Create three layers next to the Timeline and label them "Actions, Background and Buttons" with the "Actions" layer at the top of the list. Additional layers may be used for other elements of the site, such as "Navigation" or "Text" and it is a good idea to separate the layers of the site if the structure is advanced.
-
Import the assets into the Flash project. Select "File" > "Import" > "Import to Library" and retrieve the assets through selection boxes. Images, media and graphics, also known as assets, will be imported to the Library and will be added to the Stage as the site is built.
-
Place the assets on the Stage in the appropriate locations. Go to the three Layers in the Timeline and click the lock setting next to the "Actions and Buttons" Layers. Click on the "Background" Layer and drag the assets from the Library onto the Stage using the Selection Tool.
-
Step 6
Select the Text tool on the Tool Bar and add text to your site if necessary. Use the "Static Text" option with a setting of "Anti-Alias for Animation" for easy rendering of text on the Internet.
-
Step 7
Lock the "Background" layer once you are done editing and create a new layer for an additional page. This will be another page within your website and the layer name should reflect the page contents, such as About or Contact.
Creating the Second Page
-
Go to the Timeline and select the boxes in the second frame. Add a Blank Keyframe to the frames by right clicking on each frame and selecting the "Blank Keyframe" setting. Repeat the same steps used to create the first page, adding media from your Library onto the Stage in the proper configuration.
-
Create a navigation button using a symbol or graphic from the Library or by creating an object using the Oval or Square tool. Unlock the "Buttons" layer and add the object to the stage.
-
Use the Selection tool and select the object. Go to "Modify" > "Convert to Symbol" and select "Button." Label the button with the appropriate action it will serve, such as Home Button, this will keep the buttons organized in the Library.
-
Go to "Window" > "Actions" while still selecting the button just created and add this ActionScript to the button;
on (release) {
gotoAndStop(2);
}
The script will add logic to the button that will interact based on the user's actions. The (2) represents the second frame added for the additional page and tells the Playhead where to go and stop on the Timeline.
-
Unlock the "Actions" layer and go to "Windows" > "Actions" and add the following script to the frame;
stop ();
The Stop script will tell the Playhead to stop on the appropriate frame until the user selects a navigation button sending them to another section of the website. Add the Stop script to the "Actions" layer of each frame.
Publishing the Site
-
Select "Save" and select the proper folder for your FLA project file. This file will not be published on the Internet, but it will serve as your master project file for modifications in Flash.
-
Publish the site in preview mode prior to sending it to the Internet. Select "File" > "Publish Preview" > "Default" and Flash will preview your site in an offline browser window. Flash will also create your SWF, HTML and JavaScript files for publishing to the Internet.
-
Prior to uploading the SWF, HTML and JavaScript, change the name of the HTML file to index.html so your web server will recognize the file as your home page.
-
Upload the files to your server and your site is now live. Test the site on different browsers to ensure that it functions properly under different Internet browsers.
- 4
- Flash Professional
Images, graphics or other media
- Flash Professional
- Images, graphics or other media
- Keep the manual links to the Adobe tutorials open while working on your site for reference.
Familiarize yourself with the Tool Bar prior to building your site and take time to understand how the Timeline communicates with the different elements on the Stage.
A Blank Keyframe will automatically convert to a Keyframe once content is added to the Stage.
Flash will notify you with an error dialogue box if there are mistakes in the ActionScripting code.
Republish the site using the Publish Preview option each time a revision is made to the FLA. This will rewrite the edit to all three necessary publishing files, the HTML, SWF and JavaScript. If your changes are not appearing on the Iinternet after republishing these files, be sure to clear your cache in the Internet browser and refresh the site.
- Keep the manual links to the Adobe tutorials open while working on your site for reference.
- Familiarize yourself with the Tool Bar prior to building your site and take time to understand how the Timeline communicates with the different elements on the Stage.
- A Blank Keyframe will automatically convert to a Keyframe once content is added to the Stage.
- Flash will notify you with an error dialogue box if there are mistakes in the ActionScripting code.
- Republish the site using the Publish Preview option each time a revision is made to the FLA. This will rewrite the edit to all three necessary publishing files, the HTML, SWF and JavaScript. If your changes are not appearing on the Iinternet after republishing these files, be sure to clear your cache in the Internet browser and refresh the site.
- Flash is a professional level programming site and it may take some time to navigate the program and produce a project or website. The learning curve is steep, but once you understand the basics you can work within Flash.
- Flash is a professional level programming site and it may take some time to navigate the program and produce a project or website. The learning curve is steep, but once you understand the basics you can work within Flash.
