Documentation for Flash Project

Transcription

1 Documentation for Flash Project JOU 4341 and MMC 4946 / Fall 2005 You will build at least six Flash pages, or screens, to create an online story with photos, text and audio. The story will have a cover page (page 1). All the other screens will be basically the same. Each screen will be a separate SWF file. A Flash file for editing and authoring is called an FLA (eff-el-ay). A Flash file for publishing on the Web is called a SWF (swiff). You work in the FLA, and when you re finished, you publish a SWF. The SWF is a much smaller file and cannot be edited. Always keep your FLA files. Never delete them. That way, you could always change the FLA and then publish a new SWF from it. Content You will receive: At least 12 photos in BMP format At least nine Word documents At least two MP3 files These are the assets for this story. You must NOT edit or change the photo files or the MP3 files in any way. You may edit the text files if you think it s necessary. However, the text files should be completely edited, fact-checked and ready to use when you receive them. You must NOT write new text, other than a headline for the cover page. Editing Decisions Your final story must have at least six screens, including the cover (page1.swf). Select from the photos and text to create six or more screens. You should be able to pair each text document with at least one photo. Flash Template Tutorial Page 1 of 14

2 If the photo filename and the text doc filename match (e.g., twoboys.bmp and twoboys.doc), that means the reporters intended those two to go together. Please put them together in that case. ALL the MP3 files must be used. Use only ONE audio file on any screen. You will choose which MP3 goes best with which photo-and-text pair. However, if the reporters named an audio file to match a photo or text file, or both (e.g., twoboys.mp3 and twoboys.bmp), then please use those together. Starting with Flash After you have completed all of your editing decisions (above), you will know exactly: Which photos you are using, and Which text file will go with each photo, and Which photo-and-text pair will have an audio file accompanying it (there will be at least two of these). Now you are ready to create the SWF files using these assets. Photo 1. Open the template for page1.fla in the Flash application. (Note: Always open the FLA. The SWF will not open in the application.) This is your cover. It is the first screen the user will see. 2. Import the photo (BMP). 3. Open the Library panel (find it on the Window menu, or press F11). In that panel, find the movie clip named Photo and double-click its icon (to the left of the name). 4. Use the Swap button (Properties panel) to swap the new photo and thereby replace the template photo. 5. Press Ctrl-E immediately to return to normal editing mode. 6. If the new photo is 1014 x 716, do not move the photo or change it in any way. It will fill the entire Stage. 7. If the new photo is smaller in one dimension, you can grab it and move it to align one edge with the edge of the Stage (in Flash, the Stage is the working area, which is a rectangle). Flash Template Tutorial Page 2 of 14

3 8. You can change your view of the Stage by using the menu at the upper right of the Timeline: 9. Now the photo for this screen is in place. 10. Save your file (this is page1.fla). Text 1. You have already chosen the text file to use with this photo. Open the Word document in MS Word now. 2. Select and copy all the text in the Word document. 3. Go back to the Flash application. 4. Double-click on the big paragraph of text in the template (NOT the headline). Then select all of the text. 5. Paste to replace the template text with your new text. Do not worry if the new text is too long or two short for the colored box. You will fix that later. Headline Click into the headline and write a new one. After you double-click on the text, it will look like the image above. Then you can change the text. Save your file! Flash Template Tutorial Page 3 of 14

4 Changing the Box Your photo is on the bottom layer in the Timeline stack. Everything else is on top of the photo. You can see all the layers in the Timeline if you grab the lower edge of the Timeline panel and drag it down. Look at the cursor in the image at left. See the way the cursor looks (bottom of image)? That s when you can drag the panel size larger or smaller. Make sure you see the rectangle layer. The rectangle layer is locked. To unlock it, click the small lock icon to the right of the layer name ( rectangle ). Now you can change the size, color and position of the rectangle. To change the size: Click the Free Transform tool in the Tools panel (left side of Stage). Then click the yellow box itself. This gives you handles that you can click, hold and drag to change the size and proportions of the box. To change the color: While the box is selected, you can see its properties in the Properties panel at the bottom of the screen. One of these is the fill color. Click to open the palette and choose a new color. To move the box: In the Tools panel, click the BLACK arrow in the upper left corner. This is the Selection tool. After you have that tool, click and drag a big box around all the text, including the headline, and the entire colored box. After everything is selected, you can drag the whole bunch to any spot on the screen you desire. This is illustrated below. Flash Template Tutorial Page 4 of 14

5 Note: The big double-pointer (>>) will not move now. That s okay. You will move it next. Moving the Pointer Button Lock all the layers in your Timeline. See the illustration below for help. Just click under the lock icon to turn the lock on or off for any layer. Only the button layer should be unlocked. Why? Because you are about to grab and drag the big double-pointer (>>), which is a button. If everything else is locked up, then nothing else will move by accident. Now grab, hold and drag the pointer so it is inside the box, under some of the text, and in the lower-right area of the box. Note: If you changed the box color and now the pointer color looks bad, you can change the pointer color too. This is different from the way you changed the box color, however (because the pointer is a button, and the box is only a shape). When the pointer is selected, look down in the Properties panel. Choose Tint from the Color menu there to open a palette and change the pointer color. Publish and Test the SWF You have finished the first screen! Now you need to generate a SWF file. Flash Template Tutorial Page 5 of 14

