Document (13) - Lecture notes 5 PDF

Preview

Summary

Photoshop tutorial notes...

Description

Figure 51 shows a USA.gov mobile application that provides visualizations of near-real-time global climate data from NASA’s fleet of Earth science satellites. Figure 51 shows the opening screen, a second screen, which contains a menu, and the two screens that show data. Figure 51

Sample Design Project

Source: http://www.nasa.gov/content/earth-right-now/#.VA4WtBauTFw 1. 2. Connect to the Internet, then go to http://www.nasa .gov/content/earth-right-now/#.VA4WtBauTFw. Open a document in a word processor, save the file as dpc4, then answer the following questions. Who is the audience for this app? Could this application have been repurposed from a web site? What mobile touch and gestures events might be used to enhance this application? What suggestions would you make to improveapplication for use on a smartphone and test it using the Mobile Content Simulator. Resize the Stage. 1. Open fl4_5.fla, then save it as portfolio4.fla. (Note: You will need to have math.swf, shirt.swf, and shirt2.swf in the same folder as the portfolio4.fla because these files are loaded into the application when the user clicks specific buttons. The password for the clients only area is password.) 2. Test the application in the Flash player window by clicking the buttons, then close the Flash Player window. 3. Use the Document Settings dialog box to change the Stage dimensions to 480 width and 800 height, then choose to scale the content to the Stage. 4. Change the view to Fit in Window. Notice that the black border only encloses the top half of the stage. 5. Test the movie in the Flash player window and notice the graphics are displayed on the top half of the Stage. Resize the Stage objects. Note: You may want to lock and unlock layers as you work with the objects on the Stage so that you are only working with the desired objects. 1. Change the border to have it fit around the entire Stage. (Hint: Unlock the Border layer, select the border on the Stage and use the Properties panel to change the dimensions.) Developing Mobile Applications 2.

Verify that the navigation buttons’ white background fits the width of the Stage.

3.

Move the top of the white background for the navigation buttons to the mid-point of the Stage.

4. Move the text My Portfolio above the white bar. 5. are evenly

Move the navigation buttons so they

spaced within the white bar. 6. Test the movie in the Flash player window, then close

the window. 7. Save your work. Change the publish settings for a mobile device. 1. Display Publish Settings dialog box. 2. Change the Target to AIR 13.0 for Android. 3. OK to accept the change and close the Publish

Click

setting dialog box. Add mobile events. 1. Click the home button on the Stage to select it and notice the instance name displayed on the Properties panel. 2. Display the Code Snippets panel and insert the Pinch to Zoom Event which is located in the Mobile Gesture Events folder. 3. Test the application using the Content Simulator and use the Zoom gesture to have the button zoom in and out. 4.

Close the AIR preview window. 5.

Figure 52

Save and close the application.

Sample completed Portfolio Project

flash 4-53 Copyright 2016 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic5SelectING OPtIONS FOR cHAPteR PUBlISHING APPlIcAtIONS 1. 2. 3. 4. Deliver Flash movies on the web using publish settings and as video files Develop HTML5 Canvas documents Publish AIR Applications Understand Flash templates5SelectING OPtIONS FOR cHAPteR PUBlISHING APPlIcAtIONS Introduction As you developed Flash applications in the preceding chapters, the focus has been on delivery through the web, using SWF files, and delivery through mobile devices using AIR for Android and AIR for iOS. Flash apps can also be delivered through stand- alone computers (AIR for desktops) and even TVs. The important thing is to determine the best delivery process to reach your target audience. In many cases, this may mean more than one delivery platform. Adobe Flash Professional CC allows you to leverage your design and development efforts by making it easy to create an application that can be repurposed for delivery in various ways. That is, you can develop one Flash FLA file and publish it in several file formats. The three most common file formats for distributing Flash movies are Flash Player (.swf ), Adobe AIR (.air), and HTML5 Canvas (.js). Flash Player and HTML5 files are used on websites for everything from interactive product demonstrations to banner

