Hello everyone, and welcome to this new video tutorial brought to you by aro media. In this video, we will learn how to create simulation in Flash. Such flash video simulations are mainly created for eLearning. In this we will imitate the behavior of a program especially for the purpose of training. So let's find out what exactly this means. We are provided with some of the screenshots of which we are supposed to create a simulation.

This is that folder with total 45 screenshot images. These are the screenshots of an already created program. One by one, check them all if they are in sequence or not all I find on the internet sequence. So, coming back to flash, click to get a new Flash file. Here in document properties, we see the default dimensions of 720 by 576 pixels with 25 frame rate. But especially for this file, we will modify the dimensions to 850 by 600 pixels.

Click ok. Go to File Menu, save and save the file as simulation at your desired path. Name the default layer as images. create one more layer and name it mask. We need one more layer below the mask layer as an arrow on which a flash cursor arrow will get animated using motion twin For the interactivity in the presentation, now, go to insert new symbol. To create a new symbol for the images we need to import. Select the behavior type as graphic, and name it as images.

Flash directly displays the images symbol stage. Name this layer also as images. Select the blank keyframe and go to File menu. Input input to stage, open the folder path where we have saved our 45 screenshots. As all their names are in the same sequence, we need to just select the first image and click Open. Here comes a question panel asking this file appears to be part of a sequence of images.

Do you want to import all of the images in the sequence as we need all 45 images To be imported, we select Yes. Here, you will notice that one after one, all 45 frames are filled with fortify image keyframes exit to main scene. Here we won't see any of the images as the images symbol is directly saved into the library. To get them on the stage, press Ctrl plus L to open the library. We see a lot of images in the library openly placed. So to organize the library properly, create a folder inside it and name it graphic.

Add one more folder and name it images. But this images name is already provided to the graphics in ball present inside library. So flash suggests us use a different name for this folder. we rename it as screenshots Now, grab all 45 image files in the library and drop them inside the screenshots folder as seen in the video. Then select the images symbol and shift inside graphic folder. Now, on this images blank keyframe, drag the images graphics in ball on stage.

Close the library and press Ctrl plus k for the Align panel. Select the image on stage and get it center aligned using this align panel. When we put the images layer in outline mode, we see the image size is bigger than the original document size. From the Properties panel, change this graphic symbols behavior from loop to single frame. We will use this mask layer now. also put this mask layer on outline mode and pick any design add color for the mask.

Take a rectangle tool and draw a stage size rectangle. Remove the mask rectangle outline and from the Properties panel, resize the rectangle to the exact state size that is 850 by 600 pixels. Select this rectangle again and get this also center aligned from the Align panel to fit exactly on the stage area. Now, right click on this mask layer and select mask to view the images that are exactly the size of the mask. Drag this images layer into mask. To preview the mask area we have to lock all the layers under the mask effect.

So this is the total area we can view in the output. Unlock the images layer and extend it to 30 frames shift this image to join the left bottom corners of the image and mask. About the image layer, add a new layer. Rename the images layer as image underscore 01 and the new layer as image underscore 02. Now, hold the Alt key and duplicate the layer image underscore 01 frame on image underscore 02 and frame number 25. And on the 25th frame, create a blank keyframe on the first layer.

Select the second layer frame and go to the Properties panel. It's already in single frame type. So just change its numbering to to to display the second screenshot of that symbol on this layer, add some frames in the timeline. On screen you can observe a small change in the two images. We need to animate this in such way that it displays on screen in real time. So, insert a keyframe at frame 40 and apply motion tween between the keyframes.

On the first key of the second image assigned zero alpha value. Now that takes feels like it is appearing on stage, we have started arranging the images. At the same time, we would need the arrow actions on the stage. Open the library. Here you see we have kept ready some of the cursors graphic symbols in the library. Arrow, click cursor and highlight our different states of the cursor.

Those are together placed in one single graphic symbol named as arrow, frame by frame we can find them here. Double click on this state The cursor and see it's a click symbolic and animation is done here which can be used where the cursor is clicked on the stage. Next are some of those dates of the cursor which are used in the program that we are going to demonstrate. Come back to the main scene. Drag this arrow graphic symbol on the stage on the arrow layer. Extend the arrow layer and modify its behavior to single frame in the Properties panel.

We can modify its number as per different cursor needs on stage. Select the cursor and get it also centered aligned to the stage. Now, we will show the cursor appearing on the stage. Insert a keyframe at frame 10 and create motion tween between the first two keys of the arrow layer. Select the arrow on the first key and assign zero alpha value to it. The arrow is now appearing on stage.

Next, insert one more keyframe at frame 20 and then add frame 31. Right click and create motion tween between these keys. Shift the arrow of the 31st frame to the start label of the image. create one more keyframe at 33. And from the Properties panel change its numbering to two. We are creating a scene just like how Windows is actually operated and cursor changes take place on its every different action.

Here. As the cursor reaches the start label, it changes to hand cursor and image change takes place. Add a new layer in the timeline and name it has arrow underscore 02 Drag and duplicate the earlier arrow frame on a new arrow underscore zero to layer on the 48 frame number. At the same 48 frame, create a blank keyframe on the earlier arrow layer. Adjust the frame durations. On this new arrow keyframe, change its frame numbering to three.

We want to show an animated cursor of the click symbol. Zoom in towards it and have a look. From the first a normal cursor comes towards the start label. Then it changes to a hand cursor. At the same time the image change takes place smoothly. Then we want the cursor to click on it so the cursor graphic is changed.

