Hackszine.com: Flash Archives

Archive: Flash

Page 1 of 2 1 2 >>

May 2, 2008

HOWTO - embed fonts from a SWF into a Flex app

I haven't done any coding in Flex yet, but I came across this howto today that illustrates how simple it is to pull in a Flash SWF that has an embedded font and use it within the Flex application. Embedding the bold, italic, and bold-italic sets for a font allows you to use the standard <b> and <i> tags in an htmlText element that is using the embedded font.

As an aside, it appears that Flex even allows you to do a rotation on the text even when it's not using a standard system font. This is something that was a total pain with embedded fonts in Flash/AS2, requiring rendering the text on the fly as a bitmap and then rotating the bitmap version. Major headache.

I'm pretty excited to see that text effects like this have become so simple to achieve. Now, if only someone could figure out how to lighten the file size when you're trying to embed a traditional Chinese character set.

Embedding fonts from a Flash SWF file into a Flex application

April 22, 2008

Encoding JPEGs client-side in AS3

I've been doing a bunch of Flash Actionscript 3 development lately at work, and one of my favorite features with the new drawing API is the ease and speed with which you can rasterize vector data and manipulate image bitmaps.

What's killer is that Adobe's as3corelib addon library finally gives us some essential tools that have been sorely lacking, none the least of which is a client side JPEG encoder. With this, you can turn any drawable object like a sprite or a movieclip into a ByteArray holding the compressed JPEG data in just a few lines of code. It's as simple as this:

import com.adobe.images.JPGEncoder; var clipbmp:BitmapData = new BitmapData (aclip.width, aclip.height); clipbmp.draw(aclip);
var jpgEnc:JPGEncoder = new JPGEncoder(90); var jpgbytes:ByteArray = jpgEnc.encode(clipbmp);

This turns the "aclip" sprite or movieclip into a rasterized, flattened, BitmapData object. The BitmapData is then run through the JPEG encoder with the quality setting of 90 and you're left with the raw JPEG-compressed image in a ByteArray object. The as3corelib also provides a PNG encoder, with which you can just use the static method PNGEncoder.encode(clipbmp).

This is perfect for saving a capture of user-generated artwork to the server. Just set the data member of a URLRequest object to the ByteArray and post it. For more detailed information on how to put all the pieces together, Henry Jones has a really thorough post of compressing JPEG data and pinging it off a server to force an image download.

Unfortunately, to trigger a JPEG download, you still need to post the image data up to a server script and have it echo it back to the browser. The difference now, though, is that you can do the compression on the client end, saving both server CPU time and the time to upload the image data. This means saving a large image is a few second process instead of taking a minute and a half.

Actionscript 3 Core Library (as3corelib)

April 13, 2008

Nice overview of the YouTube API

I caught this self-referential tutorial on YouTube today which walks you through the basics of the YouTube API. It appears to be quite simple to develop Javascript or Flash applications that can control or interact with the YouTube player, or even completely reskin the interface.

What I didn't know until recently was that the API has provisions for allowing your application to upload videos and post comments. You can even authenticate users and allow them to interact with the YouTube backend through your private application. It looks like you can do just about everything programatically except remove the YouTube watermark on the video.

YouTube Developer's Guide
Developer API Blog

April 9, 2008

Air on the EeePC

There's a good post on the O'Reilly Rich Internet Application blog about running Air under Linux on the EeePC:

Adobe recently released the first public alpha version of the AIR runtime for Linux on labs. This is great news! I felt compelled to "geek out" with it, and was able to get AIR running on an Asus EeePC, although with a few minor issues.
The Asus EeePC runs a derivative of Xandros with KDE, which is not a supported Linux distribution for AIR. I got it working with a little help from the Adobe forums, and I'm very excited about it. I have never gotten into Linux desktop application development, but I think that's could soon change.

There's a thread on the Adobe forums that has guidance for running Air on Linux machines. It's a simple matter of downloading the SDK and running your applications from the command line using the adl command like so:

~/AIR-SDK/bin/adl -nodebug ~/app/META-INF/AIR/application.xml ~/app

The AIR runtime for Linux release notes are pretty clear that this is still a pretty alpha product with some unfinished features, but it's something, and if you do a lot of AIR or traditional Flash development, this would be a cool way to include Linux as a build target for your next desktop application.

