Thanks for coming by our table at Student Activities Night! It was awesome to see all the new faces and we look forward to seeing you all around. This is the central hub for everything that goes on for AIGA JWU. We will be updating the calendar with all the great events we have lined up.

If you happened to stop by, then you know all about the giveaway promotion. To download the this bundle you can check it out here — also be sure to drop a comment and say thanks!

Be sure to follow us on Facebook & Twitter as well.

Download an AIGA background and be sure to check us out soon — cool stuff is on the way.

Call to All Artists

This event is for a local gallery looking for submissions to go on display. Looking for a large amount of quality, well designed student work.

When:

October 2nd from 7-11PM

Location:

West Side Arts Gallery

745 Westminster St.

Providence, RI

More Info:

This is a national event, it does not matter where you are located or what material you work with. The only restrictions are that it be 5″×5″ or 10″×10″. RSVP to this event by checking it out on facebook.

Sponsored by Narragansett Brewery

For Submissions:

$10 per artists with a 3 piece submission cap. Size must be 5″×5″ or 10″×10″, any medium is accepted. Accepting submissions until September 17th. If you are interested in submitting please contact Jyll@WestSideArtsGallery@Gmail.com or KarynJimenez@Gmail.com.

Please mail submissions to:

Karyn Jimenez
299 Carpenter St
Unit 406
Providence, RI 02909

As always if there are any questions, please feel free to comment.

1. Portfolio Box:
   A well constructed portfolio box, available in standard sizes such as 16″ x 20″, 14″ x 17″, and 11″ x14, is a relatively quick and painless presentation. Pieces are recommended to be mounted on black or gray foam core boards. A large box will allow a large collection without having to reduce pieces. A smaller box is easier to travel with and is simple to store.
2. Bound Portfolio:
   A bound portfolio creates a very professional and holistic presentation of your work. Project images will need to be reduced in size and restricted to paper but the finished project is often quite impressive. Process work can be incorporated in the page design to show the development of projects.
3. An Online Experience:
   Sending your book to as many people as possible is optimal. This is difficult when making physical forms of work, however sending a URL to a person is as easy as setting up a laptop in a Starbucks. Since this web page is your first impression it should be beautifully and conscientiously designed as well as graceful and easy to use.

Note: As important as it is to have strong work, it is equally important to be able to communicate aspects of your work to other people. Poor communication skills portray lack of knowledge and experience.

Assembling the Portfolio:

1. Ordered by Strength of Work:
   Pick your three strongest pieces. Place your first piece, your strongest, in the very front. Put the second on the last page, and your third somewhere in the middle. The main advantage of this strategy is constantly reminding the reviewer of your strengths. The primary disadvantage is all your work should be on close par with your best work.
2. Ordered by Design Specialties:
   If you come from a generalist background, it is beneficial to organize your portfolio in categories like branding, packaging, interaction, advertising, etc. The disadvantage of this is that some categories blend into other categories. Web Design for example, might blend into branding and interaction. To challenge is to not be too stiff on dividing works into categories.
3. Ordered by Skill Sets:
   A more conceptual approach is to arrange your portfolio in categories such as Leadership, Collaboration, and Communication. This allows for greater flexibility and creativity in organization. Use of dividers and tabs is strongly recommended with this form of hierarchy.

Other Portfolio Tips:

1. Your first piece shouldn’t be too complex, but should have a quick impact
2. Have one “story” piece in the middle. The story should have a positive experience that will engage and impress a reviewer.
3. High quality craft is essential.

Conclusion:
Not only is a portfolio a keystone to one’s career, it is also a reflection on everything that a designer has done. It is very important to be proud of your work. Although I am young in my career, I’ve already started to collect my previous portfolios and compiled them into an archive. It’s amazing to see how I’ve grown as a designer. How have you organized your portfolio? How has constructing a portfolio made you grow as a designer? What is the best feedback you have ever gotten from your portfolio? Please feel free to comment and link your portfolio below.

The Support for New Platforms

With the release of 10.1 comes the support of a multitude of mobile devices, including; smartphones, netbooks, and other internet connected devices. Target mobile systems include (but are not limited to): Android 2.0, Microsoft Mobile 6.5, Palm webOS, Symbian S60 V5, as well as Windows 7 and Mac OS X 10.6. (Notice the lack of “iPhone” on the list…)