Create a duplicate of the previous arrow frame on 58th position on the same layer and insert a blank keyframe at the same position of the arrow underscore zero to layer. Extend some of the frames. Insert one more blank keyframe at the same 58th position on the image underscore 02 layer and drag the duplicate of the image underscore zero to last frame on the first image layer on the 58th place. In short, along with the cursor change, the image change will also take place instead of adding different layers for each image change and cursor change. We are playing in just two layers for each image and reaction. different layers would have created a lot of chaos in the animation.

So to coordinate with them properly, we will alternatively place the image and arrow change in their first and second layers. This method will cut down all the costs confusion, which would have created because of number of layers in the timeline. Moving ahead in sequence, now we need to display the third image on the stage. So on a new keyframe, change the frame numbering from two to three. On click the All Programs panel is opened. Press Control plus Enter to view the animation done till now.

It seems fast. So let's extend the duration. Once the All Programs panel is displayed, the cursor should come to its normal position. So at the last keyframe, change the arrow frame number to one preview the animation again Insert the keyframes on the 99th and hundred and 15th position of the arrow layer on the hundred and 15th frame, shift the arrow on all programs text area, insert a new keyframe at frame 117. And here change the cursor numbering to two. It shows a hand cursor on the image underscore 01 layer create a blank frame at hundred and 17 and last frame of that layer is copied and dragged on hundred and 17 position of image underscore zero to layer here change its numbering to four.

This fourth image displays and shows that the All Programs text area is selected with a blue patch on it. Play NC right click and create motion tween between them. 99 and hundred and 15 frames for smooth motion of the cursor. Reduce the frame duration for fast motion. Press f7 and insert a blank keyframe on frame 127. Now, drag the duplicate of the keyframe at the 74th position of the arrow underscore zero to layer on the hundred and 27th position of same layer.

Keep extending the frames wherever needed. Create a blank keyframe at frame 137 and on the arrow layer, hold the Alt key to duplicate the hundred and 26th last frame to place on frame 137. Similarly, create a blank frame at frame 137 for the image underscore 02 layer and place its last frame duplicate on frame 137 of the image underscore 01 layer. Remember, we are working in only two layers of each arrow and image to reduce the confusion in the timeline. Here, change the image numbering to five to display the fifth screenshot. This opens the panel under the All Programs options in Windows.

Zoom in towards it to view it clearly. We are shifting the cursor at better positions at some keys as seen in the video. Drag and replace this keyframe on the 120 seventh frame. Change its numbering to three. Some things can be corrected only when viewed key by key. Duplicate the hand cursor on frame 137 and change the numbering to one for the arrow Now it looks fine.

Press Ctrl plus S to save your file, and then press Ctrl plus Enter to preview the file after changes. This is created to show how a program runs in real time. Close this and let's move ahead with animation. Come to the very first frames of the image underscore 01. Insert a keyframe at frame number 10 and create motion tween between first two keys. On the first frame shift the image partly below the masks bottom line.

So from the first frame, the taskbar gets animated and enters the screen. We have reached the point where the cursor clicks on the All Programs area. Now, extend the frames and create a blank keyframe. Frame 168 of the image underscore 01 layer. Then duplicate the previous layer and place it on the image underscore 02 layer at the same 168 frame. On this frame, change the frame numbering to six to view the sixth screenshot.

It shows that an additional panel is displayed. Observe neatly that part of this panel slightly goes out of the mask area. We need to adjust it from the previous image frame itself. So on the previous image frames, insert keyframes at 147 and 158. Right click and create motion tween between those keys. On this 158 frame, shift the image a little down as seen in the video.

Duplicate this frame and place it again on the 168 frame. match up with the new position, change its frame numbering to six. Now the image gets scrolled down, and the additional panel of the six screenshot gets properly seen on the stage. Extend the frames and add time duration in the motion tween as well. On frame 206, create a blank keyframe and using the same method, duplicate the earlier frame and place on frame 206 of the alternate image layer. Now we will first set all the images on stage.

Later, we will animate the cursor according to the image sequence requirements. Here, change the frame numbering from this image to seven and the seventh screenshot gets displayed. extended the frames some more and a blank keyframe is inserted onto 21 o'clock. of the previous image frame is placed on the image underscore zero to layer. On this change its numbering to eight. This screenshot shows that the program is initiating to open, but as per our state size, it got placed at the right top corner, we need to slide it towards the center.

So, create new keyframes at 231 and 237. Right click to create motion tween between those keys. On these 230 seventh frame, shift the image to set this program panel approximately at the center of the stage. Extend the time duration if you feel it's too fast. It's done. Press f7 to insert a blank keyframe at frame 259.

Drag the previous frame on alternate layers of the 250 ninth frame. Change the numbering from Properties panel to nine. We are speeding up as we are getting used to the process. But remember, for now, we are first placing all the images. Later, we have to work on the arrow layers to extend the frames and insert a blank keyframe at frame to a tee to copy the two at first frame and place it on the alternate layers. Same to at second position.

Properties panel is all time open. Change this frame numbering to 10. Every time we change the single frame numbering plus displays its relative screenshot saved inside the images symbol. We don't want any of these images to get pixelated in the output. To take care about it. Open the library and then the screenshots folder in which all the images files are located.

Double click on the bitmap image icon or right click on the image and select Properties. We get a bitmap Properties dialog box, we will make some changes here. Check allow smoothing option smoothing improves quality of the image when scaled, it doesn't get pixelated or disturbed. In the compression options choose lossless PNG or G if in this no data of the image is discarded, lossless compression is used for the images with simple shapes and relatively few colors. All 45 image properties will be modified with these quality settings. Allow smoothing should be checked and compression should be lossless PNG or G if when images are Done with the changes, close the library.

