|
 |
|
|
|
|
|
Description: How to design a layout in Adobe Illustrator and create a fully functional swishMax website. The finished site will consist of 4 separate pages, a main index page with roll over buttons that will call for and load 3 individual pages.
Software: Adobe Illustrator 9 to CS and SWiSH 2 or SWiSHMax
Level: Advanced
Author: Aaran Duncan
Before you start: If you are a designer of any kind, a vector program like Corel, Freehand or in this case Illustrator in your arsenal is a must. What is the difference between those programs and say Photoshop? Not as much as a few years ago but still quite a big difference. Let me explain how they think. Like I mentioned above Illustrator is a vector program and Photoshop is bitmapped. What this means is they handle information in different ways. Photoshop the bitmap program although has some vector tools in it looks at everything as little squares called pixels. You will see them when you enlarge an image.
   
Illustrator on the other hand the vector program stores its information in tiny points called nodes. In the nodes contain values like colour and size. You can see them when you make any kind of shape in SWiSH 2 or SWiSHMax they are the little white boxes in the corners of your shape. By making your layout with vector graphics allows you to easily place and mask elements without too many hassles. As this is a very basic demonstration you will have to practice to get the hang of it and really plan out your creations before you even begin to use any programs. Preparation is key. For those of you who don't know v ector images are 100% percent scaleable.
You can put your graphics on anything from the tip of a pin to the side of the moon without any loss of quality. Now because websites are all about file size and download times you have to pick and choose when and where to use which format which I'm not going to get into here because that is a lesson in itself. I think people like Photoshop because they can get quick results, and when they walk up to a program like Illustrator they have the same expectations and then get frustrated. This tutorial should get you started off on the right foot, nothing fancy and broken down to its simplest form. Anyway's let's get started.
Setting up your file:
Open Illustrator version 9, 10 or CS.
File > New and use these settings.
View>Show rulers and make sure Smart Guides and Snap to Point are activated in the View menu you were just in. Press the letter V to make sure your default tool is activated (the cursor should now be a black arrow.)
On your work space is a white box with a black outline, this is called the art board. Press Ctrl R to activate you rulers. Now Illustrator's guides are just like in SWiSH, click and pull them out from the rulers to the black out lines of all four sides of the art board.
Press the letter M for the rectangle tool and go to the top left of the art board with the cursor, when you touch the edge you will see "intersect" or "page" double click on the left mouse button and you will get a pop up. Enter these settings and you have just created a rectangle which will be the "background" of our movie.
Just like in Photoshop choose a colour using the tool pallet. i chose #CCCCCC.
You now need to go to your layers pallet just like in Photoshop F7 if it is not activated. And name the layer background and lock it like the example.
Duplicate your layer by clicking and dragging the background layer on top of the "create new layer" icon which is on the left side of the trash can. rename it to "button 1".
Unlock "button 1" click on it and change its colour, i chose red #990000.
Grab the node on the top left by holding down "Ctrl + Alt", click and drag into the middle keeping in mind that this should be button size.
Once you have it placed where you want you can lock the layer until you feel comfortable that you are not going to accidentally move them around. Duplicate "button 1" as we did a few steps ago. unlock if necessary and change the colour to blue #6600CC, move it to the right by clicking on it holding down the "shift" key until it is about in the middle aligned with "button 1" and rename it "button 2".
Repeat the same step making another duplicate. Name it "button 3" change the colour to dark blue #000066 and place it further to the right like below. This is how your layout should look so far.
This is what the layers should look like.
We are almost finished. Duplicate the background layer, unlock it if you have to and colour it white #FFFFFF. Grab the top node in the center and pull it down past the bottom of the buttons and pull it from the sides and bottom of the background layer. name it appropriately main content. this is where your content will be displayed when a button is clicked.
Your layers should now look like this. Notice the order background, main content then the buttons this will be important later.
Save your file and protect it incase you ever need to make changes later. Here is the little known secret goto >File >Export a new window will open.
In Save As Type goto Macromedia Flash (*.SWF), name it layoutImage and press save.
Use the same settings as below, keeping the name as "layoutImage" and you can close the program and open Swish2 or swishMax.
Swish time:
Set your movies dimensions to 760 pixels wide by 460 pixel high white background.
Goto >File >Import and direct swish to the layoutImage.swf we just created. Now goto the transform menu and set the Anchor point to Top left and set a X and Y value to "0" this will line it up with the movie.
Right click on the layout.swf and goto >Grouping >Ungroup this will let you have full control over your shapes again. Notice they are in the same order as they were in Illustrator from top to bottom. Button 3, Button 2, Button 1, main content and background. You should now rename them.
Save:
Now is a good time to save your Swish file as layout. Save another one as "pageTemplate"
In the pageTemplate file delete the background and all three buttons. No joke, and save again. Click on your main content graphic and change the colour to #990000 which is red, goto >File >Export >Swf and name it red. Change the colour again to #0066CC >File >Export >Swf and name it blue, then repeat once more changing the colour to #000066 >File >Export >Swf and name it darkBlue. Like i said before very basic, these we will pretend are the content you will have to use your imagination. You can close "pageTemplate" save if you like and open "layout" again.
In "layout.swi" right click on the red rectangle "button 1" > Convert > Convert to button, you will see a button tab activate, no need to change the name, check Has separate over state.
Click the plus symbol beside "Button 1" in the Outline panel, then click on the Button 1 graphic under Over state and change the colour to yellow.
Repeat the same steps to the other two buttons.
We are almost done, it is now time to do a little programming. Click on "Button 1" and add a script. Make sure it is set to guided.
> Add Script > Events > Button > On (release)
> Add Script > Movie Control > Load/unload Level > loadMovieNum(...)
Now fill it out like below
Repeat the same steps for the other 2 buttons. Make sure the URL value for "Button 2" is set to blue.swf and that "Button 3" is set to darkBlue.swf keeping the level set to 1 for all buttons.
All you now have to do is File > Export > HTML+SWF and you are done. To see what we have created click here and this is where you can download the full source.
|
|
|
|
