Hello and welcome back to learn one more interesting tutorial brought to you by our media. This time we are going to create a beautiful Diwali greeting card in Adobe Flash. So let us begin. The very first thing we need is a new blank document in Flash. Now we have to get the reference the volley image on stage. For that, go to File Menu, input input to stage and press Control plus our shortcut key to get that file.

Image name is image devalue card. Select the image file from where it is located and open it to get it on stage. On stage, we can view the devalue card image already set perfectly. Name its lair as image above this layer, add a new layer On this new layer, we will vector this full image. All the elements should be vectored in different groups and converted into graphic symbols. In previous assignments, we have already learned to vector the images and create their symbols.

Now, go to File, Save, save this file at the desired location. Name this file as the valley greeting card. Once you have saved the file, you start vectoring the elements shown in the image. Now, we will start with the file from where we have already done with the vectoring part. In the timeline, you will notice a number of layers added for each elements vector. the bottommost layer is of the reference image.

Above that there is a background layer then a vector lantern about these are decorative bands. Then the Happy Diwali text and the top layer has the stars. You can cross check the elements in wireframe mode as well. All of them are converted in graphic symbols to. If you notice, all the layers are in main scene one. So first of all, we will have to create a main animation single symbol of all the elements together.

So, grab all the vector elements and go to modify, convert to symbols, or press f8 as the shortcut key. convert this to graphic symbol and name it as seen. Keep the registration point at the center. All elements are shifted to one single layer and symbol. Delete blank unwanted layers from the timeline Go to the 200th frame and press f5 to set this animation as animation length. Hide the above layer to confirm that all the elements are shifted to that single layer.

Lock the reference image layer. Double click on the scene symbol to step inside. Main animation will be worked out here. for individual animation, we will need all the elements on a different layer. So grab all of them and press Ctrl plus shift plus d to distribute them to different layers. Remove the topmost layer which is blank, one by one cross check to make sure that every element is on a different layer here as well extend all the layer frames till the actual animation length we have set in main scene one 200 frames.

Now, press Ctrl Shift plus W to toggle the workspace and view the editable portion as well. Here you will notice that for the animation purpose, we have already extended the decorative bands length. We will start with the band animation itself. So, except this band layer, hide all the remaining layers, toggle the stage area again using Ctrl plus shift plus W and let's start the animation. Go to it 200 frame number and press f6 to insert a new key frame. On this same key frame, shift these bands to the left side.

Both the bands are in the same symbol. So they will move at the same speed. Right click on the in between key and create motion tween play the animation from the first frame to view the band animation. You can also switch on the background layer to see the bands moving over it. It's looking nice, so the band's animation part is done. Next unhide the Happy Diwali text layer.

This text is supposed to be animated now. The text is already converted into a symbol. Hold its first keyframe and shift it to the frame number from where you want the text animation to take place. We have placed it on 15th frame. Move ahead and insert a new keyframe at the 80th frame. Select the text on its first frame again, press Ctrl plus f3 to open Properties panel.

In this panel, open color drop down menu And select alpha option for the text. Apply zero alpha value to show text appearing on screen right click in between the two keyframes and apply motion to in. Now, when you scroll on the timeframe, you will see text appearing on screen. When played in the main scene one It looks a bit too fast. Extend the frames of the motion to when to slow down the motion. We have extended it till 111 now the speed looks okay, so the text animation is also complete.

Moving ahead towards the next elements to be animated check on which layer the sky lantern is placed except this lanten layer lock restaurant declares this sky lantern is also vectored and converted into a graphic symbolic. Double click on this lantern symbol and step inside. Here, you will notice that each element of the lantern is converted in different symbols and distributed in different layers. All these layers are extended up to 50 frames. Grab the last frame of all the layers and press f6 to insert key frames at the end. Select the 25th frame have all the layers and insert keyframes there too.

On this 25th frame, select all the elements together. shift its pivot point to the top center of the sky lantern. This is done to show the lantern rotating from its stop center point. At the bottom rotate the lantern towards the right lantern is rotated on its 25th frame. position of this is same at first and last key. Grab all the in between frames, and right click to create motion to when we can now see the lanterns movement.

Hit Ctrl plus f3 to open Properties panel, some frames of all the layers are selected from the first half motion to in part. Now, click on Edit option from Properties panel to give ease in or ease out values. On screen you can see how we are adjusting the graph handles to apply ease in ease out values. We have already learned about this ease in ease out in our previous tutorials. Similarly, grabbed the frames from second half motion tween and edit, ease in or ease out graph. scroll over the timeframes.

