Digital Media Center
Office of Information Technology

DMC Home : Use Development Aids :

Timeline

We worked with Barbara Martinson, an associate professor in the Department of Design, Housing, and Apparel, to create a Design History Timeline learning object with Macromedia Flash MXÆ. An example of the timeline and instructions about how to customize it for your own use are below. For more information about how Martinson used the object in her class, see the Design History Timeline page in the Exemplary Projects section.

Example

To navigate the timeline, follow these steps:

  1. Select a time period from the scrolling menu at the bottom of the timeline screen.
  2. A red box will appear behind the years you selected and those years will appear in the box above the scrolling menu. Any student analyses of letterform, imagery, design, or technological advances occurring during that time period will be represented by one of four icons.
  3. Place your cursor over an icon. The title of the analyses and object/event indentification information will appear in a small box.
  4. Select an icon. The analyses will load in a new window.

Customization Instructions

To customize our Macromedia Flash MXÆ timeline for your own use, follow the steps below. If you are not yet familiar with the Macromedia Flash MXÆ interface, open Macromedia Flash MXÆ and select How Do I... from the Help menu. Include our copyright statement (will open in a new window) with the timeline if you distribute the original or customized file and on any materials you create with the tool. Please note: these files are provided as is. We do not have the resources to provide customization support.

1. Download Files

Download the timeline.zip file. A zipped file should appear on your desktop. Unzip it (if necessary) and the following folders and files should appear:

  • images,
  • pages,
  • timeline.fla, and
  • timeline.xml.

2. Open and Copy the Files

If you want to modify the time periods, swap images, or add icons, you will need to modify the timeline.fla file included with the zipped file you downloaded. If you want to change or add icon labels or analyses, you will need to modify the timeline.xml file. We recommend you first copy and rename the files and modify the copies so you can refer to the original files if you have problems with the customization. Follow the steps below.

  1. Open one of the following:
    • Flash MX (if you want to modify the timeline.fla file; please note that the file cannot be opened by earlier versions of Flash), or
    • a Web or text editor such as Macromedia Dreamweaver (if you want to modify the timeline.xml file).
  2. From the File menu, select Open.
  3. Find and select the timeline.fla or timeline.xml file.
  4. From the File menu, select Save As.
  5. Enter a new name in the Name box. For best results, use only lowercase letters and numbers and no spaces or special characters in the file names of the copies. You will be less likely to experience problems uploading your files to a Web server if you use Web-friendly naming conventions.
  6. If you choose to change the name of timeline.xml, open the timeline.fla file, select the first frame on the scripts layer, and view the Actions window. Scroll to the bottom of the window and locate this line: timeline.load("timeline.xml"). Change "timeline.xml" to the file name you are using for your XML file.
  7. Select Save.

3. Modify Time Periods

If you wish to change the time periods and/or their titles, follow these steps.

  1. In Flash MX, open the copy you made of the timeline.fla file that was included in the zipped file you downloaded.
  2. From the Window menu, select Development Panels and then Actions.
  3. In the left-hand menu, select the scripts : Frame 1 icon.
  4. In the right-hand text box, change or add to the dates in the parentheses after "datesArray = new Array," and change or add to the era titles in the parentheses after "erasArray = new Array."
    • To insert special characters (such as foreign language characters), first type these into Microsoft Word or another program in which you can enter symbols, then copy and paste the word the text above.
    • Type BCE dates as negative numbers, and CE dates as positive numbers. The word "Present" may be used to refer to the current year, and will automatically update to reflect the current date. No other words or phrases should be used.

4. Swap Images

