Digital Design Production... Time Sequencing Workshop

We started off by drawing 5 60cm lines, divided into ten sections evenly on to three pages. For this workshop session we brought with us screenshots of 25 frames from even intervals and 25 key frames from a video of kinetic typography of our choosing. (See blog post)

On paper, when drawing out time sequences, work in seconds, not in frames per seconds, otherwise you would just be creating flip books of an animation.

Think logically not creatively!

Time is in relation to sequence. You control how you break timelines down, and add more detail so that they make sense. Also, it is useful to work to even seconds if possible, e.g. we are creating 5 second videos for 'Silent Movie' brief, which will be easy to break down on a storyboard.

A standard formats don't exist anymore! If you work in a line it is easier to see the sequence in order.

Tasks

1. Break the time scale of your video so that it fits on to the points of a timeline. 

My video was 4 minutes and 17 seconds so this 257 seconds, so my points were:

0, 25.7, 51.4, 77.1, 102.8, 128.5, 154.2, 179.9, 205.6, 231.3 and 257 (seconds)

(as 257/10 = 25.7 seconds)

2.  Map the sequence of even frame screenshots to fit on to a timeline so that it makes sense to you. come up with a system to communicate accurately where the frames fit. 

3. Using a new timeline, use all 5 lines, still broken down into ten sections, to show the sequence of key frame screenshots. You must cut up the paper.

The time of each key frame taken is listed below. By using 5 lines with ten sections, there were 50 sections, so 257 divided by 50 is 5.14 seconds, so each section was this long. This one was a lot easier as the frames were just placed in the time I already had for them, and as I could use all five lines, it was so much easier to place them with there being much more space to work with.

6, 21, 43, 49, 51, 55, 62, 93, 98, 103, 119, 123, 134, 144, 158, 176, 183, 188, 196, 204, 208, 218, 228, 234, 253

 

The first timeline is representation of time and the second timeline was driven by us.

Tasks after workshop

Identity and list on blog what you've learnt from this session

- That simple maths is hard when you haven't done it in a long time!
- That being prepared and gathering all the information I needed from screen (as listed below) would make things a lot easier
- I have learnt how a timeline can help you make sure your video is working as you want it to as you can see where the action happens
- A timeline doesn't have to be hand drawn scenes, it can be grab shots
- Its easier to understand the pace off screen
- To think logically and creatively, for example, don't just use one line when you have a whole sheet of paper
- Make it easy to understand

What are the problems that you have encountered?

- My timeline makes sense to me but probably doesn't to others, so I should include annotation for when showing
- I found the logical thinking quite hard, as its not what my brain is used to, but then when I got into it, everything made sense and now I feel stupid for originally finding it hard!

What information do you need to take away to work from screen to paper?

- Need to know the time when screenshots were taken, have this on the screen shot for the key frame so you still have the information if you mix the order of the key frames up
- How long the video lasts

How do sequences work on timeline?

- Sequences could either be with the key frames placed at even intervals, to get a good idea of what the video looks like as a whole, or with the key frames showing where the main bits of action happen placed at their correct time, so that it is easy to see at which points in the video that the different parts happen

What changes need to be made to your timelines to make them work?

- I should print the key frames off smaller so that they fit better on the page
- Make sure to place the frames so it is not confusing about where they start and end
- Add annotation to make things clearer
- Use all the space and spread things out so that it is easier to look at

From each of your five ideas on the storyboards you have done prior to this workshop, choose your best one and map it to a timeline - you work out how you are going to do this. This should give you the plans for your after effects video. Document any mistakes you make.

After Effects Workshop II

Workshop

- When you work in Indesign you are working spatially as you are just positioning on the page, with after effects you are arranging things in time as well so you are working temporally. 

- 25 still images every second, makes animation like a flip-book
- File -> Collect files = gathers everything together that your file needs and creates copies of all of your work
- Import as footage when only a layer, and important as a composition when many layers

Working with photoshop files

- Working for screen: RGB and 73ppi, units per measurement are pixels not cm

- Setting up:

-  Or: Film and video presets -> size -> PAL D1/DV Widescreen Square Pixel

- When set up like this, guides are automatically added to photoshop document, these are important as they specify 'safe' zones within which to work. Keep anything significant within the action safe zone (the outer margin). 

- If you are going to add text to your video, you should make sure it is kept within the inside margin. 

- In after effects, when you go to your composition, there is a button (next to zoom %) that allows you to turn on these zones.

- Photoshop document with one layer on a transparent background.

- To go from photoshop to after effects, you need to save your file as a .psd, as this will preserve the transparency

- In after effects -> file -> import -> file. Default option: import as footage. Second dialogue box is basically asking you the same choice. File now appears in project workspace.

- After effects works in the same way that indesign does with image files, there needs to be a link between the images. 

- If you drag the file into the timeline it will be automatically centred in the composition space

- There are possibilities to create the text within after effects

- Shatter: layered photoshop file

- This time we are importing this file as a composition

- Appears in the project panel in a different way to the single footage file does:

 

- To open composition just double click on it, it opens up as a new tab.

- Each photoshop layer exists as a layer in after effects