To view the movement. exit to the scene symbol and observe the sky lanten animation along with the rest animation. Step inside the sky lanten simple again, add some frames to slow down the lantern movements. Also grab all the middle key frames and decrease the rotation angle. This gives a smooth and nice effect. Exit to scene one and have a look at all the overall animation.

After hundred and 50 frames, we observe the text portion goes missing. So, step inside the animation part again and extend the frames till 200 which is the actual Animation length in main scene one. Select the in between frames of all the layers and press f5 to extend the frames. No, it looks absolutely fine. So we can say that the sky lanten animation part is also done. So, let's move ahead towards the next elements to be animated.

The only part that remains is the stars. We have to show stars twinkling in the background. Only one star is vectored and converted into graphic symbol. The rest of them are the duplicates of this one star graphic symbol. And all the stars are kept on the same layer. Double click on any of these stars and step inside It's simple.

Let's start the animation part on its 18th frame, press f6 to add new key frame on the same frame 18. Get the Free Transform Tool From Tools panel and slightly rotate the star towards the right. Then right click in between the keys and create motion tween. Insert one more keyframe at ninth frame number, big the star on this ninth frame number and press Ctrl plus alt plus s to open scale and rotate panel scale of this star. Now, grab the star on first keyframe and open Properties panel using Ctrl plus f3. On this key, give the star zero alpha value do the same for the last 18 years.

Number we can see a proper star blink on screen. Now, duplicate the first keyframe on Fifth frame number using Alt key on keyboard. This will give a whole to the star animation. Instead of having a fast start blinks on screen, play and view the motion, we can increase the size of the star more on its ninth frame. Step outside that star symbol and play the animation to view the star animation. All the stars are giving the same timing and motion effect as it's a single star symbol reused everywhere.

Now we need each star to be played at different timings for better effect. For that, we need to create one more symbol of all these stars together. So grab all the stars together. At the end, go to modify menu, convert to symbol, or press f8. As a shortcut key name this graphic symbol and stars keep the registration point to default. Now all the stars are in one single symbol as per star animation, those are invisible on the first few frames.

So, put this layer in wireframe mode to view the star on their first frames. Double click on any of these stars and step inside the new star symbol created. extend this frame. We want these stars to be played at different timings for them to look interesting. For that, we will put each star on a different layer. So press control, press Shift plus d to distribute every star On a different layer, delete the top blank layer.

Put all the layers in wireframe mode. Now we have to vary the star animation timings. For that, we will shift the starting point of some of the stars in the timeline, shift the start keyframe of the second layer to ninth frame. So, the star on that layer will start animating from nine to frame. Similarly, shift one more keyframe to 16th frame number shift one Mulkey to 10th frame number. Now Playing observe that each star is giving the blink effect at different timings.

In the same star symbol, we can add a number of star twinkles using the same star animation symbol. So add one more layer, copy one of the stars and paste it On the 15th frame of the new layer added, you can position it anywhere on screen. Exit to scene one, and have an overall look at the animation along with the star animation. Step inside to the scene symbolic. Move the last key of the text animation 232 to extend its animation duration. Again, exit to the main scene one and observe the animation done.

Every element is now animated nicely. The only thing is notice that the yellow strip of this guy lanterns looks ready still. These are some of the additional animation efforts for a better result. So let's work on it. Why On the sky lantern till you reach inside it's symbolic. These movements of the lantern gives a cutout animation fail because of still yellow strips.

Those yellow strips are supposed to flow nicely. All the strips are in different symbols and layers. Double click on its first trip to step inside its symbol. We will show the movement using shape to in extend the frames till 56 as per the outside lantern animation duration, if you see middle key is on the 28th frame, so, here also insert a new keyframe at 28th frame number. Zoom towards this trip. On this 28 frame, we will slightly vary the shape of the strip to show movement.

On screen you will notice how we are changing the shape to keys with different shapes created, hold down the Alt key on keyboard and duplicate the first keyframe on the last frame. So that strip will give a loop animation for its movement. Now, select the frames in between keys and right click to create shaped when. Now we can view the actual movement of this trip, exit to the main scene one and see how this trip is giving a nice flowing movement along with the sky land and motion. Similarly, we will do it for rest of the four yellow strips to another yellow strip is on another layer. And also it's a different symbol.

