TUTORIAL
FLASH ANIMATION
ON THE CD You’ll find all the files and fonts you need to get started in the Tutorial\Flash file on the cover CD.
TIME LENGTH
3-4 hours INFO Dana Brousseau and Alex Shoukas first 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.
FLASH MX
TYPOGRAPHIC ANIMATION
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 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 sideprogram, FontFlasher, and the development of a fully dynamic and customisable navigation system (with tricks) in Flash.
Ë
58
|
ART100.tutflash 58
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.
August 2004
21/7/04 6:39:01 pm
TUTORIAL
FONT BUILDING
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.
1
Upon export, FontLab will launch and immediately prompt you to save the FontLab (.vfb) file. From here, go to File> GenerateFont. It’s easiest to create a TrueType font, as this will work on both Mac and PC.
4
FLASH DEVELOPMENT The Flash navigation system consists of three main components: NAV This 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. MENU The 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.
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.
2
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 file will open immediately when finished.
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).
FONT FLASHER 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 fine text a much clearer, more legible onscreen appearance. For more details visit http://fontlab.com.
BUTTON Each button contains a text field 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 crosshatched 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 file on the cover disc before you start.
September 2004
ART100.tutflash 59
| 59
21/7/04 6:39:08 pm
TUTORIAL
FLASH ANIMATION BUILDING THE BUTTON
11
8
6
Create a new Symbol with Behaviour set to Movie Clip. Create a text field on the first frame of this Movie Clip. Name this text field “display” and then set your parameters (embedded font, html, selectable etc).
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 7
THE RIGHT CHOICE 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.
Copy that text field and place it on a layer below the original. Make sure that it lines up exactly. Select the new field, and convert it to a Movie Clip. Name this instance of the Movie Clip “textMask”.
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 field within it will contain the same text that appears in the Display text field. This will give you a mask shape that matches the Display text. When the button is clicked, the Display text field will be made invisible so that only a text-shaped mask of the background texture remains.
|
ART100.tutflash 60
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 first 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 identifier name “button” and set it to Export for ActionScript. Now this symbol can be drawn from the Library on demand.
10
60
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 .fla file) to this button.
Create an invisible button that contains only a square on its “hit” frame.
September 2004
21/7/04 6:39:16 pm
TUTORIAL
THE NAVIGATION STRUCTURE
STILL NOT CRISP? If you find 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 file.
14
Load the XML data “content.xml”. An XML object will be created and the information passed to the first menu, “menu0”, which is already in place. Based on this information, the first menu will now populate itself with buttons from the Library (one for each node on the XML tree) and name them accordingly.
17
This entire Movie Clip will now slide horizontally to the left, so that the sub-menu is visible.
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.
NAVIGATION/ MOTION/ANIMATION
19
To 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 shuffles 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.
20
That 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.fla on the cover CD.
NEXT ISSUE
FLASH TOONS Synchronize lip movements to audio.
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 infinitely.
16
The sub-menu will be placed 510px (the maximum width for this layout) to the right of the main menu.
September 2004
ART100.tutflash 61
| 61
21/7/04 6:39:22 pm