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).

I stated last post that I was involved in a web dev project but never gave any info. The purpose is to re implement the French Class RBTL website which, not to my surprise, was previously a flash project. We are trying to create it to resemble the original as much as possible, all its beauty and its flaws.

So here’s some updates on the RBTL project.

We started with the main page, it has a peculiar design because everything must float around this one map picture. It was hard to work with the positioning of the objects but we finished that.

Every city name is actually a pop-up and, when clicked, sends you to a page about a poem. We then stated developing the page for the first poem, the one in Paris.

This page is also quite challenging. It not only has a complex design but A LOT of sub-pages.

It was tricky to nail the 2 navigation bars in the top, but we did. The compass in the bottom is also a button that grows and shrinks. Here’s more pictures of other pages in development, including out very own video player.

I think this project is pretty long, and there’s lots more to go. But it has been a good experience. I have continued to develop my web design abilities, but most importantly how to write HTML, CSS and Java script code that is easy to write and in a professional format. This skills are invaluable in my opinion, and very useful in my career path. I am excited to keep working on this project and hopefully more like this next semester.

No one technique is good for every project; we discovered this with Rockshelter. After a LOT of doubts, thought and checking with the client, we decided to implement the interactive a little differently from the original. I went back to photoshop to edit the picture a little and then made it interactive with Canvasser. I think the result was pretty good.

I think the font looks really cool and the squares make it pretty obvious what to do, this is good for the kids.

We had problems again when it came to a similar interactive: Gathering Girl. This one is also about clicking but it’s not a portrait so the squares would ruin the picture. We decided to modify that one to in Photoshop and then make it interactive. I’m pretty pleased with this one too.

We’re going to need to include the text somewhere else but the lines make it pretty clear which objects are the important ones.

Although these interactives were pretty difficult to think out, the implementation was pretty easy. I’m excited to get a new interactive and work more with animations.