Flex | Taterboy.com: Graphics, Multimedia and Such

Product Review: SWF Protector – taterboy
July 18th, 2010 | Filed under: Flash, Flex, Reviews

Get 25% off of SWF Protector by using the coupon code: REFLPRTCT-RTW5

Though we try to encourage openness and sharing here at taterboy.com, there are some swf files that have to be protected. SWF Protector, by DECOMSOFT, is a very simple application for securing your code and assets within an SWF. The procedure could not be easier, just load the swf you want to protect, then click the “Protect” button. SWF Protector uses some kind of protection and obfuscation to secure your SWF files; Advanced Mode gives you control over how much protection and obfuscation is applied to each file.

In testing SWF Protector we used two actionScript 3 games, one built in Flash (a few thousand of lines of code with embedded graphics and sounds), the other built in Flex( light on code and graphics). With the Flex game the process was just as described above, a couple clicks and the swf was protected. In the case of the Flash game, I had to turn off obfuscation in one part of the swf to get a secured version to play all the way through without error. Once each game was protected and verified, the latest decompiler was not match for them. All the code, graphics and game resources were safe and sound. As a test, I ran a decompiler on the unprotected versions of the games and they were both rendered back into source code, cold and exposed.

There are a few swf protection applications out there, some with very advanced features. SWF Protector is the simplest way to protect your SWF files at a fraction of the price.

SWF Protector
Developer: DCOMSOFT
Platform: Windows, Mac, Linux
Price: Business License: $59.95

Get 25% off of SWF Protector by using the coupon code: REFLPRTCT-RTW5

Technorati Tags: Flash, Flex, obfuscation, security, swf encryption, swf protector

| No Comments »

Intro to MVC Part 1: The Controller Class – taterboy
July 13th, 2010 | Filed under: ActionScript 3, Flash, Flex, Games, Tutorials

About a year ago, @devgirl, introduced me to the MVC framework and provided me with a stubbed out demo of everything working together. There were many more class files than I was used to, one for data and variables (Model), one for all the graphic elements and UI controls (View), and one to control all the information between the two (Controller). My brain hurt for a couple weeks as I attempted to absorb what seemed like magic and how to apply it to a new job that was about to start. This process has changed the way I approach every project, even simple tasks with only a few lines of code. On smaller projects I may only leverage one part of the MVC framework and figured this was the best way to introduce it to others without it being so overwhelming. So today, I what to present the Controller class, which is part of the MVC framework.

Technorati Tags: ActionSript 3, AS3, controller, Flash, Flex, framework, games, Howto, model, service, Tutorial, view

| 1 Comment »

How to Build an Engaging Preloader in Flash – taterboy
June 30th, 2010 | Filed under: ActionScript 3, Design, Flash, Flex, Tutorials

The Importance of a Good Preloader:
Everyone hates to wait, especially for websites to load. The only thing keeping a potential user sitting in their chair and staring at the screen, while your application loads, is the hope that eventually something great will happen. If that user is impatient, like most of us, the preloader may be the only opportunity you have to interact with a potential user/customer. The fact that something is moving on screen reassures users that your website has not locked up their computer. We may not think that a few seconds is a long time, but to the waiting user, it may seem like minutes. We should take advantage of this brief moment to make a good impression, give them a taste of what’s to come and develop trust.

Technorati Tags: Flash, Flex, Loader, Loading, preloader

| 1 Comment »

Building Custom Loaders in Flex – taterboy
June 5th, 2010 | Filed under: ActionScript 3, Animation, Flash, Flex, Tutorials

In an earlier post I talked all about building Flex UI components with Flash. This example shows how to create a custom loader component, in Flash or Flex, and use it to replace the standard Flex progress bar.

The Base Preloader:
I found a preloader class online that implemented the IPreloaderDisplay, this is required to build a custom preloader. You can find out more about building your own here. I took the class I found online and made it generic so I could use it as a base class for all my future preloaders.
Read More »

Technorati Tags: ActionSript 3, animation, AS3, Flash, Flex, Howto, Loader, preloader, progress bar

| 2 Comments »

A Microphone And A Baby - Flash AS3 Microphone Class – taterboy
May 21st, 2010 | Filed under: ActionScript 3, Audio, Flex, Tips

Here is a little demo from some recent playing with Flash’s Microphone class.

Real demo is below the fold.

This is basically a microphone level meter that my son and I thought was pretty fun. Don’t wake the baby.
Read More »

Technorati Tags: ActionSript 3, animation, AS3, crying baby, Flash, Howto, Microphone

| 2 Comments »

Combining Flash Visual Components with Flex Classes – taterboy
March 30th, 2010 | Filed under: ActionScript 3, Flash, Flex, Tutorials

Building Visual Flex Components using Flash swc Shared Libraries.

