Earn money online through learning Adobe Flash?

Earn Money online through Adobe Flash

 

 

Through this post we will cover a tutorial on everything we will need to create a simple banner in Adobe Flash, which will adhere to Google ad display network's requirements. First of all, let's get on to the track. What does 'Earn Money online through learning Adobe Flash' really mean?

There are quite a lot of jobs related with creating web banners. Other than images with a static image, you should have seen those great animated banners. Those advertising banners entice the user, which is the reason why people pay to display them. Some of the animated banners are displayed as animated GIF images. And most of the banners are displayed as Flash banner these days. This post will be all about creating a Flash banner that will satisfy the requirements of the Google ad display network.

What does creating a Flash banner have to do with earning online money?

 

There are quite a number of regularly updated jobs specifically posted on creating banner sets in flash. Most of them are posted for Flash Banners to be displayed on Google ad network. They are for Google Adsense. These kind of jobs are quite prevalent in almost every online workplaces. For example, if you are working at oDesk.com you can create your saved search query just for Flash Banners, and you'll get almost over 100 new jobs a month. You can't get every job that is posted, that is true. But once you start and improve, Earning Money online becomes easy, even by just creating Flash Banners.

At what rates are we paid by the clients for creating a Flash Banner?

 

Simply said, it depends. In my experience, my first job at oDesk.com was to create 5 Flash banners, and I was paid $30. It took only about 2 days to find this $30. For a freelancer who is already engaged in these kind of work, this is just some little money. That's true. Because, even for me when I gather experience and when I get good ratings for my work history, there were jobs for me with higher pay rates such as $200 and $100 per a banner set. For a banner set, it usually takes about 2-3 days. Just think about this. If you are hard-working person willing to earn a lot of money online, working at home, how much can you earn at this rate for a month? If you are currently working at a No-JOB company (if you do nothing to earn some money), well this post will be a good one for you to start with.

Let's get on to the tutorial now.

 

What do we need?

 

We need Adobe Flash software. Doesn't matter which version it is. We can start on any version, and update while we progress in our career.


Is that all? Well.. YES! Here's how we create a Flash banner in Adobe Flash.

 

1. Open Adobe Flash

 

I will be using Adobe Flash CS3 Professional for this tutorial

2. File > New > Flash file (ActionScript 3.0)

 

Why ActionScript 3.0? It's always better start with the newer version if you don't have any prior experience. The syntax is ActionScript 2.0 ( AS2 ) is somewhat different thanthis AS3. AS3 is advanced than AS2 in every aspect.

3. Set the stage size to 728x90

 

We will be creating a banner of the Standard Leaderboard Size (728x90) for this tutorial.



Play with the controls on your window and see what you can learn alone.
I changed the background color of the stage.

4. We'll add some text on to the stage.

 


Note the 'T' Button on the toolbar. That is the text tool which we use to create text on the stage. I've placed 2 texts on the stage in-line with 2 different text sizes.




Did you notice how the property bar changes when you select a text? Change the properties and see what you can do.

5. We need a New Layer for each content which we will be animating.

 

 

Right-click on the layer to get this menu.
(use Right-click on Layer > Insert Layer)

6. Move the animating content to the New Layer we just created.

 





Cut and Paste-in-place the text in the new layer, as shown in the figure. Right-click on the text to get these menus.
Or you can Ctrl+x to cut (Ctrl + C to copy - not used here) and Ctrl+v to paste it on
the new layer. Before you paste you need to select the new layer.

Notice how the text changed into a graphic element. To edit the text again you can double click on the graphic.


On the new layer we just  created,

7. Create a Motion Tween on the first frame.

Right-click on the first frame and select Create Motion Tween.


8. Go to 20th frame and create a keyframe

 


9. Go to 40th frame and create another keyframe

 


10. On layer 1, go to the 40th frame and insert a frame.

You may have noted that before this step 'Earn Money online' text was missing. By this step you made the 'Earn Money online' text visible throughout the timeline.



11. Select the keyframe in the frame 20 and move the text up a bit. 

 




You can use your keyboard or your mouse to move.

12. Press Enter to Play what you have just created.

Pressing Ctrl+Enter will play your ad movie in a flash player.



13. Select the keyframe in the frame 20 and instead of moving the text, try changing the values in the property bar, to explore what you can do. Challenge your creativity.

 


Add a Tint Color

Change Opacity

14. Create a new layer and move it below the first layer. Double click to rename it as 'Background'.

 





15. Use the toolbar tools to draw shapes on the new layer.

 



16. You can import images to your stage as well. Press Ctrl+R or File > Import > Import to Stage..

 

 

 

17. Finally you need to add the ClickTAGs to be compatible with the Google Ad network

 

Press F9 to open up the Actions panel. On the frame 1 on any layer, add this code.

import flash.events.MouseEvent;
import flash.net.URLRequest;
// ......
stage.addEventListener(
   MouseEvent.CLICK,
   function(event: MouseEvent) : void {
     flash.net.navigateToURL(new URLRequest( root.loaderInfo.parameters.clickTAG), "_blank");
     }
   );




 

18. Read more on the Technical specifications for Image ads (Static/ Animated and Flash ads) on Google Ad Network.

 

https://support.google.com/adwordspolicy/answer/176108?hl=en&ref_topic=1626336


This is my final preview. Take a look and see if you can beat it. I have the source files for what I have created uploaded on this site for download. Find them here if you can.



If you ever come up with any question. Never hesitate to ask them up in your comments. 

Ishan

Ishan Madhusanka is a dynamic developer, with a great enthusiasm in Web and Mobile Development. Eventhough he is a developer, he has this awesome creativity at its apex which helps him to polish up the UI/UX aspect of his products

No comments:

Post a Comment