If you want to change the title of the timeline or add to the icons used to represent the analyses, follow these steps.

  1. Prepare the images you want to use in an image editing program such as Adobe Photoshop. For best results, the images should be:
    • in GIF (if line art) or JPEG (if photographic) format;
    • exactly 25 x 25 pixels (if icon images) or approximately 600 x 100 pixels (if the title graphic); and
    • saved in the same folder as the files in step 2.
  2. In Macromedia Flash MXÆ, open the copy you made of the timeline.fla file that was included in the zipped file you downloaded.
  3. From the File menu, select Import and then Import to Stage.
  4. From the Modify menu, select Convert to Symbol.
  5. In the Convert to Symbol window, type a name in the Name field, select the Graphic behavior button, select middle center registration box, and then select OK.
  6. Delete the image from the stage using the Backspace key or select Cut from the Edit menu. The symbol will remain in the library.
  7. If the Properties window is not open, select Properties from the Window menu.
  8. If the Library window is not open, select Library from the Window menu.
  9. If file names are not listed in the Library window, select the right-pointing arrow next to "Library."
  10. Double-click the marker_movie movie clip symbol if you want to change the icon images, or the banner1 and banner2 graphic symbols if you want to change the timeline title.
  11. Select keyframe 2, 3, 4, or 5 in Layer 1 in the Timeline window if you want to change one of the icon images, or select keyframe 1 in Layer 1 of the Timeline window if you want to change the timeline title.
  12. The image will appear on the stage. For each image you want to change:
    1. Double click the image.
    2. In the Properties window, select Swap...
    3. A Swap Bitmap window will appear. Select one of tiles you imported and converted to a symbol in the previous step.
    4. Select OK in the Swap Bitmap window. The new image will replace the one on the stage.

5. Add Icons

If you would like to add an icon image, follow these steps:

  1. In Macromedia Flash MXÆ, open the copy you made of the timeline.fla file that was included in the zipped file you downloaded.
  2. In the Library window, double-click the marker_movie movie clip symbol.
  3. Select frame 6.
  4. From the Insert menu, select Timeline and Keyframe.
  5. One of the icons will appear on the stage. On the stage, select it.
  6. In the Properties window, select Swap...
  7. A Swap Bitmap window will appear. Select one of the files you imported and converted to a symbol in the previous step.
  8. Select OK in the Swap Bitmap window. The new image will replace the one on the stage.

6. Change or Add Icon Labels

If you would like to change the names of the icons, or create a label for an icon you added in the previous step, follow these steps:

  1. In a Web or text editor, open the copy you made of the timeline.xml file that was included in the zipped file you downloaded.
  2. If you want to change the label of any icon (such as "Technology"), delete the text in parentheses after the category name tag and type in the new label.
  3. If you want to add a new label for an new icon, add a new category name tag and type the name of the icon symbol you created in step 3 in the parentheses.

7. Change or Add Analyses

If you would like to change an analysis page link on the timeline or add a new one, follow these steps:

  1. In a Web or text editor, open the copy you made of the timeline.xml file that was included in the zipped file you downloaded.
  2. If you want to link an existing icon on the timeline to another page, change the topic name and URL that appears after the category name tag of the icon.
  3. If you want to change the identification information that appears when you place your cursor over a particular icon on the timeline, change the image name and/or by information that appears under the icon's topic name.
  4. If you want to change the location of an icon on the timeline, change the date information that appears under the icon's topic name.
  5. If you want to change or create a new analyses page, use a Web or text editor to edit one of the HTML files in the Pages folder or to prepare a new page.
  6. If you want to add a link to a new analysis page, add a new topic name tag linked to the page, then add an image tag with new name, by, and date information. An icon that is linked to the new page will appear on the timeline at the year you specified.

8. Test and Publish the Timeline

  1. Select Test Movie from the Control menu.
  2. The timeline should appear in a new window. Select Publish Settings from the File menu.
  3. On the Format tab, make sure that the boxes for FLASH and HTML are checked.
  4. On the Flash tab, make sure the version is set to Flash Player 6 and the ActionScript version is set to 1.0.
  5. Click the Publish button.
  6. SWF and HTML files will appear in the folder in which you saved your file in step 2. Upload the files to your Web server and link the HTML file to your Web site. Other Web users who have installed the Flash plugin should be able to use the timeline in a Web browser.

Last modified Tuesday, 19-Jun-2007 15:32:22 CDT