|
| SWiSH Design Tutorial |
The SWiSH animated templates are the website templates (minimum 2 pages in a package) that come with a SWISH animated header thus making an attractive multimedia combination of live action and a nice sound accompaniment.
The SWiSH animated templates can be edited with a SWiSHMax editor (also pay attention to the dynamic Swish templates that don't require this editor). To change the SWiSH templates you need an .SWI file which is provided with any of our SWiSH Templates. Besides the .SWI file you will get the .SWF, the .PSD and the .HTML files to make your work with our SWiSH templates extremely easy.
In this section of our template help system (design tutorial), you can get the detailed information related with the SWiSH website template structure, SWiSH template editing, installation and configuration, as well as useful tips, troubleshooting and the frequently asked questions related with SWiSH website design.
And in our online SWiSH design store you can buy for a super price and instantly download the new, original, high-quality SWiSH animated websites and website templates.
The exceptional quality of these designs is guaranteed. They are fully customizable, so you can easily change any element of a design in a trial version of required software, using the provided source files, detailed tuturials, and free after sale support. Or simply order the professional template customization services: website installation, color scheme change, content / text change, your logo implementation, etc. Our great web hosting is also at your disposal. Any questions?
Your order will be processed by Template-Help.com (Jetimpex Inc, USA).
You can pay by a credit or debit card, Paypal, Moneybookers, Google Checkout, bank transfer, and e-money. The download link will be instantly sent on your email. Buying any design today, , you get the premium clipart library for FREE + the special offers and great discounts on related products. Enjoy!
|
| |
| Buy - Download - Use | |
| | |
| Designs by Category |
▪ Accounting, audit, tax designs
▪ Adult website designs
▪ Animals, birds, pets designs
▪ Agricultural, farming designs
▪ Architecture, construction designs
▪ Army, navy, military designs
▪ Audio, video, electronics designs
▪ Automotive, automobile designs
▪ Books, literature designs
▪ Beauty salon, SPA designs
▪ Business, corporate designs
▪ Charity, welfare, donation designs
▪ Cinema, movie, film designs
▪ Computer, hardware designs
▪ Celebrity, star fan club designs
▪ Children, family designs
▪ Christmas, New Year's designs
▪ Green designs
▪ Dating, matchmaking designs
▪ Design studio, creative designs
▪ Educational, student designs
▪ Electronics, audio, video designs
▪ Entertainment, entertaining designs
▪ Exterior design, landscaping designs
▪ Fashion, wear designs
▪ Finance, financial designs
▪ Fishing, hunting, camping designs
▪ Flower, floral shop designs
▪ Food, drinks, nutrition designs
▪ Football, soccer, rugby designs
▪ Gambling, casino designs
▪ Games, computer games designs
▪ Gifts, gift designs
▪ Halloween designs
▪ Hotel, accommodation designs
▪ Industry, industrial designs
▪ Insurance, insurer designs
▪ Interior design, furniture designs
▪ Internet technology, IT designs
▪ Jewelry, jewellery designs
▪ Job & employment designs
▪ Law, juridical, legal designs
▪ Love, romantic designs
▪ Marketing, advertising designs
▪ Media, radio, TV designs
▪ Medicine, health care designs
▪ Mortgage, loan designs
▪ Music, musical designs
▪ Night club, dancing designs
▪ Photography, photographic designs
▪ Personal, individual designs
▪ Politics, political designs
▪ Real estate, realty designs
▪ Restaurant, cafe, bar designs
▪ Religious, church designs
▪ Science, scientific designs
▪ Security, safety, protection designs
▪ Social, cultural designs
▪ Spirit, spiritual designs
▪ Software designs
▪ Sports, sporting designs
▪ Telecommunication designs
▪ Travel, vacation designs
▪ Transportation, logistic designs
▪ Web hosting designs
▪ Wedding, marriage designs
| | |
| Designs by Number |
| |
| SWiSH Template Help | | Buy today, - Get premium clipart for FREE | | |
E-commerce, Online Store, Web Shop, Online Payment Processing, Merchant Accounut
|
|
| SWiSH Template Structure |
You have received your SWiSH template ZIP package and unpacked it. Let's see what you have inside:
- "screenshots" - contains screenshots of the template.
- "site" - contains the .HTML files and style.css file (a non-animated version of the template)
"images" - contains all the images used in .HTML files
- "site_swish" - contains index.html, tfile_main.html, contact.php, contact.asp, style.css files and basic images (an animated version of the template).
"swish" - contains .SWF swish movie(s) used in .HTML file. "images" - contains images used in .HTML file.
- "sources" - contains source files
"clipart_library" - contains free clipart .PSD files - all the elements are arranged in several files. "swish" - contains .SWI source file(s) and images. "fonts" - contains all the fonts used in .PSD and .FLA files - True Type (.TTF), Adobe fonts (PFB\PFM), or both. "psd" - contains Adobe Photoshop .PSD files.
Note: For security reasons the sources folder is in a zipped file and is password protected. To uncompress a password protected .ZIP file you will need to have a zip file utility program installed and the correct password. As soon as the zip file begins to uncompress, you will be prompted to type in the password. The password is the ID number of your order. You can find this number on the order page which is provided to you through a link that we sent to you via email. |
| SWI File Opening | |
The source files for SWiSHMax application have the ".SWI" extension. You can edit these files to change the text, images, and scripts in your SWF movie. These source files are located in the "/sources/swish" folder of your template package.
You can open the ".SWI" file for editing in two ways. When the SWiSHMax application is launched then the "Start up Menu" dialog window appears. To open your file you can choose the 3rd menu item: "Work with an existent movie". Browse to the location of your ".SWI" file and select it to open.
If youve disabled the start up menu you can open the file by selecting the "File/Open" from the top menu. SWiSHMax application doesnt allow you to work on multiple files, so the previously opened file will be closed.
Sometimes the SWiSHMax application can tell that some fonts have been changed when youre opening the ".SWI" source file. This means that you dont have all fonts installed on your machine. SWiSHMax will try to find the closest fonts to substitute for the missing ones. This may distort the original style of the text animation. So its better to install all the fonts provided in the template package before opening your ".SWI" file.
|
| SWiSH Text Editing | |
The text in the SWiSH movie is represented as the Text Object. This Object can be a Static, Dynamic, or Input. Dynamic text and is used to display text that can be changed by the script while the movie is running. So it can be used to display the dynamic content like the current date, dynamically changed news, etc. Input text is the Object that allows you to get text input from the user. Its very useful when youre creating interactive movies with feedback or search forms.
But the most important and widely used Text Object is a Static text. This object is used to display the Static text in your movie. All the titles, slogans, and button captions are represented by the Static Text object.
To edit the text in SWiSHMax, first of all you have to select an appropriate text object. There are several ways of doing this. You can use the "Select" tool to select an appropriate text in the Layout panel. Note that you should move the Timeline slider to the last frame to see all "texts/objects" in the layout panel. The other way to select the text object is to use the Timeline layers list or the Outline panel. You can open the Outline panel by clicking the "Panels/Outline" top menu item. Outline panel represents your movie structure and is very easy to navigate through to find an appropriate object in your movie.
The text object is marked with "T" icon in the Outline panel as well as in the Timeline. The name of the object is the same as its content. And it really helps to find the text object that you want to edit. Once youve selected an appropriate text object you can edit its content and properties in the Object panel. You can open the Object panel by clicking the "Panels/Object" top menu item. Note that this panels caption is different depending on the selected object type. So if youve selected the Text Object then the Objects panel caption will be with Text.
The edit area is located in the bottom part of the Text Object panel. You can see and edit the content of the text object there. You can change the font color by clicking on the color select box at the right of the font family and font size drop downs. Use these drop down menus to modify the text font family and the font size. Note that if youre changing the font family and the new font type differs from the original then you have to change the font type as well. For example, if youv e substituted the pixel font with the vector one, the font type should be changed to Vector Font or Vector Font pixel aligned. The text justification and the direction flow options are available in the Text Object properties as well.
|
| SWiSh Links Assigning | |
During the customization of your SWiSH movie you may need to assign links to the button elements. These links can open new pop pages, surf through the pages of your website, open the image preview or send a contact letter. All these features can be added by assigning the appropriate script to the button element.
Select the button element by clicking it with the Select tool on the Layout panel, or by selecting it from the Outline or Timeline panels. When the appropriate button item is selected you should switch to the Script panel. To open the Script panel you can select "Panels/Script" from the top menu. If this button item already has the rollover effect, you can see the following script in the actions panel: on (rollOver) {gotoAndPlay(2); playSound("But.wav");} on (rollOut) {gotoAndPlay(18);}
If you want to connect this button with an external URL you can use the getURL() script function. If you're assigning this function to the button you should use the on (release) event. So, the rollover script with the added link will look like this:
on (rollOver) {gotoAndPlay(2); playSound("But.wav");} on (rollOut) {gotoAndPlay(18);} on (release) {getURL("http://www.mywebsite.com","_self","GET"); }
If you don't use any rollover effects, you can use the on (release) event without the previous two events: on (release) {getURL("http://www.mywebsite.com","_self","GET"); }
Lets look at the getURL() function closer. The first attribute is the absolute or relative URL of the file to be loaded; the second attribute is the Window. You can specify the target frame name to which you will load the file. Or you can use some of the default window options:
_self - this will open the file in the same frame or window. Note that youll get the same effect if you just skip the Window option; _blank this will open a new browser window; _parent this will open the link in the same browser window regardless of frame settings; _top this will open the link in the top level frame. Let's check some examples of the getURL() function:
getURL("images/myphoto.jpg","_blank")
This will open the photo.jpg file located in the images folder in the popup window.
getURL(http://www.myfriendswebsite.com)
This will open the http://www.myfriendswebsite.com in the same window.
getURL("http://www.mywebsite.com/mail.php","_self","GET")
This will call the mail.php script located at the http://www.mywebsite.com/mail.php and will transfer the variables info using the GET method.
If you want to connect a button with the JavaScript code, you can use the following function:
on (release) {javascript(alert(this is test));}
Quoted javascript() function argument should be the javascript code. The example above will execute the alert() javascript function.
If you want to connect your button with an e-mail address, you can use the mailto() function. This function is similar to the mailto link option in the HTML. The following example will call the default mail agent and fill the address and subject fields:
on (release) { mailTo("support@company.com","","This is the support question",""); }
|
| SWiSH Images Changing | |
During the customization of your SWiSH animated website template you may need to substitute some of the images with your own. For example, to change the company logo or substitute default image with a photo of your products. This process is done easily with the help of SWiSHMax.
First of all, you'll need to locate and select an appropriate image item. You can find the image object through the Outline or Timeline panel. Or you can select it by single clicking on an image with the Select tool on the Layout panel.
Once you've selected the image object, the Object panel should be opened. You can open this panel by selecting the "Panels/Object" from the top menu. The name of the Object panel depends on the currently selected object type. In the case of an image the object panel name will be a Shape.
Let's look at the Shape object panel. You can see the small thumbnail of the image with its properties under the Clipped image and the Properties buttons. You can click the properties button to see detailed info about the selected image object.
Three buttons at the right of the image thumbnail will help you customize the images in your SWiSH animated template. The top button is the "Select New Image" button. Click it to substitute the currently selected image with your own. Just click it and browse to the location of your own image file. Once you've added your new image to the template you may need to update it. This is also very easy to do. Edit this image using any computer graphics editor or substitute it with the new one. Then click the middle button "Reload image from disk" and the selected image object will be updated from the disk. Note that the image file should be located in the same place where you've loaded it from the first time. If no file is there, you'll get the "Unable to read the file" message after pressing the refresh image button.
You can click the bottom down arrow button to swap the current image with any image from the content library. All the images used in the template are located there. You can add the new image to the content library by clicking the "Import" button in the Content panel.
|
| SWF File Exporting | |
When you've done the customization of the ".SWI" file, you'll need to update the changes to your SWiSH animated template. So you'll need to export the SWF file. To export the SWF file you can select the "File/Export/SWF" from the top menu or click the "CTRL+E" hotkey. Then select the destination folder to which you will export the new SWF file. To make the changes appear in your template you should export this file to the folder with the original SWF file. According to the SWiSH animated template package structure, the original SWF movies are located in the "/site_swish/flash" folder.
Before exporting your SWF movie you may need to change the export options. You can do this in the Export panel. This panel is accessible by clicking the "Panels/Export" in the top menu.
|
| SWiSH Contact Form Making | |
A .ZIP file with an example of a general contact form in SWiSH (Contact.swi), contact.php and contact.asp you can download here.
The script for "Text_fields" sprite: onLoad(){ recipient=_root.mail; _root.serv="php"; _parent.fields_descriptions= Array ("", Array("t1", "your_name", "Your Name:"), Array("t2", "your_email", "Your Email:"), Array("t3", "telephone", "Telephone:"), Array("t4", "message", "Message:"), Array("t5", "address", "Your Address:"), Array("t6", "123", "Your wegweg:"), );}
The script for Hit area of "Submit" button: on (rollOver) {this.gotoAndPlay("s1"); } on (releaseOutside, rollOut) { this.gotoAndPlay("s2");} on (release) { for (i=1; i<_parent._parent.fields_descriptions.length; i++) { if (_parent[_parent._parent.fields_descriptions[i][0]].text!="") { this[_parent._parent.fields_descriptions[i][1]]=_parent[_parent._parent.fields_descriptions[i][0]].text+"&777&"+_parent._parent.fields_descriptions[i][2]; }} this.recipient=_parent.recipient;
getURL("contact."+_root.serv, "_blank", "POST");}
The script for Hit area of "Clear" button: on (rollOver){ gotoAndPlay("s1");} on (rollOut){ gotoAndPlay("s2"); } on (release) { for (i=1; i<_parent._parent.fields_descriptions.length; i++) { _parent[_parent._parent.fields_descriptions[i][0]].text=""; }}
|
| |
| Buy & Download SWiSH Templates |
|
|
| |
|  |
|