How to Edit a Flash Template and Make a Flash Website Customized


 

You must be wondering how to edit a flash template and customize with your own and make a website.

First of all, if you are looking to make your own flash website then why you need to re-invent the wheel (I mean learn flash from scratch and create a great website). Unless you are a flash design professional this tutorial can be helpful for you.

Before we start the process, just a sidebar about flash based websites.

Please note that search engine spiders can't read flash files so if you don't have html pages to back your content then your beautiful flash website runs the risk of getting lost on the information highway.

One more issue with most of these pre made templates is that you need to make your content fit the exact place holder of these templates unless it has the scroller option.

The best option is that you can have the doorway page with flash intro and subsequent pages with HTML, CSS template.


To start with there are some good sources from where you can get free flash templates.

www.flashmo.com

www.freenicetemplates.com

www.free-flash-template.com


Of course there are some more sources which are not free and the price varies from $50 to $100 per template. If you want an exclusive template just for you then it varies from $1000 to $4000 or even more.

DreamTemplate 

Template Kingdom

Template Storage

OK, to start the tutorial. Let me tell you that you also need the Adobe Flash CS5 or CS4 editor. Now, this editor costs you a fortune $700. But don't get dishearten.  There are cheaper ways to get this done. You see web design being our bread and butter we didn't had any other option that to buy the same.

1) You can trust and rely on the services of designers like us who operates at rock bottom prices. Reach us out here with your need.

2) Get the Flash CS3 or CS4 free or almost at free. There are ways to get this software free but  I can't elaborate as a tutorial to teach something which might not go well with many and term unethical. With my clue search some blackhat forums you can get my answer.

3) Or if you have the fund go and buy it from here.

Now let's move with the tutorial...

arrowStep 1: Download the flash template


Download the template from the above free or paid sources. Unzip the files and store in a folder.

arrowStep 2: Open the flash editor and open the template


Open your flash CS4 editor and do a file open to select the .fla file from the other files.

flash training


arrowStep 3: How to edit a flash template


Now, at the right panel you notice the library and properties, expand the folder you notice the files. All these files are part of the flash movie.

Select any of the file you want to edit.


flash tutorial


When you'll see text that needs to be modified, stop the time line slider.
To fit flash header and customize with your company/business name.

Change the company name, company slogan and the buttons’ text.

The easiest and most reliable way to locate elements in flash is to use symbols library.

To open symbols library you can use "Ctrl + L" hot key or choose "Window/Library..." from the top menu.



how to edit flash template


Browse the file symbols library to find the appropriate file symbol containing text you want to modify. You can see symbols preview in the preview window at the top of symbols library panel.

Actually, all symbols the contain text have appropriate names such as "Company Name" or "About Us". If you are unable to see text for some reasons try to change movie background to a different color from white.

As white text on white background stands invisible. To do that, choose Modify/Document... from the top menu and change background color in pop up window.

When you have found symbol containing text you want to change double click symbols icon to show text symbol in main workspace window. Then just double click text with "Selection Tool" or single click it with "Text Tool"  (hot key "T") to edit text.

While editing text in Macromedia Flash you have wide choice of attributes able to modify. All that options are accessible from the properties panel at the bottom of Macromedia Flash workspace.

If you can't see this panel for any reason you can open it by pressing "Ctrl + F3" hot key.

To modify the default template text color or font size just select text using Text Tool and go to Properties Panel to change appropriate option.

You can find font family and size drop downs, color select box and align icons there. Modify any of that options and change will update to selected text.

When you have finished editing of the text block, press "Esc" key to quit editing mode. Now you can repeat operations described above to edit other text blocks of your flash header.

After you've made all appropriate changes you should publish your flash movie to "SWF" file and update it to your web design template.

arrowStep 4: Editing the default Website Links to Your Own Links

To link the default template flash buttons with pages of your website or redirect your flash intro to homepage after it finished.

There are some kinds of links in Macromedia Flash: button symbol links, frame links and text links.

First of all you should open source "FLA" file in Macromedia Flash editor. To add links to the button symbols in your flash movie do the following.

First of all you should locate button symbol you want links be assigned to. There are two ways of how to do that.

You can choose Selection Tool from tools panel or call this tool by pressing "V" hot key. Go to the Properties Panel to check this symbols behavior. If you can't see this panel for any reason you can open it by pressing "CTRL + F3" hot key.

At the top left corner of this panel symbols behavior drop down is located. It must be a "Button". If it is "Movie Clip", "Graphics" or some other that differs from "Button" you can't assign links to it in the right way. Don't change it to the "Button" because it will damage original rollover structure. Double click this symbol to get inside of it, select its content and check symbols behavior again.

how to edit flash template

You should type URL button will be linked to as get URL function argument. For example, if you want to link button to your contacts page type the following:

 

on (release) {

          getURL("http://mywebsite.com/contacts.html");

}