The consistent flash player is expected to deliver the most productive experience to users across these new operating systems and devices. This consistency reduces the cost of creating, testing and deploying, essentially the complete essence of development, to such devices.

Designed for Mobility

Mobile text input – Support for native device virtual keyboards with the TextField or inputText is a must if no physical keyboard is detected for mobile devices. The focused text field is centered in the visible region of the screen medium as to not obscure the keyboard or a random event such as an incoming call or a rotation of orientation.

Screen Orientation– Exported SWF content can adjust to different screen parameters depending on orientation landscapes. That is from portrait to landscape, which is consistent with other built-in applications on the device.

Adaptive Frame Rate– Processing power is limited and very critical on these new mobile devices. Such a reason is why Flash Player now adapts to optimal frame rates to save CPU resources and available memory.

Accelerometer Input– Accelerometer’s are currently present in mobile phones and a wide variety of video game controllers such as the Nintendo Wii controllers. Accelerometer’s use direction on x, y, z coordinates to locate orientation of the device or provide for game input. Event information gives developers the option to change or re-manipulate the format or layout when reorientation occurs.

Sleep Mode– Probably most important, when the screen goes into sleep mode or power saving mode, the flash player slows down to preserve CPU and battery consumption on mobile devices. Also, whenever a phone call is received, the device will automatically pause the flash player.

Enhanced Browser Integration

Multi-touch and Gestures– User interaction is a key component of the latest hardware advances. Specifically in the new HP TouchSmart personal computers and laptops, native features such as pinch, scroll, rotate, scale, and two finger tap are a part of the every day user interface. Flash Developers can take advantage of this through ActionScript 3 API’s. This allows for the interaction of multiple items simultaneously or the multitude of native features.

Content Protection– Using industry-standard cryptography, Adobe Flash Access 2.0 and Flash Player 10.1 provides an ever-growing environment to protect a wide variety of content; whether it’s video on demand rental, electronic sell through, for streaming, or download.

Microphone Access– The long awaited microphone addition has launched a new wave of applications, such as audio recording for transcoding, karaoke, voice manipulation, pitch detection, and more.

What Does This All Mean for the Future of Flash Developers and Designers

I’m extremely excited for the multi-touch capabilities. Not only will these gestures work for touch-screen machines, but it will also work with components like the new Apple Mighty Mouse and the trackpad on new Macbooks.

There have also been a lot of improvements in the way the Flash Player runs that is going to allow the streaming of media and rendering of 3D content to boom in the future.

With that being said I think it is a fair guess to say that new media applications as well as advancements to current web trends are going to take place in the flash player. As an ActionScript and all things Flash junkie I am truly spasmodic about this 10.1 Flash Player Update.

I observed many examples including useful applications like the United States Postal Service Virtual Box and GE’s Smart Grid. I wanted to develop something similar but on a simpler scale. After a couple of hours of work, and a few energy drinks later, I created a virtual world for my DME1020 class using Augmented Reality. I’d like to share this experience with the JWU AIGA community.

1 ) There are a few files we need before we begin the project. The Flash Augmented Reality Toolkit (FLAR), some attributes from the Flex framework, the Papervision3D library, and a small adobe air application to create our marker, as well as a .dat file that will control the parameters for our webcam. All of these files can be downloaded via this link.

2 ) We need a 3D object to load whenever we see our marker. Since it is so close to Thanksgiving, I’ve decided to use a turkey. Using Google SkethUp’s 3D warehouse I found a .zip of a turkey to use, which includes the necessary files and textures needed. First, click on “Download Model” and “download Collada .zip”. Extract the zip to a folder on your desktop.

3 ) File and folder management is critical in this type of project. So in order to make sure we can access all of the files later on, we should invest some time in getting it neat and straight now. Below is a screen shot of proper folder management for this project:

Copy the contents of the turkey folder we downloaded from Google SketchUp and paste them into the Flash Project > assets > models folder. Copy the files we downloaded earlier and put them in the corresponding folders.

