Animate Birthday Greeting Card

20 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€64.39
List Price:  €91.99
You save:  €27.60
£55.09
List Price:  £78.70
You save:  £23.61
CA$95.28
List Price:  CA$136.12
You save:  CA$40.84
A$104.54
List Price:  A$149.36
You save:  A$44.81
S$94.19
List Price:  S$134.57
You save:  S$40.37
HK$545.77
List Price:  HK$779.70
You save:  HK$233.93
CHF 63.61
List Price:  CHF 90.88
You save:  CHF 27.26
NOK kr746.97
List Price:  NOK kr1,067.14
You save:  NOK kr320.17
DKK kr480.44
List Price:  DKK kr686.38
You save:  DKK kr205.93
NZ$114.32
List Price:  NZ$163.32
You save:  NZ$49
د.إ257.07
List Price:  د.إ367.26
You save:  د.إ110.19
৳8,168.69
List Price:  ৳11,670.06
You save:  ৳3,501.36
₹5,828.58
List Price:  ₹8,326.90
You save:  ₹2,498.32
RM327.90
List Price:  RM468.45
You save:  RM140.55
₦105,229.96
List Price:  ₦150,334.96
You save:  ₦45,105
₨19,431.47
List Price:  ₨27,760.43
You save:  ₨8,328.96
฿2,521.66
List Price:  ฿3,602.53
You save:  ฿1,080.87
₺2,253.99
List Price:  ₺3,220.12
You save:  ₺966.13
B$357.19
List Price:  B$510.29
You save:  B$153.10
R1,273.09
List Price:  R1,818.79
You save:  R545.69
Лв125.75
List Price:  Лв179.65
You save:  Лв53.90
₩95,095.26
List Price:  ₩135,856.19
You save:  ₩40,760.93
₪258.97
List Price:  ₪369.98
You save:  ₪111
₱4,052.01
List Price:  ₱5,788.84
You save:  ₱1,736.82
¥10,898.49
List Price:  ¥15,569.94
You save:  ¥4,671.45
MX$1,161.50
List Price:  MX$1,659.36
You save:  MX$497.86
QR254.39
List Price:  QR363.44
You save:  QR109.04
P945.24
List Price:  P1,350.41
You save:  P405.16
KSh9,168.69
List Price:  KSh13,098.69
You save:  KSh3,930
E£3,276.23
List Price:  E£4,680.53
You save:  E£1,404.29
ብር4,006.99
List Price:  ብር5,724.51
You save:  ብር1,717.52
Kz59,384.57
List Price:  Kz84,838.74
You save:  Kz25,454.16
CLP$62,491.07
List Price:  CLP$89,276.78
You save:  CLP$26,785.71
CN¥496.64
List Price:  CN¥709.51
You save:  CN¥212.87
RD$4,086.46
List Price:  RD$5,838.06
You save:  RD$1,751.59
DA9,413.48
List Price:  DA13,448.41
You save:  DA4,034.92
FJ$155.95
List Price:  FJ$222.79
You save:  FJ$66.84
Q541.96
List Price:  Q774.26
You save:  Q232.30
GY$14,594.23
List Price:  GY$20,849.79
You save:  GY$6,255.56
ISK kr9,678.91
List Price:  ISK kr13,827.61
You save:  ISK kr4,148.70
DH694.53
List Price:  DH992.23
You save:  DH297.69
L1,236.03
List Price:  L1,765.83
You save:  L529.80
ден3,963.41
List Price:  ден5,662.25
You save:  ден1,698.84
MOP$560.62
List Price:  MOP$800.92
You save:  MOP$240.30
N$1,276.29
List Price:  N$1,823.35
You save:  N$547.06
C$2,568.19
List Price:  C$3,669
You save:  C$1,100.81
रु9,300.39
List Price:  रु13,286.84
You save:  रु3,986.45
S/260.50
List Price:  S/372.17
You save:  S/111.66
K270.91
List Price:  K387.03
You save:  K116.12
SAR262.49
List Price:  SAR375
You save:  SAR112.51
ZK1,780.59
List Price:  ZK2,543.81
You save:  ZK763.22
L320.34
List Price:  L457.65
You save:  L137.31
Kč1,591.01
List Price:  Kč2,272.97
You save:  Kč681.96
Ft24,857.67
List Price:  Ft35,512.48
You save:  Ft10,654.81
SEK kr747.87
List Price:  SEK kr1,068.43
You save:  SEK kr320.56
ARS$62,063.45
List Price:  ARS$88,665.87
You save:  ARS$26,602.42
Bs481.99
List Price:  Bs688.59
You save:  Bs206.59
COP$267,109.86
List Price:  COP$381,601.87
You save:  COP$114,492.01
₡35,703.30
List Price:  ₡51,006.90
You save:  ₡15,303.60
L1,727.27
List Price:  L2,467.63
You save:  L740.36
₲522,695.49
List Price:  ₲746,739.85
You save:  ₲224,044.36
$U2,715.34
List Price:  $U3,879.22
You save:  $U1,163.88
zł274.22
List Price:  zł391.77
You save:  zł117.54
Already have an account? Log In

