Flash Templates

Tutorial: Flash Templates

Introduction

One of the roadblocks to doing Web-centric, or multimedia, reporting is assembling the content into a well-designed story shell. Most reporters aren’t designers, and there’s not enough time in the day for a news organization’s graphic designers to design every daily or short feature multimedia story. Because of this, news organizations haven’t institutionalized Web-centric stories — they’ve relegated them to special projects and defaulted to using slide shows or videos for daily or short features, which aren’t always the best ways to tell a story.

The reporters at the Ventura County Star faced this issue in 2006, when that organization decided to begin making the transition to a Web-centric newsroom and train all of its reporters and editors (who wanted to) how to do Web-centric stories. For the first four months, they used a very loose template developed by Jane Stevens and Valerie Krist, a graphic designer who teaches at UC Berkeley’s Graduate School of Journalism. The reporters were free to play around with the template.

Then the reporters and Stevens sat down and storyboarded six different templates that could accommodate 70 to 80 percent of the breaking news, daily and feature stories they were doing. Val Krist turned the scribbled storyboards into beautiful templates. Jeremy Rue simplified the back-end and wrote up tutorials for their use.

And here they are: “open-source” Flash templates in which you can easily swap out images, videos and audio. We encourage you to download these templates. They’re FREE to use. Graphic designers can add a news organization’s logo, and begin modifying the templates for a news organization’s “look” while maintaining their basic structure and function developed by the reporters. (Flash 8 or CS authoring program is required to edit these templates.)

We’re teaching participants in our multimedia reporting workshops how to use these templates. They’re amazed at how easy it is to do Web-centric stories, and at the versatility of the templates. They’re taking templates home with them to use and to adapt in their news organizations.

(Template previews have been reduced slightly for viewing on this page. Not actual size)

Four section War Template

This template has four sections and a home section that can be viewed by clicking on the top banner of any inside page. It is very image heavy, and would work great with stories that contain lots of visuals. The inside sections can be replaced with FLV videos (Flash videos) or SoundSlides projects. Download the .fla for this template right here.

Four sections text button template

This a new template created by a group of first year student at the UC Berkeley Journalism School. We received some requests about offering a template that doesn’t use photos as buttons. This should be a very simple template to update. Only the main background image has to be swapped out, and the text can be changed on each page. The button text can also be changed by double-clicking each button symbol and modifying both the up and over states.

Five stories with three inside sections template (NEW!)

We have added a new template in response to demand for a template that accomodates a page with “inside” sections. This is great if you have two prominent stories with their own section (text or media) and need an inside section with three stories of their own. Click the title to get back to the main page. (NOTE: The preview above has been shrunk to fit this tutorial) Download the .fla for this template right here.

Three section bottom navigation template

This template has three sections and a home button, which can be used to access the opening page. This template requires one main image on the front, and images for each of the buttons. The inside stories can be FLV video (flash video) or SoundSlides projects. Download the .fla for this template right here.

Three predominant sections template

This template has three sections which are largely featured on the home section. It is primarily designed for features on three individuals, but can be modified to accomodate a number of story types. The three front images should be vertical and consistent. The inside stories can be FLV video (flash video) or SoundSlides projects. Download the .fla for this template right here.

Word On The Street, Profiles Template (NEW!)

This is a new template added by popular demand. We had several requests from people wanting a template that can play audio when you click over a person’s face. This makes for great features when doing “Word On The Street” type profiles.

The setup is pretty easy. Open the .fla in Flash. In the library, you will see all of the mugshots. You can swap them out with your own pictures, just make sure to size them 60 pixels by 60 pixels. To swap them out, double-click on each of the mug shots in the library and click import on the window that comes up to swap them out for your own. If you are using fewer mugshots, just delete the ones you don’t want from the stage.