AIR + Linux + EeePC [via Lebon Bon Lebon]
Adobe AIR for Linux
Running AIR on Linux (Adobe forum)

February 18, 2008

Actionscript mapping APIs

Yahoo recently released an official AS3 API for Yahoo! Maps, which provides another option for Flash-based GIS applications. This adds to Mapquest's official AS3 API and a couple of partially-complete, open source AS2 APIs for Google Maps.

All of these services provide the traditional AJAX APIs, of course, and that's perfect for a lot of uses. By using Flash as the rendering engine, though, there are new options available for the developer. Things like incremental scaling between tile sets, map rotation, and more advanced multi-level vector and raster overlays immediately come to mind.

Yahoo! Maps for ActionScript 3.0 - Link
Google Maps Flash Interface - Link
MapQuest AS3 API - Link
UMap: Google Maps Flash Overlay (flash above above AJAX map) - Link

February 17, 2008

360 degree video in Flash

Quentin Lengelé put together a cool demo for a Flash application that uses the Papervision 3D library to pan around a 360 degree video while it's playing:

The idea was to apply the BitmapData of that movie on a GeoSphere.
The GeoSphere is made in 3DSMAX with flipped faces and exported in ASE Format.
The ASE Format is readable by Papervision3D.

Then you just need to draw your bitmapData into a texture you apply to the ASE in ActionScript.

I'd be really interested in seeing a DIY version of the 360 degree camera hardware. Has anyone taken something like this on?

360 Degree Video with PaperVision 3D - [via] Link

January 17, 2008

Mouse wheel programming in Javascript and Flash

It's an underused feature, but you can give your Flash and AJAX/Javascript applications basic mouse wheel support that works across most common browser platforms. Google Maps' mouse zoom feature is a good example of how useful this small addition can be. If you're programming an application where zooming or scrolling is a common task, give your users a break and don't overlook this one.

On the Javascript side, Adomas Paltanavicius has put together a thorough overview and some example code for making this work in your application. You can capture wheel scroll events in IE, Safari, Firefox and Opera.

For Flash, you need to do some Javascript to Flash communication to capture mouse events on the Javascript side, and then make the data available from within the running Flash application. The SWFMacMouseWheel library provides the necessary glue to do all of this, bundling the Javascript listener code and an Actionscript event object into an easy to use package.

Mouse wheel programming in JavaScript - Link
SWFMacMouseWheel: use the mouse wheel in Flash - Link

December 28, 2007

Chumby software development

MakeFan: wrote in to remind us that those cute little Chumby devices are for sale now. The best thing about the little wireless touchscreen appliance is that they were designed to be open and hackable. The underlying operating system is Linux, and there are a number of lower level OS hacks, but you can also pretty easily whip up slick "widget" applications as well, since the Chumby's normal mode of operation is to play Flash Lite 3 applications.

The Chumby developer wiki has source for a number of sample widget applications that will help you get started if you're new to Flash. If you're a seasoned pro, Flash Lite 3 isn't all that different from developing in standard Flash / AS2. You just need to avoid a few features like bitmap caching, and lay off CPU and graphics intensive code.

If you're interested in developing for the Chumby community, but don't have a device, you can make an account on the chumby.com site. After logging in, you can upload your widgets to a "Virtual Chumby" and see how they would run on the device.

Resources:
Chumby Flash development overview - Link
Chumby Flash development forum - Link
Widget development Wiki - Link

November 17, 2007

Faking constants in Actionscript 2.0

Most people get around Actionscript 2.0's lack of constant variables by just naming member variables in all capital letters and remembering not to alter their value. This works okay, assuming you obey the rules, but what if you want to enforce a constant value so that it cannot be changed during runtime. Edgar De Loa wrote to us about this today:

Constants are not inherent in actionscript 2.0. The closest one could get is to make something private, and globally accessible. However, this doesn't ameliorate the problem, since the variable could still easily be changed, and the notion of it being a constant crushed.
I've found a very easy way to simulate constants. After looking around, I've found no one else that has suggested and/or used this method.

