Creating an augmented reality site using Papervision 3d and FLARtoolkit. Part 2: Listening for Events and Animating the Scene

Welcome back for part 2. In the first tutorial I went over how to set up your project, create a PV3D object to attach, and call the functions that will attach this object to your marker (if you haven’t read part 1 yet, check it out below). In part 2, I will go over how to listen for when the marker is detected (and undetected). We will also look at how the animation is triggered and stopped.

Creating an Augmented Reality App using Papervision3D and FLARtoolkit. Part 1: Setting Up

Jersey Boys 3D

This project began when we found out that our client was going to be printing some paper fans to give away at Jersey Boys shows throughout the country. They were looking for something interesting to put on the fans, a link to a new site that fans would visit. We came up with the idea of printing a marker on the fans that could then be used at a specific website in order to produce a 3d, augmented reality image via the user’s webcam. We got the go-ahead on the project and the fans were sent for printing. The timeline was set and work began.
Click here to view the final project online and try it out for yourself. Read on to learn about our design process and setting up the project in AS3.

Flash Builder 4 beta Released

We had been waiting in eager anticipation through the first half of this year for it to finally arrive. All indications were that we would be well adjusted to our new work flow by the time summer rolled around for sure, enjoying all the new tooling and features of Flex 4, round tripping some super-duper new skins with our design team via Catalyst, and improving our productivity on the whole. But as winter gave way to spring, our excitement began to wane until I had all but forgotten about the coming of this new generation of Flex. When suddenly, with almost no warning whatsoever, it was upon us… the new Flash Builder 4 beta, code named ‘Gumbo’.

Embedding Irregular Fonts in Flex 3

Often in programming, what seems to be a simple task can trip you up. Yesterday I was trying to embed the font Helvetic Neue LT Com Bold 77 in a css style sheet for a project of ours. After about 20 minutes of trying different methods to get the project to compile without any errors, I came across the following method:

Graphical User Interface Design

Currently, we are working on building a new desktop application. It all begins with good planning and beautiful design. Here are four steps with tips that will help designers design a successful application.

Warning: Filter will not render. are too large to be draw

If you are looking at this error in your flex compiler, make sure that the DisplayObject that you are trying to add to the stage is subclassing UIComponent and not UIMovieClip. The two are nearly interchangeable, yet the UIMovieClip needs specific bounds.

Happy Coding!

Using the Factory Method Pattern

 Introduction to a Classic OOP Design Pattern

Throughout my career as a developer I have had the occasion to use the Factory Method Pattern when appropriate, and grown to rely on it extensively in recent months as several projects have dictated. I find this pattern to be extremely useful in creating a loosely-coupled application architecture, which (as we’ve all been indoctrinated) is the cornerstone of well designed apps. It is my hope that this introduction will illuminate this pattern for the uninitiated. Even if you don’t find an immediate application for the Factory Pattern, just understanding the ‘why’ and ‘how’ of this design can be important in grasping the importance of the “open-closed” principle, and will help you to write better code. 

Let me start off by giving the standard text-book definition of the pattern:

The Factory Pattern “…define[s] an interface for creating an object, but allows the subclasses decide which class to instantiate. The Factory method lets a class defer instantiation to subclasses.” 

Flex Style Explorer

An important part of developing for Flex is skinning or styling the components. Flex has a great set of components with a default appearance. If you want to customize the components to style them without loosing time use Flex Style Explorer. Flex Style Explorer has a very nice visual dashboard which allows you to edit colors, padding, corner radius, fonts, shadows, alpha, background, and more. Once you edit a component it creates the CSS for you and you can export the CSS. This is great for any designer or developer. You do not need Flex to use Flex Style Explorer. You can use Flex Style Explorer in Fireworks CS3 or on the web. This article will cover new features, the advantages, the disadvantages, and exploring components in Flex Style Explorer.

AS3 Tutorial – The Singleton Pattern

One of the most important patterns that we use over here is the Singleton. It’s used when you need to restrict use of a class to one or only one instance. This comes in handy when you are casting things like application wide settings, or if you are building something like a logging service. There is a bit of disagreement on the use of the singleton, but it really boils down to two questions:

• Will you use this class exactly the same way?
• Will you only ever need only one instance of this class?

If you answer yes to these two questions, you might have the case to build a singleton. – So here is how you go about doing it in AS3 -it’s a bit tricksy ’cause as3 has no private constructors:

Embedding Assets in Flex

Just working on another fun project here, and I thought that I would share something that I don’t see alot of Flex developers doing out there. That is organizing your image assests into asset classes as constants. It’s an easy way to keep everything organized, and reduce your overhead, because you can creatre classes that encapsulate a skin or graphics set for a particular task. If you want to learn how read on…