Stinger – Animation Refresh Planning

project: Stinger – Animation Refresh
Client /Prof: N/A
completion status: Started August 25 2021
staff guidance: Maddy
STA team members: Rachel and Megan
description/plans: Refresh the stingers for the course graphics to add light animation.
To be completed: N/A

For this project, I started working on planning out the steps to make the overall creation of the stingers simple for future STAs.

Notes:

Current Stingers: 

• Chat
• instapoll
• Quiz
• Survey
• TA

Questions to Consider:

• Easily customizable After Effects File
  • Color
  • Background Images
  • Fonts? Segment title
• Standard animations for each segment??
• Standard animation for title??
• How long do the animations need to be? (2 seconds + additional second for static image) 

*** Standard AE composition with the layout of each element (Title, background, animation). ***

• Duplicate “standard” composition
• Edit the Title and Background Image
• Insert/open the different icon animation compositions into “standard composition”

After Effects File Requirements:

• Placement of Title with small animation
• Placement for icon with animation
• Background image placement (static)

Title Animation Ideas:

*** Left side of the graphic (simple) ***

• Typing 
• Fade in
• Slide in from left or bottom

Stinger Animation Ideas:

*** Right side of the graphic (Fade in first) ***

Chat:

• Multiple Chat bubbles appear?
• iMessage chat

Instapoll:

• Revolving circle around install with moving bars?

Quiz:

• Blinking/transitioning between filled question mark and open. Switch to check mark after?

Survey:

• Toggle back and forward

TA:

• Interchanging the chat bubbles

Files:

I already began creating the AI files for the different stingers. Once we have decided on the animation for each icon, we can began making the different frames in AI or creating the different piece to animate in AfterEffects.

I also began creating the After Effects Template for the animation composition. There is a “main composition” that will hold the final completed animation that will be sent off. Within the main composition, there is the Title, that can be changed, the background composition, and the animated stinger composition. There will also be a composition that the STA can use to change the background image.

Hello, it’s Rahul. It’s been a very eventful week, from meeting my fellow STAs and other staff members to starting work. This week I’ve mostly been going through the WebDev trainings and getting familiar with the browser inspect tool as well as good website accessibility. Below are two screenshots of one accessible website (Billboards) and one inaccessible website (Yale Art).

Another training that I have done is the Web Browser Inspect Tool. In that training I utilized the inspect tool and changing some lines of HTML and CSS was able to manipulate the website, including changing images, font style, and size. You can see some of the changes below.

I have also attended the training for the COLA Refresh project and will began working on some of the trainings, including making a personal page.

Classes have also started this week so it’s been busy, but I’m sure it will all get settled into a rhythm soon. All in all, it’s going pretty well, and I’m excited to continue working on the COLA Refresh project.

Hello again, it’s me. The semester is starting tomorrow and I am not ready… but also happy to be in the office and amongst people again! Maybe I’ll stop having one-sided conversations with cats…

This week I kind of bopped around, working on photo IDs and finishing the animation project script. Excited to see where the animation project goes! It’s definitely been slow-going, as we’ve all just been working on it in our downtime, but we’re definitely starting to make some significant progress.

Also, I’ll include a couple IDs here for reference

I also worked a bit on web support and updating the STA blog as well as reviewing the documentation for the COLA web refresher project, which me and a couple other STAs will start helping with beginning tomorrow. I am storing my current questions here.

Also I have an important announcement. After careful consideration, Pirate has decided she is not open to photographs at this time.

Green Screen Training

For the green screen training, I decided to use this image:

I was able to successfully remove the green screen background and color adjust the image.

I decided to add in a forest background to the image. Since the background image was lighter, I edited the photo to make the image fit better with the background.

Photo IDs

Here are some photo IDs that I recently completed. 🙂