The first step is to create a static class, and define a private variable with the value one would like to store. The next step is to add a public function that returns the aforementioned private variable. Naming the function identical to the private variable (all in caps), is a great and easy way to access the constant.

static class ConstantVars { private var ARRAY_SIZE = 12;
public function ARRAY_SIZE() { return ARRAY_SIZE; } }

So now, one can use ConstantVars.ARRAY_SIZE() to access the constant, with no way to change or get rid of it. I've also found that naming the class something simple, like "Const" will make everything even more quick and simple.

This works, but I think we can even do one better.

By using a static "getter" method, you can retrieve enforced constant value and you don't need to use a function's normal parenthesis notation to access it. You can use this in a more global static "Const" class as Edgar describes for more global variables. Alternatively, you can encapsulate the static constant in any normal class, which is handy if the constant is relevant to a particular class (instead of just a global const variable).

As an example, let's say you had a class that authenticates a user. It's not a static class. It has some member variables and a few methods that deal with authenticating and storing a user's credentials. It also has a few message strings that are relevant to the authentication process, which you may want available to other parts of the application, but you want to make sure these strings are constants and aren't accidentally changed at runtime:

class Authentication { private var guid; private var username; private var password; private var server;



  public static function get SUCCESS_MSG():String { return "Login successful"; }

  public static function get NOSUCHUSER_MSG():String { return "The user was not found"; }