Transcript

Hello everyone out of the media brings you a very interesting assignment. In this we will see how to create a nicely animated birthday greeting card, which is easy to make in Flash. So let's get started. As always, firstly, take a new fresh flash document for this new assignment. Now we need to import the reference image file from it's located file path. For this, go to File Menu, input input to stage or simply press Ctrl plus r as its shortcut key.

Select this reference image file and click on open to get it on our work area. You can view a beautiful Happy Birthday image file on stage. Rename its lair as image. Before moving ahead, let's save this file first. desired folder path, name this file as birthday card. As said before, this image is the reference file for the flash birthday card.

In previous assignments, we have learned to vector the objects in different groups from reference image. Similarly, here too, we have to vector each and every element or object in different groups. Right now, we will directly work on the file, where we have kept ready the vector objects. On screen, you will notice that about the image layer, we have a new layer with all the vector elements. You can take your time and vector the objects along with the text correctly. moving ahead with the animation part, extend the frames as per the needed animation duration.

Here we are extending the frames up to 300 frames per second. f5 as shortcut key to extend the frames in timeline, all the vector elements are grab together and go to modify menu, convert to symbol, or press f8 and shortcut key, named this symbol as scene. Select the behavior type as graphic symbol and keep the registration point at center. Now, all vectored elements are converted to one single graphic symbol, double click to enter inside the symbol. Again, grab all the objects and press Ctrl plus shift plus d to distribute each element on different layer. Delete the blank layer will then background cake, text, gifts, flowers and balloons are in different layers.

For animation purposes, convert each and every l In different graphics in ball as well and extend the frame duration to same 300 frames. Currently, all the elements are still we need to create an animated card. So let's start with the animation part. Press Ctrl plus shift plus W key to toggle the stage and view the complete work area. Hide all the less except the top floor layer which is supposed to be animated now. On this layer, press f6 at 258 frame on this 258 frame shifted flower element to the right side.

Right click between the two keys and create motion twin. Now we can see the flower movements from left to right. But as this image graphic Have a small length, it's getting cut halfway of its motion. toggle the stage area whenever needed using the toggle key control plus shift plus W. to correct it, select the key of the graphic and double click on the image to enter its symbol. extend this flower band using the copy of the same band available. This is the easiest and fastest way to extend any of the elements during the animation and view the complete uncut graphic motion of the top flower band.

This looks good. Similarly, we will animate the flower band at bottom. On this bottom side flower band layer, press f6 to insert a new keyframe at the 258 frame. That is the same duration of the top flower band animation This keyframe, shift the flower band at the left side. This flower band graphic is also short. So, double click to step inside the symbol.

