Animate: Navigation

 Today we continued with learning how we can use animate to create an interactive poster.

We first set up the page like with the previous projects (With different layers and labels, 640x960, 30fps, HTML5 Canvas) and made a main menu button. We could then duplicate the button and change the text and colours to make more buttons. We could then add these to the scene in the buttons layer. We also added the 'this.stop();' code to all of the keyframes. We then needed to add instance names to all of the buttons and then we could add Click and go to frame and stop codes to the buttons. For the menu page which had multiple buttons we needed to have code for each of the buttons, we also needed different function names for all of the buttons. I also added arrows on all but of the sections except from "intro" to go back to the previous 'page', for this I used the same buttons but changed the scripts so that they go to the correct section. It's better to use labels rather than frame names incase you move the sections around. 

Other things we did were:

Changing the publish settings to make center stage, make responsive (Fit in view), Export image assets as SpriteSheet. 

Making sure that the font is something standard eg. Courier New Font. 

I also added a slight effect to the buttons using some lines and changing the style/width and I added a bigger hit box to the arrows so they are easier to click.

We also had a go at converting the Design Museum logo into a bit map (Modify>Bitmap>Trace bitmap) By using the colour threshold of 500 it uses the minimum amount of colours, in this case black and white. This made it so that there were no grey sections. There is also settings for corners and curves, it was hgelpful to preview these different settings. With the traced bitmap in a button we then copy and pasted it into a movie clip and changed the colours of some of the sections to make a small animation. We then added this version back into the button in the the two frames after the frame the normal logo was in and made sure the two logos lined up. We also added a hit box. We could then test this and would see that the animation plays when we hover over the logo. 

Lastly we made an animation with circles. We first made two circle buttons, which changed colour in the second frame. We then added the circle/circles to a movie clip symbol and added it to the scene. We then edited the circle within the scene by double clicking it and then adding a curved motion tween. After doing this we could duplicate the circles and add effects like an alpha colour effect (Which made the circles a bit opaque) I also added the Design museum logo to one of the circles. 

Overall I think these techniques will be helpful for making the interactive poster because I now know how to make different navigation buttons, movie clips within buttons, buttons within movie clips and animations which will be very helpful.