Flex Canvas Repeat Background Image

Flex canvas provide a style attribute backgroundImage which allow us to set an image as background. Compare with the background in Html5 and CSS, this feature is not that user friendly. In CSS, we can not only set the background image, but also tell the css how to render the background image if the image is not big enough to cover the whole display object like DIV. This is a so basic feature while the Flex canvas style doesn’t support it. If we want to get this feature done, we have to write the code by ourself. First, let’s see what the background image effect I am talking about.

Repeat Background Image
Flex Repeat Background Image Example

Read more

Create Customized Drop Down Menu in Flex

In Flex 3, there are two flex components can be used to create dropdown menu. But none of them are easily customized and change styles. Menu is the default component in Flex for us to create menu utility. ComboBox and PopUpButton looks the same. There are only a little different between them. The ComboBox is designed for data selection. When you click the ComboBox, it will show the dropdown list by default. PopUpButton performs as a button with an extra small drop down icon. When you click the drop down icon, it will show you a drop list. Here is the dropdown menu what I want to implement in my project.

Read more

Convert GIF Animation to Sprite Sheet For Html5 Games

In the past 10 years, Gif and flash are the best format to show the animations on web. Gif can represent the simple animations with a very small size. Flash support more complicated animation with logic control. We can find hundreds of thousands of animation resources in these two file formats on the internet. However, the web technologies keep changing from time to time. The old web technology standards can not meet the current needs of our daily internet activities. HTML 5 was standardized in 1997 but it got focused till Google engaged in web browser development and Apple iPhone, iPad took the browser market share.

Now, HTML5 is encouraged to be the next HTML standard. Animations on web pages are no longer a big problems for current browser technologies. Therefore, more and more browsers refuse to support the flash player plugin to improve their security and performance. In html5 website, we can use Sprite Sheet technology which is traditional 2D game animation technology in the past 20 years. To reuse our GIF and Flash animation resources, we can convert them to Sprite sheet format and do the sprite sheet animation by Javascript in HTML 5.
Read more

Add AdMob v6 to Your Android Apps Example

Latest Update: Add AdMob with Google Play Service
AdMob released AdMob sdk v6.0.1 for android a few days ago. It is compatible with my last AdMob tutorial, but I think it is better to create a new tutorial to show how to add AdMob ads to our android apps. In this tutorial, I am using:

  • Eclipse SDK Version: 3.7.2
  • ADT 18.0
  • Android SDK r18
  • AdMob v6.0.1 for Android
  • HTC Desire with 2.3.7

Read more

Change GIF File Color

GIF format was introduced in 1987. It is widely used on Websites because it is the simplest way to implement the animations with a very small size. It is supported by all the browsers. Compare with the flash, it doesn’t need any plugin to play the animation in the web browser and it is very small in size.

GIF has two format, GIF87a and GIF89a. GIF87a is the original version of GIF format and GIF89a is the enhanced version, which supports for animation delays, transparent background and storage of application-specific metadata. By looking at the first six bytes of the GIF file, we can recognize the two versions by ASCII code, “GIF87a” and “GIF89a” respectively.

Playing GIF format is a very interesting job. Today I will show you how to change color of a GIF file. To replace the color of GIF files, we need to find out the color code first. Here is GIF animation which I am downloading from the internet. I downloaded it several months ago, so I forgot the original location.

Read more