Hold Alt key on the keyboard and duplicate the band to extend its length in the same way as we did for the top flower band. exit to the scene symbol. Move the band more towards the left in the timeline, right click between these two keys and create motion twin play and check out both the bands moving in the opposite direction and just the flower position on their keys to maintain the speed of both the bands. Check the movement of the flower bands again Try to match the motion speed. So as we get a pleasant effect, for now, this flow band animation part is done. So, moving ahead, let's select the next element balloons.

Hold its first keyframe in the timeline and shift it to the frame number from where we need to start the balloon animation. Right now, we have shifted it to the 56 frame number. Previous frames automatically become blank. Press f6 to create a new keyframe at hundred and first frame on its first key. Shift the balloons downwards of the screen to make it appear on screen from down. Set balloons position on 100 and first frame to Now right click between these keys and create Motion twin.

We can view how the balloons appear on screen from behind the flower band. As we know, balloons never remained still. So let's add the keyframes ahead in the balloon layer to show them floating at 160 frame and apply motion tween between the keys. Press Ctrl plus f3 to open the Properties panel from the Properties panel as well. You can assign motion tween between the keys. Press f6 to insert another keyframe at 136 and 128 frame numbers on 128 frame.

Pick Free Transform Tool From Tools panel and slightly rotate the balloons to the left. As the balloons registration point is already set at the bottom center, while creating the symbol. It rotates in the public Opposite direction as needed. On 136 frame, rotate the balloons slightly towards right. Right click on the in between frames to create motion tween between the keys. We can view the balloons movement.

Once it appears on screen. Hold and shift the keys to extend the frame duration. This is done to make the balloon animation a little slow. For smoother animation, hold the motion tween frames and click on Edit option in the Properties panel. Here we are adding some ease in ease out values. This gives softer movements to the elements.

We have already learned about the ease in ease out values in the previous assignments. Let us make the balloons move in the same manner further farther That grabbed the frames from hundred and 60 to 150 sixth key, hold down the Alt key on keyboard and paste the frames ahead. This will keep the animation timing as well as balloons floating animation identical. Do it one more time to extend the balloons animation. Now, let's check it from the start. Firstly, we see the flow of bands animation and then smoothly balloons appearing on screen.

Then once settled, they start floating there itself. Here you can add or remove the keyframes as per your choice. Even you can vary the frame duration for animation. Next are the gifts. Let's make them appear on screen in a different manner. Hold its first key and shift it 270 frame to start its animation from there, so the gifts animation will start.

Once the balloons are settled on screen. Press f6 to insert the next key frame and hundred and 56th frame. On its first key, move the gifts to the left out of screen. toggle the stage area with control plus shift plus W and view the gifts are placed exactly outside the animation area. In the timeline, right click between the gifts two keyframes and apply motion twin. We can see the gifts entering the animation area to its set position.

Toggle the stage area again to view only the stage area and the gifts entering the screen. Here we complete the gifts animation part. Now. Let's select the Happy Birthday text to animate shift The text keyframe from where you need to start its animation. Currently, we are placing it at 100 and 11th frame number. add one more keyframe at 150 sixth frame number, we will use a different style to animate the text part.

Select the Happy Birthday text on its first key and press Ctrl plus alt plus s to get scale and rotate panel. scale it down with 50 value. Press Ctrl plus alt plus s again and scale it down by 50 value for one more time. Press Ctrl plus f3. To open Properties panel. Grab the text on its first key again and select the alpha option from colors drop down menu in Properties panel, reduce its alpha value to the lowest to make the text almost disappear.

You can also set its value to exactly zero Now, right click between these keys and create motion twin. We can see the text appearing on screen. To make it appear slow, extend the frame duration. Even select any in between frame and click on Edit option from Properties panel to vary the ease in or ease out values. These values make the object to play smoothly. Let's view the animation from the beginning.

