PAGE 43 Chapter 4 Animating Symbols and Mask Create Motion Tween Motion tween is a newer way of animating in Animate. It best to used to animate movement, rotation, size and color effects. Motion tween also can be used to create motion on a curve line as well. Use oval tool ( Press O key) and draw a ball shape on stage. Select the shape, right click. Choose convert to symbol. 1. 2. 3. Change name to : Ball. Choose type : Graphic Figure 4.19 Give name to the symbol 4. Right click at frame 20 and select Insert Blank Key frame ( or hit F7). 5. Hold shift key, double click at key frame 1 ( to select the hold frame). Figure 4.20 Insert frame to timeline
PAGE 44 Chapter 4 Animating Symbols and Mask Create Motion Tween 6. Right click in between the key frame, choose Create Motion Tween 7. Click on frame 10, move the shape to down. A blue line will appear to indicate the motion. Blue line Figure 4.21 Create motion tween Figure 4.22 A blue line appear to indicate the motion (continued)
PAGE 45 Chapter 4 Animating Symbols and Mask Create Motion Tween 8. Click at frame 20, bring the shape up 9. Bend the line to create the shape like below by point your selection to the line, until you saw a curve line and drag the line. 10. To view your movie, press Ctrl + Enter. Or go to Command -- > Test. Figure 4.23 Create a new position to the ball Figure 4.23 Create curves to the motion (continued)
PAGE 46 Chapter 4 Animating Symbols and Mask Create Shape Tween Shape tween as it named not just differently change the shape, but it is also can morph the color. Shape tween can only morph one shape on a single layer. If you want to have two or more shape tween simultaneously, use a multiple layer where each shape tween has their own layer. Create a new Animate file. On the empty layer, draw a shape use polygon tool. Click on Polygon Tool. On Tool Settings, click on Options as below : 1. 2. 3. Draw star shape on left stage 1.Click Polygon Tool 2. Select option 3. Syle: Star 4. Click OK Figure 4.24 Polygon tool Figure 4.25 Create star using polygon tool
PAGE 47 Chapter 4 Animating Symbols and Mask Create Shape Tween 4. Right Click on frame 30, insert blank keyframe. 5. Go to Tool Panel, select polygon tool. Click Tool Setting. Select polygon. Draw on right stage. 1.Click Polygon Tool 2. Select option 3. Syle: Polygon 4. Click OK 6. Hold shift key, double click at key frame 1 ( to select the span frame). 7. Right click in between frame and choose Create Shape Tween. 8. Test movie, press Ctrl + Enter. You will see the star tool will change to polygon tool. 9. Save your file as Shape tween.fla. Figure 4.26 Create hexagon (continued)
PAGE 48 Chapter 4 Animating Symbols and Mask Create Animation Guide In Adobe Animate, if you want the object to follow your path or animate object based on stroke, use animation guide (motion guide) to direct it. Set stage size with 800 x 600 pixels. Import a ball.png file to stage. Use free transform tool to resize the image. Position the ball at the bottom of the stage. 1. 2. 3. 4. Right click on Object Layer : Click Add Classic Motion Guide. 5. By holding shift key, click frame 40 on layer object and guide, right click --> insert frame. 6. Click Guide: Layer 1, choose Pencil Tool and set a proper properties for style and stroke size. Draw a path for the ball. Figure 4.27 Import bitmap to stage Figure 4.28 Import bitmap to stage Figure 4.28 Draw a guide
PAGE 49 Chapter 4 Animating Symbols and Mask Create Animation Guide 7. On layer object, click layer 40, right click --> insert key frame. 8. On layer object, click keyframe 1, snap object, bring to the beginning of line. Click keyframe on frame 40, bring the object to the end of line. 9. On layer object, between the keyframe 1 and keyframe 40, right click --> create classic tween. 10. Test your movie by press Ctrl + Enter. You will have an animation where your ball follow the path your created. Figure 4.29 Snap the ball and put the beginning of path at key frame 1. Figure 4.30 Snap the ball and put the end of path at key frame 40 (continued)
PAGE 50 Chapter 4 Animating Symbols and Mask Create masking in Animate You use mask layer to create a reveal of picture or graphic to the layer beneath it. To create a masking animation, assigned the layer as mask layer and draw an object or fill shape on that layer. You can use shape, text or a others symbol as a mask. The area covered with the mask will be shown, whereby the object that covered by mask will be visible. Use type tool and set stage color : Black. Font : Arial . Size : 30 and fill color : Yellow (#FFFF00). Type text : ADOBE ANIMATE IS FUN on stage. (This is what we going to reveal) Rename your layer as Text. 1. 2. Right click on text layer, insert layer. A new layer will added to timeline. Rename your layer as "mask object". 3. On the "mask object" layer, create a rectangle shape with no stroke. Fill the rectangle with pink color. Remember : the mask layer will not be appear in your final movie. Figure 4.31 Create a text layer in timeline Figure 4.32 Insert a new layer Figure 4.33 Create a mask object
PAGE 51 Chapter 4 Animating Symbols and Mask Create masking in Animate Name : Mask Type : Graphic 5. Select the rectangle shape, right click and convert to symbol. In the pop up box : 6. Now, it's time to Animate the symbol. Create a new key frame at frame 25 on the "mask object" layer. Scale the rectangle shape using free transform tool (press Q key). Stretch the rectangle until it cover the whole text. Figure 4.34 Convert the mask object to graphic symbol Figure 4.35 Move or slide the mask object to cover the text (continued)
PAGE 52 Chapter 4 Animating Symbols and Mask Create masking in Animate 7. Click in between the key frame on "mask object" layer, right click and choose classic tween. 8. To make the "mask object" layer as a mask, click the layer, right click, choose "Mask". 9. Test your movie by pressing Ctrl + Enter. Adjust your timing to fit your preference. 10. Save your file as Masking in Animate. fla. Figure 4.36 Assigned layer as mask (continued)
A button is one example of a symbol (other than graphic, a movie clip, or text) that you create once and stored in Library panel. The advantage is you can use it multiple times. It is stored in Library panel. There are four frames in button symbol timelines: Up, Over, Down, and Hit. You can apply filters, blending modes and color settings to the button. You can refer the explanation of each four frames of button in Chapter 3. Chapter 5 Creating Interactive Navigation Creating Button and Animate Button Building Shape Changing Button 1. Create a basic button by choosing Insert --> New Symbol or hit Ctrl + F8. 2. In Create New Symbol dialog, fill in the name. For example 'ChangeBtn'. Then, choose Button in Type menu. Click OK. 3. A new symbol button will be appeared in Library Panel as shown below. PAGE 53 Figure 5.1 Insert New Symbol Figure 5.2 Create New Symbol Figure 5.3 New Symbol Button in Library Panel
Chapter 5 Creating Interactive Navigation 4. You will automatically enter in symbol editing mode as shown below: 5. You will also see the Timeline contains with Up, Over, Down and Hit frames. 6. Hit Shift + click to select Over, Down and Hit Frame. Then, right click mouse and choose Convert to Blank Keyframes. 7. The Timeline will be filled with blank keyframes as shown below: PAGE 54 Building Shape Changing Button (continued) Figure 5.6 Convert to Blank Keyframes Figure 5.4 Symbol editing mode Figure 5.5 Button Timeline Figure 5.7 Blank Keyframes in Timeline
Chapter 5 Creating Interactive Navigation 8. Select Up keyframe and then create a Rectangle (or any shape that you want) to fill in the Up frame. 9. Repeat step 8 for Over and Down keyframes with different shape. For example, star and pentagon shape (using star tool). 10. Hit state is the situation where area responds to the mouse click. In order to add Hit graphic, you can create any preference shape for example circular shape and then cover all areas of buttons in Up, Over and Down state. 11. You can turn on Onion Skin by click on Onion Skin icon as shown below or press Shift + Alt + O to see whether you place the circular shape to the entire area that you need to cover. 12. You can see the silhouette of the shape as you turn on Onion Skin. PAGE 55 Building Shape Changing Button (continued) Figure 5.8 Rectangle shape in Up frame Figure 5.9 Turn on Onion Skin Figure 5.10 Silhouette of the shape when Onion Skin is turn on
14. You can drag the button from Library panel onto the Stage. 15. To preview the button on Stage, select Control --> Enable Simple Buttons or choose Control --> Test Scene (Ctrl + Alt + Enter) to test the scene. Chapter 5 Creating Interactive Navigation 13. After you have done with all four frames in edit mode symbols, you can return to the main Timeline by click on Back button in Edit bar or choose Edit --> Edit Document (Ctrl + E). PAGE 56 Building Shape Changing Button (continued) Figure 5.11 Return to main Timeline (click Back button) Figure 5.12 Return to main Timeline (choose Edit Document) Figure 5.13 Enable Simple Buttons
Chapter 5 Creating Interactive Navigation Create Animated Button You have to know how to make button symbols in order to create animated button. Follow steps in Create Button Symbol subtopic (Chapter 3: Creating Symbols) to create the basic button. In this tutorial, you are going to create a mute button that will flash when user hover over onto it to mute the sound. 1. Create a mute button symbols as below or according to your creativity. To create this button, you have to group the speaker and 'X' graphic symbol by using group menu (Modify --> Group or press Ctrl + G). 2. Double click on the button to enter symbol editing mode as shown in below figure. You can change the color of the button in Over state. 3. If you double click the button symbol, you will enter into group mode as the graphic is group together (as stated in Step 1). 4. Return to symbol editing mode by clicking on MuteButton name. 5. On Over state, change the graphic into movie clip by click on Modify --> Convert to Symbol. PAGE 57 Figure 5.14 Create mute button Figure 5.15 Symbol editing mode Figure 5.16 Change button color in Over state Figure 5.17 Group mode Figure 5.18 Return to symbol editing Figure 5.19 Convert to Symbol
Chapter 5 Creating Interactive Navigation 6. In Convert to Symbol dialog, fill in the name. For example 'mcMuteFlash'. Then, choose MovieClip in Type menu. Click OK. 7. Double click on the movie clip to enter movie clip editing mode as shown in below figure. 8. From frame 1 until 10, maintain the color of symbol to red. Click on frame 10, and press F5 to insert frame or right click on your mouse and choose Insert Frame or Insert --> Timeline --> Frame. PAGE 58 (continued) Create Animated Button Figure 5.20 Convert to Symbol - Movie Clip Figure 5.21 Movie Clip Editing Symbol Figure 5.22 Insert Frame (right click mouse) Figure 5.23 Insert Frame (from menu bar)
Chapter 5 Creating Interactive Navigation 9. In frame 10, press F6 or right click on your mouse and choose Insert Keyframe or Insert --> Timeline --> Keyframe. 10. Double click on the symbol to enter into Group mode. 11. Then, change the color of the X symbol according to your preference. For example, black color. Double click on symbol PAGE 59 (continued) Create Animated Button Figure 5.24 Insert Keyframe (right click mouse) Figure 5.25 Insert Keyframe (from menu bar) Figure 5.26 Group Mode Figure 5.27 Change button color
Chapter 5 Creating Interactive Navigation 12. In frame 20, repeat step 8 to insert frame. Now your timeline should look like below figure. 13. Return to Scene mode by clicking on Scene name or on the Back button in the Edit bar. 14. You can test the Scene by press Ctrl + Enter and you will see that the mute button will be flashed when you hover over on it. (the X symbol will change color from red to black). Don't forget to save your file. This e-book only focuses on ActionScript version 3.0. In order to use AS 3.0, you must select ActionScript 3.0 in New Document setting. Understand ActionScript 3.0 PAGE 60 (continued) Create Animated Button Figure 5.28 Frame in Timeline Figure 5.29 Button flashed when mouse over onto it Figure 5.30 New Document setting
Exploring the Actions Panel 2. The Actions Panel has two main area as shown below: i. Script Navigator - assembles the ActionScript that you type in . ii. Script Pane - displays the lists of attached script . It allows you to navigate and view the scripts. Chapter 5 Creating Interactive Navigation 1. Choose Windows --> Actions or press F9 (Windows) or Option+F9 (Mac) to access the Actions panel. Script Pane Script Navigator Pin Script Insert instance path and name Find Format Code Code Snippets Help Add using wizard PAGE 61 Figure 5.31 Actions panel Figure 5.32 Actions panel area
3. The Actions Panel contains has several features that ease you in writing the ActionScript. Pin Script - Allows you to open pin tabs of individual scripts into a new Script Pane. It is useful if you fail to remember Instance Name that you have declared in Properties Inspector. This feature also allows you to use multiple scripts. Insert instance path and name - This feature allows you to find the path to an object. Find - It finds and replaces text in a limited section of your script. Format Code - It is useful to format the code for legibility purpose. Code Snippets - Opens code for the interactions in a new Code Snippets panel. Help - Allows you to get information of ActionScript in Animate. Add using wizard - Add actions using an easy-to-use wizard instead of writing code. Chapter 5 Creating Interactive Navigation ActionScript Syntax to group operations so that it can change the order of operations in an expression. parentheses with the comma operator (,) used to separate series of expressions and return the result of the final expression. to pass parameters to functions or methods. Dot . - to link between the properties and methods of an object. Semicolon ; - indicates the termination of a statement. Braces { } - a group of statement that belong together. The opening curly braces must pair up evenly with closing curly braces. Parentheses ( ) - group arguments; apply to an ActionScript statement. It can be used as following: Brackets [ ] - syntax for arrays, variables that can store multiple values. PAGE 61 Exploring the Actions Panel
Chapter 5 Creating Interactive Navigation Creating Scene to Scene Add or Remove Scene 1. Open a new document and open the Scene panel (Window --> Scene). 2 Click Add Scene to create a New Scene. 3. Click the Duplicate Scene icon to duplicate existing Scene. 4.To delete a Scene, click the Scene name in the Scene panel, then click Delete Scene icon. Add Scene Delete Scene Duplicate Scene PAGE 62 Figure 5.33 Open scene panel Figure 5.34 Add, duplicate and delete scene
Chapter 5 Creating Interactive Navigation 5. To begin scripting, create a file contain with two layers: Frames and Actions. Layer frame will contain with keyframe in the first frame of layer. While Actions layer contain with stop action that will make the movie pause. 6. Right click on the Action layer and choose Actions. Then, add following script to pause the movie: stop( ); 7. Do the same with all your scenes (for example Scene 1, Scene 2 and Scene 3). 8. Go to Scene 1 and select Insert --> New Symbol. PAGE 63 Add Scripting Figure 5.35 Create layers Figure 5.36 Add ActionScript Figure 5.37 Insert New Symbol
Chapter 5 Creating Interactive Navigation 9. Select button and name it. E.g. ; Mula, Warna Lampu, Peraturan (or whatever you want to). 10. Create a button. You can even import a GIF, JPG, BMP, or any image file. 11. Drag all of your buttons to the main scene. 12. Insert new layer in Timeline and name it as Actions. 13.Go to the “Actions” window (F9) or right click on Actions layer and select Actions. PAGE 64 Add Scripting (continued) Figure 5.38 Create New Symbol - Button Figure 5.39 Create a button Figure 5.40 Insert buttons in the scene Figure 5.41 Insert new layer
14. Write down the following code: start.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { gotoAndStop(1, "MENU"); } Chapter 5 Creating Interactive Navigation Event Source Event listener function name Code for response 15. Here's the explanation of completed code used above. Instance name is a unique ID that use to refer to an instance in ActionScript. You can give instance name in Properties Panel. Note that instance name can be case sensitive. It is advisable that you do not give the instance name that start with a capital letter. Use _ if you want to separate two different words. Otherwise you can just combined the two words together. Function is a block of code that can be invoked in ActionScript. The statements inside the function will be performed once the function is executed. You must use different function name each time. Event refers to a specific occurrence that can cause an action to happen. Event listener must be registered to the event source so that it will know the right moment to execute when the specified event occurs. For example a mouse click or press a keyboard. PAGE 65 Add Scripting (continued) Figure 5.42 start: <Instance name> Figure 5.43 MENU: Scene label Figure 5.44 ActionScript in Actions panel
Creating a Simple Quiz Chapter 5 Creating Interactive Navigation After you have understand about basic ActionScript explained before, now you are going to learn on how to create simple multiple choice quiz by using button symbol. 1. Create a question using Type tool. 2. Create four buttons that represent each of the answer. (A, B, C and D) and two other buttons (Next - to go to next scene and Try Again - allow user to answer the question again) . 3. Place all the buttons on stage. 4. Give them the instance names as following: answer1 _btn - represent A button answer2_btn - represent B button answer3_btn - represent C button answer4_btn - represent D button next_btn - represent Next button tryagain_btn - represent Try Again button Next button Try Again button Right answer movie clip Wrong answer movie clip Answer button (A, B, C and D) Part A: Create buttons PAGE 66 Figure 5.45 Multiple choice quiz
Chapter 5 Creating Interactive Navigation 1. Create two movie clips - a smiley face for positive feedback and a frowny face for negative feedback. 2. Place both of movie clips on the stage. 3. Give instance names for each of movie clips: rightanswer_mc wronganswer_mc 1. Insert a new layer in Timeline and name it as Actions. 2. Add the following script in frame 1 of the Actions layer: 3. ActionScript shown above cause the movie clip and button hidden until needed. 4. To allow users click the button, you have to add listeners to the clickable buttons (answer options including 'next' and 'try again' buttons). 5. Then, write the functions that the listeners above are calling. Part B: Create Movie Clip Part C: ActionScript PAGE 67 Creating a Simple Quiz (continued) Figure 5.46 ActionScript to hide button and movie clip Figure 5.47 ActionScript to add listeners
Chapter 5 Creating Interactive Navigation 6. All the buttons call a function named as below when clicked. 6. Note that the visible value setting to false or true will make the object hidden or unhidden. 7. Test the scene by choosing Control --> Test Scene (Ctrl + Alt + Enter) or hit Ctrl + Enter to test movie. PAGE 68 Creating a Simple Quiz (continued) Figure 5.48 ActionScript to call function name
Chapter 6 Working with Sound and Video Importing sounds Adobe Animate allow user to add sounds to enhance multimedia elements. User can add several sound formats such as WAV, AIFF, MP3, Sound Designer, Sun AU, FLAC or Ogg Vorbis. You can import sound to library or stage in order to add sound file format into your project. 1. Select File --> Import --> Import to Stage (Ctrl + R). or 2. Select File --> Import --> Import to Library PAGE 69 Figure 6.1 Import sound to stage Figure 6.2 Import sound to library
Chapter 6 Working with Sound and Video Either you choose Import to Stage or Import to Library, both of these command will brings you to Import dialog window. 3. Select the sound file that you want and then click Open. Note that you can view all sound files in the import dialog (as shown below). 4. You can choose only one file format by clicking the specific file as shown below. Choose file format PAGE 70 Importing sounds (continued) Figure 6.3 Select sound Figure 6.4 Choose file format
Chapter 6 Working with Sound and Video 5. Then, an import progress bar will be shown as below. 6. If you select Import to Stage, the sound will be appeared in the Timeline layer and Library panel. 7. However, if you choose Import to Library, the sound will be only appeared in Library panel as shown below. If you select the sound, the waveform appears in the Preview window. 8. You can click on Play or Stop button in Preview window to hear or stop the sound (as shown above). or Play and Stop button PAGE 71 Importing sounds (continued) Figure 6.5 Importing progress bar Figure 6.6 Sound in Timeline Figure 6.7 Sound in Library panel
Chapter 6 Working with Sound and Video 9. Right click on the sound file and then choose Play. Right click again on the sound and choose Stop to stop the sound. Placing Moving and Clipping Sound You can also add sounds to button for auditory feedback purposes. By using button created in Chapter 3, you can add a click sound through Up, Over, Down or Hit state by following below steps: 1. Open file containing a button symbol --> go to Library panel --> select the button symbol that you want to modify --> Right click on the button name --> choose Edit. Adding Sounds to Button PAGE 72 Importing sounds (continued) Figure 6.8 Play and stop sound Figure 6.9 Modify symbol
Chapter 6 Working with Sound and Video 2. Adobe Animate will open the symbol in editing mode. See the hierarchy of timeline on left top of the stage. 3. Add a new layer in the button Timeline. 4. Rename the layer as Sound. 5. Right click on Over frame and then choose Insert Blank Keyframe. PAGE 73 Adding Sounds to Button (continued) Figure 6.10 Symbol editing mode Figure 6.11 Add new layer Figure 6.12 Rename layer Figure 6.13 Insert blank keyframe
Chapter 6 Working with Sound and Video 6. Assign sound that you have import into library to the stage. You will see waveform appeared on Over frame. 7. In Properties panel, maintain the default Sync sound setting into Event. 8. Return to scene timeline. Then, choose Control --> Enable Simple Buttons to hear the button sound. PAGE 74 Adding Sounds to Button (continued) Figure 6.14 Sound in Timeline Figure 6.15 Sound sync setting Figure 6.16 Enable simple buttons
Chapter 6 Working with Sound and Video There are four sync sound settings in Adobe Animate: Event, Start, Stop and Stream. Event - default sync setting. The music will keep playing even the main timeline animation stops. The drawback of using event setting is it can potentially overlap if using longer sounds. Start - similar as Event, except that it will not start playing until other instances have finished playing. Stop - stop playing the selected sound. Stream - stream sounds allow user to hear real-time audio. The disadvantage of using stream is if you play it in preview video, it is in lower quality because it constantly stream it. Sync Sound Setting Create a Sound On/Off Button In this tutorial, you are going to learn on how to create mute and unmute button. Let say that you already import sound button that you have created in "Create Animated Button" section in "Chapter 5: Creating Interactive Navigation" onto the stage. Rename the layer as MuteBtn. Then, you need to add another layer to place audio on it. 1. There are three ways to add a new layer: i- Insert --> Timeline --> Layer ii- Click on New Layer icon in Timeline tab. PAGE 75 Figure 6.17 Insert layer Figure 6.18 Insert layer (click on icon)
Chapter 6 Working with Sound and Video iii- Right click on MuteBtn layer --> choose Insert Layer. 2. Rename the layer as Sound. Now you already have two layers in your Timeline. 3. Click on Sound layer, then import the audio onto Stage by following step 1 -6 in the section "Importing Sounds". 4. In frame 100 (or any value you want), select both of the layers and then insert frame by hitting F5. 5. Click mute button on the Stage, go to Properties panel and then give Instance Name as muteBtn. PAGE 76 Create a Sound On/Off Button (continued) Figure 6.19 Insert layer (right click mouse) Figure 6.20 Rename layer Figure 6.21 Button properties
Chapter 6 Working with Sound and Video 6. Add another layer and rename it as "Actions". 7. Go to the “Actions” window (F9) or right click on Actions layer and select Actions. 8. Write down the following code: 9. Here is the explanation of the code above: "vol" refer to the volume which is on 0 to 1 scale. Variables of type "Boolean" is a data type that can have one of two values, either true or false. The default value is false. Conditional Statement (if.. else) is used to test equation whether true or false. If the statement is true, an event happens. While if the condition is false, it would do a different event. The if statement stated that Mute = false indicates that the sound will be played and return 1 (true). In else statement Mute = true, since it is false (0), the sound will be muted or off. PAGE 77 Create a Sound On/Off Button (continued) Figure 6.22 ActionScript for creating on off sound
Chapter 6 Working with Sound and Video Incorporate Video in Adobe Animate Import video in Adobe Animate is similar to the process importing sound. But, before importing video, you have to keep in mind that there are specific video format that can be played in Animate such as FLV, F4V, and MPEG. 1. To import a video, select an empty layer and then choose File --> Import --> Import Video. 2. An Import Video window will be appeared as shown below: PAGE 78 Figure 6.23 Import Video Figure 6.24 Import Video setting
Load external video with playback component - It is the default option. It will put the video inside a player with a controls like a play or pause button together with volume settings. Deployed to a web server, Flash Video Streaming Service, or Flash Media Server - nearly similar with 'load external video with playback component' except instead of using a video that stored on your computer, it uses a video that been uploaded to a special server on the internet. Embed FLV in SWF and play in timeline Embed H.264 video in timeline There are different import options in the Import Video pop-up window: Both of the options explained above are useful for interactive projects such as applications or websites. However, the video is loaded into separate player. Thus, it does not sync with the timeline and not suitable for animation specific projects. These two options allow you to embed video in the timeline. These options works well for animation purposes because each frame of the video is put on the frame on the timeline where you can scroll through the timeline and look at the frame individually. FLV and H.264 are video codecs. It is recommended to use H.264 because FLV is old version file format and Adobe already stop supporting it. So if your video is in .mp4 or .mov, it might already using the H.264 coded. Chapter 6 Working with Sound and Video Import Video for Display in a Playback Component 3. Select the first radio button as in Figure 6.25 and then click on Browse button to locate your video file on your computer. PAGE 79 Figure 6.25 Import Video option
4. Select .mp4 or .mov file format as as it compatible with H.264 coded. Then, click Open. Chapter 6 Working with Sound and Video 5. The file path location that you have selected will be appeared underneath the Browse button. Then, click Next button. PAGE 80 Import Video for Display in a Playback Component (continued) Figure 6.26 Select video location Figure 6.27 Video path location Source by: https://www.youtube.com/results?search_query=road+safety+for+kids
Chapter 6 Working with Sound and Video 6. Skinning options will be appeared as shown below. 7. If you click on Skin drop down list, you will see a various list of skins that you can select. After you have made the selection, click on Next button. PAGE 81 Import Video for Display in a Playback Component (continued) Figure 6.29 List of skinning Figure 6.28 Skinning option
Chapter 6 Working with Sound and Video 8. The Finish Video Import will be appeared. Untick the checkbox 'After importing video, view topic in Animate Help' if you do not want to open it after importing video. Then, click Finish button. 9. The video will be placed on the Stage as below. Note that, like other object, you can resize, reposition or duplicate the video that you have imported. PAGE 82 Import Video for Display in a Playback Component (continued) Figure 6.30 Finish video import Figure 6.31 Video placed on stage Source by: https://www.youtube.com/watch?v=_NeEF1fwT4k
Chapter 6 Working with Sound and Video 10. Choose Control --> Test Movie --> In Animate to test the imported video. Import Video for Embedding 1. Follow step 1 and 2 in 'Import video for display in a playback component' section to import video. 2. For this tutorial, select 'Embed H.264 video in timeline' and then click on Browse button to search for video on your computer. (Note that the imported video using this method cannot be exported which means that it only can be used for reference while you are doing your animation). If you choose 'Embed FLV in SWF and play in timeline', you must ensure to select FLV format for the video. 3. Follow step 4 and 5 in 'Import video for display in a playback component' section. Note that you have to select .mp4 or .mov file format as as it compatible with H.264 coded. PAGE 83 Import Video for Display in a Playback Component (continued) Figure 6.32 Test movie Figure 6.33 Embed H.264 video
your video might be too long (Adobe stated that the maximum length cannot exceed 16000 frames or roughly 11 minutes for a 24 frame per second video) or if your video length is shorter, you can cut the video and then import the video separately. timing and sync issues. It is advisable that you match the frame rate of your video with frame rate of your project. You can check the frame rate in Properties panel. If you try to select a video that is not H.264, an error message will be appeared. In this case, you need to click on 'Convert Video' button to convert with Adobe Media Encoder. At this point, you might encounter with these problems: 4. Then, several options appeared on how you would like to embed the video. Chapter 6 Working with Sound and Video 5. If you click on Symbol type drop down list, you can see three different options as below: PAGE 84 Import Video for Embedding (continued) Figure 6.34 Symbol type in embedding Figure 6.35 Symbol type selection
Embedded Video - the most suitable method if you want want to import the video in Timeline. Movie clip - allow you to write on a piece of code or add interactive elements Graphic - give you more control on the playback of the video which let you select starting point of video or cut the video up. 6. For this tutorial, select Embedded Video. 7. There are 3 options provided in checkbox list below: Chapter 6 Working with Sound and Video Place instance on stage - the video will be placed on currently selected layer on the Timeline. Expand timeline if needed - automatically add frames to the timeline to suit with entire length of video. Include audio- you can untick this option if you do not want to include audio in your video. 8. Click on Next button after you finish selecting those options. 9. The Finish Video Import will be appeared. Untick the checkbox 'After importing video, view topic in Animate Help' if you do not want to open it after importing video. Then, click Finish button. PAGE 85 Import Video for Embedding (continued) Figure 6.36 Options in Embedded Figure 6.37 Finish video import
You can resize, reposition or duplicate the video that you have imported as mentioned before in 'Import video for display in a playback component.' 10. Click Play button in Timeline or press Enter. You can see each frame individually in the Timeline as explained before. Chapter 6 Working with Sound and Video Play icon Video frame 11. You can give Instance Name in the Property panel or make any modifications according to your preference. PAGE 86 Import Video for Embedding (continued) Figure 6.38 Video on stage Figure 6.39 Video properties Source by: https://www.youtube.com/watch?v=_NeEF1fwT4k
1. You can find all of your imported video in Library panel. To rename the video file, right click on the video name --> choose Rename or click on the video name and fill in the new name in the Name text field. Chapter 6 Working with Sound and Video Rename, Replace, Swap and Update Video 2. You can also replace the video by clicking on Import --> navigate to the file that you want to replace with the current clip. Then, click Open. 3. If you want to choose different video, click the video on the Stage, go to Properties panel and click on Swap button as below figure: PAGE 87 Figure 6.40 Rename video Figure 6.41 Fill in new name Figure 6.42 Swap video Source by: https://www.youtube.com/watch?v=_NeEF1fwT4k
Chapter 6 Working with Sound and Video 6. A Video Properties window will pop up. Choose Update and then click OK. 4. Choose the video that you want to swap with the previous video. Then click OK. You can see that it maintain the position and size of the video. 5. Note that if you make changes of the video outside of Animate, and you want to update the video in your project, you can right click on the video name in Library Panel --> choose Properties. PAGE 88 Rename, Replace, Swap and Update Video (continued) Figure 6.43 Choose video to swap Figure 6.44 Video properties Figure 6.45 Update video Source by: https://www.youtube.com/watch?v=_NeEF1fwT4k https://www.youtube.com/watch?v=67ZkzNRnxfo Source by: https://www.youtube.com/watch?v=_NeEF1fwT4k
Chapter 7 Publishing Once you have completed your project and fully tested it, you have to publish the document. Publishing in Animate means that exporting your document into a form that can be delivered to audience. There are numbers of different type or format that you can select in publishing the document according to your preferences. Publish your file to Flash (.swf) and HTML allow you to play Animate content in web browser. Users can open and run the SWF file on their computer only if their computer install with Flash Player. However, Adobe does not supported Flash Player anymore after December 31, 2020 (End of Life Date). In addition, since January 12, 2021 Adobe also blocked Flash content from running in Flash Player. It is advisable that you uninstall Flash Player from your computer as it will help you to protect your system since Adobe does not provide security update after EOL Date. Also note that major browsers including Google Chrome and Mozilla are not going to support Flash Player starting on 2021. As mentioned earlier, there are various publish settings in Animate including HTML5 Canvas document, SVG files, WebGL document and AIR applications. However, in this tutorial, you are going to learn on publishing content for AIR for desktop and Android. About Publishing PAGE 89 About Adobe AIR AIR stands for Adobe Integrated Runtime is a cross-operating system runtime, which enables developers to combine HTML, Ajax, Adobe Flash, and Flex technologies to run on a system or devices such as desktop computers, netbooks, tablets, smartphones, and TVs without Internet connection. In Adobe Animate CC 2018, you can choose either AIR 2.5 or Air 26.0 for Desktop if you want to publish for desktop. However, if you want to publish the content for Android, then you need to choose Air 26.0 for Android.
Chapter 7 Publishing Download and install the Adobe AIR runtime in your phone Bluestacks is an Android emulator that you can download on your PC and your MAC. It can be used to run Android apps on your desktop. There are several options for emulator but Bluestacks is chosen in this tutorial. 1. Check your Windows Specification by click on the Start button --> Settings --> System --> About. 2. You can download Bluestacks according to the version: https://www.bluestacks.com/bluestacks-5.html? utm_source=Google&utm_medium=CPC&utm_campaign=aw-ded-ww-tier3-engbluestacks5- brand&gclid=CjwKCAjw_JuGBhBkEiwA1xmbRW4J23vofBxiSmYzkZrA4Ih_mhH7EhvNTCuYmpBuIjUbAZeDsxlQRoCrbgQAvD_BwE 3. Then, install it into your phone. 4. You will see icon will be appeared on your desktop . Download and install Bluestacks on your desktop or laptop You can download and install Adobe AIR in your phone as a preparation before installing .apk file into it. As Adobe are not providing AIR runtimes since the end of 2020, so HARMAN, (a Samsung company) is being responsible to provide AIR runtime and SDK. You can visit https://airsdk.harman.com/download to download Full AIR SDK. However, if you do not installed AIR runtime in your phone or other Android device, you will automatically received a notification to install the runtime through Play Store. But, if you already have the runtime in your devices , you can install any application from Play Store or if your devices allowed the installation of apps from unknown developers (you may change the setting in your devices by your own), you can copy the application into your devices and install it anyway. PAGE 90
Chapter 7 Publishing Publishing to desktop publication PAGE 91 1. Open your document. 2. Select File --> Publish Settings. 3. In the Publish Settings window, click on drop-down list and select AIR 2.5 or Adobe AIR 26.0 for Desktop as the target type . Figure 7.1 Publish settings Figure 7.2 Publish settings options