A
ART121.tut_3 66 28/2/06 4:17:22 pm
R
T
1
2
1
.
t
u
t
_
3
6
6
2
8
/
2
/
0
6
4
:
1
7
:
2
2
p
m
ILLUSTRATION: twelve:ten
TUTORIAL
|
DREAMWEAVER
MULTIMEDIA PORTFOLIOS
If you re looking to pep up your portfolio with interactive Flash elements, but haven t quite grasped the complexities
of Flash, don t panic, says Chris Schmidt. Dreamweaver s Flash components could be just what you re looking for
Dreamweaver provides the core
ON THE CD
environment around which most web
You ll find all the files you
designers now work. The software has
need to complete this
become the industry standard for defining
tutorial in the folder
site structures, page layouts, CSS files and
marked Tutorial\Portfolio
even database components that enable the
on this month s CD.
author to create impressive dynamic web
TIME NEEDED
content. And with a little help from your
2-3 hours favourite image editor, you have all you
need to create professional web content
INFO
without having to look at a line of HTML.
Chris Schmidt
However, such results, although
has been Open the index.htm file within
impressive, can often result in static, two-
developing 1Dreamweaver and take a moment to
dimensional content because the viewer is
websites since familiarise yourself with the simple page
the first forced to read through page after page of layout. Some sample copy has been included
graphic browsers and has in the main body area and right-hand Adding titles often requires Photoshop to
dry copy with little to interest them. Of
worked as a designer, margin, which you ll replace with the various 3create a graphic, but using the Flash Text
course, this is an issue that affects most
producer and project Flash elements as the site progresses. option you can simply enter your copy, choose
sites, but for the struggling designer keen to
manager for numerous your font and apply it as easily as inserting
make a living from their chosen path,
big-name clients and HTML. Plus, you have the advantage of being
methods of holding their audience s
agencies. He now works as able to define links complete with rollover
attention become even more important.
a freelance writer for the colours and targets.
computer press and
A quick glance through your bookmarks
creates websites for a
will reveal a possible answer  Macromedia
range of exciting clients.
Flash. With Flash .SWF content embedded
Email [e-mail]
into your site you ll be able to add
to find out more.
animation or interactive content to give
your site that little bit extra. But Flash is an
expensive package, which demands a huge
investment in time, and both money and
time are valuable commodities to the
struggling designer.
Macromedia has pre-empted these
problems by including a selection of Flash
components, which can be added to your Embedding Flash .SWF files into a
2page is a simple task if you use the
site quickly and require only a little
Insert>Media option, but have a look below
knowledge of HTML to control and modify
this frequently-used command and you ll Similarly, adding graphical links often
them. Look under Dreamweaver s
find an array of related Flash components 4involves some lengthy work in your
Insert>Media menu and you ll find a
that are waiting to be used within your site. preferred image editor as you define the up,
variety of features, from image viewers to
over and active states of a button. But using
the PDF alternative FlashPaper, which I ll
the Flash Button option you are presented
with a variety of pre-created button styles to
walk you through over the following pages.
choose from before configuring the attributes
and link destinations.
Illustration and tutorial by Chris Schmidt
www.track5.co.uk
April 2006
| 67
A
ART121.tut_3 67 28/2/06 4:17:40 pm
R
T
1
2
1
.
t
u
t
_
3
6
7
2
8
/
2
/
0
6
4
:
1
7
:
4
0
p
m
 TUTORIAL