Actually, get URL function accepts three arguments: URL, window type and variables send method. Window type argument specifies where new URL will be opened. If this argument is blank the link will be open in the same window. If you want to open it in a new window, use the "_blank" argument. Variables send method should be used if you are parsing some variables through the URL string. The available options are "GET" and "POST". Next action script example calls products page with "item" variable with "9" value in the same window using a GET method.


on (release) {

          getURL("http://mywebsite.com/products.php?item=9", "_self", "GET");

}


If you are using flash intro template, you will need to redirect visitor to your website after intro finished playing. To do these follow next instructions.

Move red timeline slider to the end of flash intro movie. Select the last frame by single clicking it with mouse. Press "F6" to create key frame in this frame. Press "F9" to open Actions panel. Type the following code there.


getURL("your_url_here");

Replace "your_url_here" text with appropriate URL of your website.

If you want some portion of text to be linked to some location on the web please, do the following. 

Locate the symbol containing text. Select the text you want to link with URL by using a Text Tool. Go to Properties Panel, press "CTRL+F3" if you can't see it for some reasons. At the very bottom of that panel you'll see the URL input box. It has the chain icon on the left of it. Just fill that empty input box with the appropriate URL.


edit links in a flash template


arrowStep 5: Editing the default Website Images


Browse these symbols to find symbol your want to substitute. You can see symbols preview at the top of symbols library. When you have found necessary bitmap symbol double click the icon on the left of it as to see the symbol properties window.

flash training

Bitmap Properties

You'll see image preview and options there. Check the image size. It looks like 193 x 214 pixels at 32 bits per pixel. To make your image fit the original effects and animation the best way your image must be exactly the same size as in the original image.
 

You can resize or crop your image using Adobe Photoshop. Open your image in it using "File/Open..." from the top menu. To resize or crop choose "Image/Image Size..." or "Image/Canvas Size..." accordingly. Then save image using "File/Save As...", for using it in flash choose one of the following image formats: "JPEG", "GIF" or "PNG".

Press "Import" button on the left and browse to location of your image file.

At the bitmap symbols properties window you can change the image quality. Make it lower to reduce published file size.


arrowStep 6: Publising Your Flash Website



Finally, after you've made the appropriate changes to the flash animated header of your web design template you should publish and update it.

You may want to modify the publish settings to reduce the download time or increase the image quality. To do so, please, choose "File/Publish Settings..." from top menu. In "Publish Settings" window choose "Flash" tab. The main options that have significantly influenced the published "SWF" movie file size are Jpeg Quality, Audio Stream and Audio Event.

flash training


To change jpeg image compression ratio move "Jpeg Quality" slider or type it in the input box at the right of it. Low quality (high compression) extremely reduces download time by flash looses its professional look. Try to experiment with quality to get optimal size/quality balance.

Another way to affect movie size is to change Audio Stream and Event options. Press "Set" button on the right to change music quality options.

Actually, you can publish your movie directly from "Publish Settings" window, see "Publish" button at the bottom. Or you can publish it from every point of Macromedia Flash by pressing "SHIFT+F12" hot key.

Published "SWF" file will appear in the folder were corresponding "FLA" file is located.

Note: If some fonts in your published "SWF" file differ from original it means that you have not installed all the appropriate fonts.

Replace old "SWF" file in "/site_flash/flash" folder with a new one. Now it's time to check modifications you've made. Go to the "/site_flash" folder of your web design template and launch "index.html" file to see the changes.




Search Our Site





[?] Subscribe To This Site

XML RSS
Add to Google
Add to My Yahoo!
Add to My MSN
Subscribe with Bloglines






Related Pages

  • Back to Home Page
  • Are You Following These Steps?
  • 7 Big Mistakes To Avoid When Building a Website
  • Adsense Website Builder
  • Wordpress Theme Generator
  • How to edit a Flash template
  • Editing a CSS Template Tutorial
  • Basic HTML tutorial
  • WordPress Video Tutorial
  • Video Squeeze Page Generator
  • How to Install Joomla
  • Auto Blogging Software
  • Building a Free Website
  • Create a Free eCommerce Website
  • Free Web Hosting Reviews
  • Best Web Design Softwares
  • All Tools in one with SiteBuildIt.com
  • Amazing Web design Software Xsitepro
  • The Most Popular Website Design tool
  • Great Content Management Software Joomla
  • Graphic Design Tutorials
  • How We Can Help?
  • Special Sitesell.com Design Services
  • Our Design Portfolio
  • Get a Free Website
  • Affordable Logo Design Services
  • SEO Automation
  • Automatic Backlink Software
  • Best Article Marketing Software
  • Best SEO Software
  • Must Have SEO Plugin for WP Sites
  • Improve Search Engine Ranking
  • High Page Rank Backlinks with LinxBoss
  • Our Affordable SEO Service
  • Website Marketing Tools
  • Convert Your Articles to Videos
  • PPC Targeting Software
  • Get 1cent Per Click With Google Adwords
  • Promote Your Website Free!
  • Online Flash Banner Maker
  • Banner Generator Software
  • This Increases your sales to 300%
  • Float In Windows Creator