Cobwebs Open Lab Scenes

Brainstorming at #rdcHQ.

The Cobwebs Crew is in the final stretch of preparing the website and Part Three of the “Cobwebs” movie for its first public screening. The next two weeks will be super busy with preparations for the site launch, movie screening and art show. During the meetups, everyone helps each other out and teaches each other what they have learned. Building your own creation together from the ground up is a great way to discover new tools and technologies and learn how to work as a design team. Here are a few scenes from this weekend’s meetup showing The Cobwebs Crew in action.

Brookie Richard vectorizes boxes for the final battle scene in the Young’s attic.
Nathan Malamud and Devon Richard discuss current Cobwebs events and all things Minecraft while Evelyn Jennings contemplates the design of the movie theater page.
Ben Garratt installs software to begin the final phase of the Cobwebs Website.
RDC Mentor Levi Thompson prepares for the next Point.B art show and Launch Party.

#rdcHQ Extra Credit:
RasPi Model B+ DIY Case

More Extra Credit from #rdcHQ! More fun stuff from the Cobwebs Open Lab – Mentor Jerry McManus created a very cool case for the Raspberry Pi Model B+ using a paper template and the original packaging. The template is based on the original Model B punnet template case by “E” available at raspberrypi.org. Below is the template as a PDF so anyone can download and print their own.

Click to download the Model B+ template as a PDF.
A side view to show how the ports are different on a Raspberry Pi B+.

Cobwebs The Movie:
Production Techniques

Greetings from #rdcHQ! We have an update from the Animation Department which has been diligently working on the final cut of the movie. New production techniques are being learned to make the process of movie editing more efficient. One such technique is the use of animated storyboards.

A typical storyboard panel showing scenes to be animated by the animators (with shorthand captions).

Storyboards have been used in Cobwebs since the beginning to guide story lines and develop characters. However, as the final segment of the movie is in production and a Director’s Cut featuring all three parts will be released, mentor Jerry McManus has stressed incorporating the actual storyboards into the video footage as it is being edited. Text is used when a visual has not been sketched.

A text storyboard explains the action to be animated when a visual is not available.

Director’s Note: The footage below is a Director’s Storyboard Sketch with some rough audio parts dubbed in. This is not the final cut :-)

“Cobwebs — The Movie — Part Three” in Director Sketch Mode.

In other news, We are pleased to announce that Cobwebs — The Movie — Part Two has been entered into The Oregon Coast Film Festival! Part Three is the next segment to complete, and then the long-awaited Director’s Cut featuring Parts One, Two and Three. All of the work in progress will be screened at the next Point.B Studio art event! … Details and Artists to be announced!

HTML 101: Image Maps

Greetings from #rdcHQ! We had another fantastic meetup as we enter the homestretch of preparing the new website for our movie launch and the upcoming art show … (details soon!) … which opens Labor Day Weekend. In yesterday’s meetup, The Crew worked on coding the new site design and worked with GIMP to create image maps on our home page spider graphic.

Image maps are useful in that they provide a simple and clean way to create clickable areas within a single graphic. Image maps work with any image type since the code resides in the HTML. The first step is to open the graphic in GIMP at the size it will appear on your final web page. Once the graphic has been imported into GIMP, open the “Image Map” tool under Filters → Web → Image Map as shown below:

When you are in the “Image Map” window, select the appropriate tool to create a clickable region over your graphic. We used the polygon tool to create an irregularly shaped area over the word “About”:

Once the polygon shape is successfully drawn, you will be prompted to enter the hyperlink for the clickable region you just created as shown below (Note: closing a polygon shape can be tricky, and requires a Control-double click action on a keyboard or a left double click action with a mouse). As you can see with GIMP, many types of links are supported, and again it can be used with any type of image since the final result is HTML code:

Once all of your clickable regions are defined, save the image map file to your desktop or working folder. This will create a small snippet of code (see below) that can be transferred into any HTML page.

This is a very straightforward method of creating image maps – SO much more straightforward than the Photoshop CS5 and Fireworks method … and using 100% open source tools to boot! In our sandbox, all of our links currently lead to our secondary page template as we await the final design from The Cobwebs Crew. We’ll have more progress next meetup!

Return top