So, you’ve made the decision to create your own Web site. That’s great! A little HTML later and that is done. Now, your search for a brilliant design ethic is underway, but there’s a problem. There is a learning curve ahead. Those flashy looking sites look great and that fresh digital look would make a perfect makeover for your site, but now, it seems like a lot of study time and brain aches are ahead. Or maybe not!
The most popular media format on the Web today is Flash from Macromedia. It is now so ubiquitous that it can be seen on virtually every site on the Web, with the exception of those that remain outdated. Now, if you think the idea of learning Flash is something to be left for professional Web designers, think again! My previous article on Incrediflash introduced a package that points and clicks Flash presentations in a jiffy. That is great, but for Web sites, some more additional functionality is required. Luckily, specific design templates are easily possible with a program called SwishMax. That is, if a Flash Web site is desired. SwishMax even has a similar look and feel to Macromedia Flash software. Yet, this comes without the steep learning curve attached to Macromedia’s Flash software range.
A common predicament amongst Web site owners is that Flash is needed for a new site, so how can something like SwishMax help someone who is not a designer and who bodes no desire to learn how to use Flash, as there is simply not enough time in the day? In response to a cry of help of “I don’t want to learn Flash, but want Flash,” here is my stress relieving article!
So, what is SwishMax? First, I shall outline its creative amazements and then show you how to do an animated “Hello World” Flash movie for a Web page. If it has not been downloaded yet, try out the demo for SwishMax here. It is very affordable and boasts a range of Flash features, but you can use the demo first. SwishMax puts the designer into development on Flash projects quickly. Creating Flash without having to learn how to use Flash and producing professional looking projects for the Web is surely an attractive option to the newbie designer on his or her Web site. Applying interactivity to buttons and images is done with ease. This software has hundreds of effects that can be added to make the text swirl, revolve and fly off. Creating an animated Flash movie is now possible for everyone.
Upon opening SwishMax, the interface may look a little daunting. One reason is that it resembles the Macromedia Flash interface as Web designers using Macromedia’s software will observe immediately. What will be discovered though is that while that is true, SwishMax is devoid of the steep learning curve attached to the Macromedia Flash products.
The picture above shows the four main areas that are utilized during any Flash project in SwishMax. Now, I will show you the user friendly nature of these areas on the interface.
From this point, it just gets better! There are the drawing tools on the left. Clicking and dragging the mouse on the workspace (white square area in the center, shown below) will draw any of the symbols you see on the left. A perfect circle can be drawn quickly this way.
The timeline is used to decide when each part of the Flash animation will appear.
Adding effects is very easy as well. Once a shape or line of text is added to the workspace, click on Add Effect and select from a number of amazing animated effects.
On the right hand side, you will see the Movie Properties. Here, changes such as color, height, width and position can be altered.
Clicking the Add Effect button shows how much animation power is possible with the click of a button. The selection is huge and promotes hours of fun!
Next, try out some quick stuff like a swirling “Hello World” animation. From the drawing tools, click the text button marked as a bold letter T in the drawing tools. Click and drag on the workspace where the text is to be placed. It is easy to move the text window if it needs to go somewhere else. Just select it by clicking on it and then use the arrow keys. Resizing the text window is just as simple by moving the mouse pointer over the corner squares. Now, see those little black square boundaries around the blue dotted line? Ensure that the text size is altered in the Movie Properties window in the drop down list, where it shows as 36 in the screenshot. Click on the Text tab and in the text window where it says “Hello World,” in the bottom right of the screenshot, type “Hello World.” See below.
Now, add an effect to the “Hello World” text like the swirl from the Add Effect menu. With the Hello World text selected, go to the “Appear into position” menu by clicking on the Add Effect button. Then select the “swirl in” option.
Notice that, by default, the “Hello World” text line shows itself on the timeline above. The added swirl in effect can be seen on the line. That has defaulted to 20 on the timeline. That is the length of time the effect will play during the movie playback. Those little squares on the timeline, filling the space from one to 20, are called keyframes. This whole process is known as keyframe animation. By dragging the white dot on the end of the swirl in bar, one can increase the time taken for the effect to finish. This also has the effect of slowing it down to a pace or tempo. Every time a text box, a picture or shape is added to the timeline, it occupies its own area of the timeline. If I add an ellipse, it appears above the “Hello World” bar. Try that and click on the Send Backwards curvy arrow on the toolbar to place the ellipse below the “Hello World” text. Then click Center Justify under the Text tab.
Now, the text is above the ellipse shape and there is a background to the “Hello World” text, like this:
This could be the design for a very simple button that, when pressed, opens a new window for a Web page or movie. The interactivity is a whole new ball game and it really shows the power here. First, press Play on the toolbar and watch the animation.
The effect is a typical Flash movie example and some imagination and practice will create more interesting swishing as time goes by. Once this is done, save the file as a Flash movie by selecting File, Export, HTML + SWF. This way, there is not only the Flash movie (with the extension of .swf), but there’s also the Web page for it (with the extension of .html). Now, it can be uploaded to your Web space or the flash.swf file can be placed on a Web page wherever it is needed, whether it is a table cell, form, etc.
Interactivity is so quick from the Script tab as well. For example, a common action is to tell a button that, when clicked, to open a Web site much like most buttons, when clicked, open a new page on the site. Well, that is very straightforward. There are options for so much that this article could go on and on. To link a button to an action that tells it to open a Web site, just click Add Script and then move the mouse pointer to Browser/Network, followed by getURL. The action getURL simply means get the URL or Web site address and open it in a browser.
There are so many more actions that can be added to pictures or buttons here too. A bit of exploration through the Scripts tab menu items will reveal all of them. Take a look at the Help section as well, as it takes the user through many Flash Web site tricks of the trade. This will become a fun event as Flash animations weave for Web sites.
So, you think you can’t do Flash work? Well, you best think again!
~ Stephen Davies