HODGEDEV FLASH BLOG

I haven’t blogged in some time because many things have been going on. I am no longer working at Streetwise and I am freelancing at home. So far the journey has been pleasant. I now have much more time to work on personal projects and once such project is Photo Shoot Builder. PSB is still alpha quality, but we will be going beta with is soon.

Bram Timmer, a long time friend and very strong designer/photographer, suggested that photographers needed a more elegant method of creating these set lists. Bram soon handed off the creative to me in the form of a PSD, as we usually do, and after a lot of cutting, codeing and compiling, we find ourselves at v0.2.3. Click the link below.

Photo Shoot Builder is merely a drag and drop enabled tool for building a typical set diagram that is rather common in photography. It utilizes many different design patterns, all within context, and the site is very extensible, easy to update, and performs very well. When the end-user is ready, he or she may choose to save as jpg or png. We are close to enabling the Flickr upload mechanism as well. Go play with the application, but remember it isn’t even beta yet. If you are going to leave feedback, please be constructive.

Click here to use Photo Shoot Builder v0.2.3a

I have a client that needs some simple 3D. Since I am allowed to develop the project for Flash Player 10, and my 3D needs were simplistic, I chose not to use Papervision3D. I began things like normal. I opened FlashDevelop3 and created a project. Then, I opened Flash CS4 and created a rectangle. With a mock-up of the final product in the background, I began to rotate the rectangle in 3D space; until it matched the comp. When I was happy, I tested the movie, and sure enough everything looked great.

After getting my creative into its proper position and perspective, I moved on to link the DocumentClass that FlashDevelop3 created when I created my project, to the newly created flash file. As soon as I entered the document class, I tested the movie. My rectangle no longer had perspective and was only barely visible on screen. I removed the document class and all the sudden my rotation values were back.

I began to scour google for answers and eventually found some on adobe’s site. What what said on adobe’s site was to set the following in your class.

//”this” applies to my DocumentClass
this.transform.perspectiveProjection.projectionCenter = new Point(someNumber,someNumber);
this.transform.perspectiveProjection.fieldOfView = someInt;

Having this information, I quickly entered in and tested my movie. I was a bit saddened to see that nothing had changed. I sat for a moment and thought about it. If the values for projectionCenter and fieldOfView must be set if using a document class, then it is possible that any rotation on the X, Y, or Z, in the Flash IDE may have been ignored. I quickly set rotation values with actionscript and tested the movie. EUREKA! It works.

Hopefully this little tid-bit of information can save you from the aggravation I went through

Click here to watch FlashDevelop3 R2 and the Flex 3.3 SDK video tutorial Part 04: How to create an AIR application.

This short video shows you how to create an AIR project.

First, the Descriptor file (setting the namespace to 1.5) and changing any other settings you wish.
Second, edit the CreateCertificate.bat and create a certificate.
Third, edit the PackageApplication.bat, compile your application to create a swf, then run PackageApplication.bat, provide the password set in CreateCertificate.bat and the AIR application is created in the air folder.

Stay tuned for a run-through of the AIR Update Framework, which allows users to check for updates which is dictated by a UpdateDescriptor file on your server somewhere.

Click here to watch FlashDevelop3 R2 and the Flex 3.3 SDK FlashDevelop3 R2 and the Flex 3.3 SDK video tutorial Part 03: Events, Interactivity, and Timer: the new setInterval.

In part 03, first we talk about why the document class extends Sprite or MovieClip, which FlashDevelop automatically imports Sprite into your project and extends your document class with it.

Second, we talk about waiting for the document class to be added to the stage, so that we make access properties of the stage.

Third, import the required event MouseEvent, to handle mouse interactivity. We setup an event listener for when the end-user has pressed the mouse down while over “_sprite”, the square we created in part 02 of this series. We handled the mouse event with a nice TweenLite driven animation of the “_sprite” object.

Fourth, we imported the two classes for handling keyboard interaction. KeyboardEvent is used to listen for for the key-based events, and the Keyboard class maintains a list of static constants representing unsigned integers used to compare against the keyCode available to the method listener for the KeyboardEvent dispatch.

Fifth, and finally, we talk about the Timer object, which is the new setInterval. Although you can still use setInterval in Actionscript3, I prefer the Timer object. Maybe I prefer Timer because of its use of the new event flow, im not sure; although I can say, that I like that you can stop and start it with built in methods. In this example, we instantiate a Timer object, set it to fire every 1000ms (1 second) and then we listen for that event to be dispatched every second, and have a function fire each time. The function that fires has a simple trace, that when tested, loops over and over in the console.

Stay tuned for part 04, coming soon!

Click here to watch FlashDevelop3 R2 and the Flex 3.3 SDK Part 02: Packages, Classes and drawing API, oh my!

This part of the series starts off by displaying the Actionscript3 API site;

First, I explain where to learn information about things like Sprite and Event, which were automatically imported and implemented by FlashDevelop3 when we created our project.

Second, we head over to http://blog.greensock.com/ and download TweenMax, though we will only be using TweenLite today (TweenLite included with TweenMax download).

Third, we extract the package into our Actionscript3 class path folder, if you do not already have one, this is a common grounds for you to keep classes and packages, please create one, make note of where you created it, we will be requiring that path in FlashDevelop3 in the next step. Now extract the “gs” folder into the newly created class path folder.

Fourth, we head over to FlashDevelop3 and we select the project from the project tree, mine is on the right, right mouse click on the project name and go to properties. Once the popup arrives, head to the Classpaths tab, and click the Add Classpath button. Be sure to input the location of the class path. NOTE: This path does not include the “gs” folder at the end, we will reference packages in this classpath in their import lines.

Example:
import gs.TweenLite;

Fifth, we import the flash.display.Graphics class, create a new Sprite and draw to it using an instance of the Graphics class.

Sixth, we animate the Sprite we drew to using TweenLite. With one line of code, we have an easy to manage animation with a nice looking Elastic ease applied to it, and it only took twenty seconds to write the animation code out.

Stay tuned for part 03, I hope this is helpful.

Click here to watch FlashDevelop3 R2 and the Flex 3.3 SDK Part 01: Setup and Hello World!

I have a friend that is eager to learn flash and Actionscript3, but does not have the money to buy the Flash IDE. I told my friend he could just download FlashDevelop3 and the Flex 3.3 SDK to compile with. My friend didn’t respond so fast to that on IM; I had lost him. It occurred to me to start a small series of tutorials explaining how to compile a SWF with the Flash IDE or Flex Builder 3.

Things to note:
*Flex 3.3 SDK is not the same thing as Flex Builder 3, nor is it the same as the Flex 3 Framework.
*FlashDevelop3 is free, as is the Flex 3 SDK used to compile.
*Most strong AS3 developers seem to be moving out of Flash and away from the time-line, this could leap you forward a great deal to start off with; That being said, it is still important to understand the time-line and other parts of the Flash IDE.

Good luck, stay tuned for part two where we talk about importing classes, specifically TweenLite. We create rectangle using the drawing API and animate with TweenLite.