Move to the timeline and extend the frames. On this frame, the program is completely opened, but some of the writing part is going out of the screen. To manage it, insert the keyframes and frame 289 and 298. Right click and create motion tween between those keys. On these 298 frame, shift the image to match the left top corner of the program window to left corner of the stage area, or say mask rectangle. While playing we can see that the image positions are displaced as per their working areas.

Adjust the frame duration and create a new keyframe at frame 336. Drag this key on the layer below and create a blank keyframe on the current layer at same Frame 336. Here we need the 11 screenshot to be displayed. So change the frame numbering to 11. This is fine. No changes needed in the image size or placement.

So go ahead and press f7 at frame 366 of the image underscore 01 layer and drag the previous frame on the about there's 360 sixth frame. Once the image position is set on the next key, the next image is placed on the same position by default till we move it modify this image numbering to 12. On this image file, we see something tight in a box area. Press Ctrl Enter to export an SWF. This is how our work looks so far. At the end, it is typed project underscore 001.

We have the screenshot in which this text is already typed, but later, we will see how to show it being typed in that program. Total 12 screenshots are set on the stage area. Now before moving ahead with the 13 screenshot, we will animate the cursor graphics on the arrow and arrow underscore zero to layers. Place and check it carefully from where we have to start with the cursor action. We are on the arrow layer. Insert two new keyframes at frames 166 and 177.

Extend the frame duration and create motion tween between these new keys. On this new second key, shift the cursors position to Microsoft Office text insert new keyframe at 195 and change its numbering to two. To get a hand here we have to set the cursor actions according to image sequence. Remember, for the cursor actions also, we will be playing in just two layers alternately, arrow and arrow underscore zero to now, insert a blank keyframe at 200 and drag the previous frame on the 200th frame of the arrow underscore zero to layer. Here, change the cursor numbering to three to show a click animation. The 190 ninth frame was already copied on the same layers 200 and 10th frame change its numbering to one to get an arrow graphic extend those frames and insert keyframes at 219 and 229.

Right click and create motion tween in the middle of those keys in certain additional keyframe at frame 233. On this last key, shift the cursor to the text area, which seems selected in the next image file, and at this frame, change the cursor numbering to insert a blank keyframe at frame 239 where the image frames also aim for this screenshot. Drag the proceeding cursor frame and place it on frame 239 of the arrow underscore zero to layer. The next screenshot shows that the particular text area is detected with a blue patch. So we need the cursor graphic number three Here it's an animated cursor, which proves it's clicking on that text area. After the click is done, it will display a normal arrow.

So, on the 249 frame, change the cursor numbering to one as it has been clicked, that program initializing panel should display the very next frame. So reduce the frame duration here. When the program is opening up, there won't be any cursor movement. So move ahead in the timeline, and directly insert keyframes at frame 346 and 368 of arrow layer, right click and create motion tween here. Depending on the image, we understand exactly which action arrow should play on this 368 frame. The cursor will move towards the selected box area On this last key, change the cursor numbering to six.

Zooming towards the new cursor, and we can see exactly which graphic takes place. Change the cursor graphics as per the capture program requirements. Let's continue further. And the 398 image change takes place in which there is typed text in the box area. At the same 398 frame, create a keyframe on the arrow layer and vary its numbering to five. This is a different cursor used for typing text.

As I said earlier, now we'll see how to show an already typed text being typed. shift this keyframe to an earlier frame and insert a new keyframe at frame 401 as seen in the video For this key, change the cursor numbering to four, it's also a typing cursor, but use when typing is in process. We have to remember the sequence of the cursor graphics placed inside the arrow graphic symbol. Zoom in to work it out properly. shift this cursor at the left side of the textbox from where the actual typing will start. Assign motion tween between these keys.

Add a new layer above the image underscore zero to layer. Name this new layer patch. Create a keyframe exactly above the key of that screenshot. That is frame 404. Without outline, take a white rectangular patch Android about the text part as seen in the video. Use the sub selection tool and edit the notes to create a proper patch area about the text only.

Now, we will display the text letters key by key along with the cursor movement. Insert a keyframe at frame 407. Using the sub selection tool, move the left two nodes towards the right to display the letter P. Insert a keyframe on the alternate frame and shift the same two nodes of the patch to view the letter R. Insert the next keyframe on the alternate frame and again edit dispatch on this key to view the next letter O. Press f6 for the next keyframe and display the letter Z. With the same process, we will insert keyframes for all number of letters in the text and edit the batch on each key till it completely displays The project underscore 001 text. Now drag the timeframe.

It feels like the text is being typed on screen in that program. The text part is done, but the cursor will also move when each letter is tied. So on the arrow layer, create the keyframes at the same positions and shift the cursor ahead of each letter typed Once done, play the animation and see the effect. Using the keyframes we got the perfect typing effect. Rename this patch layer to patch underscore 01 and add a new layer above it as patch underscore zero to four here, copy the same patch underscore 01 first keyframe on the same frame 404. When we scroll the stage area in front of FX, we see the same project underscore 001 text being typed at the same time when we are typing the text below in the box.

So we'll have to create the same patch effect here as well place this patch under Score 02 white rectangle about that new text and the same key positions, insert the keyframes for this new patch and create the same effect using the sub selection tools nodes. Both the text should look like it is being typed at the same time. On each key, the succeeding letter should be made visible. On the last key, the batches completely shifted to the right side as seen in the video. Now when played, we notice that both the text are being typed at the same time. play this all from the very first frame of the timeline.

