STA Work Blog

For the month of February I’ve been assigned to focus on TBH, so updates on RBTL will have to wait. We are trying to actually finish the site this month, with all the interactives. I am still working on Doorways to the Past. Like I said last week, it’s going to be a long one, and it gets even more complicated the more I use the original animation. I finished the intro and setting up all the door buttons, as well as the ground layers.

Then I had to make the doors interactive so that the new layers would pop up as you clicked them. I decided to drop the door opening animation the original interactive had because it would be too complicated for Canvasser and time wasting too. I set up all the popup layers like this.

Since each popup has distinct ‘X’ and ‘check out’ buttons the amount of objects in the interactive is blowing up! This is definitely the most challenging part of the project, as well as the work to prepare each picture in Photoshop.

I think I’m barely halfway done with this animation. This is due to several reasons. I’ve been finding a lot of tiny bugs in the new Canvasser iteration, I usually need to work around these until Ruben fixes them. Also I had issues with saving and might’ve lost a couple of hours of work redoing stuff during the week. There’s still a long way to go since I need to implement a further layer of popups inside each popup, these also have interactivity of their own. For example by clicking on the ‘Check out the Evidence’ button of the third door you get the picture below. By clicking on each of the maps on that slide you open a zoomed in version of the map. Anyways, I’ll keep working and update next week.

The beginning of the semester has been kind of slow for me. I haven’t been able to get deeply into work because of different reasons. (freezing temperatures, lots of school work, new schedule)

The first week of work I basically finished my share of the Kids TBH animations (more on that the earlier post). After that I started working on RBTL and on new TBH interactives.

RBTL first, I think we’ve done some good progress on the site these first weeks of work. I was able to work close to Stacy for a few days and nailed several pages on the Sens tab. These are complicated since they include lots of Javascript in conjunction with CSS tricks and HTML. We needed some hover effects that make text appear or disappear as well as change attributes on the hovered object. We also needed to send signals when clicking words to make different things appear on the sidebar. You can understand this more with the pictures, point is we got these two effects working. We were also careful with keeping the JS very unobtrusive and the CSS general, this can be a challenge sometimes but it’s good practice. I’m not going to be able to match schedules with Stacy for a long time now, but I’m fairly confident I can duplicate this functionality on other pages. This puts the RBTL project well on its way.\

 

Now on to TBH. I started looking at some interactives assigned to me for the semester and ran into some design questions. Suloni and others helped me resolve these, in the meantime I started working on Doorways to the Past. I can tell this one’s going to be long already since there’s sooooo many objects interacting. I nailed down the intro sequence and am working on setting up the main frame to look like the one in the second picture.

When I got hired I was told that LAITS had been working on restoring TBH for more than a year. We had dozens of interactives that we needed to do, all of them different from one another. About a week ago, we finally managed to finish all the interactives for the kids pages. We might not be done with TBH in general, but this is no small feat. Below I will give a small summary of some of the animations that I was working on towards the end.

Cabeza’s Journal Translation

I worked on this for about a LONG time, more than a month last semester, I think. This is basically only one frame but what’s fun about it is all the small animations it has every time you click one of the words. I had to learn a lot about Canvasser that I didn’t know, including how to use particle effects. We also had to fix some small bugs in the system in order to make the animations work. I believe the hardest part was making the objects that drop. I had to use a particle to imitate falling water drops and at the same time have the splash pictures appear on the bottom of the frame. The bouncing acorns were also fun to make, I actually had to model gravity in order for them to look like they’re actually bouncing on the bottom of the screen. Some pictures below!

 

Detectives into the Past

This one I had talked about before: the ultimate Dr. Dirt adventure! Bryan and I split the frames since there’s a lot of them and I finished my first half but I had to come back to do the rest. The hardest thing about this one I would say is the sheer amount of frames that we had to do, about 30 I think. This means prepping the images and objects for all of them! I had to do a bunch of question style frames in which kids have to guess what an object is behind a microscope. Some of them are funny. I also like the last slide with all the animals moving around.

 

Clues from the Bones

This was the last kids animation we had to do. I was in charge of the middle 9 frames. It wasn’t super complicated but it was tricky because the transitions between frames needed to have a nicer flow than the other animations. It was also very interactive, with a lot of drags and buttons.

 

Anyways, it was a lot of work, but we’re one step closer from TBH becoming a reality (no flash this time).

GOV 312L U.S. Foreign Policy Backdrop

RUS 407 U14_1 Illustration

Another illustration for RUS 407. Workflow: Sketch and linework using reference images, object placement, color coordination, texture masks; send for review.

 

Littlefield Lectures Poster

The final design for the Littlefield Lectures poster for Manisha Sinha and The UT Department of History. Beginning with the first draft (“All iterations,” top-left), this design evolved from a type-focused column design to a full-width poster with greater focus on the images featuring the author and her book. After cycling through several iterations, we finally arrived at the design featured in the two posters on the right. The dark black border is a remnant from the previous iteration just before the final version, which I originally included to illustrate how much of the edges would be chopped off in the final print. The border was well-received and was incorporated into the final design. The final poster previews below include this border spanning across the bleeds which is to say they are thicker on-screen than they would be in print.

 

The shades of blue are sampled from “The Slave’s Cause” book cover and the same font (Birch STD) is used for the headers. The body font is Georgia.