|
DREAMWEAVER
It s clear what the
8remaining options
control within .SWF.
Background Colour
can be set to match
the colour on the
page, the frame can
be removed, and
setting showControls
to No will result in the
playback controls
being omitted for
seamless integration.
If you hide the Once you ve configured your Image
9controls make 11Viewer component, be sure to test it
sure that you set the through the browser or playback the .SWF
The Flash Text and graphics options save some production time but slideAutoPlay and file using the play options located within the
5won t add a huge amount of sparkle to your page. Start off with the slideLoop attributes Properties panel so you can determine
Image Viewer option. Position the cursor in some free space in the right- to Yes and define a whether further changes are necessary.
hand column and select the Image Viewer option by selecting Insert> suitable slideDelay so
Media>ImageViewerMenu. that your viewers will
then have a reasonable
amount of time to view
each image as it
appears onscreen.
FlashPaper is another useful time-
To turn the Image Viewer into a more 12saver that has found its way into
Start by defining a file name and location in which to save the final 10functional element you may choose to Dreamweaver. Just like an Acrobat PDF, it
6Flash file, click OK and you ll return back to the page layout configure the imageLinks attribute. Using provides a format in which regular
complete with a .SWF placeholder that you can re-size to suit using the this you can set each displayed image to link documents can be converted for web
regular Properties inspector. Ensure you have the Tag Inspector visible through to a location. For example, if you delivery. You will need to have converted the
to access the attributes that control the .SWF. design web pages, you might choose to file into FlashPaper format previously, but
display a thumbnail of a site you ve created one such document you may choose to
with a direct link. include is your CV.
VISUAL APPEAL
The Image Viewer
feature can be used to
drive a slideshow that
links through to related
information, but you
might choose to use this
in a less interactive way 
to add more visual
appeal to a page, for The advantage of using Dreamweaver for
example. This layout 7such an element means you can freely
contains a large, static change the .SWF file s attributes, which are
image, but you could turn controlled by HTML rather than being hard-
this into a larger coded directly into the Flash file. For Remove the sample copy in the body of the page, position the cursor within the table
slideshow to quickly add example, to change the referenced images 13cell and choose the Insert>Media>FlashPaper option. Locate your converted
movement and interest. simply locate the imageURLs field and FlashPaper document and simply enter the suitable dimensions in which to display the file
change the default example locations. before clicking OK.
68 April 2006
|
A
ART121.tut_3 68 28/2/06 4:17:46 pm
R
T
1
2
1
.
t
u
t
_
3
6
8
2
8
/
2
/
0
6
4
:
1
7
:
4
6
p
m
TUTORIAL
|
The final
19 configuration is
fairly similar to the video
dimensions, which can be
automatically assigned
As with the other Flash components you ve created and added to using the Detect Size
14 your page, you have full control over more specific attributes for button. You also have
subsequent editing should you wish to change the dimensions, for automated playback and
example, through the Tag or the Properties panel with the relevant .SWF control options  uncheck
object selected. these if you want your
viewers to prompt the
video playback.
Now OK the
20settings to return
to the page layout and
you ll find all the settings
you ve configured
available through the
Properties panel should
you wish to make
subsequent changes to
any attributes. To test
video playback, preview
the page in the browser.
TIME SAVERS
One of the main
advantages of using the
Flash Buttons is that you
Embedding Flash can make quick changes
Save the file and view it in the browser 17 Video is the final across a site. Here, for
15to make sure all the .SWF components component Dreamweaver example, you replaced
display as you d anticipated. With the core enables you to use. As with the original  rates button
elements in place you may also choose FlashPaper, the assets need to be with  video . But rather
File>SaveAs to create the basic site created first, but once copied over to your than editing each and
structure around which your portfolio might site directory you can make use of the Insert> Now that you ve explored all of the every page, all you
eventually be built. Media>FlashVideo option to prompt the 21Flash elements available from within needed to do was select
configuration dialog. Dreamweaver, you can now continue to one of the embedded
create your site using familiar methods for  rates buttons and edit
including regular content. You may want to its text to amend all such
contain all the created .SWF files centrally, graphics across the site.
but use Dreamweaver to move such files
and retain their
relationship with the
pages you have created.
Your completed
22page will now
benefit from a broad
range of Flash content
that not only adds interest
but also enhances the
Create one such page and save it as appearance of your site.
16video.htm. Change the page title Choose between a progressive or Flash Video and the
simply by selecting the .SWF and editing it. 18streaming download depending on the Image Viewer make the
Then, remove the FlashPaper and Image size of your file and your server s capabilities site more engaging while
Viewer components and bring back some and complete the URL field to point to the Flash Text, Buttons and
sample copy into the main body. In just a few .FLV file in absolute or relative terms. You FlashPaper provide
moments you will have created a brand new also have a choice of skins for the playback efficient methods of
page ready for new content. controls that will be available with your video. embedding content.
April 2006
| 69
A
ART121.tut_3 69 28/2/06 4:17:53 pm
R
T
1
2
1
.
t
u
t
_
3
6
9
2
8
/
2
/
0
6
4
:
1
7
:
5
3
p
m