70 Tutorial Animate your portfolio

CAP98.tut_flash 70 8/5/07 17:39:24

 Tutorial
A Flash portfolio with image
galleries and an animation
sequence will show off your
skills and your professionalism
n online portfolio is an essential tool
A
for anyone in the creative industries,
and it’s likely to be what you’re judged
by whether your job has anything to
do with designing websites or not. It’s important,
therefore, to create a web presence which both
displays your work well and has a strong,
professional-looking interface. It’s also true that
creative work is constantly evolving, so you won’t
want to create a portfolio which is so complex in its
implementation that you can’t easily update it.
Here, we’re going to create a basic Flash website
with a few pages and a simple set of buttons to bring
up four different galleries showcasing different
types of illustration work. We use a simple
graphical design made up of solid flat shapes
in muted colours so that the artwork itself
really stands out. We then do a little
CAP98.tut_flash 71
[illustration] GRDD, www.grdd.co.uk
ActionScript programming to create a set of galleries
which load in images from a folder elsewhere on the
website. By doing this rather than embedding the
gallery images in the Flash file, we’ll be able to update
our gallery at a later date simply by uploading new
pictures and naming them 1.jpg, 2.jpg, 3.jpg, and so
on. This will be a lot easier than having to re-write the
entire site every time we want to include a new image.
Finally, we show you how to have some fun with
animation – again using ActionScript – by creating a
scrolling landscape in which creatures run by. This is
used to decorate the front page and give the
otherwise rather sober introductory page of the
website a little personality. By creating our animation
entirely in ActionScript, we can control the
movements of objects much more finely. We can even
introduce randomness to them, something which is
impossible when animating on the timeline.
Expertise provided by Christian Darkin. The finished
website created in this tutorial is Darkin’s own online
portfolio and can be viewed at: www.darkin.demon.co.uk.
If you want to take a closer look at any of the
screenshots over the following pages, you’ll find them
in the DiscContent\Tutorial\Tutorial Files\Flash
portfolio folder on CD98.
8/5/07 17:40:01
 Part 1: The basic Flash site
It’s easy to put together a simple website in Flash with buttons linked to different pages…

Use Photoshop
For this tutorial,
we’ve created all
our text in
Photoshop and
exported it. Regular
Flash users would
probably prefer to
write and lay out
their text in Flash.
However, if
Photoshop is the
tool you use most of
the time, you’ll
probably be more
comfortable making
all the typographic
decisions there.

In Photoshop, create a document with the dimensions of your website – we’re On separate layers, create the text for the site. By putting the text for each
1 2
using 800x600. The backdrop is clean and the colours neutral, which will allow individual page on a separate layer, you’ll be able to identify and place it later
the images to do all the talking. This will be the backdrop to the whole site. on. A more sophisticated site might include multiple pages of text and images.

ActionScript
ActionScript 2.0
isn’t the newest
version of
ActionScript, but
you can create it in
older versions of
Flash and it offers
several simplified
tools for adding
interactive elements
such as buttons. It’s
a language that is
ideal if you’re not an
expert in object-
orientated
programming.

Buttons are designed separately. Here each button has three layers: one for its Create a new Flash document (using ActionScript 2.0) and use Modify>
3 4
unselected state, one for its mouse-over state and one for its selected state. Document to give it a frame rate of 25 and the same dimensions as the image
Again, we’re keeping things simple and clean by using the same text in three muted you’ve designed in Photoshop. Import your image files to the Library and drag the
colours. All layers need to be saved separately as JPG or PNG files. backdrop onto the stage. If the Library’s not visible, select it from the Windows menu.

Create a new layer in the Flash timeline at the top of the Double-click on the first button and a timeline will open Double-click anywhere on the stage to close your
5 6 7
screen, and with it selected, drag the ‘unselected’ image for it. It has four frames, each representing a button state. button’s timeline and return to your main movie. Once
for each button onto the stage and into place. Then Right-click Select each frame and choose Insert>Timeline>Keyframe (or you’ve done this with all the buttons, you can check out your
or Ctrl-click on each and select Convert To Symbol to turn hit F6), then delete the graphic from the stage, and drag into movie by selecting Control>Test movie. The buttons should
each graphic into a button. its place the appropriate button state from the Library. change when you move the cursor over them or click them.

72 Tutorial Animate your portfolio

CAP98.tut_flash 72 8/5/07 17:40:39

 These buttons