Next, edit the ActionScript by clicking on the top layer in your timeline and pulling up the actions window (it’s under the window menu at the top of the screen. The only part of the script you will need to change is at the very end. This is where you specify the audio files.

(Special thanks to students from the 2008 UC Berkeley Graduate School of Journalism Advanced Multimedia class for producing this original project.)

Swapping Flash template images

The war template is probably the most difficult template to change. However, the steps involved to customize the war template cover just about everything you would need to know to change any of the three templates we have provided, so this tutorial will show instructions on how to change the war template.

Preparing all images and content for this template

To use this template exactly how it is currently displayed, but with different images, you have to first prepare ALL your own content to replace the media that is in this template. Flash cannot not resize images efficiently (resizing bitmaps introduces blur and pixelation), so it is important that you prepare all of your images and size them exactly to the specifications below using a program such as photoshop.

The war template contains: (all measurements are Width x Height and are in pixels)

Four front vertical navigational images that are 107 x 193

Four inside square navigational images that are 107 x 107

One background image for the opening of the project that is 900 x 550

Three inside “mini-slideshow” images that are about 240 x 180 (each one is different)

The four front navigational buttons are 107×193. You will have to FIRST resize your own images to this size before swapping them out on this template.

The four inside navigational buttons are all 107 x 107. The border is done in Flash, so you don’t have to add that to your images in photoshop.

The three photo slideshow has three photos that all vary in size. Many times people elect to remove the slideshow altogther (which is really easy to do). Just delete the layer that the slideshow is on, and it will remove it from all sections of your project. If you wish to use the slideshow with your own photos, here are the exact dimensions of these three photos:

Slideshow-top: 230 x 161

Slideshow-middle: 207×163

Slideshow-bottom: 246×133

Swapping out all of the images in this template with your own

Flash makes it incredibly easy to swap out images. The only caveat is that the image you are replacing it with must be the same exact size. After opening the war template in Flash, take a look at the “library” panel. (if the library panel is not visible, you can open it using the Window menu at the top of the screen and selecting Library.)

Inside the library, you will see all of the media that comprises this project. Swapping out media is simply a double-click away.

This process is easiest when you organize the media by type. You can do this by clicking on the “type” heading. These are all of the images and symbols that exist in the war template. Remember, symbols are simply containers. So if you change an image (bitmap), every instance of that image (even the ones inside the symbols) get swapped out as well.

There are 12 photographic images that are a part of this project. Here they are listed:

bgphoto.jpg – The background image for the opening section of the project (size 900 x 550)

slideshow-bottom (middle, top) – The three mini-slideshow photos that play when navigating inside a project (240 x 180)

To swap out an image, double-click on the tree icon of that image in the library. A menu will come up explaining the properties of that image. Click on “import” to import a new photo in its place.

After clicking import, a browser menu will allow you to navigate to the new image that will replace this one. Click the “update” button then click OK. Your image will have replace every instance of the previous image in the entire project.

Editing Text in Flash Templates

After opening the war template in Flash, take a look at the structure of the timeline. It is structured in a non-linear fashion with four story sections and the “front” section which is the front page. You can tell which section is which by looking at the “labels” layer which has identifiers of each section.

When you move your red playhead across these sections you will notice that the content on the stage changes below, along with the text depending on which section you’re in. It is important to be aware of which section you are in, and which keyframe (black dot) you are working on. Remember, the stage and timeline are linked. Anything you do on the stage will affect the layer and keyframe that happens to be currently selected in the timeline.

To edit the opening title, move the red playhead to the “opening” section of the timeline. On the stage, you should see the opening page with the title text.

Editing the text is rather easy, simply double-click on the text box and your cursor will automatically change to the text tool. Repeat this process for the byline.

Editing the inside titles

Editing the titles inside the project (on story1, story2, story3…) is a little bit more difficult because the text box is inside a symbol. Remember, symbols are like containers. When you double-click a symbol, you go into symbol editing mode.

Move your timeline over “story1” (or any of the stories). The stage will change to reflect the content on those sections. Here you will notice that the inside title had a greenish box over it. That is an invisible button — a “hit area” so that when users click on it, they are taken back to the home page.

Double click on this green area (using the black arrow tool, not the text tool. You may have to change your cursor) and you will be taken into symbol editing mode. You know you’re in this mode because the timeline changes, and at the top of your flash screen, there is a bread-crumb navigation that tells you which symbol you’re editing. (Notice “Headline” at the top)

At this point, all you need to do is double-click on each of the three text boxes on the stage and edit them. Remember to change your cursor back to the black arrow tool by clicking on the black cursor in order to select something on the stage, otherwise it will draw another text box.

To go back to main timeline, click on “scene1” at the very top of the screen.

Editing story text in templates

Editing the story text in the war template is pretty straight forward. The most important part to know is where you are in respect to the timeline. Where the red playhead on the timeline is located will determine which section you are editing. Remember, the timeline and stage are linked.

Scroll the red play head over “story1.” You will notice that the content changes on the stage. Look for the text box. You should be able to simply double-click on the text box and edit the text. Repeat for each section.

About this Tutorial

This tutorial was written by Jeremy Rue but comes courtesy of Jane Stevens and the Ventura Country Star.

Republishing Policy

This content may not be republished in print or digital form without express written permission from Berkeley Advanced Media Institute. Please see our Content Redistribution Policy at multimedia.journalism.berkeley.edu/content_redistribution/.