ads. Adobe AIR files are used for a much broader range of applications, such as interactive games, tutorials, product demonstrations, and productivity software. flash 5-2 The Publish Settings feature of Flash is used to convert a Flash FLA movie to a SWF or an AIR format. You can use the Publish settings to customize an application by specifying quality, alignment, and transparency attributes. Both AIR and HTML5 file formats can be specified when you start a new Flash document or you can convert existing FLA document to AIR and HTML5 formats. Publishing a Flash FLA document for delivery in various ways does not necessarily require using the Publish Setting feature of Flash. For example, you can also export an application to video, including .mov and .mp4 formats, using the Export Video command in the File menu. As you learned in Chapter 4, Flash provides templates that you can use as the basis for new projects. You can use all of a template, or just part of one. In this chapter you will learn more about the Publish Settings feature of Flash, which you can use to repurpose applications for delivery on various platforms. You will also learn about exporting to a video file format. Finally, you will learn more about using Flash templates. Copyright 2016 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. Deliver Flash Movies on the Web USING PUBlISH SettINGS ANd AS VIdeO FIleS Publishing a Movie The Flash Publish Settings feature generates the files necessary to deliver Flash movies on the web. When you publish a movie using the default settings, a Flash SWF file is created that can be viewed using the Flash Player. In addition, an HTML file is created with the necessary code to instruct the browser to play the Flash file using the Flash Player. Figure 1 shows the Publish Settings dialog box with a list of the default formats for publishing a Flash movie. The Flash (.swf ) and HTML Wrapper formats are selected. You can choose a combination of formats, and you can specify a different name (but not file extension) for each format. Other formats such as GIF, JPEG, and PNG are for still images that can be delivered on the web or within other applications. When you select a format, its settings appear on the right side of the Publish Settings dialog box. Because the Flash (.swf) format is selected in Figure 1, the initial settings associated with that format are visible. To display the HTML Wrapper settings instead, you would click HTML Wrapper (the text, not the check box). The settings for the various formats allow you to specify: The target version of the Flash Player The version of ActionScript The desired quality for JPEG images and audio Other options, such as whether or not you want to compress the movie