Just the frame duration wherever needed. Press Ctrl plus Enter to preview this in SWF. This shows an interactive simulation video in which a computer program working is presented. It is like creating a demo version of a program in Flash. Now let's place the next screenshot on the stage. This new image will be on an alternate layer image underscore 01.

So insert a blank keyframe at the end of the previous layer that is on frame 500. And drag the last image frame number 499 on the 500th position of layer below. To display the next screenshot, change its numbering to 13 in the Properties panel. In this image, we see one more text project underscore 002 added in the box area. That means we need to show this text getting typed on the screen. So we'll have to repeat the same process we did for the previous text to appear.

Duplicate the first keyframe of patch underscore 01 and place it on the 500 frame of the same layer. zoom into the screen towards the text area. On this new keyframe, shift this new white rectangular patch about the project underscore 002 text. Insert blank keyframes at the end of the previous text animation patch areas that is on the 498 frame. Duplicate patch underscore 02 layers first frame and get it on the 500 frame of the same layer. We are using the same layers for second text typing effect.

Get the duplicate of the cursor frame to show The typing cursor at the beginning of second text box. Now, key by key, we will repeat the same process. For both paths layers, insert keyframes at frame 505. Lock the image layer to not get affected while working on the patch with the sub selection tool. On second keyframes move to left sided nodes of the patch to display only the P letter as seen in the video. At the same time, insert a keyframe for the arrow layer as well and shift the current cursor ahead of the P letter.

We will keep adding keys on alternate frames for all three layers and edit the batch and the cursor position till it displays the complete project underscore 002 text. This text at both places should get typed at the same Time To display the last letter of the text at both places, we can even remove the keyframe of the patch layers as its role ends up there. we can directly press f7 and insert the blank keyframes here. Even for the previous project underscore 001 text, insert the blank frames on the last keys. Play and see how the second text is also seen being typed as an original program. So this is done now, extend the frames at the end to place the next image on the image layer insertable blank keyframe on frame 527 of the current layer.

Drag the proceeding frame on the alternate image layers, find 27th frame, select the image on that frame and change its numbering to 14 to get the 14th screenshot on stage. Nothing different, but we see the third box filled with the third text. In short, we are supposed to repeat the same previous process for this third project underscore 003 text to view it being typed. Duplicate the first key of patch underscore 01 and place it on the 27th frame of the same layer. shift this frames patch area over the project underscore 003 text. Now, copy all the keyframes of patch underscore zero to layer for the second text and place them from the fine 27th frame number So, we will have to edit just the patch underscore 01 layer frames, lock both the image layers to not get affected.

Start inserting the keys at the same interval on this patch layer. The same process is used for this text as well For the last letter, insert a blank keyframe. This also looks like it is being typed. The upper text patch is properly getting animated. Now, the cursor placement remains. Insert keyframes at the same intervals for this to, on this frame, shift the cursor to the left end of the box.

Then, keep shifting it key by key. Let's revise as seen in the video. Thus, this text is also done with the same process. Let's see all three text together. All three texts seem like being typed in real time. Now, it's time to get the next screenshot on the stage.

Press f7 on the 549 frame of the image, underscore zero to layer. Duplicate the previous frame and place it exactly below this blank keyframe. Open Properties panel and change image numbering to 15. We can see the change in the image 25,000 text appeared on stage exactly in front of the project underscore 001 text box. That means again, we will have to create this text typing effect for the 25,000 text. But additional animation will be needed for the cursor on the arrow layer Press f6 add the 550 first frame, and on this frame, vary the cursor numbering to five.

Now this cursor will move towards the new text box, insert a keyframe at frame 557 and create motion tween between those keys. On this last key, shift this cursor towards the new text box start point. Shift the keys of the images to begin at the same time when the cursor reaches the new position on the arrow layer, insert a new keyframe just next to the last key on this frame, change the cursors numbering to four to again get the same typing cursor graphics. Now, to show the same typing effect. We will repeat the same procedure for this new text. Copy the patch on the new key and place it exactly about The 25,000 text.

Create one more white rectangular patch for the patch underscore 02 layer and place it about the 25,000 text in front of effects as done earlier, start creating keyframes on the arrow, batch underscore 01 and patch underscore 02 layers at same positions. Log the image layers and start editing nodes key by key using sub selection tool. Also shift the cursor ahead of every digit getting typed For the last keys remove both the remaining patch areas. So 25,000 is also getting typed here. Going to add the next image on the image underscore zero to layer. So duplicate the previous image frame This layer at defy at first frame.

At same position, press f7. To create a blank keyframe on the image underscore 01 layer, extend the frames and change the image numbering to 16. Again, new text appears on screen, which is 23,800. Now, copy all the keyframes of the previous text on the patch underscore zero to layer and place it on the new positions of the new image. This trick will not make us work on that area for new text. automatically.

The text 23,800 is getting typed on the patch underscore 02 layer by reusing of the properties. Copy the patch keyframe for the patch underscore 01 layer and place this patch about the new tag even create a new keyframe for because and shifted at the start of the new text box. As per the patch underscore 02 keyframes insert keyframes for the arrow and patch underscore 01 at the same intervals, frame by frame. We will create the text typing effect here as well. Once we understand the technique, we can speed up in our work And it's done. For the next screenshot, drag the previous image frame from the image underscore zero to layer and place it on the 600 frame of the image underscore 01 layer.