  public static function get SERVERERROR_MSG():String { return "There was an error while connecting to the server"; }

public function Authentication( server, username, password ) { ... } public function authenticate():String { //Performs the authentication and returns one of the constant error strings } ... }

Now code inside your Authentication class can refer to NOSUCHUSER_MSG directly, and code external to the class can access the constant values in a simple manner like Authentication.SERVERERROR_MSG. In this scenario, this could be pretty useful, because the Authentication class can pass success/error information around and external classes can know what the text means, even if it's changed in another translation. Another class could do something like the following to authenticate a user:

Authentication userauth = new Authentication( servername, user, pass ); var result = userauth.authenticate(); if ( result != Authentication.SUCCESS_MSG ) { displayError( result ); }

This is a really simplified example--and there is probably a better example that didn't immediately come to mind--but you get the idea. Real constants are supported in Actionscript 3.0 using the const syntax, but if you're working on an AS2 project, there's still a solution for you that will give you the same effect.

November 9, 2007

HOWTO - Use rich fonts in your web design

Only Two Cross-Browser Web Fonts
If you want to choose fonts that will look similar across most modern browsers you have two choices: Georgia and Verdana. Yeah, there are a few other fonts, such as Times, Arial, Helvetica, etc., that are available on all platforms, but they tend to look really nice on one platform and really crappy in another. Or they look nice in both, but the kerning or the letter height will be different for the exact same font size.

The web is a boring, two-font world.

Here's the thing though. Georgia and Verdana are really decent screen fonts. For large blocks of body copy, they provide you with a very respectable serif and sans-serif font option. When it comes to titles or navigational elements, however, you often want something that will stand out from the rest of the copy on your page.

Fonts in GIFs: The Old Way
The typical solution is to create your titles and nav buttons in Photoshop, then cut GIF images for placement in the web page. This lets you use any font face you desire, ensures that things look exactly the same in all browsers, and takes an extraordinary amount of extra effort.

If you want to put slick looking titles on your blog posts, this method will probably have you in a big white coat with extra long sleeves before a month is up. Even worse—hey, some of us look good in white—if you're using images for navigation or titles, the text isn't selectable, it isn't search friendly, and it's probably a nuisance for people who use screen readers to navigate your site.

sIFR: The Better Way
sIFR is a little Flash/CSS/Javascript hack created by Shaun Inman and maintained by Mike Davidson and Mark Wubben. It uses Flash's font-embedding and rendering capabilities to place whatever typography you like in your site. What makes it different from the GIF method is that you develop your site with plain-ol' HTML, apply normal CSS classes, and if your browser supports Javascript and Flash, sIFR replaces the text on page-load with the desired typeface.

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:
A normal (X)HTML page is loaded into the browser.
A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
If Flash isn't installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you've designated as something you'd like "sIFRed".
Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

Essentially, you can have the titles on your site render in any font you like by just adding a few lines of Javascript to the page template. Search engines and screen readers will still see normal HTML text, you can still use traditional fonts in your CSS classes so that it degrades gracefully on unsupported browsers, and the other 95% of browsers out there will render your site exactly as you designed it, regardless of platform. Oh, and you can select your fancy text too.

Seriously? Flash can used to improve web design _and_ promote web standards, accessibility, and indexability... This has been available for a couple of years, but I'm still left scratching my head.

Links:
Rich Accessible Typography for the Masses - Link
Download sIFR - Link
sIFR Wiki Documentation - Link
sIFR Example Page - Link

September 18, 2007

Open Source Seam Carving

For those of you who didn't catch our previous post about seam carving, it's a smart image resizing algorithm, invented by Dr. Ariel Shamir and Dr. Shai Avidan. Where you would normally have to choose between cropping or squeezing/stretching an image to change its aspect ratio, the seam carving method will attempt to find horizontal or vertical paths within the image that can be removed without altering "important" parts of the image, such as people or other objects that would look funny if squished.

There are now a couple of open source Actionscript implementations as well as a GIMP plugin that enable you to "liquid rescale" your photos.

I'm thinking that with a few simple tweaks, you could hack one of the Flash versions load a user-specified JPG or PNG and provide an interface for adjusting the image. It'd just be a simple matter of doing a screen capture to pull the result back into the image editor of your choice.

There's also a Photoshop plugin that claims to do this, but it's closed source, unavailable for macs, and the test version doesn't work for images larger than 640x480. To that I say, "Phtfphpht," but I've included a link in case you are interested. To be fair, it's probably cool... I'm just more excited to see the open source versions surfacing.

References:
GIMP Liquid Rescale (lqr) plugin - Link
Content-aware image resizing in Actionscript (Joa Ebert's original source) - Link
Seam carving in Actionscript (Mario Klingemann's optimizations) - Link
Pictual: Photoshop plugin for smart resizing - Link
Seam carving: content-aware image resizing - Link

June 20, 2007

HOWTO use the Wiimote buttons in Flash

A while back, WiiNintendo posted the keycodes that are detectable by Javascript when the Wii's buttons are pressed. With this ability, you can create Javascript games that will play on your Wii. Unfortunately, even though the Wii browser ships with the Flash plugin, those keycodes cannot be detected natively in the Flash environment.

Quasimondo came up with a really clever hack that solves the problem. You can create a second flash movie and use Javascript to resize it to specific widths for particular keycodes. Even though Flash cannot detect the keycodes, it does receive an onResize event. When it receives this event, it then retrieves its current width, which was set to the value of the keycode. This second swf file can then use Flash's LocalConnection to communicate that value to the primary swf.

How to Make the Wiimote Work in Flash - Link
Aral Balkan's discussion on using the Wiimote in Flash - Link
Wiimote Key Codes @ WiiNintendo - Link

June 19, 2007

Dynamic Abstraction: computer generated art with Actionscript

Understatement: Joshua Davis creates some really incredible artwork in Flash.

By combining vector primitives, a carefully chosen color pallete, some deterministic rules, and pinch of random(), the images are generated in Actionscript at runtime. Each time the software is executed, a unique image is created, though it maintains the same guiding principles of other iterations of the same series.

You can download the source for a number of very discrete examples. Tweak and experiment with his code. It's a nice set of building blocks for creating your own dynamic artwork.

Dynamic Abstraction: examples and source code - Link
Joshua Davis' blog - Link

May 4, 2007

Transfer and edit your Mii files

Mii Editor is a cool flash application that can edit and save Mii binary files. You can transfer your Mii to and from the Wiimote with MiiTransfer, edit it with the Mii Editor, or take screenshots and share your Mii file with friends.

Resources:

Mii Editor
Wiimote data transfer library (includes MiiTransfer utility)
Detailed info on the Mii data format
My Mii

March 12, 2007

Loading 3D Model Data In Flash At Runtime

I was working on a small 3D flash program today and wanted it to read in it's model data from a file that I created with another program, such as Blender. I'm not sure if it's the best way to do things, but it was fairly painless to export the model data to a plaintext VRML file and then convert the mesh data to a simple XML format. It's trivial to read in XML data in Flash, so this saves having to parse a more feature-rich 3D file format.