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.
HDSlide an AS2 Class For Making Things Slide – taterboy
January 7th, 2010 | Filed under: ActionScript 2, Flash, Free Components/Classes
HDSlide is a collection of code brought together in an effort to make one actionsScript 2 class that will fulfill all your actionScript sliding needs. This version is very versatile with two completely different animation modes.
Animation Modes:
One animation mode will change the speed of the sliding animation based on how far the mouse is moved away from the center. When the mouse is in the middle, the animation moves very slowly, then speeds up as the mouse moves toward the edges. The other mode is more like scrolling, if your mouse is at the left side or top of the slide area, the slide will be at the beginning. As the mouse is moved to the other side, the sliding MovieClip will scroll based on the mouses position between the two extremes.
Current Samples:
The FLA contains two samples that show off just a few usage variations. The FLA was built in a hurry, so it is not an example of how things should be done, it is just a sample of what is possible. There are many more possibilities, just download the source and experiment. One example not shown is the ability to pause the mouse move detection using “pauseSlide(true)” while still having the slideTo() method fully functional.
Usage:
1. Create a MovieClip to be scrolled.
2. Then mask that MovieClip with another MovieClip.
3. Give them both instance names.
4. Import the class
import com.hdi.as2.HDSlide; |
5. Create a new instance of the class with the instance names above in the arguments.
var hSlide:HDSlide = new HDSlide(menuMC, menuMask); |
That’s it to make a simple sliding movieClip.
Read More »
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 »
Building iPhone Applications with Flash CS5 - video – taterboy
December 6th, 2009 | Filed under: ActionScript 3, Flash, iPhone
Lee Brimelow at gotoAndLearn.com posted a great video tutorial showing how easy it is to build iPhone applications with Flash CS5. Here are a few subtle observations from watching the presentation.
1. The iPhone development option in Flash is no small part of the next Flash release. The Flash Team really want to make the process as pleasant as possible. It will be easier to build iPhone apps, according to the video, then it was to build AIR applications when AIR was first released.
2. Flash CS5 will have a more Flex-like feel and better coding experience when writing code in the actions palette.
3. iPhone hardware acceleration will be in the final release of Flash CS5, the video has an exciting preview of different examples of Flash animations using hardware acceleration on the iPhone.
It’s hard not to cynical, the official announcement was made at MAX seemed too good to be true, the lack of hardware acceleration made the pre-release applications less appealing, but things seem to really be coming together as we are coming closer to the final release. The last obstacle is the size of the applications themselves. We want to release applications that can be downloaded over the air.
By the way, I am still waiting on my pre-release version of Flash CS5, maybe Santa can put in a good word for me. I have been nice all year.
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, please refer to ChessJam.com for more up to date information.
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.
This is an early mockup of our 2D board, I was promptly sent back the to my sketchbook.
To see what happened next, Read More »
Augmented Reality Sound Mixer Demo – taterboy
October 8th, 2009 | Filed under: ActionScript 3, Audio, Flash, Flex
Here is one of the demos we built recently to show some possible uses of Augmented Reality and Flex. This demo uses the FlarToolKit to detect the instrument patterns and place a 3D plane on screen with Papervision 3D. For the main mixer we use mp3s and 2D animations to show the different audio tracks. 3D is the future, but for now the low polygon count does not stand up to fully illustrated 2D graphics yet. We are using the FlarToolKit more as an input device to turn on and off audio tracks and to change the volume.
The Possibilities:
This sample is just a seed for the possibilities of future technology in live performances, not tied to a computer, how different patterns could create cues for video, audio, lighting and effects. The sample also shows how layering different symbols in different order can change the dynamic of the user experience.
To use this demo you will have to print and cut out the markers from this PDF file.
Included Symbols:
Drum Track
Bass Track
Horn Track
Guitar Track
Volume Fader
Eject (not used)
Note: Make sure you have plenty of black ink, use mat paper or card stock for best results. Depending on the lighting and what is behind you may have to put a piece of white paper behind the marker to force the webcams contrast higher.
click below to launch
To start Jamming, show a track marker to your webcam to display or remove an audio track. You can use the Volume marker to lower the sound to 20% or raise it back to 100%. The first time a marker is shown to the camera, it adds a track or lowers the volume. If you show a marker to the camera again, the previous action from that marker will reverse.
Note: In our demo we start with the drum and bass tracks to build a good rhythm, then add the horn. It sounds OK. Then remove the horn and add the guitar lead. The horn and guitar are both lead tracks and were not really meant to play at the same time, but this is about expression so there are no rules.
Enjoy.
Use Flash Pro CS5 To Build iPhone Apps – taterboy
October 6th, 2009 | Filed under: ActionScript 3, Flash, iPhone
I have to admit I was skeptical of the rumors and was not alone either. There were many tweets on this subjects as everyone speculated what the “Big Flash Announcement” was was going to be. So now it’s out of the bag, you will be able to build iPhone apps with Flash Pro CS5. So what does this mean?
Here are a couple articles about how the technology works and will give us some insight into what it will be like to build iPhone apps with Flash.
Most Important, The FAQs:
http://labs.adobe.com/wiki/index.php/Applications_for_iPhone:Developer_FAQ
An Overview:
http://www.adobe.com/devnet/logged_in/abansod_iphone.html
7 Current Flash Apps In The appstore:
http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/
This article may sound cynical as we discuss some of the different hurdles to getting an app from Flash Pro CS5 to the iPhone. The news is exciting to hear and your brain can go wild with the possibilities, but the real question is what kind of apps can we actually build with Flash for the iPhone?
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 »
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