Right here, create a blank keyframe on the image underscore zero to layer. On this new image keyframe change, its numbering to 17. And the next third amount appears exactly in front of the project underscore 003 text area. You must have understood till now that again we have to repeat the same procedure for the arrow and patch layers to get the same typing effect for this This new amount as well. And it's done to Let's view all the text keyframes together. All the text and amounts are seen being typed correctly at both places.

Now let's work as per the next image, extend some frames and insert a keyframe on the arrow underscore 01 layer. On this frame, change the cursor numbering to five while moving from one place to another different typing cursor takes place in this program, add another keyframe actually Frame 639 and on this key shift the cursor position on the box below the project underscore 003 text. Right click to create motion tween between those keys. The cursor is smoothly moving to its next position. Add frame 645. Add another keyframe and also change its numbering to for the cursor again change its state to typing mode.

On the same frame number, create a blank keyframe on the image underscore 01 layer. Get the earlier frame copied and placed on the same 646 frame number of the alternate image layer. On this frame, modify the images numbering to 18 and the 18 screenshot appears on stage. Here we get a new total text. That means this text should be treated with the same procedure we did with the earlier texts. So get the patch copied on this text to cover it all for its first key of the patch underscore 01 layer.

Get a patch for patch underscore zero to layer two. No key by key. start editing all three layers to get the typing effect So, total text is also getting typed effect. Now, let's get the next screenshot to display. Press f6 on 660 ninth frame on current image layer and drag it on image underscore 01 layer below it. Press f7 on same frame number of image underscore zero to layer.

As said earlier, we are using just two layers for images and placing every next screenshot frames on alternate layers. On this frame, modify the image numbering to 19 from Properties panel. Even if we change the screenshot, we won't see any changes in the image in this part. So scroll the image and find the change in programmes Properties panel, letter B is getting clicked. So let's start according to it, extend the frames and insert a new keyframe at frame 666 of the arrow underscore 01 layer on this key, modify the cursor number to one to get a normal arrow cursor. add one more key at frame 667 and create motion tween between these keys.

On the last key displays the cursor about the B letter. insert a new key at frame 683 on the arrow layer and change the cursor numbering to two to get the hand graphic. As the cursor reaches B, it changes to the hand cursor and at the same time B gets selected. insert new key frames at frames. 691 and 701 remove the frames from here and get the previous frame copied on the above arrow underscore zero to layer at 690 first frame number, press f7 on the 700 and first frame number. On this new frame of the cursor change its numbering to three, we get a click arrow symbol which is animated.

On the 700 and first frame again, change the cursor numbering to one which means after the click, the cursor comes to its normal state, but after a click, the image change should also take place. So come to the image layers and place the image frame on the alternate image underscore zero to layer. Press f7 at the end of the previous image layer on the images new frame change the numbering to 20 and the text Total becomes bold. Let's check the animation for this total part. The cursor changes the position and then the hand graphic comes and clicks on B. We are adjusting the image change frames.

Now the total becomes bold at perfect timing. Now the next part on the arrow underscore 01 layer, insert key frames and frames 737 and 748 on the 748 frame, shift the arrow position above the 25,000 amount right leg and create motion twin Add a new key at frame 761 and change its numbering to six. We get a new cursor here at the same frame number, press f7 on the image layer and drag the proceeding frame on the alternate image layer. Extend the frames, we slightly shifted the cursor position. On this new image frame, change the image numbering to 21. In this screenshot, the text 25,000 a scene selected.

Now, again, extend the frames and insert new keyframes at frame 771 and 785 of the arrow underscore 01 layer. Create motion tween between these keys and on the last key shift the cursors position below the second amount on the screen. Press f7 on the image layer and drag its proceeding image frame on the image underscore zero to layer. On this new frame, change the image numbering to 22. And second amount 23,800 also seems selected in the screenshot. That means our cursor position is absolutely correct.

In the next screenshot, we can guess that the third amount is going to be seen selected. So let's do it. Insert keyframes on frames 808 and eight to zero. Have the arrow underscore 01 layer. Insert motion tween here and shift the cursor below the third amount. Adjust the frame durations as per our choice.

Press f7 on the current image layer and duplicate the preceding frame on The alternate image layer exactly below the blank keyframe, as seen in the video. On this frame, modify the image sequence number 223. What we guessed was right in the screenshot, all the three amounts are seen selected. Now, on the image layer, press f7 at the end of the layer. Then, press f6 to insert keyframes at frames 864 and 876. On the second keyframe, shift the image towards the left and create motion tween between these keys.

Drag the frame of this new position of the image above the blank keyframe on the image underscore zero to layer on the arrow underscore 01 layer. Insert keyframes and frames 879 and 886 create motion tween between those keys to and shift the cursor position over the AutoSum sign in the above panel of the program. On this second key, change the cursor numbering to one to get the normal arrow graphic. Even on the tween first key, change the cursor numbering and get the normal arrow graphic here to insert a keyframe at frame 901 and change the cursor numbering to two to get a hand cursor graphic. also change the image numbering to 24 where the AutoSum sign gets detected. Insert two more keyframes and delete the middle frame from here.

Now, drag the previous arrow frame that is The 990 frame on the 900 and 10th frame of the arrow underscore zero to layer. On this frame, we need a clicking hand cursor, so change its numbering to three. On the image underscore zero to layer, press f7 for the blank keyframe and drag the preceding frame on the image underscore 01 layer. On this new frame value, the image is numbering to 25. This image shows a drop down menu for the AutoSum option. This drop down menu includes some average count numbers, max min and more functions.

