FLASH :: FLEX :: ILLUSTRATION :: ANIMATION
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.
//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 »
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.
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.
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, light and shadow.
Comics 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 pops with dimension while the left side looks more like a cave drawing.
Building Tiled Backgrounds Using Photoshop and Illustrator – taterboy
November 3rd, 2009 | Filed under: Design, Illustrator, Photoshop, Tutorials
I can’t wait to get back to publishing Flash tips and code, but we’ve been so wrapped up in ChessJam lately leaving so little time to clean up code and make things more component-ized. I am enjoying the break from programming though, doing illustration again has been very rewarding.
Fixing Blotchy Textures:
In producing tiled textures for some of the background paintings and 3D renderings, I found that even though the tiles did not really show any seams, they were creating some weird patterns over the whole tiled area. They needed tweaking without a long and laborious process of exporting and rendering. The key for me was to have a realtime preview of what I was working on, seeing how the tile would look tiled over a larger surface while I was painting in Photoshop. There may be better ways, we always appreciate feedback, but this worked really well and now my textures are much less blotchy.
Read More »
AS3-101: Intro to Functions Part 2 and Class Overview – taterboy
September 26th, 2009 | Filed under: ActionScript 101, ActionScript 3, Flash, Flex, Tutorials
The Class:
Classes are a collection of variables and/or functions that provide unique functionality. Within a class, functions and variables define the functionality and how that functionality can be expanded or used by other classes or components. In AS3 a class is wrapped inside a package, a class must be public and have a public constructor(function) by the same name.
package{ public class FunctionTester{ public function FunctionTester(){ //constructor, runs after class is loaded, but before visual elements are loaded. //classes and their constructors must be public trace("load"); } } } |
Inside the package brackets is where the class is declared and all other classes are imported, also meta information can be placed at this level. Everything else is part of the class and must be contained within the class brackets.
Read More »
AS3-101: Intro to Functions Part 1 – taterboy
September 13th, 2009 | Filed under: ActionScript 101, ActionScript 3, Flash, Flex, Tutorials
For Flash Developers:
(If you are looking for Flex related stuff, without a timeline, skip down to “The Foundation”.)
Functions really are the building blocks of programming. They take your code off the timeline and open doors to more complex applications. For instance, place the following code on the timeline of a new Flash file (AS3), publish a preview and see what happens.
function tester():void{ trace("something"); } |
Notice that nothing happened, meaning the word “somthing” or anything else did not trace out in the console palette. This is because the function was recorded in the Flash Players memory, but not executed. Now add a few frames, say five or more, and add this line on the last frame.
tester(); |
Something happens now, the word “something” appears in the console window every time the playhead reaches the last frame. Flash Player will keep looping until it gets a stop() method call. So let’s do that now. Update the function tester with the stop command.
function tester():void{ trace("something"); stop(); } |
Now notice the the play head starts on frame 1, loads the function into memory, then progresses on to frame, 2,3,4 until the last frame. Once on the last frame, the function tester from the first frame is executed from the last frame, which also tells the Flash player to stop. We can verify that the Flash Player is indeed on the last frame when tester is called by getting a trace of the current frame. I am sure you will just trust me so we can move on, but just incase you don’t, see below.
function tester():void{ trace(currentFrame); stop(); } |
The Foundation:
(Welcome Flex people)
Like I mentioned earlier, functions are the building blocks to applications, and like blocks different types of functions have different results. First we are going to learn about the most common function and some scenarios for it’s usage.
Read More »
Flash/Flex Tips and Free Book Drawing - Using Test Projects – taterboy
September 10th, 2009 | Filed under: Flash, Flex, Tips
We will give away 1 free copy of Foundation ActionScript 3.0 Animation, Making Things Move and Foundation Flash, Cartoon Animation. Details below.
UPDATE
The drawing has been canceled because of lack of interest. I still have the books and will think of another way to distribute them.
Because Revisions Suck:
Revisions are so common in our business, you can never take them personally. It is even harder when you feel the project you are working on is finished and the client is asking for a whole new feature. This is normally a good time to go to lunch or take a break. It happens, if they are a good client or you are lucky enough to get a change order out of it, it is difficult to say no. Once over the initial frustration and you are able to think clearly, the seemingly impossible chore becomes less impossible. Ideas begin to flow and your mind fills with thoughts like, “Maybe this will not be so bad” or “It should only take an hour or two”; instead of “It would have been nice to know about this sooner” and other things I dare not publish on this blog.
Read More »
AS3-101: Introduction to Variables – taterboy
August 5th, 2009 | Filed under: ActionScript 101, ActionScript 3, Flash, Flex, Tutorials
Actionscript 3 101: Introduction to Variables.
ActionScript 3 (AS3) 101 is a series that will cover the fundamental use of actionscript in the process of building interactive projects. We will start with an elementary overview of terminology and the basic elements that make things happen in actionscript. The first few posts in this series will be an extended version of AS3 101, The First ActionScript I Ever Learned. If you feel you are able to jump in at that post and move forward than you will be able skip a lot of extra reading. These first few posts should enable someone with a very little to no knowledge of Flash itself to start building projects in AS3.
The most basic script element is the variable. It is best to describe it with an example.
x + 2 = y
Read More »
Illustrating in Illustrator Better Faster, The Happy Frog – taterboy
July 27th, 2009 | Filed under: Digital Art, Illustrator, Tutorials
The Happy Frog Illustrator Tutorial Video (HD)
Here is my first screen cast with an introduction to illustrating in Illustrator. Included are some very important tips in creating great illustrations in less time as well as an overview of the illustration process. We will create a Happy Frog character almost completely using the ellipse tool.
There are 5 rules to Illustrating in Illustrator, Better Faster. They are mentioned in more detail here, including four reasons for cleaning up strokes in your final artwork.
Read More »
RSS/ Stay Connected:
Affiliated AIR Applications
Sponsors
taterboy1 tweets
Most Popular
Featured Blog: End User
Blogroll
- Amin Amat - Comic book artist
- AS3 to Cocoa Touch - Andy Jacobs
- ChessJam - Live Online Chess
- Dazzledish: New blog about food
- Devgirl - Holly Schinsky
- Flex Examples
- GotoAndLearn
- Greg Wilson’s Ramblings
- HD Interactive Blog
- HD Interactive Site
- Mac OSX Hints
- reallyMedia Site
- tBlurb
- TFFADG
- theFlashBlog
- WorkWatcher - Business Software