Document

ON THE CD

You’ll fi nd all the fi les and fonts you need to get started in the Tutorial\Flash fi le on the cover CD.

TUTORIAL

FLASH ANIMATION

Ë The Planet of the Drums tour brings some of the loudest, most intense

electronic music to over 25 North American cities. Coupled with imagery of damaged/destroyed audio devices, it is important that the Website’s typography and navigation brings forth the same loudness to engage users into the experience. The solution? FontLab’s side-program, FontFlasher, and the development of a fully dynamic and customisable navigation system (with tricks) in Flash.

This tutorial will show you how, using typographic animations in Flash, we came up with the effects you see on the Website.

The navigation works in an iPod-esque fashion, scrolling to the right to take you further into the site, and to the left to bring you back. To maintain the distortion, we gave the motion a random quality, moving at different increments at a time.

In order to better distinguish the white type from the underlying white image, we tried to almost separate the two with

resolutions. As a result, the 85pt Helvetica Bold looks as though it could be 8-bit.

The navigation buttons were also designed to have various states, which included the up (standard white), inactive (hashed white, for forthcoming sections), mouse over (solid green) and visited (hashed green) states. We’ll show you exactly how these elements were produced both in FontFlasher and Flash, and leave you with a very powerful resource for future development.

TIME LENGTH

3-4 hours

TYPOGRAPHIC ANIMATION

FLASH MX

From basic font construction to button states, animation and alignment with an XML-driven navigation structure, we take a look at the back-end architecture behind the impressive planetofthedrums.com

Dana Brousseau and Alex Shoukas fi rst met while working at Blast Radius Toronto. Their continued relationship has brought them together on projects that explore the possibilities of modern typography and the systematic use of Flash. For more information visit www.d-realm.net.

INFO

58 | August 2004

ART100.tutflash 58ART100.tutflash 58 21/7/04 6:39:01 pm21/7/04 6:39:01 pm

September 2004 | 59

TUTORIAL

1 In FontFlasher, select an installed typeface and the point size you would like

to Rasterize. The right-hand preview pane will now show you an aliased preview of your selection.

2 Select the Flash Point size. This is the root formation of the pixels and the point

size you will need in Flash for your font to remain as crisp as possible. It’s best to keep this point size similar to the origin point size in the event of a font substitution.

FontFlasher is a utility/side application to FontLab that converts almost any format font into a “pixel” TrueType font (which turns on only selected pixels). This gives fi ne text a much clearer, more legible onscreen appearance. For more details visit http://fontlab.com.

3 By overlapping pixels you will make your typeface less complex and maintain a

smaller-size font, though you should expect a much longer rendering process (especially when drawing larger point sizes). Check off Open Font in FontLab so that your resource fi le will open immediately when fi nished.

4 Upon export, FontLab will launch and immediately prompt you to save the

FontLab (.vfb) fi le. From here, go to File> GenerateFont. It’s easiest to create a TrueType font, as this will work on both Mac and PC.

5 Install the font into your system and move it into Flash. For the chunky/8-bit effect,

simply scale up your new font to a larger point size (preferably in multiples of the Flash Point size, to maintain crispness).

The Flash navigation system consists of three main components:

NAVThis is the main navigation structure. It loads and stores all the XML data and creates sub-menus as necessary. It slides left and right to display the currently selected menu.

MENUThe menu structure populates itself with buttons from the Library according to the XML data it receives from the NAV. This Movie Clip is then duplicated to create sub-menus.

BUTTONEach button contains a text fi eld to display its title, a “textMask” Movie Clip to create a mask in the shape of the title, and an image called Screen that is used to create the cross-hatched effect. The button has an Off, Over, and Clicked state, which is controlled by actionScript.

This system is mainly code based. The button is the only item that needs to be designed. To give this information some context visit www.planetofthedrums.com, or take a look at the POTD_tutorial.swf fi le on the cover disc before you start.

FLASH DEVELOPMENT

FONT BUILDING

FONTFLASHER

ART100.tutflash 59ART100.tutflash 59 21/7/04 6:39:08 pm21/7/04 6:39:08 pm