In front of the total text, we own the sum of all three amounts. So we will create an action to select some from the drop down list. Slash And just the cursor positions on the previous frames. Now, insert keyframes on the arrow layer at frame 928 and 938. Create motion tween between these keys, and on the second key shift the cursor position about some option as seen in the video. Again, we have to click on this some so insert one more key.

Create one more keyframe at frame 943 and drag that key on the arrow underscore zero to layer at the same position, press f7 on the arrow underscore 01 layer. Adjust the frame duration and press f7 at the 950 fourth frame of the arrow underscore zero to layer on this arrow underscore zero to three Change the cursor numbering to three. On some, we get a clicking hand cursor. After click cursor change its numbering on next frames to one for the normal arrow cursor. The arrow part is done for this section, create a blank keyframe on the arrow underscore 01 layer and drag the preceding frame on the alternate image layer. On this frame, vary the image sequence numbering to 26 for the 26th screenshot.

This shows the description panel of this some option. Again change the numbering of the cursor to to observe how the image layers are being adjusted in the timeline. Create motion tween and gives zero alpha value to the previous images last key So, this description panel fields appearing on stage, we don't need this clicking hand arrow here. So remove it and extend the frames on the arrow underscore 01 layer. Now, move to the image underscore 02 layer and insert keyframes at 966 982 and 974. On this middle 970 fourth frame, shift the image towards left to view the description panel completely, which says display the sum of the selected cells directly after the selected cells.

We can see the mask area outline to adjust the image placement properly. Insert one mocchi at frame 980 and extend the frames as seen in the video. Now, right click and create motion tween between those keys. This shows that for some time duration, that description panel is completely visible to read the instructions on it. Now come to the arrow underscore 01 layer and insert keyframes at frames 979 and 1003. In the middle frames, change the cursor numbering to one.

We will notice that while the image is moving on the screen, the cursor turns to its normal arrow graphic, extend and adjust the frame durations wherever we need. Now, we need a clicking hand about the same option. So on the arrow underscore 01 layer, insert a blank keyframe and drag the previous key on the above arrow. underscore zero to layer on this frame, change the arrow numbering to three. After a click on some, again, the normal hand cursor appears here for next frames. On the image underscore zero to layer, press f7 for a blank keyframe on frame 1061.

Drag the same layers 1060 frame on the alternate image underscore 01 layer here, change this image numbering to 27. On screen, we notice that one new amount appears in front of total text. This 86,300 amount is the sum of the about three amounts. Here, change the cursor numbering to one to get a normal arrow cursor. Extend the frames and create two new keyframes at once. 074 and 1093 right click to apply motion tween between these keys.

On the last arrow key, shift the arrow cursor about this new amount at 6300. Once the cursor is inside the Excel sheet area, it changes its state. So, add one more keyframe on the arrow underscore 01 layer and change the cursor numbering to six. In parallel at the same frame position, press f7 on the current image layer and drag the preceding image frame on the alternate image layer. Change the image numbering on this frame to 28. In this screenshot, just the total amount is seen selected, we stretched some frames of image layers ahead.

Now, press f6 and insert two new keyframes on the current image layer. On this second key, shift back the image position towards the right to join the masks and the Excel sheets left border as seen in the video. Right click between these keys to apply motion to in same as total text. Total 86,300 amount will also be made bold. So add two new keyframes on the arrow layer. Create motion tween between these keys, and on the second key, shift the cursor above the bolts B letter in the program's Properties panel.

On both these tween keys, change the cursor numbering to one to get the normal arrow cursor here. This arrow is placed on the bolts B letter on the last key press f6 This arrow layer and just below it, press f7 on the current image layer. Get the previous image frame and place it on the alternate image layer. On this new image key, change the image numbering to 29. We see the B letters selected in this image. So change the cursor numbering to two for the hand cursor.

For the next screenshot, press f7 on the image layer and drag the preceding image frame on the alternate image layer. Extend the frame duration and change the image numbering to 30. In this screenshot, the total amount at 6300 A seen in bold, but the click on this B is missing. Let's add it add a new keyframe on the arrow layer at one to one four A blank keyframe at 1200. Now duplicate this 1100 99 frame and place it on the alternate arrow on the scale zero to layer just about the blank keyframe, press f7 on the 1200 and 14th frame. On these new arrow frames, change the cursor numbering to three to get the clicking hand about the B letter.

Now, the click amount goes bold on screen. Once the click is done, the cursor should again change to the normal arrow cursor. So on the 1200 and 14th arrow frame, change the cursor numbering to one extended frames at the end. Now, according to these screenshots, we will save the program file at a desired folder path. So let's start with it. Press f6 and insert keyframes on the arrow underscore 01 layer at frames one 234 and 1246 right click and assign motion tween between these frames on the second keyframe, shift this arrow over the Office button at the top left corner of the program file, extend some more frames and insert a keyframe at frame one to seven four of the same layer as seen in the video.

On this frame, modify the cursor numbering to to to get the hand graphic on the stage. Press f7 on the current image layer and drag the last image frame on the alternate image layer. Extend the frames some more. And here again change the image numbering as per the sequence that is 31. In this new image, the office buttons color is changed. Insert one more keyframe on the image layer at some Frame duration, and then shift this keyframe on the alternate image layer.

Press f7 on the previous image layer. On the current image layer, change the image numbering to 32. In this screenshot, we see a description panel for the Office button. Instead of a southern display, we will make this appearing on screen. For that, insert one more keyframe on the image layer and create motion tween between these keys. Grab the first key out of the two and from the Properties panel, apply zero alpha to it.