8
look great,
but don’t do
anything. You can
activate them by
selecting a button
then, in the
Behaviours panel
on the right-hand
side, click the +
button and add a
‘Movieclip/Goto
And Stop At Frame’
behaviour. Select
an Absolute value
and choose frame
10. When you click Frame 10 is empty, so select it in each layer, Create frames for all your other buttons and,
9 10
the button, the and hit F6 to add a keyframe. Create a new finally, create another layer. With this selected,
movie will skip to layer and, on frame 10, drag the text or graphics type stop(); in the Actions-Frame panel. You now
frame 10. you’d like linked to your button. have a fully working Flash website.

Part 2: Build the gallery

Bringing in gallery images from outside allows for a more manageable production…

Just as before, we design the main elements of the gallery Measure the space into which the gallery images need to Back in Flash, import the background along with a solid
1 2 3
in Photoshop. Simple shapes and buttons are the key, but fit, and save them out from Photoshop at exactly those black JPG as a placeholder for the first image. This allows
this time we only need two buttons: one to progress the dimensions (this means placing borders around some images). you to place everything on the stage and you won’t need to
images to the left and one to the right. We keep to the muted Name them sequentially: 0.jpg, 1.jpg, etc. Our site has several worry about setting the positions of objects in ActionScript.
colour scheme of the rest of the site. galleries, so we name the second batch 0a.jpg, 1a.jpg, etc. Place your gallery graphics on a new layer on frame 10.

Create a new layer and call it ‘actionscript’, giving it a Image path

5
keyframe on frame 10. Then open the Actions panel just
If you want to place your images in a different
To script the behaviours of on-screen objects, you need to give them instance under the Stage and add the code shown in the screenshot
4 folder to the one containing your Flash movie,
names. Right-click/Ctrl-click on the two new buttons and change them to above. This simply declares two variables – NumberOfImages you’ll have to include the path in the code.
button symbols then, in the Properties panel, type Previous and Next into their (the total images in the gallery) and Mypic (the current image For example: loadMovie(“Imagesfolder/
instance names. Turn the blank image into a Movie symbol, and call it MyImage. number) – and loads the first image from disk into the ”+Mypic+".jpg", _root.MyImage);
As in Step 6 on the opposite page, set up rollover and select states for the buttons. MyImage icon on the stage.

Tutorial Animate your portfolio 73

CAP98.tut_flash 73 8/5/07 17:40:46

 Build the gallery continued…
Add a check
7
to ensure the
gallery never runs
out of images. The
ActionScript states
that if the Next
button is clicked
and the variable
NumberOfImages
is exceeded, Mypic
is returned to 0 –
loading the first
image again. If the
Previous button is
clicked and Mypic
goes below zero,
Now you need to add the script for the buttons. This simply tells Flash to the last image in
6
advance the variable MyPic when the Next button is released and reduce it the sequence is
when the Previous Button is released. The picture is then loaded into the frame. then loaded.