4) Next, we can make a marker for our project. The marker is what the camera will recognize and use as an x, y, and z axis for rendering our turkey. I created a 600 by 600  px image. Black background with a 450 by 450 px white square in the middle. I put the text “JWU AIGA” in the middle, but you can put whatever you wish. It is important to follow this black and white colorscheme or else the FLAR package won’t recognize our marker. Save this in the root of our Flash Project Folder as a jpg, gif, or png.

5 ) Next step is to print out, or load this new marker that you’ve made on your smart phone. Open up the ARToolKit Marker Generator that came in the zip file included above. If you hold up the marker you’ve made a red outline should appear around the marker. While this red line is there, click “Save Pattern” and save it as Flash Project > assests > FLAR > FLARpattern.pat.

6 ) Now it’s time to jump into flash. Create a new Actionscript 3.0 .fla, 30 fps with dimensions 640 by 480 px.

7 ) Create a new Actionscript File (.as). This is where we will adding all of our code, we will attach this .as file to our .fla in a later step. First thing we will do in our code is add all of our imports:

--------------------
package {
import flash.display.BitmapData;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.media.Camera;
 import flash.media.Video;
 import flash.utils.ByteArray;

 import org.libspark.flartoolkit.core.FLARCode;
 import org.libspark.flartoolkit.core.param.FLARParam;
 import org.libspark.flartoolkit.core.raster.rgb.FLARRgbRaster_BitmapData;
 import org.libspark.flartoolkit.core.transmat.FLARTransMatResult;
 import org.libspark.flartoolkit.detector.FLARSingleMarkerDetector;
 import org.libspark.flartoolkit.pv3d.FLARBaseNode;
 import org.libspark.flartoolkit.pv3d.FLARCamera3D;

 import org.papervision3d.lights.PointLight3D;
 import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
 import org.papervision3d.materials.utils.MaterialsList;
 import org.papervision3d.objects.parsers.DAE;
 import org.papervision3d.objects.primitives.Cube;
 import org.papervision3d.render.BasicRenderEngine;
 import org.papervision3d.scenes.Scene3D;
 import org.papervision3d.view.Viewport3D;
--------------------

What this code does is imports all the external classes needed from the flash player, flash ar tool kit, and paper vision 3d needed for this project to work properly.

8 ) Next we will define our class, setup our class properties and variables

--------------------
public class AugmentedReality extends Sprite
 {

 private var video    : Video;
 private var webcam    : Camera;    

 private var flarBaseNode                : FLARBaseNode;
 private var flarParam                   : FLARParam;
 private var flarCode                    : FLARCode;
 private var flarRgbRaster_BitmapData    : FLARRgbRaster_BitmapData;
 private var flarSingleMarkerDetector    : FLARSingleMarkerDetector;
 private var flarCamera3D                : FLARCamera3D;
 private var flarTransMatResult          : FLARTransMatResult;
 private var bitmapData                  : BitmapData;
 private var FLAR_CODE_SIZE              : uint         = 16;
 private var MARKER_WIDTH                : uint         = 80;

 [Embed(source="./assets/FLAR/FLARPattern.pat", mimeType="application/octet-stream")]
 private var Pattern    : Class;

 [Embed(source="./assets/FLAR/FLARCameraParameters.dat", mimeType="application/octet-stream")]
 private var Params : Class;

 private var basicRenderEngine           : BasicRenderEngine;
 private var viewport3D                  : Viewport3D;
 private var scene3D                     : Scene3D;
 private var collada3DModel              : DAE;

 private var VIDEO_WIDTH                 : Number = 640;
 private var VIDEO_HEIGHT                : Number = 480;
 private var WEB_CAMERA_WIDTH            : Number = VIDEO_WIDTH/2;
 private var WEB_CAMERA_HEIGHT           : Number = VIDEO_HEIGHT/2;
 private var VIDEO_FRAME_RATE            : Number = 60;
 private var DETECTION_THRESHOLD         : uint   = 80;
 private var DETECTION_CONFIDENCE        : Number = 0.5;
 private var MODEL_SCALE                 : Number = 0.2;                

 private var COLLADA_3D_MODEL            : String = "./assets/models/models/bird.dae"; // make sure you rename the original .dae file
--------------------

9 ) Next we will setup the constructor. The constructor will do 4 things. It will prepare the webcam, the marker detection, and the rendering for papervision3D. Then, it will repeatedly loop to update the marker and the rendering of our turkey

