Timeline redrawn. Flash interface nixed.

So. I redrew the entire timeline so that everything can be scaled, when zooming through time, without losing quality. I built one file with the entire timeline that I can now import into all of my animations, I should have done it this way from the beginning - it would have saved me a ton of time.

I also spoke to my professor Ziddi and he said that adding a selection interface to my project doesn't make sense, and to just have a looping video running, with still slides in-between sections that have text explaining what is about to be shown. I'm also designing a poster that will have a brief introduction to the project written on it. I priced getting it printed on lenticular material and for a 30"x30" poster it was $800! Yowza. So now I'm thinking that I will print it on a semi-translucent paper/fabric and have the text on one layer and the time-line graphic behind!

Venting

I'm running into a number of issues that need to be resolved:

1. Zooming in on the timeline is looking very pixelated. I originally imported each ring in the timeline from illustrator at the size it is relative to it going back in space - so the further back rings were much smaller. Now when I am zooming into the timeline to show examples of moving back in forth on the timeline - it looks like crap.

I'm going back and redoing the original timeline so that all of the rings are the same size and then scaling the size in AE, that way I won't lose any image quality. That is going to take a loooong time. I'll have to go back and replace and reanimate the timeline in all of my files after I finish building it.

On a side note I am building the timeline in a much better way now so it should be a lot easier to animate and look much better. So at least some positive is coming out of this.

2. I'm trying to build the menu interface for the show in Flash and am getting frustrated trying to do the ActionScripting. I can get the buttons to go to a new page and play a video but can't figure out how to tell Flash to go back to the menu page after the video stops - it just keeps looping and I have to reload the SWF file to get back to the menu.

I've been on Adobe's Forums talking to people and it's like they are talking a different language. I know what I need to do but I just don;t know how to translate that into ActionScript! Argh!

Controls

I'm designing the interface to view the interface design. This interface will only be used at the show, and perhaps on my portfolio website, to allow viewers to watch/rewatch/skip over/watch all/etc. so that the interface walkthrough isn't a totally passive experience - there is some interaction and choice given to the audience.

If I were presenting this to a client I would be able to talk them through these steps, and replay areas they wanted to see again. Since at the show I might be preoccupied I want the audience to have this choice for themselves.

O great

I started trying to add some subtle sound effects to the timeline and something is wrong with After Effects and I get an error message when trying to import any music files, I have tried every possible format. O great.

I might have to render all my movie clips and bring them into iMovie to edit them all together and see if I can add the sound effects there. Then export the finished movie as a multiple quicktime files, broken up by section, and bring everything into Flash and create buttons so that people at the show can navigate through the movie if they choose or just watch the whole thing.

I'm thinking that if no one touches the main navigation page for like 30-60 seconds that the zooming timeline intro will loop! I don't how much ActionScript is involved in doing that. It's gonna be a busy week...

Intro Animation "PLAY" Idea

I'm thinking at the show that this "Intro Animation" will be set on a loop and people can walk up to it and click the "ENTER" button to watch the movie walkthrough of the interface. That way at least there is some user interaction at the show, and people will be able to see the whole movie from the beginning instead of starting from a random spot when they walk by.

I also think this will be more captivating and will get more people to watch the movie, since it is pretty eye-catching, and once you get into the movie, some parts aren't as "flashy", and people walking by might not be drawn to watch, say if they walk by and the movie happens to be talking about a static block of information. I'm going to try to figure out how to do this!...

Animating the Intro.

It's a Monday. We don't have class today because of Patriots day. I'm working on animating the introduction to my project. Basically the sections of the vortex are going to fly onto the screen creating a circle/ring that will then glow and the camera will pull back revealing that the circle/ring is the "O" in "HISTORY". When the camera pulls back it will be on the intro page to the navigation. The animated circle/ring is actually a part of the title of the project, as well as an introduction to the time-line that will appear after this page is collapsed. This is about the 3rd day that I have spent on animating this. It's taking a long time basically because I have tried several different ways of doing it that have failed! I'm not used to working with the camera in After Effects.

I also have the first section of the site walkthrough animated, so I think after I have the intro nailed, which hopefully will be tonight, that I should be on track. By this weekend I am planning on having all of the animation complete so that I have a week to edit and do the voice-over.

I'm getting nervous because I have invited a lot of family and friends to the show, and I really want to impress them and stand out in the show!

PS, AI, AE, SH, IT!

We got a map of where our projects are going to be located in the gallery today, I am to the left of the main entrance, a pretty good spot I think. Things are going smoothly now, I am taking the sketches that I had made in illustrator and bringing them into After Effects so that I can make an animated walkthrough of the navigation.