Creating the next gallery is simple. Go to the keyframe you’ve created for the next gallery button,
8
create a new keyframe in the ActionScript layer, and change every instance of loadMovie(Mypic+".
jpg", _root.MyImage); to loadMovie(Mypic+"a.jpg", _root.MyImage). This loads 1a.jpg instead of 1.jpg.
You should now have a fully working set of galleries. The great advantage of
9
loading images from disk rather than embedding them in your Flash production
is that you can update your gallery instantly just by uploading new images and
changing the NumberofImages variable. You don’t need to re-write your entire site.

Part 3: Create an animation

Produce a simple random animation to decorate the front page…

On each layer, add an offset filter, using Filter>Other>

2
Offset. Give it a horizontal value of about 400. This
Now you need to create a scene to run along the bottom allows you to see how the end of the image joins with the You can add interest by creating some creatures to
1 3
of the site, so use Photoshop to create a landscape of beginning, and you can blend them together creating a wander through your virtual landscape at random. These
some sort. We use two layers: a foreground layer containing seamless loop. That way, the landscape can scroll indefinitely. need to be created as flat PNG images so they’re in tune with
silhouettes of trees, and a background layer of mountains. The layers are saved separately as transparent PNG files. your graphical design and don’t take up too much bandwidth.

74 Tutorial Animate your portfolio

CAP98.tut_flash 74 8/5/07 17:41:00

 Capital letters
The use of upper
and lower case
letters is important.
When it comes to
your variable names
and its commands
and objects, Flash is
case sensitive. Not
having capitals in
the right place can
prevent your
animation from
working, and it’s
very hard to spot.

Import your graphics into Flash and,
4 5
on yet another new layer, place two
copies of your landscape graphic. Position
them so that the left-hand side of the first
is against the right-hand side of the
second, and change them into movie
symbols, giving them instance names.
We name ours Mounts1 and Mounts2.
The above lines of code – placed in the frame actions on
the landscape layer – tell Flash to move the x position of
the mountains by 0.5 pixels every time the frame is played
(25 times per second, if you’ve set it up as we did in Part 1,
Step 4). Each time one of the mountains graphics exits stage-
left (when it’s got an x position of less than -800) move it to
the right of the screen, where it appears exactly at the end of
the other mountain range creating a seamless loop.
Place the trees in exactly the same way. The only
6
difference is that they need to move slightly faster in
order to create a 3D parallax effect. Instead of making them
move 0.5 of a pixel at a time, they need to move 1 pixel on
every frame. When you run the animation, you should have
an infinite scrolling landscape along the bottom of the site.

You can get the dinosaur to move across the screen by

Now bring in one of your flat PNG images and place it at
7
the correct vertical position, but just off the left-hand side
of the stage. Turn it into a movie symbol and give it an
instance name – in this case, we call it dino1.
8
using the code above. This simply moves it five pixels
every frame making it shoot across the screen. The line
dino1._x =1200+(Math.random()*7000); is triggered
whenever the graphic is off screen to the left, placing it at a
random point off stage right. That way, it’ll take a random
amount of time to re-appear.
We can easily duplicate our dinosaur by dragging in some
9
more graphics, turning them into movies, naming them,
and giving them equivalent code to move and place them. You
may want to place your graphics in front of, or behind, each
other. Do this by Right-clicking/Ctrl-clicking them on the stage
and selecting the Arrange>Bring Forward or Send Back options.

Our final
10
creature
animation is going
to be a little more
sophisticated. Here
we’ve created a
series of eight
frames which
describe a single
pace for our
creature. As flat,
single-colour
graphics they take
up very little
bandwidth when
saved as PNG
files and imported
into Flash.

In Flash, we take the first graphic and create an animation exactly as before,
11
with the creature starting off to the left of the screen, and the ActionScript
dictating its placement and movement across the landscape.

Tutorial Animate your portfolio 75

CAP98.tut_flash 75 8/5/07 17:41:07

 Part 4: Finishing touches
Complete your animation and bring all the elements of your portfolio together…

Nesting movies
This idea of nesting
movies inside
other movies is very
powerful. It means
you can put
together complex
animations, and
have events trigger
other events
without making
your main timeline
needlessly
complicated. It’s
even possible to
have movies
communicate with
each other.

Double-click the graphic to open up the movie timeline for your symbol. Right Do the same for the rest of the frames in the animation loop. In this case,
1 2
now, there’s only one keyframe, so click on the second frame and choose we’ve got a fairly straightforward eight-frame looping animation of the creature
Insert>Timeline>Keyframe, then Right-click or Ctrl-click on the graphic and select walking. However, using this method, you could have frames repeat, add extra
Swap Bitmap, choosing the second frame in the creature’s animation. layers or alter the graphic in any other way.

Now the creature will be animated as it walks across the screen. It will play at As a final touch, you’ll want viewers of your website to be able to contact you if they like what they
3 4
the same frame rate as the movie itself – 25fps. If that’s too fast, you’ll need to see. Create a set of contact button states (we’ve only used two – an unselected and a rollover state)
extend the animation (maybe swapping the graphic every two or three frames). and import them. You can now drag the button into place and set up its states as shown in earlier steps.

In the Behaviours palette, click + and choose Web>Go To Check in the File>Publish Settings dialog that Flash and You could also add progress bars to let visitors with slow
5 6 7
Webpage. Then in the dialog type mailto: followed by HTML are selected (so that Flash will generate an HTML connections know that there’s something going on while
your email address. Just like with any HTML site, the mailto page for your movie), then go to File>Publish. You can then pictures and movies load. We also recommend creating high
command opens an email in the user’s chosen email package upload the SWF file, the gallery images and the HTML file visibility, accessible features and testing your site on a range of
and puts your address in the header. (renamed Index.html if it’s your front page) to your website host. monitors, screen resolutions and devices. ca p

76 Tutorial Animate your portfolio

CAP98.tut_flash 76 8/5/07 17:41:24