- Everything that needs to be animated independently needs to be put on its own layer

- Can delete the background layer (press backspace) and change the background colour of the composition

- Add key frames to all of your layers at once. Select all of the layers, drag current time indicator (red line) to 1second, type 'p' to show position for each layer, click on one of the stopwatches to add a keyframe for every layer at that moment in time, this is a starting point we have established for all the layers.

- Now working with individual layers, so select the layer, and then drag it to a different position on the composition screen (in the safe zone). 

- At the moment the finish points are all at the same time, but you can move the key frames around within the timeline so they finish at different points.

Shatter Video

- Again importing as a composition (importing scale.psd)

- When you select a layer, the edges of the layer are the size of the composition. The default position of the anchor point is the centre of the layer.

- Select all layers and press s key to show scale properties of all layers, can change one and all will change equally while selected together

- This time imported with composition - retain layer sizes, now when you select each layer, the layer is only the size of the actual pixel content of the layer.

- Each character scales/rotates etc around its own individual anchor point

Working with illustrator files

- Import roll.ai, single layer file

- Everything we have looked at with photoshop layers applies to illustrator layers

- Setting up an illustrator file:

- Sets up a guide automatically

- As illustrator works with vectors, its easy to change the scale without losing quality

- When we enlarge the file on after effects we are getting pixelated edges even though it is a vector file, as after effects has to convert files to pixels. It is as if we are enlarging a piece of photoshop artwork.

- We can retain the vector quality by the use of a button on layer switches. 2nd button. Check the box for the layer and the quality of the artwork will be as it should be and not pixelated. 

Layer switches

- 1st layer switch: shy switch hides any layer for which this switch is checked, useful for if you have many layers but are only interested in working with a few of them. Only works when you then click on the hide button.

- 2nd layer switch: applies to illustrator artwork. When we put our file in after effects from illustrator, it is turned into pixels so the quality gets lower as we make it larger.

- 3rd layer switch: diagonal line - Allows you to lower the quality of individual layers. Will help when you are previewing when you know some layers are good but need to see the full quality of others.

- 4th layer switch: fx - enable or disable any effects you have applied to a layer

-5th layer switch: film - only applies when working with video, makes a piece of slowed down video look smoother.

- 6th layer switch: motion blur - applies if you are working with rotation or position. Then have to enable motion blur with the top switch. In composition settings, you have some advanced options, and here you can change the settings of the motion blur.

- 7th layer switch: adjustment layer (as in photoshop)

- 8th layer switch: makes the layer 3d

Digital... Silent Movie... Storyboard Task

Following on from the workshop, this is the task we were set:

Create five 5 frame sequence of five ideas, so 125 frames in total. Create the sequences using the word, not just the letter, and trace the letters of a printed sheet to make it quicker and the letters neater. Include colour. Think about a sense of depth and dimension.

We were also set a research task, the videos I looked at can be seen here and the screen grabs can be seen here.

[[ Click on each image to view larger ]]

Sheets

I have found this task really useful to aid my development of creating storyboards. I think I need to work on how I use colour because its all just a bit random here. I think I've come up with some good ideas here that I'd like to work on further.

Stretch : Idea 1 : To extend a different part of a different letter each time

Stretch :  Idea 2 : To lie down at full length/ stretch out on a bed

Expand : Idea 1 : To open out the word

Expand : Idea 2 : To grow vigorously

Expand : Idea 3 : To make wider or longer

Digital... Silent Movie... Storyboard Workshop

- What is storyboarding? A sequence of pictures to communicate the desired general visual appearance

- To communicate ideas before production, in print, is a cost saving exercise

- It is essential to understand the flow and to check sequences work

- Idea generation

- Brainstorming, visual thinking

- Idea: working on post-it notes to easily re-arrange

- Can write captions

- Storyboards are not flip-book full animations, but key frames, significant points where things change

- As we are working digitally, we still need to take screenshots to explain work in crits

Task

For this workshop we brought in all the research we gathered about our two words chosen from the randomiser.

Task 1: Take 1 letter from your words; for each word, you need at least 5 visualisations of this word, using only the letterform in one frame. You can use arrows but no words.

I looked back over my research and tried to draw a visualisation of all of the definitions I found.

Task 2: Choose one word, and choose one letter from this word. Change the form/ dimension/ scale/ appearance/ visual quality and characteristics in five steps.

For this task I chose the 't' from stretch. I worked on some of the best initial ideas I had from the initial task. I found it useful to work on the steps it would take to get from the start to the end.

Task 3: Choose one word, and choose one letter from this word. The form needs to stay fixed, but you can change the position/ axis/ orientation/ movement.

For this task I chose the 'e' from expand. I found this one very difficult, so my ideas might not make a lot of sense.

Task 4: Choose one word, and choose one letter from this word. For this one you can change the form/ scale/ lateral or vertical position and spatial dimensions.

Do they work?

Go back and annotate your storyboards, use arrows and notes so that it makes sense to you. Edit them, think about how you can make them better. This is useful to see if your visualisations actually make sense when you go back to them.

My photos show my annotated storyboards.