Tech Tuesday: Flashbacks from Flash on the Beach

I’m just back from Flash on the Beach 2009 in Brighton, England, where I witnessed loads of inspiring talks, great people and some sneak peeks from Adobe at the three-day conference.  I hope to post video of my “Flash your TV” presentation as it becomes available in the coming days, but meanwhile here are a few key takeaways from the Adobe keynote.

During the keynote session they demoed Flash CS5 and integration with Flash Builder.  Some of the key features of the new software:

Code snippets allowing designers to generate stubs

This can be used by both developers and designers that work in Flash.  The snippet they demoed was for mouse movement on an object.  Having code snippets will allow designers to add basic functionality without having to depend on a developer every step of the way.

Integration between Flash and Flash Builder

You will be able to open projects started in Flash using Flash Builder.  All project files will automatically be generated.  This will allow developers to code in the environment that is most comfortable to them.  You can also build Flash projects straight out of Flash Builder.

Improved drawing tools

In the demo they used the deco-brush to draw various types of trees using one stroke of the mouse.  The brush can be programmed allowing designers to quickly draw common objects.

Code completion in Flash

This one is self explanatory and long overdue but Flash CS5 will support code completion.  You will get completion on methods and properties assigned to a custom class.  Great when you get a rescue project and are forced to use the Flash IDE.  Personally, I’ll be sticking to Flash Builder for my development needs.

Tech Tips: Compress Transparent PNGs with Flash

Do you use transparent PNGs in Flash, Flex or AIR? Want to cut your application file size in half?

Embedding transparent PNGs dramatically increases the size of your Flash, Flex and AIR applications. Photoshop and Fireworks dot not have any compression available for transparent PNGs (that I am aware of).

Import your PNGs into Flash, give them a linkage id, and export the file as a SWF. Make sure to set your compression level in the publish settings (default is 80%). Using this method, I was able to cut the file size in half for a number of applications.
Continue reading Tech Tips: Compress Transparent PNGs with Flash

Nerdery Rockstars On Tour

flashbelt09Attention AIR developers: Are you interested in learning about caching images in binary format, SQLite database migration, re-using existing view components, memory fragmentation and general tips / tricks about developing your application using Adobe AIR? If you answered YES than you should attend Minh Vu and Chris Black’s session at Flashbelt on June 8th at 1:30PM. We’re going to have a killer presentation for everyone interested in developing Adobe AIR desktop applications.

Can’t attend Flashbelt?
I would highly recommend attending Flashbelt. Networking opportunities, great presentations and lots of fun! OK, if you absolutely can go than keep an eye out for our presentation which I will be posting to this blog on Monday. And check out all of our Flashbelt coverage as the event happens.

Who should attend?
Developers that are currently developing AIR applications or are interested in doing AIR development in the future. Project managers would also benefit from knowing the decisions that go into creating large scale applications. How about designers? This presentation is geared towards the development side of AIR but designers are welcome.

About the presenters:
Chris Black is a Senior Developer at Sierra Bravo who focuses on ActionScript development with Adobe Flex and AIR, and is interested in integrating social networking APIs into Rich Internet Applications. He covers these topics as well as sharing solutions to the problems he encounters when working with Flex and AIR on his blog, Chris has a degree in Computer Science from the University of Wisconsin – Eau Claire, and when he’s away from the computer he enjoys rock climbing, backpacking, and tennis.

Minh Vu is a Developer at Sierra Bravo who works on interactive development with ActionScript and JavaScript. He has a strong interest in applying Model Driven Development to Flash or AIR applications. Minh studied at the University of Minnesota Duluth where he got his degree is in Information System & Technology. In his spare time he enjoys disc golfing, snowboarding, ultimate frisbee, and learning how to program for the iPhone.

Tech Tips: Prevent scaling in ActionScript projects

The scale mode for ActionScript projects is set to allow zooming by default even when the width and height are set to fixed sizes. This can distort your website when the user uses ctrl-mouse scroll wheel or hits ctrl-plus / ctrl-minus.

Set the stage scaleMode to “noScale” and configure the containing div to stretch at 100% for the height and width. You may also want to set the stage alignment to “T” which will align your content to the top of the page. This will work in AS2 as well but the ‘S’ is capitalized in Stage.
Continue reading Tech Tips: Prevent scaling in ActionScript projects

Tech Tips: Embedded Fonts & Filters with Input Text in ActionScript

We need a TextField of type TextFieldType.INPUT that has embedFonts set to true and has an inner drop shadow filter. Sounds easy enough right? The first problem is that DropShadowFilter’s don’t work correctly with TextFields created using ActionScript. The second problem is that setting embedFonts to TRUE and leaving default text empty on a TextField with type TextFieldType.INPUT causes the field not to be selectable.

Lets tackle the DropShadowFilter first. After many failed attempts at getting filters to render correctly on TextFields the next best solution was to create a sprite that sites right behind the text field that renders the filter.
Continue reading Tech Tips: Embedded Fonts & Filters with Input Text in ActionScript

Tech Tips: How to fix fuzzy pixels in Flex

What are fuzzy pixels? Semi-transparent lines that appear on the edges of your Sprites that make them appear fuzzy or blurry. This is the result of positioning a custom drawn Sprite (using the graphics property) on non-whole number pixels (for example myObject.x = 1.5).

Your probably wondering why anyone would set a Sprite to an decimal number of pixels? Well, most of the time this occurs when the positioning is based off of a mathematical equation. For example: myObject.x = this.width / 2. This would produce 50.5 if the width of the container is 101. One of the biggest problems with this is that the fuzzy pixel problem has a waterfall effect. Everything contained within that sprite placed at a decimal number position will have semi-transparent edges. Another reason would be designers that set positioning of items to half pixels in Photoshop and attempting to reproduce the design pixel perfect in Flex.
Continue reading Tech Tips: How to fix fuzzy pixels in Flex

Tech Tips: Display TwitPic Images in Flex & AIR

The TwitPic API does not currently support outgoing requests and the image source from amazon aws contains an AWS AccessKeyId, expiration time stamp, and signature. This would normally require a regular expression to rip the source JPG path out of the HTML. Ripping the source out of the HTML is a bit of a pain and is not a long term solution. It is possible to use the following shortened url to gain access to the full image path using the TwitPic image id.
Continue reading Tech Tips: Display TwitPic Images in Flex & AIR

Tech Tuesday: Skinning Flex Components – Part 1: CSS

This will be a three part series on skinning Flex components. For part one I have chosen to dissolve the myth that Flex 3 can’t truly cascade styles. This three part series will start simple and get more complex with each post. You can use this code to mimic descendant selectors, dimensioning and multiple class names within Flex.

Flex can’t do true cascading styles like HTML (for example a black play button)

YES, flex can do cascading styles. It just requires a different approach. A programmatic approach. Don’t worry, I assure you that even a non-programmer can pick this one up.

Lets dive a little deeper. Cascading styles refers to the ability to start with a button, style it into a black button then go a step further and make it a play button. First, create a button and use some CSS to style various properties of that button.
Continue reading Tech Tuesday: Skinning Flex Components – Part 1: CSS