Flava bands are moving continuously and accept the cake. The rest of the elements appear one by one on screen. Once the whole animation is viewed, we can vary the elements animation duration as per our choice. Right now we are changing the frame duration for balloons to make them appear earlier for smoother results. Duplicate the previous frames and extend the balloons animation as well. Remove the unwanted tween if created.

Let's have a look at every animated element created till now. Now remains the kick element. If we have a closer look at the cake, its Canvas have very static flames, which can be animated. So, double click and step inside the cake symbol. This symbol is already distributed in three different layers. Out of these layer three contains the static flames.

If you remember in one of the previous tutorial, we have already studied candle assignment along with the animated flames. Open that same candle Flash file from its folder path. Now, copy this animated flame symbol from this ready file and just paste it on the blank frame of layer four in the current birthday greeting assignment file. This is the best way to reuse the previously created material. reuse of the material in his best way helps to reduce the production time with the best output. Zoom towards the candle area to match the flame over the candles.

Press Ctrl plus art plus s to scale down to flame size. Zoom in more towards the canvas to place the flame duplicate these animated flames and place them over the remaining two candles as well. hold down the Alt key to duplicate the flame After this, first of all, delete the previous static flames layer from the timeline. If you extend some of the frames, you will see the flame animation the same way we created in the candle file so we don't have to waste our effort in creating the flame animation again. Shift the flame layer below the candle there. This will not overlap the flame animation over the candle area.

So these flame positions to the center of the candles once the flames work is done, extend all the layer frames up to 300 frames, which is the exact length of our main animation part to exit to the scene symbol and view the overall animation. reuse of the candle flames animation gives a nice and satisfying outward exit to the main Scene one and have a look at the complete output. One by one, every element is getting animated perfectly. So the animation part is done. Now, we will add fade in and fade out to the overall greeting animation in this scene one. This will make the greeting card appear on stage.

For that, let's press f6 and add a new keyframe at frame number 30. Select the very first keyframe and press Ctrl plus f3. For the Properties panel, grab the image file on that keyframe. Now from this color drop down menu choose tint option. Once the tint option is selected, we see the default black color besides it and more tint value controllers slide and give hundred value for the black tint. The main screen completely goes black.

Coming back to the timeline Right click between these two keys and assign motion to when the greeting card seems like it's fading in on screen. Moving ahead on the same layer, add two new keyframes at the end of the layer that is on 261 and on 300 on this 300 frame, applying the same amount of black tend on the image, right click between these keys and create motion twin. So the greeting card seems like it's fading out at the end. Now, let's view the complete greeting card along with the fade in and fade out effect. We see the greeting card appearing on stage and then every element is getting animated asset and at the end, the greeting card fades out with the same effect. So finally, our animation part is done.

Now we want this output in SWF format. For that file menu, publish settings, we get a publish Settings panel, we need just the SWF output. So in the format stab, remove the check on the HTML selection, then open flash tab here slide and give 100 value to the JPEG quality. If you have used the sound file to for the greeting, then go to the Settings option in front of audio event and put its quality to the best. Now, click on the Publish option below. We can view the file getting published with the given settings.

When done, open the published SWF file. By default, the published file is saved in the same folder of the original file. While watching the final output, we can anytime go for some more changes in the animation file. As now, we are increasing the fading time for the greeting. Again with the same publish settings, you can publish the SWF format and replace the output file. Go through the final output one more time to view the changes done.

Thus, we are here with the beautiful birthday card using previously learned tricks and techniques. We created nicely vectored elements from the reference image. We used simple motion tween technique for the animation reels of the candle flames, and at the end, fade in and fade out effect for complete animation file simply Delhi, you can create your own digital greeting cards. You can send the SWF file to your loved ones on their birthdays. You can also add your own elements, your own designs, and your own tricks and techniques in the animation for more interesting results. Hope you'll find this tutorial useful out over media we'll be back with some more interesting stuff.

Till then keep creating. Thank you for watching.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.