Portfolio: ActionScript 3 / Flex 4.6 / Away3D 4.Gold / Flash

actionscript flex away3d flash

Flash, Flex, Away3D are all based on the ActionScript 3.0 (AS3) language. Therefore I have included all AS3 examples on the same page.
ActionScript is the primary programing language for Adobe’s Flash, and Air run-time environments.

Full Websites

In this section are some samples of ActionScript based websites. These sites require Adobe’s Flash Player installed on the users device. Most Windows computers and Apple Desktops do have the Flash Player already installed. However, iPads, iPhones, and newer Android devices do not have the required player.

CrowdSource ScreenShot

“Crowd Source”

Tags: ActionScript Flex PixelBender Carrara

“CrowdSource” is an experiment in crowdsource story telling. This app uses 20 images from a children’s book I wrote and illustrated. This experiment allows users to improve upon my amateur storytelling abilities. The users are able to edit, revise, or completely alter the text from the previous versions.

Things to look for:
View More...
  • Emitting light rays that highlight clickable features.
  • Magic scroll handles that advance or reverse the pages.
  • dissolve in/out page changes.
  • A thumbnail page menu at the bottom of the screen.
  • Clickable elements have on/off states.
  • App detects when user inputs new versions of a story, and enables the "Save" key.
  • Use the up/down dragons to see older versions of the story.
  • The app dynamically resizes with the browser window.
  • User versions are saved for future users to view. (For good or worse.)

This web application features:

  • A MySQL database to store the book pages and all their associated story versions.
  • PHP is used to communicate from the database to the Flex interface that the user interacts with.
  • Adobe Pixel Bender to create the page change transition.
  • Adobe Pixel Bender to create the Volumetric Lighting that highlights new interactive features.

Launch website in a new window.
View source code in a new window.

GrokFlash ScreenShot

“Grok Flash Site”

Tags: ActionScript Flex Away3D Carrara

“GrokDD Flash Site” is an Adobe Flash based version of the Grok website. Keeping with the theme ,”To Drink” I envisioned an underwater tranquil environment. Leveraging the power of Flex and Away3D I created a true 3D rotating menu. **Note, this site is GPU intensive, and optimized for IE 9+.**

Things to look for:
View More...
  • Random particles (bubbles) emanating from the ocean floor.
  • Caustics (light effect through water) that can be seen on the ocean floor.
  • Mirrored ocean floor in the 3D letters.
  • The chiaroscuro (or atmospheric effect) as object recede into background.
  • Flex components overlaid on top of the Away3D stage.
  • Transitional effects of the Flex components.

This web application features:

  • The power of Away3D 4.Gold:
    • GPU rendering.
    • Fixed camera/view.
    • Rotating 3D menu mesh objects.
    • 25 emitted bubble particles, each with their own characteristics.
    • Reflective materials for the letters.
    • Reflective material for the floor to catch the caustics from the sky above.
    • Fog to create depth for elements in the background.
    • Animated textures on the sky planes.
  • The Flex Framework with custom components for:
    • The Away3D library.
    • The letters of the alphabet.
    • The menu items and their click response.
    • The dropdown page boxes.
    • The contact page, including the PHP to process the form.
    • The gallery of images.
  • Two sliding, tiled images that create the caustics on the ocean floor.
  • Externally linked SWF files.
  • An external XML file that contains the data for the gallery.

Launch website in a new window.
Source code is proprietary, and not for public viewing.

Proof of Concepts

This section highlights my “proof of concept” scripts. Some are complete, some are works in progress. However, all demos should be functional. Once again many mobile devices do not support the Adobe Flash Player, which is required to play these demos.

3D Board Game

“3D Board Game”

Tags: ActionScript Away3D Flex Carrara

“3D Board Game” is a proof of concept that tries to recreate the feel of a traditional cardboard board game of yester year. A player picks up their character token by the head, and moves them to any valid board space. While not a complete game, the mechanism is in place to push the application to a full program.

Things to look for:
View More...
  • Three different states for the token.
  • A panoramic background (mouse to the far left and right).
  • A zoom in and out feature (use mouse scroll wheel up and down).
  • The token tilts (or leans) head first in the direction it is being dragged.
  • The token tilts even more when dragged at higher speeds.
  • While dragged, board highlights valid/invalid spaces.
  • Collision detection with the edge of the board.
  • Token can rotate (to face opponents) (Keyboard A & D).

This web application features:

  • The power of Away3D 4.Gold:
    • GPU rendering.
    • 360 rotating camera/view.
    • 3D table mesh object.
    • 3D token mesh object.
    • Skybox (i.e. 360 background).
    • Directional lighting.
    • 3D Shadowing.
    • Animated textures on the token mesh.
  • The Flex Framework with custom components for:
    • The Away3D library.
    • The tokens (characters).
    • The game board.
    • Game board spaces
    • The 360 background
  • A dynamically sized game board and table. Additional game board spaces will be created as needed.
  • Keyboard control of the token.
  • Border and invalid space detection.
  • State memory.

Launch website in a new window.
Source code is proprietary, and not for public viewing.

Venus ScreenShot

“Venus Terraformed”

Tags: ActionScript Flex Away3D Carrara Photoshop