Now we can see the image transition and it feels like the panel appearing on screen. Next we will show a click over the same Office button. So on the arrow less 1300 and 38 and 1300 and 21st frames insert new keyframes, drag the 1300 and 21st key on the above alternate arrow layer and press f7 on frame 1330. also create a blank keyframe on 1300 and 21st frame of the arrow underscore 01 there. These are the frames to show a click over that button. So change its numbering to three and an animated click hand symbol comes. After this click again the normal arrow graphics should be displayed on stage.

So on this last frame, change the cursor single frame numbering to one exactly below this key. insert a blank keyframe for the image and drag the preceding image frame on the alternate image layer. On these new frames, vary the image numbering to 33. Here, the screenshot changes and the additional office buttons on options are now visible. Now as decided we need to reach the Save option out of them. So, create two new keyframes on the arrow underscore 01 layer, right click and apply motion tween between these keys.

On the last key, move the cursor over the Save I can adjust the frame duration. Again this Save icon will also be seen selected and then clicked. So we need some more keys focus or actions. On the arrow underscore 01 layer, insert a new key and on it change the cursor single frame numbering to two. Here comes the hand graphic exactly parallel to this key. Create a blank keyframe on the current image layer and drag its previous key on the alternate image layer.

Add just an extend the frames as well. On this new image frames where the image numbering to 34, and the Save option gets indicated in a different color. Now again, we will need a clicking hand symbol about this option. So, insert two new keyframes on this arrow underscore 01 layer at frame 1399 and 1410. delete those middle frames and drag the previous 1300 and 98 frame on the arrows alternate arrow underscore zero to layer, press f7 on it's 1400 and 10. On these frames Valley the curses numbering to three to get the click symbol over the Save option. On screen, we notice the different hand cursor with a red ring.

After the click both the image and the cursor change will take place. Extend the frames and change these cursor numbering to one we get a normal arrow cursor exactly below that key, press f7 for the image layer and copy the preceding key on the alternate image layer. Press f5 to extend the frame duration here on these image frames modify the single frame number to 35. In this screenshot, a small save control plus as such description is visible closer to the Save option. So we are editing some of the key positions here. We push the head this click hand frames.

And to make this description appear on stage, we are using motion tween between the keys of this last images keyframes on its last key now apply zero alpha value This made that small description box up here on stage. Adjust the frame durations. Now the actual click on the Save option will take place, press f6 exactly below the last blank keyframe of the click cursor frames. Also press f7 on the 1400 and 30th frame of the arrow on the scope 01 layer. The click hand cursor remains at the same location, just the timings are changed. On the current image layer, press f7 add the 1400 and 41st frame and drag its proceeding frame on the alternate image layer.

On this new key value the image numbering to 36. So this new screenshot brings a new Save As dialog box on screen. Zoom out to view the complete dialog box. This is to save the program file at a design path with a particular file name. On parallel cursor frames change its numbering to one to get a normal arrow cursor here. As a dialog box enters the screen, the hand cursor changes to the arrow cursor.

On this arrow layer, create two new keyframes at frames 1448 and 146 to assign motion to in between those keys, and on this second key, shift the cursor towards the dialog box over the file names Book Three text. This book tree is the default name given by the program to this file, which we show so that we can rename it with another name so the cursor is already moved over the text area. To rename it, we need to show first the typing state of the cursor. insert a new keyframe on the arrow underscore 01 layer and change the cursor numbering to four Zooming to view which cursor we got, and this is the correct arrow graphic on this key. Now press f6 to insert a keyframe on the image layer and drag it on the other alternate image layer. At the same position, insert a blank keyframe on the previous image layer.

On the new key value the image numbering to 37. Here, the file name text field goes blank. That means to start typing in that field, we need a different typing cursor on stage. Insert one more keyframe on the arrow underscore 01 layer and here change the cursor single frame numbering to four. This is the same cursor graphic which was also used during the typing on the sheet. shift this typing cursor at the start of the text field Here, the next image change will take place.

Press f7 on the current image layer and drag the preceding image frame on the alternate image layer. Extend the frames and modify the image sequence number 238. Here comes the text project underscore details, which is already typed as a file name. This is the name which we will show being typed on screen. We have to use the same procedure as we did for the earlier six Tech's but in this case, we will need just one patch area to cover the text. Create a blank keyframe on the patch underscore zero to layer.

We are placing the typing cursor before the letter P and select the Rectangle Tool From Tools. Draw a white rectangle about the project underscore details text to cover it completely. Key by key, we will edit the batch rectangle using the sub selection tool. And on every key, the cursor placing will also be shifted ahead of the visible letter. Please study the video carefully to understand this clearly. keyframe intervals on both the arrow and the patch layer will stay the same till we complete the text typing effect Now when we played it seems like being tied on screen extend the frames.

The text typing effect is done this file will be saved with this name Now on the image layer, insert two keyframes at frames 1836 and 1853. Create motion tween between these keys, and on the second key, shift the image on stage towards the left. Shift the image to bring this Save As dialog box completely inside the mask area. Also, insert a keyframe on the arrow underscore 01. there at the 1800 and 35th frame. On this frame, change the cursor numbering to five to get the previous typing cursor graphic over that text field. This cursor graphic is always used over the text field before and after typing.

Here after the image movement, insert two more keyframes on the arrow underscore 01 layer. Now to save the file, the cursor will be shifted over the Save button at the right bottom of this dialog box. Before that, on this 1800 and 54th frame, change the cursor numbering to one to get the normal arrow graphic on screen. Change the numbering on the last cursor key as well. Both are turned to normal arrow cursors. In between these keys, right click and create motion to in.