60 | September 2004

FLASH ANIMATION

TUTORIAL

When deciding on the point size at which you’d like to Rasterize your font, it’s usually best to have a pixel formation that closely represents the real font. We use the characters A, E and S as a gauge, since they are usually the more distinctive letterforms.

7 Copy that text fi eld and place it on a layer below the original. Make sure that it lines

up exactly. Select the new fi eld, and convert it to a Movie Clip. Name this instance of the Movie Clip “textMask”.

8 Import or create a graphic for your background texture. In the case of the

POTD site, we used a .png image of diagonal pixel lines – transparent so that the background of the site is visible through the texture. Convert your graphic to a Movie Clip and name the instance “screen”.

9 Place the “screen” Movie Clip on a layer under “textMask” and set the “textMask”

layer to mask the “screen” layer. These two Movie Clips will create the Clicked button. The “textMask” symbol will not be visible, but the text fi eld within it will contain the same text that appears in the Display text fi eld. This will give you a mask shape that matches the Display text. When the button is clicked, the Display text fi eld will be made invisible so that only a text-shaped mask of the background texture remains.

10 Create an invisible button that contains only a square on its “hit” frame.

11 Place this on a layer above the text mask. Adjust its size so that it covers

the area you want to be clickable. Opt for an actual button rather than an onPress function to keep the hit area localised to the x-height of the font rather than the bounds of the Movie Clip. Add the mouseOver/mouseOut actions (found in the .fl a fi le) to this button.

12 This button is designed to “know” whether it has been previously clicked.

When a user clicks on a button, a unique variable based on the Display text is set at the _root level of the Movie. When a button appears on the stage, its fi rst action is to check whether it has been clicked before. If so, it sets itself to its Clicked state.

13 In the Library, right-click on the Button symbol and select Linkage. Give it the

identifi er name “button” and set it to Export for ActionScript. Now this symbol can be drawn from the Library on demand.

THE RIGHTCHOICE

6 Create a new Symbol with Behaviour set to Movie Clip. Create a text fi eld on the

fi rst frame of this Movie Clip. Name this text fi eld “display” and then set your parameters (embedded font, html, selectable etc).

BUILDING THE BUTTON

ART100.tutflash 60ART100.tutflash 60 21/7/04 6:39:16 pm21/7/04 6:39:16 pm

TUTORIAL

14 Load the XML data “content.xml”. An XML object will be created and the

information passed to the fi rst menu, “menu0”, which is already in place. Based on this information, the fi rst menu will now populate itself with buttons from the Library (one for each node on the XML tree) and name them accordingly.

15 When a button is clicked, it will check to see if its XML node has any

childNodes. If so, it will create a sub-menu (by duplicating “menu0”) and pass its childNode data to the sub-menu.

16 The sub-menu will be placed 510px (the maximum width for this layout)

to the right of the main menu.

17 This entire Movie Clip will now slide horizontally to the left, so that the

sub-menu is visible.

STILL NOTCRISP?

If you fi nd that your font isn’t exporting as crisply as it should be, set your Flash document to a lower quality setting. But be careful as this may jeopardise any curved vector illustrations in your fi le.

THE NAVIGATION STRUCTURE NAVIGATION/ MOTION/ANIMATION

19To match the lo-tech aesthetic of the site, we wanted the navigation to move

in a rough, erratic fashion. Rather than sliding across the screen smoothly, the navigation shuffl es across in random increments. To do this, give the navigation a destination position, pick a number between one and 100, and then move the navigation towards its destination by that number of pixels.

20That covers the visual and conceptual side of the navigation system. For all

the code, and a more detailed overview of the functions, check out POTD_tutorial.fl a on the cover CD.

18 When the Back button (on the main stage) is pressed, this Movie Clip will

slide to the right so that the main menu is visible. Any sub-menus are then removed. You can make your XML structure as deep as you like – the menus will duplicate infi nitely.

FLASH TOONSSynchronize lip movements to audio.

NEXT ISSUE

September 2004 | 61

ART100.tutflash 61ART100.tutflash 61 21/7/04 6:39:22 pm21/7/04 6:39:22 pm