building flash templates

Adding Components to Flash

Adding components to your Flash Project

The sample provided on the first page makes use of several pre-built components. Programmers built flash objects to be easily used by dragging and dropping the item from your components window onto the stage. Components make doing certain things in Flash quite easy that would otherwise require lots of coding and design work.

Soundslides

Soundslides is a great program for building quick and easy slideshows. Its publishing options seem limited because the program creates a folder of files that don't appear to be easily customizable. But Soundslides provides a Flash component for including Soundslides projects right in your Flash project.

You can download the Soundslides component here (requires Flash MX, 8 or CS3 but only with ActionScript 2.0)
http://store.soundslides.com/apps/downloads/component/

Mirror (version 673, rel. Jan 07): http://multimedia.journalism.berkeley.edu/media/upload/tutorials/soundslides/soundslides.mxp.zip

When you install the component, notice a new addition to the components window when you restart Flash:

Component Window with SoundSlides component

This component is added to your project by simply dragging it to the stage. Make sure the red playhead of your timeline is at the location where you want to put the component!

Once you place the component on the stage, you can change the properties of the component by selecting the Window menu, and open the Component Inspector window pane. Clicking on the component will open up a set of properties for that component.

SoundSlides component properties

Notice in this example, we have set the size parameter to custom. This allows us to resize the Soundslides component; however, it requires that your Soundslides project be built with a custom size setting. You also have the ability to change a lot of different parameters, i.e. colors, showing or hiding the header and footer, and fonts.

Use the Free Transform Tool to change the size of the component on the stage.

Free transformt tool in Flash

When you do, the component will display a series of dimensions. You should write these dimensions down, and go back to Soundslides and set the output size to match. Ideally, you would have created a placeholder for your Soundslides project before starting on the actual slideshow, but reality dictates that this isn't always the case.

To connect your slideshow to the component, you must first take the publish_to_web folder from your Soundslides project and place it in the same location as your .FLA flash project. See the tutorial on Soundslides for more information on the publish_to_web folder. You can rename this folder if you wish.

If you are using the tutorial materials downloaded from this site, the publish_to_web folder has already been stored in the same location as your .fla - but has been renamed to just soundslides. Type this name in the project folder field of the Component Inspector.

Component inspector connecting to Soundslides project

gMaps Google Map Component 

The company AFComponents.com provides a free Google Maps mashup component for Flash.

You can download the component here: http://afcomponents.com/components/g_map/
(Note: You must register with their site. This is the ActionScript 2.0 version. They have an AS3 version as well)

Google Map component from AFComponents

The GMap component is a little more complicated because it requires some basic ActionScript. The full API documentation can be found here: http://afcomponents.com/components/g_map/docs/

In the example seen the first page of this tutorial we gave our component the instance name "gMap" and added the following code to our Actions layer:

gMap.setMapType("hybrid");
gMap.setCenter({lat:13.410994034321702, lng:23.994140625},4);
gMap.addControl(gMap.GTypeControl());
gMap.addControl(gMap.GZoomControl());
gMap.addControl(gMap.GPositionControl());

This code will set the map type to hybrid (Google maps has three map views: map, satellite and hybrid). Then it centers the map to a given latitude and longitude -- in this example, the coordinates for Darfur in Sudan. The last three lines of code add zoom controls to the map.

In order for the ActionScript to work, it must be in the same timeframe as the component it's referencing. This means you must add a keyframe on the Actions layer just above the area where the map is located.

ActionScript on frame that has map