On this last keyframe, shift the arrow cursor exactly about the Save button. Now, the next screenshot should come on stage. So on the image layer, press f6 to insert a keyframe. Drag this key on the alternate image underscore 01 layer and at the same frame number insert a blank keyframe on the above image underscore zero to layer on this image underscore 01 new key value the image single frame numbering to 39. Here, the Save button changes its colors as detected. By the cursor, extend the frames in the timeline exactly about the image key.

Insert a keyframe on the arrow underscore 01 layer on this key, modify the cursor numbering to two, and we see a hand graphic over this Save button. Next, the click on this button will be shown. So insert one more keyframe on the arrow underscore 01 layer and shift this key on the alternate arrow underscore zero to layer on the same frame location. insert a blank keyframe on the previous arrow underscore 01 layer on this arrow underscore 02 frames vary the cursor numbering to three to get the clicking hand graphic. Duplicate the 1900 and second frame of the arrow underscore 01 layer and paste it on the 1900 and 13 frame of the same layer. So, only the click hand cursor symbol frame remains on the arrow underscore zero to layer on its 1900 and 13th frame, press f7 to create a blank keyframe, on this new arrow underscore 01 layer frames, change the cursor numbering to one.

After a click, we always presented the normal error graphic coming to image layers. Press f7 on the current image layer and drag its previous frame on the alternate image underscore zero to layer. From the Properties panel, change the image numbering to 40. The 48 screenshot comes up and the Save As dialog box is gone. We see a normal saved excel sheet page on screen. Now, according to the rest of the screenshots, this program will be closed.

So let's move ahead with that. Insert two new keyframes on the Current arrow underscore 01 layer, right click to create motion tween between these keys. On this last key, shift the arrow cursor over Office button at the top left of the program. As we found the Save option in the Office button menu, we will also find the exit option. So, some steps of the earlier save options will be repeated here. Insert one more key on the arrow layer and change the cursor numbering to two.

This shows the hand cursor on screen. Now on the image layer, press f7 to create a blank keyframe and its preceding frame is duplicated on the alternate image underscore 01 layer. Vary its image single frame numbering to 41. That Office button gets selected and changes color. Extend the frames and also the frame duration between the keys On the image layer, press f6 and shift that key on the alternate image underscore zero to layer. Press f7 on the previous image layer on the new image layer.

Insert one more key, create motion tween between these keys. Apply zero alpha on the first key and on both keys change the image numberings to 42. The small office button description panel seems to be appearing on stage. Extend the frames. Next will be the click on that same button. Press f7 on the arrow underscore 01 layer and drag the previous arrow frame on the arrow underscore zero to layer after subframe duration, press f7 for this layer to press f5 to extend the frames on this arrow underscore zero to layer frames, change the cursor single frame numbering to three.

To get the animated click symbol on this button. On screen, we noticed the hand change. After a click, we need the cursor back to the normal arrow cursor. So here, change the cursor numbering to one. After a click along with the cursor change, the image change will also take place so let's do it. On the current image layer, press f7 to insert a blank keyframe and its proceeding is duplicated on the image underscore 01 layer exactly below the blank keyframe.

On these frames, change the image numbering to 43. The Office buttons options are seen again, out of these options. We need to reach these Exit Excel option at the bottom right corner. Press f5 to extend all the frames. Then insert two new keyframes on the arrow underscore 01 layer. Right click and assign motion tween between these keys.

On the tween second key, shift the arrow over the exit Excel option. When the cursor detects the option, it will be changed to the hand cursor over it. So insert one more key on the same arrow layer and change the cursor numbering to two. In parallel, the image change will also take place. So on the current image layer, press f7 to create a blank keyframe and drag the preceding frame on the alternate image layer. On these frames, vary the image numbering to 44.

So here comes the 44th. That is second last screen shot on stage. This screenshot indicates the exit Excel option in yellow. Next on the arrow underscore 01 LED, press f6. On this key, modify the cursor numbering to one for the error graphic. On its earlier frames, press f7 for a blank keyframe.

Drag its proceeding hand cursor on the alternate image underscore zero to layer and press f7 on its 1700 and 32nd frame on these about cursor frames, modify the cursor numbering from the Properties panel to three. So we get the animated click hand symbol here. Now on the image underscore zero to layer, press f7 and, as always, grant the proceeding frame on its ultimate image underscore 01 layer on these frames change the image numbering to 45 the 45th The last screenshot to be placed on stage. Extend the frames in the timeline. Insert two more keyframes on the image layer. And on the last key, shift the image to take the start task bar inside the mask area.

Create motion tween between these key frames, extend the frames, and zoom out to have an overall look on the stage. Let's have a look at the complete simulation assignment from the very first keyframe in the timeline using the different states of the cursors and the number of screenshots, we developed working of a program in Flash, in simulation, always take care that the sequence of the screenshots are properly placed. Now, hit control plus Enter to preview the SWF This seems like a full demo version of Microsoft Excel. Even the typing effect is worked out properly. Using the same techniques, you can create such simulation videos to demonstrate the functioning of any program using Flash. We used two types of animation that is frame by frame animation for the typing effect and doing animation to make the description panel appear on screen.

The sequencing of the screenshot bitmaps on the successive keyframes is well organized. Once you understand the technique, such simulation videos are easy to make, and can be effective learning tools Hope this video will clarify all points about creating simulations in Flash. So try creating more of such simulations to understand things better. Our media wishes you all the best. Thank you