Chapter 7 Publishing Publishing to desktop publication PAGE 92 4. Then, click on Player Settings. (continued) 5. The AIR Settings dialog box shows. In 'Output as', choose 'Windows installer'. The default is 'AIR package'. You will notice that 'Output file' will automatically change to .exe. Note that Output file' is automatically filled with the name that you have saved in. fla format. Figure 7.3 Player settings Figure 7.2 AIR settings (General)
Chapter 7 Publishing Publishing to desktop publication PAGE 93 Output file: You can select name and location of your published AIR application. The file name ends with extension exe if you select Windows installer in 'Output as'. Output as: There are three different type of package to create. App Name: The name of your application that will be displayed after installation process. App ID: The ID used to differentiate your applications with another through unique ID. Default ID can be changed if you prefer. Valid characters that can be applied are 0-9, a-z, A-Z, and . (dot), from 1 to 212 characters in length. Spaces or special characters should be avoided in the ID. Version: Application version that installed or running. You can state default to 1. Description: Allow you enter a description of the application where it will be displayed the installer window once user installs the application. Blank by default. Copyright: Allow you to fill in copyright notice in here. Blank by default. Window style: 6. Several settings appeared in General tab as below: AIR package Windows installer Application with runtime embedded System Chrome - the standard window visual style that the operating system uses. Custom Chrome (opaque) - allows you to create your own chrome for the application by removing the standard system chrome. Custom Chrome (transparent) - Allow you to add transparent capabilities to the edges of the page. This transparent capabilities is build for application windows that are not square or rectangular in shape. (continued)
Chapter 7 Publishing Publishing to desktop publication PAGE 94 Render Mode: Three options include: Auto, CPU or Direct where it allow users to determine which method the AIR runtime should render the application with. Profiles: Untick unneeded profiles to limit your AIR application. Included Files: Shows all files to be packaged and included in the AIR application, . (a .swf file and an application manifest (.xml) file) are automatically added). Click the Plus (+) button to add files or folders . Click the Minus (-) button to delete a file or folder from your list. Auto - Auto select the best mode. CPU - Use the CPU. Direct - The fastest rendering method using Stage3D. 7. Select file destination next to the Output file name. (continued) Figure 7.3 Select file destination
Chapter 7 Publishing Publishing to desktop publication PAGE 95 8. You can fill information in App Name, App ID and Version in General tab. Then, select Window style, Render Mode, Profiles and Included files according to your preference. Default to blank for description and Copyright. 9. In Signature tab, click on Select button next to Browse button to create your own self-signed certificate. (continued) 10. Enter information as required and then click Browse to save the certificate. Click OK to create and save your certificate. Figure 7.4 AIR settings (Signature) Figure 7.5 Create self-signed digital certificate
Chapter 7 Publishing Publishing to desktop publication PAGE 96 11. A pop up message will be displayed to inform that self-signed certificate has been created. (continued) 12. Re-enter the password as in Step 10. Tick on checkbox if you want to remember the password for this session. 13. In Icons tab, choose icon size that you and then navigate the icon file by selecting Browse icon. Figure 7.6 Self-signed digital certificate message Figure 7.7 Insert password Figure 7.8 AIR settings (Icon)
Chapter 7 Publishing Publishing to desktop publication PAGE 97 14. You can use any kind of suitable software to create the icon size. Note that the format must be in PNG (Portable Network Graphics). Then click on Open button. (continued) 15. You will notice that the icon will be displayed in Preview area. Figure 7.9 Open icon file Figure 7.10 Icon preview area
Chapter 7 Publishing Publishing to desktop publication PAGE 98 16. There are several option available in Advanced tab as below: (continued) Figure 7.11 AIR settings (Advanced)
Chapter 7 Publishing Publishing to desktop publication PAGE 99 Associated file types - Allow you to define relevant file types that managed by AIR application. Initial window setting - Note that the value (in pixels) in width until Minimum Width and Minimum Height are blank by default. Other settings - Plus (+) button: to displays the File Type Settings dialog box. Minus (-) button: will enable once you select an item list that shows in the text box. Width - You can fill in initial width value of the window. Height - You can fill in initial height value of the window. X - You can fill in initial horizontal position value of the window. Y - You can fill in initial vertical position value of the window. Maximum width and Maximum height - Allows you to define the maximum size of the window. Minimum Width and Minimum Height: Allows you to define the minimum size of the window. The checkboxes in maximizable till visible are selected by default. Maximizable - Allows you to determine whether the user can maximize the window. Minimizable - Allows you to determine whether the user can minimize the window. Resizable - Allows you to determine whether the user can resize the window. If this option is unticked, Maximum Width, Maximum Height, Minimum Width, and Minimum Height value are disabled. Visible - Allows you to determine whether the application window is visible at the beginning. Install folder - Allows you to determine installation location. Program menu folder - Allows you to determine the name of program menu folder for the application. Use custom UI for updates - Tick the checkbox if you do not allow user to update the installed version with the version in the AIR file. (continued)
Chapter 7 Publishing Publishing to desktop publication PAGE 100 (continued) 17. You will see that the application is in publishing process. 19. Check the folder that you have selected before to save the exe file. Double click on it to install the application. 18. Then, a notification pop up to inform you that Windows installer has been created. Figure 7.12 Publishing progress Figure 7.13 Windows installer message Figure 7.14 Windows installer
Chapter 7 Publishing Publishing to Desktop Publication PAGE 101 (continued) 20. The Application Install dialog box will be appeared. By default, the two check boxes in Installation Preferences are ticked. You can click on the folder icon to change the installation location. Then, click Continue. 21. If you select ' Add shortcut icon to my desktop', you will see an icon of the application appeared on your desktop. Double click to run the application. Figure 7.15 Application ready to install Figure 7.16 Application icon
Chapter 7 Publishing 1. Follow Step 1 and 2 in 'Publishing to Desktop Application' section. 2. In the Publish Settings window, click on the Target drop-down list and select Adobe AIR 26.0 for Android . Publishing to Mobile Devices 3. Click on the Settings icon. PAGE 102 Figure 7.17 Publish settings Figure 7.18 Player settings
Chapter 7 Publishing 4. The AIR Settings dialog box shows. You will notice that the option in AIR for Android Settings is nearly similar with AIR settings for exe format except in several parts. You can refer explanation in Step 6 in 'Publishing to Desktop Publication' section. Publishing to Mobile Devices (continued) PAGE 103 Figure 7.19 AIR settings (General)
Chapter 7 Publishing Output file: The file name ends with extension APK (Android Package Kit). Aspect Ratio: Three options available for the application: Portrait, Landscape, or Auto orientation. The application launches on device will be depending on chosen aspect ratio. For example if Auto and Auto orientation are selected together, the application shown based on device current orientation. Processor: Two types of processor that can be choose to publish the application: ARM and Intel x86. 5. Several settings in General tab that different with settings in desktop publication: 6. Then, follow Steps 7 until 12 in Publishing to Desktop Publication' section. 7. In Icons tab, choose icon size that you and then navigate the icon file by selecting . You can see here that the selection of icons size is different with AIR settings for desktop publication. Publishing to Mobile Devices (continued) PAGE 104 Figure 7.19 AIR settings (Icons)
Chapter 7 Publishing 8. You can use any kind of suitable software to create the icon size. Note that the format must be in PNG (Portable Network Graphics). Say that you choose icon size 192 x 192 pixels. Publishing to Mobile Devices (continued) 8. Then you will see that the icon will be displayed in Preview area. The icon name also automatically filled in besides 192 x 192 size that you have selected. PAGE 105 Figure 7.20 Open icon file Figure 7.21 Icon preview area
Chapter 7 Publishing 9. The Permissions tab, allows user to specify services and data the application has access to on the device. Tick on checkbox as shown in Figure 7.22. Publishing to Mobile Devices (continued) PAGE 106 Figure 7.22 AIR settings (Permissions)
Chapter 7 Publishing 10. In Languages tab, tick on checkbox for English. Then, click on Publish button. 11. You will see a detail shows that the application is in publishing process. 12. Once the process completed, transfer the apk file onto your phone and install it. Publishing to Mobile Devices (continued) PAGE 107 Figure 7.23 AIR settings (Languages) Figure 7.24 Publishing process
Chapter 7 Publishing 13. If you cannot install the file onto your phone, then you can use BlueStacks that you have installed in your laptop to view the apps. Click on Install apk icon 14. Select the file location. Then click on Open button. Publishing to Mobile Devices (continued) PAGE 108 Figure 7.25 BlueStacks Figure 7.26 Open file location
Chapter 7 Publishing 15. You will see the application is installing into BlueStacks program. Wait until the process is completed and you are ready to use the application. Publishing to Mobile Devices (continued) PAGE 109 Figure 7.27 Installing process
Let's Test Your Skills! PAGE 110 Exercises Exercise 3 : Shape Tween Exercise 1 : Frame by Frame Animation Exercise 2 : Classic Tween Create a tween between two words as below. (Note that you need to break apart the text twice). Using your knowledge in frame by frame animation, draw a car with rotating tires. (Note that you have to convert the tires into movie clip and animate frame by frame in movie clip symbols). Animate the tires to rotate Create a classic tween to animate the car (from right to left) that you have created in Exercise 1 .
Let's Test Your Skills! PAGE 111 Exercises Exercise 5 : Masking Exercise 4: Animation Guide Create a ball that rotates around the text that you have created in Exercise 3. Create a circular mask which allows you to only see through the circular area, so that you get a spotlight effect. (Note that the circle shape will moves from left to right and then return from right to left)
Let's Test Your Skills! PAGE 112 Exercises Exercise 6 : Create a simple interactive quiz application using ActionScript Insert an animation by using frame by frame animation or tweening technique. Insert question by using Text Tool. Four buttons for selection of answer. Insert sound button. Next button to go to next scene. Insert sound button. Provide feedback movie clip each time user answer the question (for right and wrong answer). Insert mute/unmute button for background music. Insert question by using Text Tool. Four buttons for selection of answer. Insert sound and animate button. Next button to go to next scene. Insert sound and animate button. Back button to go to previous scene. Insert sound and animate button. Provide feedback movie clip each time user answer the question (for right and wrong answer). Insert mute/unmute button for background music. Insert question by using Text Tool. Four buttons for selection of answer. Insert sound and animate button. Back button to go to previous scene. Insert sound and animate button. Provide feedback movie clip each time user answer the question (for right and wrong answer). Insert mute/unmute button for background music. Create four different scenes that containing with following criteria: Scene 1: Splash Screen 1. Scene 2: Quiz Screen 1. 2. 3. 4. 5. Scene 3: Quiz Screen 1. 2. 3. 4. 5. 6. Scene 4: 1. 2. 3. 4. 5. Publish your file in exe format.
References PAGE 113 Adobe Flash Player EOL General Information Page. (2021, January 13). Retrieved from https://www.adobe.com/sea/products/flashplayer/end-of-life.html Building ADOBE® AIR® Applications. (207, May 16). Retrieved from https://help.adobe.com/en_US/air/build/air_buildingapps.pdf E-Kidzy TV. (2018, 9 July). Road Safety Lessons for Children - Traffic rules regulations by E-Kidzy TV [Video]. YouTube: https://www.youtube.com/watch?v=67ZkzNRnxfo How to add a video in Animate. (2019, July 5). Retrieved from https://helpx.adobe.com/animate/userguide.html/animate/using/add-video.ug.html How to use sound in Adobe Animate. (2020, 11 December). Retrieved from https://helpx.adobe.com/animate/using/using-sounds.html Labrecque, J., & Schwartz, R. (2018). Creating Multiplatform Animations with Animate CC (2nd ed.). Adobe. Labrecque, J., & Shukla, A. (2021). Mastering Adobe Animate 2021: Explore professional techniques and best practices to design vivid animations and interactive. Packt Publishing Learning Junction. (2018, 28 Mar). Road Safety video || Traffic Rules And Signs For Kids || Kids Educational Video [Video]. YouTube. https://www.youtube.com/watch?v=_NeEF1fwT4k Publishing for Adobe AIR for desktop. (2019, 4 July). Retrieved from https://helpx.adobe.com/animate/using/publishing-adobe-air-desktop.html#main-pars_heading_0 Publishing AIR for Android applications. (2021, May 17). Retrieved from https://helpx.adobe.com/hk_en/animate/using/publishing-air-android-applications.html The Future of Adobe AIR. (2019, 30 May). Retrieved from https://blog.adobe.com/en/publish/2019/05/30/the-future-of-adobe-air.html#gs.9u1nng