This section deals with editing the Swish part of the templates.
Opening Your SWI file
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 "xxxx/with_flash/swish" folder of your template package. Where the "xxxx" is the id number of your template product.
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 3 rd menu item: "Work on an existent movie". Browse to the location of your ".swi" file and select it to open.
If you've disabled the start up menu you can open the file by selecting the "File/Open…" from the top menu. SWiSHmax application doesn't 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 you're opening the ".swi" source file. This means that you don't 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 it's better to install all the fonts provided in the template package before opening your ".swi" file.
Editing Text
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. It's very useful when you're 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 you've 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 panel's caption is different depending on the selected object type. So if you've selected the Text Object then the Objects panel caption will be 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 the color select box at the right of the font family and font size dropdowns. Use these dropdown menus to modify the text font family and the font size. Note that if you're 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 you've 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.
Assigning Links
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"); } |
Let's look at the getURL() function closer. The first attribute is the absolute or relative URL of the file to load. 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 you'l l 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",""); } |
Changing Images
During the customization of your SWiSH animated website template you may need to substitute some of the images with your own. An example, to change the company logo or substitute default image with a photo of your products. This process is done easily with 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 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 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.
Exporting the SWF file
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 "xxx/with_flash/HTML/Flash" or the "xxxx/with_fl/HTML/Swish" folder, where the "xxxx" is the four digits product id number.
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.
More Web Design Basics: 
