Skip to content. | Skip to navigation

siggraph.org

Sections
Personal tools
You are here: Home Publications Computer Graphics (CG) Quarterly Volume 40, Number 1 Ricardo Miranda Zúñiga – a multimedia artist focused on social commentary.
Document Actions

Ricardo Miranda Zúñiga – a multimedia artist focused on social commentary.

Ricardo Miranda Zúñiga is an artist and professor living in Brooklyn, NY and teaching at The College of New Jersey. His artwork employs a wide range of methods, including the use of software tools such as Macromedia Flash and Adobe Illustrator. But unlike many who work with the same technology, Ricardo elevates content and meaning over technical virtuosity and the prepackaged effects associated with new software releases. Through his artwork, Ricardo effectively asks his audience to reconsider their current positions on sociopolitical events by creatively revealing a critical perspective on issues such as: the history of U.S. involvement in Central America, the plight of immigrants into the United States, and the ill effects of unmitigated globalization.

Untitled Document


Ricardo demonstrates one of his projects to a captivated audience.


Ricardo's professional career is greatly informed by his bicultural childhood. Growing up between San Francisco and Nicaragua provided experiences where the 80s conjures significantly dichotomous imagery: while very familiar with the first generation of video games, the golden years of sit-com, and other 80s fads and fashions, he was also exposed to the poverty, destruction, and political disillusionment found in the civil war ravaged country of his ancestry. This foundation of his childhood later found expressive articulation via his studies at Berkeley and Carnegie Mellon, where he earned a B.A. in English Literature and an M.F.A. in New Media, respectively. It was while at Carnegie Mellon that Ricardo began to explore the use of electronic and digital media for investigating and displaying his research. Today, Ricardo's artwork utilizes a wide range of methodology, including server programming, animation, interactivity design, web design, illustration, installation and sculpture.

Dentimundo is a recent web based artwork that incorporates Flash, HTML, PHP and myQSL. It acts as a valuable resource for information regarding border dentistry, a type of medical tourism that has been cropping up in Mexico along the U.S. border. This phenomenon represents a very particular element of globalization; Mexican doctors are moving their practices to border towns, attracting U.S. citizens who are unable or unwilling to pay for the skyrocketing costs in the U.S.. The dynamically driven backend of Dentimundo allows users to not only learn about the phenomenon of border dentistry, but they can add to it by recommending dentists or recounting personal experiences.



Dancing teeth accompany the Flash intro to Dentimundo, in case you want to sing along!


After the introduction, the Flash movie turns into a navigation/slideshow, taking the viewer through a photo tour of border dentistry towns and practices. A virtual tour guide introduces the dentists whose interviews are featured on the site, with accompanying caricatures appearing along the bottom. These types of vector drawings are a common feature on many of Ricardo's Flash animations. Selecting a dentist opens a pop-up menu displaying a series of audio interviews. These interviews can be listened to from the website or downloaded as podcasts.



Selecting one of the dentists will play an audio interview.


Flash Techniques - Importing Vector and Bitmap Files

A wide range of art has influenced Ricardo's unique style of vector drawing and illustration. These inspirations range from Caravagio to Gerhard Richter, from Batman to MAD comics, as well as regional paintings and murals in Central America. Many artists working with Flash create their vector art in Illustrator, including Ricardo. While Flash contains an impressive set of drawing tools, drawing programs such as Illustrator have more features and flexibility. While building up the graphics for his projects, Ricardo meticulously distributes the various elements of each drawing onto separate layers, allowing for more flexibility when deciding color, shape, and position. 

Vector Graphics

In Dentimundo, all of the featured Dentists on the website have portraits that were first drawn using Illustrator before they were imported into Flash, where they were then incorporated into an interactive interface. Easing the transition from still art to animation, Flash keeps Illustrator layers intact when importing .ai files. An example .ai file from Dentimundo can be downloaded from here <http://serverAddress/felix.ai> - try importing it into Flash using the following steps.

  • Make sure that Flash is launched and you have a new .fla file open. Resize your default stage setting of 550x400, to one that will match the file we are importing. Flash Menu -> Modify -> Document.
  • Change the Dimensions - width to 720 pixels and the height to 480 pixels. Then click the OK button.
  • Now import the .ai file. Flash Menu -> Import -> Import to Library. This will bring up a dialog window - find and select felix.ai that you downloaded, then select the Import to Library button.

The Import Options dialog window will open. Choose the following in the window:

    • Convert pages to: Keyframes
    • Convert Layers to: Layers
    • Which pages to import: All
    • Options: all of them except for the last one - Rasterize everything should not be selected.
    • You should see felix.ai in the library with a Graphic icon next to it (Flash places imported vector art into Graphic symbols).