“Venus Terraformed” is an artistic interpretation of Venus if it was Terraformed and populated by humans. Using NASA’s topographical data of Venus, I created sea level at a set elevation, then artistically dispersed city lights to represents populations along costal regions and trade routs. **Note, this site is GPU intensive, and optimized for IE 9+.**

Things to look for:
View More...
  • Complete 360 spherical panoramic background.
  • Star particles that vary in size and distance to the camera.
  • Day transitions into night as the dark side of Venus is blocked from the sun.
  • Separate cloud coverage shell. (Click and hold down the mouse on the planet).
  • Normals layer applied to planet mesh to create mountainous shadows.
  • The atmosphere is more visible from different angles of the sun.
  • Zoom the planet in/out. (Use the mouse scroll wheel).

This web application features:

  • The power of Away3D 4.Gold:
    • GPU rendering.
    • 360 spherical rotating camera/view.
    • 3D Venus mesh object.
    • Billboard star images scattered at various depths.
    • Skybox (i.e. 360 spherical background).
    • Directional lighting emitting from the sun.
    • 3D Shadowing.
    • 3D atmospheric shell around planet.
    • 3D cloud shell that rotates individually around planet.
    • Algorithmic masking of layers to create day/night cycle.
  • The Flex Framework with custom components for:
    • The Away3D library.
  • Artistically colored landscape hand painted in Photoshop.
  • Artistically dispersed human population hand painted in Photoshop.
  • Customized skybox image, tiled and seamed in Photoshop.
  • Planet Normals created in Carrara for added depth displacement.
  • Topographical maps of Venus, and background nebula image courtesy of NASA’s public domain catalog.

Launch website in a new window.
View source code in a new window.

Grok Logo 3D ScreenShot

“Grok 3D Rotating Logo”

Tags: ActionScript Flex Away3D Carrara

“Grok 3D Rotating Logo” is demo of practical application using Away3D. Here, I re-created the Grok Digital Designs’ logo in Carrara 3D and exported its mesh as an .obj file. Once instantiated on a Away3D stage, I applied materials, properties and gave it a spin.

Things to look for:
View More...
  • Complete 360 spherical panoramic background, as seen in the reflective material of the letters.
  • ‘Enter Frame’ based animation that cause the logo to rotate on its own.
  • Mouse interaction. Click and drag the logo to rotate the camera around it.
  • I primary light source in continuously rotating in the opposite direction of the logo.

This web application features:

  • The power of Away3D 4.Gold:
    • GPU rendering.
    • 360 spherical rotating camera/view.
    • 3D Logo mesh object.
    • Skybox (i.e. 360 spherical background).
    • Point lighting circling the logo.
    • 3D Shadowing.
    • Metallic reflective materials on the logo lettering.
    • Continuous ‘Enter Frame’ animation.
  • The Flex Framework with custom components for:
    • The Away3D library.
  • Imported .obj file.
  • Live links within the Flash environment.
View Live Demo...*Requires Adobe Flash Player*

Launch website in a new window.
View source code in a new window.

Swim Light Rays ScreenShot

“Volumetric Lighting”

Tags: ActionScript Flex Photoshop

“Volumetric Lighting” also known as God Rays, Crepuscular Rays, or Sun Beams. Crepuscular Rays are created when a strong light is interrupted partially by an object in its path as it travels through a medium (most commonly air). In ActionScript, Volumetric Lighting is accomplished by placing a light source behind an invisible mask on top of the image to display.

Examples of Volumetric Lighting: *Requires Adobe Flash Player*
View More...

This first example demonstrates Volumetric Lighting as it penetrates through water. Here’s a sample photo of my nephew swimming, and the sun rays piercing the water’s surface.

Things to look for:

  • The lighting effect of sun rays through water.
  • Notice the light is on top of the image.
  • I’ve applied a random jitter to simulate movement on the surface of the water.


View source code in a new window.

This Second example demonstrates volumetric Lighting Emitting from behind some text click on the “Hello World” once to activate the panel. Then move the mouse over the “Hello World” to observe the interaction.

Things to look for:

  • The source of the Volumetric Lighting follows the mouse icon.
  • The angle of the source changes the intensity and length of the lighting effect.

Launch Volumetric Code Generator in a new window.
View source code in a new window.

Run Cycle ScreenShot

“Run Cycles”

Tags: ActionScript Flex Carrara3D Photoshop

“Run Cycles” are used in modern computer games to simulate a character running/walking on screen. In the golden arcade days of yore, this was accomplished with sprites and sprite sheets. This method is still used today. The method used below utilizes sequenced .png files nested in a flash .swf file. The two examples I present before demonstrate the following workflow:

  • Creating a humanoid figure and animating it in Carrara 8.5 Pro.
  • Exporting a series of sequenced .png files.
  • Compiling the images in Flash to a looping timeline.
  • Then building a small user interface to interact with the figure in Flex 4.6
Things to look for:
View More...
  • Flash “enterFrame” listener is disabled until the user mouses over the Flash file.
  • The figure starts their run cycle on mouse over.
  • The user interacts with the green arrows, altering the perspective (or direction) of the figure.
  • The Flash file responds to “WASD” keyboard commands, as well as multiple keys at once to turn 45 degrees.

View “Callum” source code in a new window.
View “Valkyrie” source code in a new window.

Leave a Reply

Your email address will not be published. Required fields are marked *

*