Animate Session 3 - Navigation and Poster work

In today's session, We learned mainly about navigation and walked near to brainstorm the idea of our final project.

First, we set the pixel size of canvas which is used by posters.

Width: 640   Frame Rate: 30

 Height: 960 

 Platform Type: HTML5 Canvas 

Then we made 5 layers named 

1. Action

2. Labels

3. Buttons

4. Text

5. Images

First, we added a stop function in the Action layer so that it can hold the intro page until any interaction. We added different labels on the gap of 10 frames each that are different pages for the poster. we labeled them as page titles. Then we progressed to design buttons. After the buttons were designed we duplicated them in the library changed their titles, instance, fonts, etc .

After that we arranged them in layout of a poster. we added main menu button on intro page and other various buttons on main menu ti navigate to the page audience is interested in. In addition to that we also added map and tickets button to main menu so they can book their tickets or look up the location. We mainly did navigation through code using HTML5 language we added action in very first keyframe of button layer then we added code snippets> timeline navigation> jump and hold on this frame. That was generating code itself we just had to identify jump where by labeled name and button was selected by instance. 

Some of us also used the manual way in which we had to write the code as..

//Script for the main_btn: 

this.main_btn.addEventListener("click" , clickMain.bind(this)); 

 

function clickMain() { 

 this.gotoAndStop("main"); }

The first eventlistner line is script that connects the button and second line is function which directs it to where it is supposed to go. The coding part was easy and fun. I also tried to use an airplane png as bitmap to navigate back to the main menu or intro page. 

After this we learned to add animation in button. We took a png of design history museum and converted it into bitmap. The first step was to made a new button function and add this bitmap then in other video clip function and traced it . we animated it on different frames to show various colors. The next part was tricky and hard to get because we added animation tu button in button function. on first frame it was png which was grouped and aligned. In over frame we added animated logo and imported whole in main scene and it worked!. 

The second part was rather easy in which we added some dynamic moving effects in background. Which we did through circles and tweens. We did know how to do this from previous session but we played around with opacity and it was fun.  

Comments

Post a Comment

Popular posts from this blog

Degree Project Ideas......

Image
Thus, the summer is over and school has resumed. Do you know what you're going to make for your degree project? was the first query. I remained silent, but I knew exactly what I wanted to try and create. The entire summer, I had in the back of my mind what I ought to cook. However, I was clear on VR after receiving really favourable feedback. I was ready to work over my comfort zone in VR and create a work of art that would wow viewers. INSPIRATION  I have watched more films this summer than I ever have. I was really interested in producing films. I was curious about the work of great directors like James Cameron, Steven Spielberg, Quentin Tarantino, James Gunn, and Christopher Nolan. What makes their films so unique and how do they think? I spent the entire summer watching and analysing the majority of the films by the aforementioned directors since I was so curious. It amazed me. By the end of the summer, I was certain that I wanted to be a filmmaker and director. I also watched
Read more

Making of the Planets..

Image
In addition to creating planets for my project, I also wanted to create a template for the planets so that I could copy and paste them, changing the material and colour nodes to create a completely different planet. This way, I could use the template as often as necessary to create a bizarre planet for my degree project. First Step: Configuring the Sphere We start our journey by constructing a basic spherical, which will serve as the basis for our magnificent planet. To ensure seamless transitions and accurate detailing, we'll add a UV Sphere primitive and use Blender's user-friendly interface to polish its edges with a Subdivision Surface modifier. Step 2: Materials Addition: Enlivening the Planets Now that our sphere is in position, it's time to harness the magic of materials to give it life. We'll explore Blender's material editor and use the adaptable Musgrave texture to create an aesthetically appealing surface. Through the manipulation of characteristics li
Read more

The Davinci Result and Part 1 Post Production

Image
 While working on a certain nebulae sequence, I encountered a big obstacle in my attempt to provide engaging VR material. I tried my hardest, but there was a lot of distracting noise in the footage, which took away from the intended visual effect. I set out on a quest of investigation and testing to save the sequence and improve its quality because I was determined to find a solution. I found a potentially effective solution after researching other options and talking to other creators. DaVinci Resolve is a potent video editing programme that is well-known for its strong noise-reduction features. Equipped with this fresh understanding, I enthusiastically tested this method in the hopes of reviving my problematic nebula sequence. I nervously awaited the best outcome when I applied the denoising algorithm in DaVinci Resolve after importing the video and carefully tweaking the settings. I was astounded to see the nebulae's actual beauty emerge as the noise progressively subsided and
Read more