Flash 8 supports the following types of vector and bitmap based image imports: .eps, .ai, .pdf, .dxf, .bmp, .emf, .fh7, .fh8, .fh9, .fh10, .fh11, .spl,.gif, .jpg, .png, .swf, .wmf, .pntg, .psd, .pct, .pic, .qtif, .sgi, .tga, .tif. While most people use Photoshop, Illustrator and Fireworks for generating graphics for use with Flash, there are also some open-source software options that are multiplatform and free, such as GIMP for bitmap images, and Inkscape for creating vector art.

Bitmap Graphics

Importing a bitmap image is significantly different than importing a vector graphic. Since bitmaps are defined by pixels and not by geometry, they are usually larger files and in need of compression. Lets import a couple of different types of bitmap images and examine how they can be compressed in Flash for maximum run-time efficiency. Download and import these files from the server - <http://serverAddress/grocery.tif>
< http://serverAddress/cart.jpg>. Make sure they are in the library when you are finished.


Your Library should look like this.


The grocery.tif image (along with any other non-JPEG bitmap) will be compressed according to the general Publishing Settings.

  • Flash Menu -> File -> Publish Settings
  • Under the Flash tab there are a variety of options, one of them being the JPEG quality slider.
  • Adjusting the JPEG quality slider will choose a general setting for how imported bitmaps will be compressed when your Flash file is exported (except for JPEGS). You will want to set this as low as possible, while reserving approvable quality.


The JPEG quality slider is found in the Flash tab of the Publish Settings.


The general Publish Settings do not work on imported JPEG (.jpg) images. For adjusting the compression settings on imported JPEG images, follow these steps.

  • Find the bitmap in your library titled grocery.jpg
  • Double-click the icon for this bitmap, opening the Bitmap Properties dialog.
  • The Compression pull-down should be set to: Photo (JPEG). If not, select this option.
  • Uncheck the box for Use document default quality - this will open the Quality option.
  • In the upper left hand corner is a preview window: here you can reposition the image, allowing you to inspect the effects of compression on a critical area.
  • Try putting different numbers in the Quality box, followed by hitting the Test button on the side. Data regarding the original and compressed size of the file is displayed. Again, you will want the lowest number (translating into faster performance) while yielding a quality that is acceptable.


The Bitmap Properties dialogue can be really handy for finding the proper balance between quality / file size, a topic that eternally plagues artists working with interactive media. The only time you would want to use the Bitmap Properties dialogue with an image other than a JPEG, would be when the quality of the image is crucial (or if you want to use an image with an alpha mask), in which case you will want to switch from Compression: Photo(JPEG) to Lossless(PNG/GIF). All non-JPEG images that are not set to Lossless will be subject to the general Publish Settings.

Layers and timelines

Now that importing graphics and setting their compression has been covered, lets examine the imported vector image in more detail. Drag the felix.ai Graphic Symbol onto the main stage.



The felix.ai Graphic in the Library and on the Stage.


If you click once on the face, you will see a blue bounding box around it - this is because it is imported as a Graphic Symbol. Symbols are a very important feature of Flash - it's a way to conveniently organize various graphical content, and it is a fundamental element for adding animation and programming control into your project. Other types of Symbols are Buttons and MovieClips. For right now, let's examine the hierarchal nature of the main timeline, and the internal timeline of symbols, while also briefly highlighting the Align window.

  • Flash Menu -> Window -> Align
  • Click once on the face graphic that is on the stage, a single bounding blue box should be around the illustration of the head.
  • In the Align window, first click the To Stage button. Then click the Align Horizontal Center button, followed by clicking the Align Vertical Center Button. Unless you placed the image exactly in the center of the stage when dragging it form the library, you will notice it shift slightly after performing these alignments.


The Align tool is as handy as it is simple.


Now, examine the felix.ai timeline. This time, double click the face graphic on the stage. You will notice a significant difference in the timeline and layers.



The felix.ai Graphic Symbol has a timeline, with frames and layers).


Notice all the layers and how they are named after prominent features of the face (nose lips, eyes, etc.) This is a helpful strategy used to avoid accidentally merged graphics; it also happens to elicit greater control over individual graphic placement, shape and coloring and lends to preparing images for animation. While this example shows how Flash retains layers that were created in an Illustrator document - successful layer use can be employed when creating drawings inside Flash (by simply making new layers for each distinct form that is drawn). In addition to skillful layer usage, this figure also shows how a symbol actually contains a unique timeline. All three types of symbols in Flash (Graphic, Movie clip, Button) share this trait.

While it is obvious that the conceptual content is the driving force of Dentimundo, it is also notable that Ricardo has a unique style that is serviced by his use of software (instead of being controlled by the software). The resulting effect is a certain resonance of ideas that remain with the viewer, instead of leaving one feeling like they have viewed a great Flash work. All of the works on his website have a similar effect, and can be viewed online at - http://ambriente.com.


Powered by Plone CMS, the Open Source Content Management System

This site conforms to the following standards: