Tip #4140 - SwishMax
Printer Friendly Version | E-Mail This Tip
SwishMax
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
Want To Comment On This Tip? Click Here! We'd love to hear from you :-)
Like These Tips? Get 'Em Free In Your E-mail
