General | 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 »

Adobe Developer spotlight: Todd Williams – taterboy
February 7th, 2010 | Filed under: Bio, General Info

Wow! Spotlighted by Adobe, this is really awesome! I couldn’t want to let the month go by without acknowledging how cool it is to have my pretty mug share the Adobe Devnet homepage with those of Kevin Lynch and Ben Forta. It is a great honor to have Adobe notice the work we are doing over here in Tampa. Thank You!

The Thank You Speech:
I would first like to thank…. (music starts playing) .. and It is an honor…. (Large suited men are closing in) … the world would be a much better place if … (being dragged off stage still clinging to the microphone, dragging the podium behind us) .. and in closing I would like to say….

BTW:
My mom now has a print out of the Adobe Devnet homepage on her fridge, as well as bumper sticker on the back of her car saying “My son is Student of the month at Adobe.com/devnet”.

The Links:
http://www.adobe.com/devnet/
http://www.adobe.com/devnet/spotlight/spotlight_twilliams.html

P.S. New Tour de Flex samples, as well as a few development tips are currently in the works. Client work and crazy hours has aside, I Hope to be posting them soon.

Technorati Tags: Adobe, AIR, developer, devnet, Flash, Flex, todd williams

| No Comments »

Illustrating In Illustrator 101 part 3 of 5 – taterboy
December 24th, 2009 | Filed under: Design, General Info, Illustrator, Tutorials

Defining Shapes

Lines:
Some may think that illustration is all about the lines, comics and other art styles may give this impression. I use line-work in most of my illustration styles, though not always black lines. If you do not use lines in your work, you use color or some other means of creating contrast between forms and objects. It is this contrast between colors or light and dark values that produce the lines we think we see everyday in the world around us. We will discuss the use of line-work and contrast to properly define shapes using light and shadow.

Comic artists may use line-work, but on closer inspection we find that those lines do a lot more then just define the shapes of the drawing. The line weight varies as it contours each element. This line variation builds the foundation of the form which gives the illusion of dimension. As you can see with the simple line drawing below. The drawing on the right has more depth while the left circle looks more like a cave drawing.