I love building skins or visual components in Flash and doing all my coding in Flex. I also try to make all the code as component-ized as possible, so that it can be reused in future projects. So I have visual component classes from Flash and functionality classes built in Flex. How do we marry the two without hardcoding the flash asset names into your Flex code?

The Approach:
Build as little functionality in Flash as possible and establish templates for how each component should be structured. Here are a couple processes for getting those Flash visual components hooked up to your Flex code.

Method1 - The Direct Approach:
In your code that is specific to your application, create all your visual instances first then pass them in as properties to your class.

There is a Flash visual component called “NewButton”

^?View Code ACTIONSCRITP

//create the visual instance
var btn:NewButton = new NewButton();
 
//create the functionality class instance
var btnCode:NewButtonClass = new NewButtonClass(btn);
addChild(btnCode);

Inside the NewButtonClass class the “btn” instance is used as an Object, the functionality is attached to the visual object and everything is added to the stage.

^?View Code ACTIONSCRIPT

private var baseBtn:Object;
public function NewButtonClass(obj:Object):void{
	baseBtn = obj;
 
	// attach listeners
 
	addChild(baseBtn);
 
}

Depending on the class and needs, sometimes it is best to pass in an Array of visual object instances.
Read More »

Technorati Tags: Adobe, class, custom components, Flash, Flex, swc

| 1 Comment »

Flash Player 10 3D settings with AS3/Flex – taterboy
March 9th, 2010 | Filed under: ActionScript 3, Flash, Flex, Tutorials

Flash Player 10’s 3D capabilities are pretty light, but they have opened up many possibilities in UI design. Getting the perspective just right will take some tweaks, so here’s a demo to show some of the inner workings, like focal length and field of view.

Using the PerspectiveProjection class is the key to getting 3D in Flash looking just right, it is also very easy to use.

^?View Code ACTIONSCRIPT

//new PerspectiveProjection
var pers:PerspectiveProjection = new PerspectiveProjection();
 
//set the field of view - doesn't really do much
pers.fieldOfView = 55;//Default: 55, Range: 1 - 180
 
//set the focal length
pers.focalLength = 663;//Default: 663
 
//get stage center for a straight view, if you want a straight view.				
var centerX:Number = stage.stageWidth * 0.5;
var centerY:Number = stage.stageHeight * 0.5;
 
//set the projection center
pers.projectionCenter = new Point(centerX, centerY);
 
//assign to root/stage
//root.transform.perspectiveProjection = pers;
 
//assign to target/DisplayObject
triImage.transform.perspectiveProjection = pers;

See demo below.
Read More »

Technorati Tags: 3D, ActionSript 3, field of view, Flash, Flex, focal length, perspectiveProjection, projection center

| No Comments »

Flash vs. Flex equals Shared Libraries – taterboy
February 20th, 2010 | Filed under: ActionScript 3, Flash, Flex, Tips

SWC are files full of gooey goodness. They are an archive file or class library contianing an swf and xml catelog. You may have used an SWC to integrate a Flex/Flash application with any of the most popular web applications like facebook or yahoo. If not, then what are you waiting for?

I’m not sure what S.W.C stands for, but I do know they are an awesome way to share and distribute code. Everything is in one file, super easy to update, and if a newer version is not compatible with old code, it’s easily revered by replacing the newer SWC with a preivous build.

How To:
For a great tutorial on how to get started building and distributing your own shared libraries from Flex, check this out. http://tv.adobe.com/watch/adc-presents/creating-swc-files/ This video, I think is pretty deep, the swc build stuff starts about 7:20 in, but watch everything and hopefully it will all make scense.

Here is some more light reading (the SWC basics):
http://livedocs.adobe.com/flex/3/html/help.html?content=building_overview_5.html

Flash and Flex Love:
Building code libraries are cool and everything, but the reason I love SWC’s so much is the compatibility between Flash and Flex. It is like a holy union, they way graphic or media elements from Flash can be shared as classes for use in Flex. We use SWC’s for any project with a custom UI, basic skins and advanced visual effects.

The Battle Royal:
There is a growing question about the future of Flash and Flex, especially now that Flex is called Flash Builder (That’s just too confusing for me, so I’ll continue to call it Flex for now). Flex 4 has these new skin classes, Catalyst is getting a ton of buzz and the beta version of Flash CS5 looks to have a more Flex-like coding environment. So, which one will reign supreme? For me that question is hard to answer, I currently start most of our projects in Flash, all of the media elements are imported to build a library of visual/audio components. Any complex animations are created using the Flash Timeline. The decision about which program will be used for the rest of the project is based on how much coding is necessary. Flash CS4’s coding environment is no match for Flex’s, if there are more than a hundred lines of code needed, then Flex wins the day. It will be interesting how much this will change once I get my hands on a copy Flash CS5.

For more information on how to get started building Flex Components in Flash, check out this tutorial. http://tv.adobe.com/watch/adc-presents/turning-animations-into-flex-components