I'm breaking the movie/walk-through into 3 major sections, with several sub-sections within each. Here is how it breaks down:

2. Time-line animation in AE
A. Animate all Sections:
i. Intro (timeline animating in) - DO LAST
ii. 1st info box animating in (Home Page) - discuss overall site - history of stereoscopy shown through an interactive timeline.
iii. timeline - START FIRST
Information Controls:
a. selecting years - active years vs inactive
b. selecting years - quick browsing and selecting info boxes
c. selecting multiple years / moving info boxes on screen
d. expanding info boxes / collapsing info boxes

Time-line Controls:
a. moving forwards and backwards in time. up/down
b. rotating the timeline. left/right
c. changing from vortex view to horizontal scrolling view
d. quick overview of horizontal view (see Info controls above)
e. switching back to vortex

Controlling Time-line by topics panels:
a. opening the topics panels
b. selecting topics within the panels. corresponding dates select on time-line
c. selecting the "eye" icon - "see only these dates". time-line animates to show
only these dates

Time-line then falls apart at end of presentation, and then loops back to beginning.

New Interface Layout

Working on building the new interface design in illustrator. The interface now focuses on the timeline itself, the information floats above the timeline and can be moved, pushed back in space, expanded to show detailed information, and collapsed.

Shown are 2 information boxes open and an expanded information panel.

Maybe not...

This week I thought I went to ask advise from another professor, Heather Shaw, who specializes in motion design and interface design. She had a lot of good advice and suggested that I get away from the clean web-site layout that I had and push the project toward something more experimental. A few weeks ago my degree project professor, Ziddi was also suggesting this, but I couldn't picture presenting just an experimental interface as my final project, I felt that I needed something finished, and polished.

Heather showed me a few projects that students at the Dynamic Media Institute at MassART had done as graduate students. They were all experimental and I was blown away by how cool they were. She suggested that I make the time-line the hero of the project, in my website design the time-line became just a graphic when all of the information around it took precedent.

Now I am thinking of having different points in time that contain certain kinds of information behave in different ways through movement. The information will now float on top of the time-line, you will be able to select multiple years and have multiple info boxes so that you can compare years. The info boxes will also be interactive—you will be able to drag them around the screen, and push them back in space, if you want to keep them open for further comparisons, to allow room for more to be opened!

I'm also thinking of making a book highlighting a block of time that will behave similarly to the dynamic time-line. Perhaps it will be printed on a thick stack of translucent paper so I can really show the depth of the time-line/tunnel?

I'm excited, it's gonna be a lot of work to pull this off, but totally worth it. 4 weeks to go, including this weekend...

Interface

I think that I have the interface pretty much nailed! It's fairly intuitive—

Menus and timeline navigation will always be on the left.

Information: text and images, will always be to the right and will correlate to whatever period of time you have selected in the timeline/navigation.

There will be a help button on the top which will bring up an overlay over the site which will use arrows and brief written explanations to show the user how the site works and where to find the information (which I feel is pretty self evident, but just in case...)

You can browse the timeline for information by Topic if you wish—selecting a topic will hight-light points on the timeline that contain relevant information. Otherwise as you hover over dates within the timeline on the top right there will be a brief overview of what happened that year. One image that relates to that year will display below the overview. This way the user can quickly scroll through time and easily scan information. If the user would like to delve into more information about a year they simply select "Learn More"—which will flip to the back of the large picture box where the user will find body copy as well as a grid of images to select from.

The time-line will have light reflections moving inward to create the sense of it being a vortex/tunnel with depth. These reflections also help create the illusion that the time-line is an eye—which are the reason we see depth and 3D in the first place.

Time-line Storyboard

I've go the storyboard for the intro to the time-line nailed. Currently building it in illustrator and doing motion sketches in After Effects to see if the motion that I am picturing in my head actually looks right on the screen. Things are finally picking up!

I'm trying to decide if the poster that I am going to be making for the project should be in 3D. I was also thinking of designing a 3D take-away postcard sized image with a pair of cheap 3D glasses with my web-site address printed on them.

I'm also starting to design a book that will have the same information as the site, only written out instead of spoken—basically a walk through of the how the time-line will work. The book might also contain different types of 3D images—anaglyph, and cross-convergence. Woot!

Cyclical Time

Ancient cultures: Incan, Mayan, Hopi, Native American Tribes, Babylonian, Ancient Greek, Hindu, Buddhist, etc. have a concept called THE WHEEL OF TIME. This concept regards time as cyclical and quantic consisting of repeating ages that happen to every being of the universe between birth and extinction.