So, double click on it and step inside its symbol. extend its frame till 56 inserted new keyframe at 28 frame This keyframe, zoom to words that strip and get the drawing chains done. Then copy the same first key on the last frame using the same Alt key technique, grabbed in between frames and right click to create shape to him. Now we can see the strip floating on screen according to the given shape. It's giving a realistic feel to the animation. Thus, we have completed animation of two strips.

It's giving a realistic feel to the animation. So lock that layer and unlock the layer of third yellow strip. We are using same treatment for all the yellow strips. Double click over it to step inside. Extend the frames up to 56 frames Press f6 to insert a new keyframe at 28. And now change the drawing of this strip slightly.

After the drawing change is done, duplicate the first key and place it on last frame of the animation. Grab in between frames and right click to create shapes when after every shape when we are checking the animation in the lantern symbol, so the animation for the third strip is also done. Let's move ahead to the fourth yellow strip. Lock the layer of third strip and unlock layer of the fourth strip. For this fourth strip, we will see how to reuse the done animation to get the same effect. Open the first strip animation and copy all the frames along with the shape twin Now, go back and step inside the fourth strip graphic.

Here, add a new layer, right click and choose Paste frames to get those same copied frames. We are not replacing the symbology we are reusing the animation done for the previous graphics. Delete the unwanted layer one from timeline. We get ready animation for the fourth strip instead of the complete animation. Now we will have to just edit the position of the fourth strip for proper placement. In lights in ball animation, adjust the position of the strip on all three keys.

Zoom out to the lantern and have a look. We will have to adjust its position some more. Select that strip on keys and slightly rotate the strip to look even along with the rest of the strip. Rotate the strip on all three keys. We have easily reused the animation done for the strip without much effort. Now the last fifth strip remains locked all the layers except this one.

Double click and step inside this strip graphic. Extend the frame still 56 come to the 28th frame number and press f6 to insert new keyframe there on this keyframe, very strip shape to show the movement. Once done, hold the Alt key on keyboard and duplicate first keyframe to paste it on last frame of the layer. Grab in between keys, right click and create shaped when we can see its movement now. Step outside to light simple animation and have a look. All the strips animation is done and just the full stripped position for better look and feel.

The strip's animation gives a much realistic look to this kind lanten action. Exit to scene one and have a look at the complete animation. The yellow strips of the lantern are moving very softly you can make out the difference in the output. After adding these strip movements. We have completed the elements animation bots successfully and beautifully. Now we want this Diwali greeting to appear on stage at the start.

That is using the fade in effect and fade out at the end. Confirm that we are in main scene one stage area. Press f6 to insert a new keyframe at frame number 25. Grab the image on its first color keyframe again and open Properties panel. For that, go to Windows menu properties, or press the shortcut key Ctrl plus f3. The image is already selected on the first key.

Now choose tint option from color drop down menu in Properties panel, in that choose black as the tint color and apply 100 value to it. Grab any in between frame and apply motion tween between the keys. scroll over the timeframes. Notice that the animation starts with a total blackout and then fades into its original image. Similarly, we will add fade out at the end of the animation. So insert new keyframes at hundred and 70 and 200 on this landscape placed on 200 frame, big DMA And again apply the same hundred person blocked into it.

You can anytime vary this tint color and its percentage value as per your choice. Again, grab the in between frames and apply motion to into it. This gives a fade out effect to the animation. So it begins with a fade in effect and ends up with a fade out effect. Play and view the animation as many times as you want. Next, we will publish SWF file of this Flash file.

Go to File Menu, publish Settings panel opens up first comes the Format tab. In that remove the check option for the HTML option. only keep the dot SWF option checked Then go to flash tab. In this, keep the JPEG quality 200. Below that keep the audio or sound settings to best quality. Then click on publish, we can see the published progress on screen.

When published, close this panel and open the published SWF file, SWF file is automatically saved at the same path of its original Flash file. We can see the output in SWF format starts with Fade In effect, all the elements are getting animated properly, and then at the end fades out. This SWF file can be directly sent to any of our loved ones to wish them a very Happy Diwali. You can have your own reference image to create such Diwali Greetings, you can add your own elements and animation tricks to give your card a bit full effect. Hope you find this tutorial interesting. Our media are coming up with some more creative tutorials.

Till then keep animating