To get the Flex Component Kit for Flash http://www.adobe.com/go/flex_ck_en

For more info on Flex Containers from Flash watch this:
http://tv.adobe.com/watch/adc-presents/creating-flex-containers-in-flash

As A General Rule, No Code:
Using SWCs are a great way for Flex programmers to work with the creative team. Designers can build everything they need in Flash and hand it off as a shared library file(SWC) that drops in the “libs” folder of the Flex project. Flex components from Flash include all the graphics, animation, audio and code. The Flash guys can build complete working components in Flash then hand them off to the Flex team. As a general rule do not include code in your Flex components from Flash. By just providing the visual symbols, the Flex team can code everything and make updates to all non-visual elements as needed. In most cases the Flex team will maintain the app long after the design team has moved on to new projects. The more code that can be updated in Flex, the better, it sucks having to send the SWC back to the design team for code updates that could have easily been done by the Flex team. This seems to be the catalyst approach, allow the designer to build the UI, while keeping all of the code accessible to Flex.

The Big Question:
Besides code, what are the benefist of using Flex components from Flash instead of the, commonly preferred, image files? Packaging and consolidation has merit. Flash also saves out vector graphics which can be easily scaled unlike bitmap files. Scale 9 Grid is super easy to setup in the Flash IDE, just check a box and visually align the grid to the artwork. There are many other custom component and UI opportunities, like animation, that are only available when using SWC’s from Flash.

The Downside:
The creative / non-programmer person on the team may have terrible naming convention skills, using creatively vague names for all these new Flex Components, like naming some elements after Star Wars vehicles or some other nonsense. The designer will have to create a legend file describing all the components and their names. It is also helpful if an swf or image is provided with all the symbols layedout and properly labeled by class name. I would suggest prefixing all of the new component names with the name or abreviation of the project. That way after a few taps of the keyboard in Flex, you can see a nice list of all the class names from the SWC.

Please provide some comments on how you work with Flash and/or Flex. If you know or have a good guess on what SWC stands for, comment that as well.

Technorati Tags: animation, class library, component, Flash, Flash vs Flex, Flex, shared library, swc

| 3 Comments »

Create Adobe AIR Badges At Any Size – taterboy
December 16th, 2009 | Filed under: ActionScript 3, Design, Flash, Flex, Free Components/Classes

UPDATE: 2/17/10

We added a redirect option to the HDBadge that allows AIR application install badges that are too small (smaller than 214×137) to redirect to another page or call a javascript function. The size 214×137 was as small as I could shrink the badge before the AIR install dialog would not show up (tested on a Mac w/Safari). See updates below.

Are you sick of trying to design around the existing Adobe AIR badge templates. In most cases they are way too large or have a look and feel that does not really match your design. A few companies have their own custom solutions with AIR badges that are nicely integrated into their sites. I wanted that for the updated ChessJam site, but instead of building one badge for each size, I wanted a completely flexible (one size fits all) solution from one swf.

The HDBadge Features:
1. One Size Fits All - The size of the badge is determined by the size you use in the object/embed code of the swf. The swf does not stretch, so you could have a badge that is 40×20 and 800×600 from the same swf, depending on your needs.

2. Smaller Footprint - One of the reasons the current badges are so large is they display AIR/App install error messages. This version hides the button after clicking revealing a console type area behind it. The error text conforms to the size of the swf.
Read More »

Technorati Tags: Adobe AIR, AIR, AIR badge, bages, custom, Flash, Flex

| 10 Comments »

ChessJam Now Has Robots And A 14-Day FREE Trial – taterboy
October 20th, 2009 | Filed under: ActionScript 3, Flash, Flex, Games

No new code or demos this week, I spent most of the week and weekend fixing bugs and adding robots to ChessJam.

UPDATE

As of Dec 16, 2009, ChessJam is completely free, go to ChessJam.com to get started. For the most up to date information checkout the ChessJam blog or our ChessJam facebook page.

All those who tried out ChessJam and only got a 3 day trial, email us at “chessjam [at] gmail [dot] com”, we are now offering a 14-day trial. Also with robots in the castle, you have a reason to stick around. With everyone else hanging out hopefully the more actual people you will get to play. It takes time to build a community, “If You Build It, They Will Come” only works if you have patience and good PR (we are working on the later). Read more about our recent updates at the ChessJam blog, HDI blog and Greg Wilson’s blog, also follow us on twitter @Chessjam. Pay special attention to the challenge, who plays the most games by October 31st, gets a free copy of ChessJam (bottom of the post “ChessJam for All”).

Why ChessJam?, Why us?, Why now?
Good questions, let me explain. When we purchase a chess set at the store, we have the option of a really cheap plastic set or a really fancy set made out of wood, metals, and/or fine stone. But when we play chess online this or something like this is our only option.