Flash CS6 & HTML5 its’ Place in Web Design

As predicted, Flash has now gone HTML5 – yes, you can now export your Flash work to HTML5 using the new Flash CS6.

I haven’t had a chance to look at it, so I have no comment with regards to how well it works. Nonetheless, this is more evidence that HTML5 is going to be huge in the future of web design and web development – if it isn’t already!

Flash CS6 basically uses the CreateJS open source framework, to output animations in Flash. I don’t know how powerful this conversion process is yet … we will soon see how complex the Flash projects can be and still be able to output them via HTML5.

Whatever the case, you should still be learning HTML5 and JavaScript.

Here is a sneak peak video of how exporting flash CS6 on to html5.

History of socal media

It has a been four days, i have been working on a cool plugin called “dipity timeline“. It offers you a range of great tools such as embedding videos, uploading pictures, map location and some blanks to fill all the description for each event in order to create your timeline.

Now we need a topic to every timeline we create, so i thought about the Social media’s history : how did it started and how it looks like today ! As i said earlier, it took me some time to stumble upon the net and gather all types of informations and visuals to put this plugin on run :P. I won’t lie to you, it was hell ! it’s like you always have to dig and dig to get the right infos or search for many sources to find the right one to trust. Plus social media is a huge topic !

But overall it was quite interesting, believe it or not i have learned a lot of things that helped me understand social media in its different aspects. For instance did you know that there is lots of social networking company that looks like facebook and that you probably never heard of : like hyves in netherlands or mixi in japan or bebo in belgium, Huhh ?? Even better, there are social community network for cats called: Catster, and for dog too : Dogster. Ya kinda weird but they run perfectly and their users are active.

So what are you waiting for? Click on the link below and get access to the Social media history timeline. A piece of advice : take your time and surf on each event separately coz there is a lot to know and get excite about 😉

http://www.dipity.com/omelki/SOCIAL-MEDIA/?mode=embed&z=0&bgcolor=%2365c3b9&bgimg=/images/black_grad_up.png#tl

SOCIAL MEDIA on Dipity.

Hope you will love it and feel free to leave a comment in below

Stay put for next time ! more cool stuff to come!

2big 2Pac

I know it’s been a while i haven’t posted anything on my blog, honestly it was an hectic week though i know it’s a cliche excuse but come on give a man a break :p !

I have been thinking about posting a video today, an old animation project that was done last year at uni. I thought that it won’t be such a bad idea in showing you some of my early works instead of talking about banners every time :p

So this video is about synchronizing the animated lyrics with its music, and because am a big fan of biggie and Tupac (Old school rap artists), i have chosen one of  their music mix for that project.

Hope you will like it ! And stay hooked more cool stuff to come !

EXAMPLE OF A BANNER AD

Today i wil be showing you a cool infographic about how to do the perfect ad banner.

Here are some useful links for banner ads :

http://www.openx.com/networks/enterprise-ad-server
http://www.bannerspaces.com/
http://worshipbanners.com/bannersbible.html
http://www.good.is/post/infographic-two-years-later-where-are-the-haitian-recovery-funds/

Hope you liked it ! Stay tuned for next week 🙂

ONLINE BANNER HISTORY

A week ago, we have talked about some flash banner tips, the way they should be done accordingly to ads server rules such as Yahoo and Google.

Today we’ll be focusing on a short history about online banners, plus we’ll be covering their standard sizes to recognize them directly on a website and understand how and why advertisers use them.

The very beginning of online banners

Online banners have begun to show up in the 1980’s. The first company behind it was “PRODIGY”, which was owned by IBM and Sears.

Later in 1993 Global Network Navigator (GNN) sold their first clickable banner and Hotwired was the first web site to sell banner ads in large quantities to advertisers.

They had a new a concept called CTR (click through rate), which helps advertisers to trace their ads through reports. May 1994, traceable advertisements were introduced, which helped to measure the effectiveness of the ad banner. Today technology gives us the opportunity to enhance the quality of our banners by using visual effects to attract users. I usually use Adobe Flash to design and create my banners, it’s easy and you have all the tools you need to make it happen: from design it to scripting it. Considering all these tools today, a marketer can easily analyze his ads, make them look good and understand the market online. Now banners should have standard sizes in order to be revealed in many websites, which we will be focusing, in the next paragraph.

Standard banner sizes

Today online banners come in many forms such as: horizontal form, vertical form, skyscraper form, square form and others. The best way to convey banner ad sizes remains using its pixel dimensions, which means it is usually represented as width by height, example: (728 * 90).

Here is a list of standard banner sizes, which are universal:

Now you’ll be asking yourself what banner ad sizes should I choose?

Well that’s easy if you already know what type of marketing message you are diffusing.

Based on my work experience at Hic Media I’ll say if your ad is only text message, a simple long rectangle banner ad size will do the job. However if your banner is more visual than a large square or a skyscraper banner is what you need.

