DMA199:AS3:Richard Caceres

February 14, 2008

Musical Instrument #1

Filed under: project — admin @ 1:44 pm

Description:

This is a musical instrument build with actionscript 3.0. I created it for an assignment in DESMA 157 - Design For Interactive Media. The prompt was to create a musical game. It is influenced by Nintendo’s Electroplankton. This version uses a hard coded sample set of musical instruments that I sampled. A version that communicates to external applications with OSC is in the works.

This project combines my knowledge of Box2D, the AS3 sound API, the drawing API, the tween class, and other AS3 elements. I also used the Flex Eclipse development environment for development.

The controls are:

Space - launch a new ball at top of screen
Shift - launch a new ball at the mouse position

To place a note on a peg, put your mouse cursor on top of it, and press a key on a keyboard.  The top row (QWERTYU) is the first voice, the second row (ASDFGH),  and the third row (ZXCVBN) place appropriate pitches - lowest to highest from left to right (just like a piano).

Clicking an already placed note erases it.

You can load a demo to get you started.

View:

http://users.design.ucla.edu/~rcaceres/157/pinball/Assignment3.html

Source:

not yet available…

February 7, 2008

HelloHarmony

Filed under: exercise — admin @ 1:05 am

Description:

This exercise taught me to create harmony with flash sound.

View:

http://users.design.ucla.edu/~rcaceres/199/exercises/HelloHarmony/HelloHarmony.html

Source:

http://users.design.ucla.edu/~rcaceres/199/exercises/HelloHarmony/

http://users.design.ucla.edu/~rcaceres/199/exercises/HelloHarmony.tar

February 6, 2008

HelloSound

Filed under: exercise — admin @ 11:27 pm

Description:

An exercise to learn how to use Actionscript3 sound. This program dynamically loads 11 mp3 files and plays them one after the other. Also, the sprites on the screen react to the playback and amplitude of the sounds.

NOTE: For some reason, the visuals don’t work in the browser. In order to see them, you have to download the source archive and run the swf on your computer.

View:

http://users.design.ucla.edu/~rcaceres/199/exercises/HelloSound/HelloSound.html

Source:

http://users.design.ucla.edu/~rcaceres/199/exercises/HelloSound/

http://users.design.ucla.edu/~rcaceres/199/exercises/HelloSound.tar

February 4, 2008

ObstacleFall

Filed under: exercise — admin @ 2:47 pm

 Description:

This is another exercise with Box2D. This time, there are more obstacles to get in the way of the falling objects. These obstacles are generated procedurally with code. Also, the program creates a new ball object whereever the user clicks.

This program does not run as quickly as the previous box2D exercise, and when I increase the “circleDef.restitution” property, which controls bounciness, the program runs even slower.

Hopefully the more I familiarize myself with box2D, the more I’ll understand what happens and be able to optimize the code.

View:

http://users.design.ucla.edu/~rcaceres/199/exercises/ObstacleFall/ObstacleFall.html 

Source:

http://users.design.ucla.edu/~rcaceres/199/exercises/ObstacleFall/

http://users.design.ucla.edu/~rcaceres/199/exercises/ObstacleFall.tar

HelloBox2D

Filed under: exercise — admin @ 2:40 pm

Description:

The purpose of this exercise was to learn how to interface with the Box2D flash physics library. There are two ground bodies and several randomly generated objects.

View:

http://users.design.ucla.edu/~rcaceres/199/exercises/HelloBox2D/HelloBox2D.html

Source:

http://users.design.ucla.edu/~rcaceres/199/exercises/HelloBox2D/

http://users.design.ucla.edu/~rcaceres/199/exercises/HelloBox2D.tar

Image Gallery 3

Filed under: exercise — admin @ 2:14 pm

Description:

For this image gallery exercise I chose to remake a popular Actionscript 2 image gallery called Autoviewer. This exercise also provides me a way further customize the visuals and functionality of this gallery. For me, Autoviewer is a good gallery for viewing sequential images such as a photo essay. I did not like the way Autoviewer renders text on the screen such as the current image number. As of now I have not implemented any text.

This image gallery reads an xml file that is formatted exactly like Autoviewer’s xml format (example xml file). Therefore, someone could easily transition from Autoviewer to my new AS3 gallery.

The gallery also supports full screen mode and browsing with the keyboard (except while in full screen mode [which is a bug i want to fix]).

The photos in the demo gallery are a photo essay I created for a class called Social Documentation at UC Santa Cruz. In short, this photo essay documents an event that occurred in the Porter Bridge Gallery at UC Santa Cruz in April 2006. For ten days, the gallery was transformed into a creative living space. The highlight of this event was a family of five who lived at the space for the entire duration.

View:

http://users.design.ucla.edu/~rcaceres/199/exercises/ImageGallery3/ImageGallery3.html

Source:

http://users.design.ucla.edu/~rcaceres/199/exercises/ImageGallery3/

http://users.design.ucla.edu/~rcaceres/199/exercises/ImageGallery3.tar

ImageGallery 2

Filed under: exercise — admin @ 2:21 am

Description:

This second image gallery shows images linearly. It uses the keyboard’s Left and Right keys for browsing. Just like the previous image gallery exercise, it reads a list of images from an xml file.

View:

http://users.design.ucla.edu/~rcaceres/199/exercises/ImageGallery2/ImageGallery2.html

Source:

http://users.design.ucla.edu/~rcaceres/199/exercises/ImageGallery2/

http://users.design.ucla.edu/~rcaceres/199/exercises/ImageGallery.tar

February 3, 2008

ImageGallery 1

Filed under: exercise — admin @ 3:41 pm

Description:

This is an image gallery that can be used for viewing a large amount of small images. In particular, it was made for images I take with my cell phone camera. Only the images on the screen are downloaded. When the user scrolls, new images are downloaded. It also responds to resizing the browser.

The image urls are read from an xml file. There is a bug in the program that causes some images to not animate in (tween) correctly. Also, the images should all be the same size, but they aren’t. How do I fix this?

View:

http://richard-c.com/look/cp/

http://users.design.ucla.edu/~rcaceres/199/exercises/ImageGallery/ImageGallery.html

Source:

http://users.design.ucla.edu/~rcaceres/199/exercises/ImageGallery/

http://users.design.ucla.edu/~rcaceres/199/exercises/ImageGallery.tar

DrawingTool

Filed under: exercise — admin @ 3:20 pm

Description:

This program is a drawing tool that remembers strokes and modulates them with respect to time.

With this exercise I learned how to interface with Actionscript 3’s drawing API. I also made multiple classes. Each stroke is represented by a DrawnObject Object that stores an array of points that make up the line shape. All of the DrawnObjects are redrawn every frame.

View:

http://users.design.ucla.edu/~rcaceres/199/exercises/DrawingTool/DrawingTool.html

Source:

http://users.design.ucla.edu/~rcaceres/199/exercises/DrawingTool/

http://users.design.ucla.edu/~rcaceres/199/exercises/DrawingTool.tar 

A place to consolidate my progress on in AS3.

Filed under: course — admin @ 2:20 pm

Hello, this blog is a place to show and talk about Actionscript 3 exercises that I do for Design | Media Arts 199. I will be posting exercises as I complete them. I welcome criticisms, tips, and anything else.

Powered by WordPress