6 1. Save the file. 2. Hold the Ctrl key down and press Enter. You will see the SWF in full-window mode. To see it at its actual size, click the Maximize/Restore button on the application window. Because this package uses a full-screen browser window, the SWFs are actually smaller than they will be when opened in the Web browser. A bunch of JavaScript on the two Web pages makes this happen. You can test it now and see how everything will look for real. You need to have these five files inside the same folder (with your brand-new page1.swf) to see it all work properly: index.htm main.htm mainflash.swf page1.swf (this is your new SWF) page2.swf (this is the unedited template, for now) Got em all? Okay! 1. Double-click index.htm to open the launch page in your Web browser. 2. Click the obvious link (Click this link), which launches a new fullscreen browser window. 3. You should recognize your own beautiful new cover page. 4. Click the pointer (>>) to see Page 2 (which you will edit next; right now it s just the template). 5. On Page 2, you can click the numeral 1 to return to the cover screen. Continuing: All Other Screens After the first screen (the cover), the other regular screens are all copies of the file page2.fla (you will name them carefully in sequence, page3.fla, page4.fla, etc., as you build each one). The steps for importing a photo and editing the text are exactly the same as explained above. You will do those steps on every screen. You will ALSO modify the box size and position to suit the length of the text and the specific photo on EACH screen. Ideally, you should choose one color for the box and stick with it for all the screens. There is NO headline on any screen other than the cover (page1.swf). There are two new things to work with on the screens after the cover: (a) the number buttons, and (b) the MP3 files. You will see these in the template file page2.fla. Flash Template Tutorial Page 6 of 14

7 Getting the Right Number of Number Buttons 2. Now you will see this on the Stage: You already know how many screens are in your package. Now you must make the numbers match. If you have six screens in total (including page1.swf), then you need to have exactly six buttons, and they must be buttons To open up the set of all buttons and modify it, open the Library panel (it s on the Window menu). At left, see how to double-click the Number Buttons movie clip, which can be found inside the Library panel. All of the buttons (and all of the ActionScript for the buttons) is contained in this one movie clip. 3. To delete the unnecessary buttons, first click the BLACK arrow in the upper left corner of the Tools panel (this is the Selection tool). Then click, hold and drag to select all the unwanted buttons. For example, to delete 11 16: 4. Then simply press the Delete key on your keyboard: 5. This is hugely important: Press Ctrl-E now to return to normal editing mode in Flash. 6. Save your file (page2.swf). Ctrl-Enter to create a SWF and test the file. You want exactly this same set of number buttons for all your screens after this one. So you don t have to do this every time! After you complete work Flash Template Tutorial Page 7 of 14

8 on this FLA file, simply Save As with a new file name, and the button set will be exactly the same every time. Adding an MP3 Audio File (or Deleting the Audio Graphic) The audio functions are all pre-built for you in this package. Any screen may have an audio file player on it. Only one MP3 is possible on a screen in this package. If this screen has no MP3, then you must delete the audio layer. If you do have an MP3 for this screen, you need to type its filename in a particular location. How to delete the audio layer: If there is no audio file for this screen, then simply delete the Timeline layer that contains the audio graphic and controls. 1. Select (click once) the Timeline layer that contains the audio movie clip ( audio layer). 2. Click the trashcan icon below the layer stack (see the cursor in the image above?). Did you make a mistake? You can undo! Press Ctrl-Z to go back and try again. (You can Ctrl-Z up to 100 times.) Flash Template Tutorial Page 8 of 14