The HTML file retains the same name as the Flash movie file, but with the file extension .html. Likewise, the SWF file has the same name as the Flash movie file, but with the .swf file extension. So how does this work exactly? Let’s consider an example. Publishing a movie named myGame.fla generates two files by default: myGame.html and myGame.swf. Figure 2 Selecting Options for Publishing Applicationsshows sample HTML code referencing a Flash Player movie in the HTML file. The movie source is set to myGame.swf; the display dimensions (determined by the size of the Stage) are set to 550 400; and the background color is set to black (#000000). You could use an HTML editor to change the settings rather than making changes in Flash. For example, if you wanted to change the background color to white, you could replace #000000 with #ffffff. Inserting a SWF File into an HTML Document Another way to deliver a Flash movie on the web is to import it into an HTML document. To accomplish this, you open the HTML document in Dreamweaver, then select the Flash SWF option from the Media command on the Insert menu. The Select SWF dialog box appears, allowing you to specify the SWF file to insert. Figure 2Sample HTML codeExporting to Video A third way to deliver a Flash movie on the web is as a video file, such as an MP4 file. To do this, you start by creating a Flash application and saving it as a FLA file. Next, you select the Export Video command from the File menu. The Export Video dialog box Export Video dialog box. The video file can be inserted into a web site or played in a video player such as QuickTime. QUICk TIP The Flash Player is not needed to play a video file. Import a video into a Flash document Open a new ActionScript 3.0 document, then save it as bannerad.fla. Rename Layer 1 heading. Change the Stage dimension to 320px wide and 550px high, then change the view to fit in Window. Click the Text tool to Static Text.

on the Tools panel, display the Properties panel, then verify the Text type is set

Add the heading Our spring special with the following properties: Font: Impact (or a font of your choice); Size: 44pt; Color: #009900. Center the heading at the top of the Stage as shown in Figure 4. Add a new layer and name it video. Click file on the menu bar, point to Import, then click Import Video. The Import Video dialog box appears, allowing you to select the video to import. Click the Browse button, then navigate to the drive and folder where your Data Files are stored.

Click safari.flv, then click Open. Your dialog box should resemble Figure 5, 1. 2. Figure 5The completed Import Video dialog box Lesson 1

Deliver Flash Movies on the Web Using Publish Settings and as Video Files

Static Text

3.

4. 5. 6. 7. 8. 9. Selected 10. video file although your File path may differ. flash 5-711.

Click Next to display the Skinning dialog box. This dialog box allows you to choose from a

variety of playback controls, colors, and sizes. 12.

Click the skin list arrow to display the list of skins, as shown in Figure 6.

13.

Click skinOverallNofullNoCaption.swf.

14.

Click Next.

15.

Read the Finish Video Import dialog box text, then click finish.

16.

If necessary, position the video near the middle of the Stage.

(continued) Figure 6The list of skins Working with skins When importing a video into a Flash document, you need to select a skin, which is a group of settings that determines the appearance and position of the play controls. Skins come in several varieties. For example, you could choose a skin that includes buttons for start, pause, rewind, audio on/off, and volume level. When selecting a skin, you can also choose the color used as a backdrop for the controls. You use the Skinning dialog box to select a skin and the background colorIn order to display a video within a Flash document, the document must know where the video file is located—that is, the folder and directory where the file is stored. This means that, for the bannerAd.fla document to display the safari.flv video, you need to specify the location of the video file. If the video does not play when you test the bannerAd.fla file (either in the Flash player or in a browser) you may need to change the reference to the location of the video file. To accomplish this, click the video controls on the Stage, then display the Component Parameters in the Properties panel. Click the source option path, then change the path to where the safari.flv file is stored on your computer.

(continued) Lesson 1

Deliver Flash Movies on the Web Using Publish Settings and as Video Files

Copyright 2016 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some thirdAdd a new layer, then name it caption. 18. Add the caption africa Untamed below the video with the following properties: Font: Trajan Pro 3 (or a font of your choice); Size: 44pt; Style: Bold; Color: #009900. Type the word “UNTAMED” on a separate line, left-align the text, and use spaces to indent “UNTAMED.” Your screen should resemble Figure 7. 19.

Save the document.

You started a new Flash document, resized the Stage, added text, and imported a video into the document. Publish a movie and change the Publish Settings 1.

Click Control on the menu bar, point to Test Movie, then click In flash Professional.

2.

View the movie, then close the Flash Player window.

3.

Click file on the menu bar, then click Publish settings.

4. On the left side of the dialog box, verify that Flash (.swf ) and HTML Wrapper are the only check boxes selected. Video Display Troubleshooting In order to display a video within a Flash document, the document must know where the video file is located—that is, the folder and directory where the file is stored. This means that, for the bannerAd.fla document to display the safari.flv video, you need to specify the location of the video file. If the video does not play when you test the bannerAd.fla file (either in the Flash player or in a browser) you may need to change the reference to the location of the video file. To accomplish this, click the video controls on the Stage, then display the Component Parameters in the Properties panel. Click the source option path, then change the path to where the safari.flv file is stored on your computer. (On the left side of the dialog box, click hTMl Wrapper (the text, not the check box) to view the HTML settings. 6.

Click the hTMl alignment list arrow, then click Right as shown in Figure 8.

This will cause the banner to be displayed on the right side of the browser. 7.

Click Publish, then click OK.

8. Use your file management program to navigate to the drive and folder where your saved documents are stored. Notice the files with the .swf and .html extensions. The HTML document is the wrapper that your browser uses to display the SWF movie. A second SWF file (named SkinOverAllNoFullNOCaption.swf) is used to display the skin for the video.

9.

Return to Flash. 10.

Click Control on the menu bar, point to Test

Movie, then click In Browser. Notice the banner is on the right side of the browser widow. 11.

View the movie, then close the browser window.

12.

Save, then close the document.

You published a movie, changed the Publish Settings, and viewed the movie in both the Flash Player window and a browser. Figure 8Changing the alignment option flash 5-10 Right alignment Selecting Options for Publishing Applications Copyright 2016 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicatedInsert a Flash SWF file into an HTML document 1.

Start Dreamweaver. 2. Open fl5_1.html, then save it as OaTBanner.

Note: If a message appears asking to update links, click Yes. 3.

Click the right side of the document to display an insertion line.

4.

Click Insert on the Menu bar, point to Media, then click flash sWf.

5. OK.

Navigate to the drive and folder where your Data Files are stored, click bannerad.swf, then click

6.

Type spring special video in the Object Tag Accessibility Attributes dialog box, then click OK.

The Flash SWF placeholder appears in the HTML document as shown in Figure 9. 7.

Save the Dreamweaver document. Note: A Copy Dependent Files dialog box may

be displayed. If so, click OK. 8. Click file on the menu bar, point to Preview in Browser, then click Internet Explorer. Note: When using Internet Explorer you may receive a message indicating that the web page is restricted from running scripts or ActiveX controls. In that case, click Allow blocked content. 9.

View the web page and test the controls on the video player.

10.

Close the browser window.

Lesson 1 flash 5-11Dreamweaver, click the flash sWf placeholder to select it.

12. Click the Wmode list button on the Properties panel at the bottom of the screen, then click transparent as shown in Figure 10. This makes the Stage color of the SWF file transparent, revealing the web page’s background color. 13. Save the document, click file on the menu bar, point to Preview in Browser, then click Internet Explorer. 14.

Preview the web page in the browser and notice the banner ad’s transparency.

15.

Close the browser. 16. Close the document, then exit Dreamweaver.

You inserted a Flash SWF file into an HTML document, made changes to the file’s properties, and viewed the file in a browser. Figure 10

Selecting the transparency setting

©iStockExport a Flash document as a video file Start Queue (Return) button 1. 2. 3. 4. TIP 5. 6. 7. 8. 9. 10. Open fl5_2.fla and save it as VectorsNC. Test the movie, then close the Flash Player window. Click file on the menu bar, point to Export, then click Export Video. The Export Video dialog box appears. Verify that the Convert video in Adobe Media Encoder check box is selected, then click the Export button. The Adobe Media Encoder window opens, as shown in Figure 11. The Adobe Media Encoder is a separate program and may take a few moments to open. Also, it may appear on the taskbar (Win) or Dock (Mac) and need to be opened from there. Click the start Queue (Return) button (the green arrow) to start the conversion process. When the process is complete, click file on the Adobe Media Encoder dialog box, then click Exit.

Navigate to the drive and folder where your solution files are stored and notice the VectorsNC_1.mp4 video file. Play the VectorsNC_1.mp4 video file. Close the video player. Save, then close the document. You used Adobe Media Encoder to create an MP4 video...