You can test various banner ad sizes to come to the optimal mix for your marketing purposes, but remember that banner ads will only be effective: by getting your message and brand displayed redundantly, and by generating strong call to action for your prospects which we will be talking on the last part of my blog.

How and why advertisers use online banners

Advertisers uses online banners to get traffic on a website by linking it to their website. It can be created from an image or an animation such as GIF and PNG images or Flash videos and animations. Advertisers usually earn money on a CPC (cost per click) basis. The affiliate will get money out of each click a user does.

Other than CPC there is something called “Impressions” which mean the new page that you have landed once you have clicked on the banner.

CPCs and impressions are what advertisers look for while scanning in their log files so they can detect that a web user has visited the advertiser’s site from the content site by clicking on the banner ad.

So this is a smal brief about online banners. Hope you enjoyed it and find it useful.

If you have any question relating this article hit me up with a comment and i’ll get back to you asap

Don’t forget to come back, there will be new advanced stuff about online banner that you might find it useful too.

Hope you like my visuals, i’ll try to make them look better on each new post. Stay tuned !

Here are some useful links you may wanna check them out :

http://en.wikipedia.org/wiki/File:Standard_web_banner_ad_sizes.svg

http://ezinearticles.com/?History-of-Online-Banners&id=3212042

http://www.bannergarage.com/bannerAds.aspx

http://designerstoolbox.com/designresources/banners/

http://bannerweaver.com/blog/banner-advertising/traffic-online-business-banner-advertising/

http://www.123-banner.com/

Flash Banner Tips

In this tutorial I’ll be covering some tips about flash banners based on my work experience. As creative at Hic media I started to work on flash banners, which I have never done in my life. I have encountered many technical problems and yahoo and google won’t publish my banners.

These two big browsers has common rules for letting you insert your flash animations such as sizes, length duration and click-tags, which will be talking later. So now am gonna make this easy for you, specially for flash designers by giving you some tips to avoid google and yahoo’s alerts.

Size

The first thing we should really pay attention when we are starting a banner project is the size of the swf file. Google and Yahoo won’t publish your file if it’s over 40 kb, yes it has to be that small, the smaller the better. The first thing to do here is when you open a new project on flash always choose ActionScript 2.0. However ActionScript 3.0 is not made for banners because no matter what you do, you will never reach the 40 kb even if your projects are just vector animations.

Now our next size enemies are images we import in flash. What I suggest first is to reduce the images sizes in Photoshop. You just open the picture there then on the top left corner click on : File, save for web. An new window will pop up giving you the choice of many file format, you just pick “png 24” on the top right and then click save. Now import it into flash, it will directly appear in your library window, just right click on it and go to properties, a new window setting will pop up, highlight Allow smoothing, as for the compression you are gonna have to choose the jpeg option then from the custom you’ll be able to reduce image quality according to your file size.

In Photohop         

In Flash 

Length Duration

The second thing you should now here, is the length duration of your animation it shouldn’t last more than 30 seconds, otherwise yahoo and google won’t take it. Mostly banners animations last between 5 to 10 seconds: it’s a message we’re posting not a story :P. So if you have several movie clips inside your timeline that plays again each time reached the last frame, you will definitely exceed the 30 seconds. You’ll have to figure something else like pasting the frames redundantly until you reach the 30 seconds frame and write: stop() instead.

Clicktags

Last thing I wanna talk here are clicktags, in general once you see a published flash banner on a website, you may want to click in it in order to take you to another url site. Click tags means button which is easy to make in flash all you have to do is to draw a rectangle similar to your stage size convert it into a symbol button then double click it and drag the first grey frame into the “hit” blank frame, go back to your original stage and Voila! You will see a click tag button in a light blueish color which symbolize a clicktag.

One last thing, click on the click tag you have just created you will see that all the frames of that layer are selected, then click right away on the action window and paste that small script in it :

“on(release){

getURL(“_blank”);

}”

Here you go, I think that’s pretty much what you need to know about flash banners. Hope my tips were useful.

If there is anything more you need to know, don’t hesitate to write me a comment

Come back, i’ll be posting more tips every two weeks.

Here are some useful links you may wanna check them out :

http://www.designpax.com/blog/5-design-tips-for-flash-banners-ads/

http://www.grantasticdesigns.com/flashcompression.html

http://www.webdevelopersnotes.com/tips/web_promotion/tips_for_creating_web_banners.php3

http://www.rewritables.net/banner_tips.htm

http://www.ferreemoney.com/blog/how-to-create-a-flash-banner-ad-that-generates-profitable-results/

http://www.aqusagtechnologies.com/tips-for-an-effective-flash-banner-design

http://www.bannerhero.com/bloghero/flash-banner-design-top-five-tips/

http://www.youtube.com/watch?v=PzWU4pW_Bg8

http://community.adobe.com/