Pixel Bender Displacement Map Fakes 3D Effect (update)

Few days before I saw an amazing 3d effects on VidazPhoto. That made me want to master this effect. So, starting today morning I played around with flex and pixel bender and here are the results. I have created simple pixel bender kernel that uses monochromatic bitmapData to calculate amount of displacement for each pixel. All you have to do, in order to make your 2D images become 3D, is to create monochromatic map (black & white image) with the same dimensions as the original image (use lighter colors for closer objects, darker colors for distant ones). Than, based on rotation, push correct amounts of full displacement (dx, dy displacements for full white color) into shader. The displacement is linear starting on 0, 0 for black color, up to dx, dy for white color. All sources available to download.

Read the rest of this entry »

Inline Images

Have you ever heard about inline images? Inline images use the data URI scheme to embed images directly within web pages. As defined by RFC 2397, data URIs are designed to embed small data items as “immediate” data, as if they were referenced externally. This basicaly means, you can insert base64 encoded byte code of any image directly into html file. Using inline images saves HTTP requests over externally referenced objects. Data URIs can potentially store any type of data, not just images!

Read the rest of this entry »

SmoothImage Class (update)

While Flex uses bilinear resizing method when scaling images (event for Bitmap.smoothing() method), you won’t be able to get nice results when downscaling more than 2 times. Inspired by ImageResizer class I have also created SmoothImage Class. This object extends mx.Image and uses ImageResizer.bilinearIterative() class in order to generate smoother resized results.

Read the rest of this entry »

9 slice scale for bitmaps in flash (no hacks)

9slice_result_flash

9 slice scale is a nice feature, but when you try to use 9 slice in flash ide on MovieClip with bitmap, you will notice a problem. It will just not work as expected. So first thing you try is “Break Apart”, with same result. You are almost there, but due to the solution is not documented you need a small hint: After break apart (ctrl + b), select each of nine slices one by one and group (ctrl + g) individually and voilà its done. See snapshot and result images…

Read the rest of this entry »

Bitmap, BitmapData, ByteArray…

bitmap_converting

Lets see how to convert between Bitmap, BitmapData and ByteArray in few examples:

  • DisplayObject to BitmapData
  • BitmapData to Bitmap
  • BitmapData to ByteArray
  • URL (image) to ByteArray (asynchronous)
  • URL (image) to BitmapData (asynchronous)
  • ByteArray to BitmapData (asynchronous)

Read the rest of this entry »

Embedding assets wisely

You can embed various types of assets in your Adobe Flex applications (.jpeg, .png, .swf, .mp3, .svg, .ttf …). Embedded assets are compiled into the SWF file of your Flex application. They are not loaded at run time and you do not have to deploy the original asset files with your application. Read more about embedding assets on Adobe.

Basics first. How to make your symbol from Flash library visible for Flex (see images on the bottom of the artice):

  • 1. Create your symbol and linkage (library (Ctrl+L) / {your symbol} / Linkage…).
  • 2. Linkage Properties, set your class name that will be used in [Embed] meta.
  • 3. Export .swf file and make Assets.as.

Read the rest of this entry »

ActionScript 3 encoding JPEG, alchemy

Lets assume you want to save an image (or any DisplayObject) from flash to disk, or upload to facebook etc. What you need is to encode your BitmapData into an Jpeg and send ByteArray raw data to be saved/uploaded. There are few ways how to do it.

First, you can use original adobe mx.graphics.codec.JPEGEncoder. Sadly, this encoder is the slowest. There were attemps to make it faster by otpimizing code by bytearray.org, that resulted into two times faster org.bytearray.images.JPEGEncoder. Usage is pretty simple:

Read the rest of this entry »