--------------------
public function AugmentedReality ()
 {
 prepareWebCam();
 prepareMarkerDetection();
 preparePaperVision3D();
 addEventListener(Event.ENTER_FRAME, loopToDetectMarkerAndUpdate3D);
 }
--------------------

10 ) Next step we will define all of the methods listed in step 9.

--------------------
private function prepareWebCam () : void
 {
 video = new Video(VIDEO_WIDTH, VIDEO_HEIGHT);
 webcam = Camera.getCamera();
 webcam.setMode(WEB_CAMERA_WIDTH, WEB_CAMERA_HEIGHT, VIDEO_FRAME_RATE);
 video.attachCamera(webcam);
 addChild(video);
 }

private function prepareMarkerDetection () : void
 {
 flarParam = new FLARParam();
 flarParam.loadARParam(new Params() as ByteArray);
 flarCode = new FLARCode (FLAR_CODE_SIZE, FLAR_CODE_SIZE);
 flarCode.loadARPatt(new Pattern());

 bitmapData = new BitmapData(VIDEO_WIDTH, VIDEO_HEIGHT);
 bitmapData.draw(video);
 flarRgbRaster_BitmapData = new FLARRgbRaster_BitmapData(bitmapData);
 flarSingleMarkerDetector = new FLARSingleMarkerDetector (flarParam, flarCode, MARKER_WIDTH);
 }

private function preparePaperVision3D () : void
 {
 basicRenderEngine     = new BasicRenderEngine();
 flarTransMatResult     = new FLARTransMatResult();
 viewport3D             = new Viewport3D();
 flarCamera3D         = new FLARCamera3D(flarParam);
 flarBaseNode         = new FLARBaseNode();
 scene3D             = new Scene3D();
 scene3D.addChild(flarBaseNode);

 collada3DModel = new DAE ();
 collada3DModel.load(COLLADA_3D_MODEL);
 collada3DModel.scaleX = collada3DModel.scaleY = collada3DModel.scaleZ = MODEL_SCALE;
 collada3DModel.x = -30;
 collada3DModel.y = -530;
 collada3DModel.rotationX = 90;
 collada3DModel.rotationY = 0;
 collada3DModel.rotationZ = 0;

 flarBaseNode.addChild(collada3DModel);
 addChild (viewport3D);
 }

//and finally

private function loopToDetectMarkerAndUpdate3D (aEvent : Event) : void
 {
 bitmapData.draw(video);

 try {

 if(    flarSingleMarkerDetector.detectMarkerLite (flarRgbRaster_BitmapData, DETECTION_THRESHOLD) &&
 flarSingleMarkerDetector.getConfidence() > DETECTION_CONFIDENCE                            ) {

 flarSingleMarkerDetector.getTransformMatrix(flarTransMatResult);
 flarBaseNode.setTransformMatrix(flarTransMatResult);
 basicRenderEngine.renderScene(scene3D, flarCamera3D, viewport3D);
 }
 } catch (error : Error) {}
 }
 }
}
--------------------

11 ) This concludes the amount of code we need. Lastly, let’s jump back to the .fla we created and attach this Actionscript (.as) file to it.

12 ) That’s the last step, export the fla, grant the swf permission to use your camera and hold your marker up to the webcam.

All in all, augmented reality is still low in functionality and uses a large chunk of CPU power, however there is a pretty big “awe” factor involved. I put a custom marker of my own on the back of my business cards and it goes over extremely well during interviews. It shows that you are up-to-date on web trends and are there to impress.
And of course, I’ve included the source files with all of the work. However, in order to get the most out of this tutorial I recommend following the tutorial and only making references to the source for help if you get stuck. The source files are greatly //commented for this reason.

Thanks a lot for taking the time to read my blog post and tutorial. If you get the opportunity post your own AR experiments in a comment.

Also, if you have any questions please post them in a comment so everyone can benefit from them.