9 How to add audio to this screen: This won t work if you just deleted your audio layer. Assuming you still have the audio layer: 1. Select Frame 1 in the actions layer. See the cursor in the image above? See the blackened frame to the left of the cursor? That is Frame 1. After you click it, it will be black. Black means it is selected. 2. Open the Actions panel (on the Window menu > Development panels). 3. The Actions panel contains the ActionScript written on Frame 1 (because you selected Frame 1). In that script, you will see a filename ( talking.mp3 ). 4. Whatever filename your MP3 file has, it must appear here. So change the filename to match yours. KEEP the quotation marks (and everything else) exactly as they are. Change only the filename. The original soundbite = "talking.mp3"; If your audio file is named mrbanjo.mp3 soundbite = "mrbanjo.mp3"; Note that only MP3 files work with this script. Other audio formats will not play and may also cause an error. That s all you need to do to make the audio file function in this package. Save your file now! Ctrl-Enter to create a SWF and test the file. Making the Number Buttons Work Properly The number buttons in the file page2.fla will all work correctly, because they are set up to work for Page 2. But for all the subsequent pages (you will name Flash Template Tutorial Page 9 of 14

10 them carefully in sequence, page3.fla, page4.fla, etc., as you build each one), you must make one change that will alter the button operation. 1. Select Frame 1 in the actions layer. This is illustrated on page 9 of this handout. After you click the frame, it will be black. Black means it is selected. 2. Open the Actions panel. It s on the Window menu (Development panels). 3. The Actions panel contains the ActionScript written on Frame 1 (because you selected Frame 1). In that script, you will see this line: buttons_mc.b2_btn.enabled = false; That line makes the Number 2 button non-functional (on this screen only). This is great for page2.fla because you do not want the number to keep opening the same screen if someone clicks it. But what about page3.fla and page4.fla, etc., etc.? 4. Yes, you need to change that little numeral in the script. So if you are editing page3.fla make it read: buttons_mc.b3_btn.enabled = false; And if you are editing page10.fla make it read: buttons_mc.b10_btn.enabled = false; 5. Be sure to change the numeral in the script for each FLA file you create. 6. Save your file. Ctrl-Enter to create a SWF and test the file. Adding the Credits The credits for your work and the work of the reporting team will be inside the file named mainflash.swf. This file is the master control for the entire package. It acts like a viewer for all your other SWF files. 1. To edit the credits for your package, first open the file mainflash.fla in the Flash application. Flash Template Tutorial Page 10 of 14

11 2. Open the Library panel (see page 7 of this handout), and double-click the Credits movie clip inside the Library panel. 3. Now you can edit the text inside the panel. This is exactly like editing the other text in the other FLA files, except that here, each little list of students names is a separate text field. (All the names in the FLA are fictitious, so do not keep them.) 4. Do not edit the bottom text, which begins University of Florida 5. You should have a list from your reporters providing their names and identifying their Project Editor. The Project Editor s name appears twice. 6. Put your own names in the list under Producers. 7. Each list should be alphabetical by last name. 8. When you ve replaced all the fake names with the real names, save your file and Ctrl-Enter to test the sliding panel. 9. Close the file. You should not do anything else to this FLA file. Testing the Package Careful testing is part of every Web production job. After you have all the FLA files completed and all the SWF files published, you need to make sure Flash Template Tutorial Page 11 of 14

12 you have the right stuff together in one folder and then test everything by clicking every button and listening to every audio file. Test the audio buttons too. The FLA files should not be in the final folder. Keep them, but keep them in a separate place. FLA files should not be uploaded to the Web. There also should NOT be any BMP files in the final folder. Your folder file list will look something like this: index.htm man_on_street.mp3 main.htm mainflash.swf page1.swf page2.swf page3.swf page4.swf page5.swf page6.swf ralph_speech.mp3 After you have guaranteed that every button (link) works on every screen, you can turn in your folder for a grade and also upload it to the Web. Template Files Supplied index.htm main.htm mainflash.fla (change credits only) page1.fla (cover) page2.fla Flash Template Tutorial Page 12 of 14

13 Files Needed index.htm Does not need to keep this filename. Does not need to keep this page design. The required items from this page are: All the JavaScript on this page, combined with The link that says Click this link (the text can be changed): <a href="javascript:launchfullchrome('main.htm', 'example'"> This script (and the link) controls how the display page opens on screens of varying sizes. Note: This is the Web page that a user would bookmark. main.htm This page must not be edited or changed in any way (except the title*). Its filename must be main.htm, or else it will not work with the script and link on the page that opens it. This is the display page, within which all the Flash is contained (and centered, using an HTML table). The SWF named in the JavaScript on this page is mainflash.swf no need to change that if your first SWF (the cover) has that filename. (This is basically an empty HTML page that loads the Flash content automatically, using JavaScript.) * You may change the HTML TITLE of this page. mainflash.swf You will change the names* in the CREDITS panel inside the FLA for this screen. This is the cover of the Flash story. It has a very different format from the other screens in the Flash story. It is one SWF containing a mechanism for loading all the other SWFs. It also contains the CREDITS sliding panel, which you will edit. * The names in the credits are the ONLY things to be changed in this SWF. page1.swf This is the cover screen of the Flash story. This screen is one SWF containing one photo, one headline and one block of text. No audio file here. This screen links only to the second screen (page2.swf). It does not contain the row of number buttons. Flash Template Tutorial Page 13 of 14

14 page2.swf This is an interior screen of the Flash story. Every interior screen has the same number of buttons, which are numbers referring to each of the screens. Each interior screen is one SWF containing one photo, one block of text, and (possibly) one audio file. page3.swf (etc., etc.) All subsequent SWFs must be named in numeric order. You can have as many as you like. These are all copies of the page2.swf template. Simply Save As to make a fresh file with a new numbered filename. (end) Flash Template Tutorial Page 14 of 14