Canvasser Documentation

This week I had the opportunity to meet with Tate to talk about documenting Canvasser so that people can easily learn how to use it. It is a difficult task since the program is full of knacks that make it tough to use and learn. We decided that the best way would be to create a BIG interactive, the father of all other interactives. In here we would bit by bit explain how to use every part of Canvasser, from particles to drag and drop. Then we actually opened Canvasser and we scratched that idea completely. We realized that Canvasser already has a learn and a samples sections and that the best way to learn Canvasser would be to use it. The problem is that some of the tutorials are not even complete. Some of the samples don’t show any process either. We would need to go back and fill things like that in and hopefully after that Canvasser can truly be a one stop shop for making HTML 5 animations. I feel like it will be fun to learn a little about how Canvasser was made in the process.

 

New Cascade Advances

This past week I had time to go back and improve my Cascade site once again. I worked with the body, sidebar and unit information parts of it. I added body content including links to the LAITS page and my own personal website. I also added sidebar content; a funny video of a grandma, some links and some colorful buttons. Finally I went in and filled in the unit information including the contact info, my supervisor and stuff like that. I think it looks pretty good now and it has a lot of fun stuff in it. This also gave me an opportunity to get more familiar with Cascade in order to teach professors in the future. Hopefully I get time to add even more stuff to make it more complete. Pictures of what it looks like are below.

 

HTML5 Interactives with Adobe Animate!

For my last shift before going on vacation I worked with Tate to try and figure out how to make an interactive with Adobe Animate. He found a couple of video tutorials online and we wanted to use them to make a simple drag and drop game. The results were mixed…

We found out that it is possible to make interactives in Animate but we had to mix our skills animating and coding to make one. Animate uses a Javascript library called CreateJS (and a bunch of sublibraries) to interact with pictures and elements called ‘symbols’. From there, if Tate made a symbol that represents an animation, I could make it do stuff like play and pause. We got a funny elephant animation from the tutorials and clicking the button makes the different parts move or not move.

The next step was more challenging. Making a simple drag and drop game. If the user drags the circle into the box, a green square should pop up, else a red square would pop up. Although there are a lot of references on how to use Adobe Animate and how CreateJS works, there is virtually no documentation on how to use them together. We managed to get the dragging and dropping working but we couldn’t get any other functionality. This was a bit of a disappointment. At least we both got to learn a little bit about what the other one works with.

In the midst of revising all of TBH we found another important problem: untracked Flash files that we never remade! Since I am the last ‘child of Canvasser’ left in the office it is my duty to remake them and link them to the main site. These were fairly simple to make now that I have more experience with this tool.

One of them was just a basic frame with links to pages with more information. This means fixing more links! 

The other one was a little more complicated. It has a flashy intro (no pun intended) with a shovel moving around. The letters in the title are supposed to show when the shovel hovers above them. Despite messing around with it for like an hour I had trouble replicating it… so I just dumped the whole thing. Now the shovel still moves around but no fancy layering. The two versions are shown below, I think the new one is not too bad.

The rest of the Digging interactive was pretty straightforward. Pic shown below.

So after Suloni and Ruben presented our final draft of TBH to the people in charge they found some issues with the interactives. Suloni created a special committee with STA’s Chloe and Esther to help us look over all of our interactives and find any differences between them and their Flash counterparts. For this we used a new version of the spreadsheet that helped us visualize the status of each one. I basically have spent about 2 weeks fixing all these problems.

We discovered a lot of problems with the links in the site especially. This is because the original page was not made to work along with our new Canvassers. In order to completely fix this Ruben created an algorithm that detected every time an interactive opened an external page. Tate and I had to look over all these instances and fix the ones that linked back to the interactive.

(the picture says almost 700 but it actually ended up being like 60)

Today I finally managed to start working with Cascade! I read all the instructions and feel fairly prepared to breeze through the tutorial. I did my first changes to my site and it looks pretty good (related picture below). More updates on my progress later.