Unit 65 – Digital Web Animation Assignment 3 – Checklist
Explain how you used the following:
Range How Used Screenshot evidence
Workspace: stage, timeline, menu bar, Stage toolbar, library, colour palettes, I used the stage to watch my banner as it is being created. Once it is set properties, preferences, help. to the correct size it shows me the room I have to work with and puts turns the timeline into the visual design. Timeline The timeline helped me know the placements of where to put the assets and how to time them to come up where I wanted them to. The timeline is set to 8 frames per second so once I knew this I knew how long to add the assets in for to make sure my banner was the correct length. Menu Bar This is where the different options are such as file and edit. I used the menu bar whenever I needed to import assets or save my work. I also used it to open the windows if for example I opened the software and the stage window wasn’t there. I used the edit tab on the menu bar to undo a step if I did something wrong rather than deleting it, I could just undo the score. Toolbar The tool bar is where the various tools that are available are shown to the user. On director, these tools vary from the shape tools to the text tool, also including the button tool. For this particular project, the only time I used the toolbar was to change the settings from ‘default’ to ‘classic’. Help The help tab is where to go if you have a problem with the software, there are different options that either open up a new window in the software with some help or that open up a tab on your browser to help. With this project I did not use this tab. Basic tools: drawing, eg pencil, line, pen, Drawing brush, shapes; free transform, eg rotate, The different drawing tools available to use include, the pencil, line, pen, skew, distort, scale, envelope, ruler and brush and shapes. These can be used throughout the project and can guidelines; editing, eg lasso, eraser, have behaviours given to them just like the other assets can. In this undo, copy, paste, duplicate, insert, project I did not use any of these as I had already made my assets in delete, aligning, grouping, ungrouping photoshop before starting the actual banner. Transform The transformation options are found in the modification tab and give the options to rotate the asset in various different ways. The other options for transforming are skew, which would stretch the asset. Distort, which includes changing the original from of the asset to the point of it being unrecognisable. The envelope transformation involves anchor points and the distortion of the original shape. Ruler And Guidelines The ruler and guidelines are there to make sure that the placement of any animations and assets are correct. The ruler is used to create either diagonal or horizontal lines on the stage which then in turn create line positions. The guidelines are there to split up the stage so that it is easier to see where the assets should be placed in order to make them centred and in proportion to the stage. Editing The editing tools are used when a mistake has been made in the software. They are there to make the design process much smoother as they mean that mistakes can be resolved much more quickly. The lasso tool is used to select a specific part of the screen, whether it be a whole asset or just part of one. It can then be edited further from here. the eraser tool is there to erase any drawings made with the pencil or pen tools. This tool only works with the drawings and won’t erase anything that hasn’t been drawn. The undo tool is found in the edit tab on the menu bar and works to undo the last thing you did, this can be helpful if you move something into the wrong place by accident or delete the wrong asset. when working with the sprites in director if you have multiple pages and you want some of the same assets in the same place and the same size on each page then copying and pasting the sprite does this. It even copy’s the behaviour of the sprite too. Duplicating allows you to cope the exact asset even after editing it, so you now have two copies of the exact same thing. Delete can be done by using the delete button on the keyboard and this then deleted the selected asset. grouping and ungrouping is used to group together a selection of separate assets so they can be moved as one. Whether this is done to make it easier moving them all together and then once they have been moved they will be ungrouped or whether they have been grouped together to make a new asset.
eyedropper, creating custom colours, The colour palettes in director are fairly limited however there are many colour swatches, stroke and fill different options to use for text colours and the background colours. They can be used in different variations too so the opacity of a colour can be changed which gives more options to the colours that can be used. Eyedropper this tool is used to select a colour from something and recreate it so it can be used again for something else. This can be useful if you have used a custom mixed colour and didn’t save it, or if you need to match something you’re making to a previously made asset made by someone else. Custom Colours As well as being able to use the sample colours there are also options to be able to create your own colours and save them too. They can be made either by mixing a selection of multiple colours or just by one but by changing how light or dark it is. Colour Swatches these are the different options of the colours that are already mixed and available to use. Instead of just being one colour they usually offer different variations of the same colour to give different options of tones. Although there are different options, the number of colours are limited and basic which is why there is the option to make your own colours too. Text tools: text, eg editing, moving, Editing/Moving/Reshaping/Scrolling rotating, reshaping, scrolling, creating To edit the text in director then all you need to do is go into the modify text blocks, on the menu tab. Here is where you can change the font, size and colour converting text to shapes as well as the actual words that have been typed. There are also options on director to change how the text is viewed for example, a standard text box or a scrolling text box, it depends which is preferred by the user. Text can be given a behaviour too such as ‘slide in’ which changes how the text appears on the screen. By having the text start off not on the stage and then creating the path for it to follow onto the stage you can create the scrolling effect so the text will scroll across the screen. Manipulating objects: manipulating Vector Shapes vector shapes; single layer vector shape Shape tools, pen tools and brush tools can all be used to create a vector interaction; shape. In photoshop they first start out as a raster graphic and this is transforming and grouping vector shapes known as it is obvious when it is imported as it is a lower quality. These graphics can be manipulated by going into free transform and then choosing how you wish to manipulate the shape for example manipulate/distort/. Single Layer Vector Shape Interaction: To manipulate a vector shape that is on a single layer then first a new layer must be created without any other graphics, symbols or audio. The new layer is then where you use the tool that you want to use to create a shape, the vector shape must then be converted into a symbol which will allow the user to add a preset motion. Transforming And Grouping Vector Shapes: Vector shapes must first be converted to a symbol which means the new copy of the can be rotated, skewed and resized etc. To group vectors all of them first need to be selected and then you go into modify and then ‘group’ which then means that all the shapes that have been grouped can be moved as one. They can also be ungrouped which will make them go back to the separate assets that they were to begin with. Animation: frame label; frame rate; Frame Label/Frame Rate timeline (playhead, layers, frames, frame Frame labels are used to label the timeline so the user knows which rate, frame is which, to change the label it is done in the properties panel. The keyframes, onion skinning, markers); frame rate is also known as the FPS can be adjusted per frame. A lower frame manipulation, eg copying, frame rate would be used for a graphic animation but if it’s a video then deleting, reversal; a higher frame rate should be used to make the movement smoother. testing movies; frame by frame Timeline animation; tweening (shape, motion) The timeline is used to show the different sprites and their animations. The playhead shows where in the animation it is currently at, it moves with the animation. This allows the user to select a spot on the timeline to play from by moving the playhead here and instead of it playing from the beginning then it will play from the point of selection. The layers are used to separate the assets on the timeline, they can be merged together or separated. The frames are used to split up the timeline, on director it works at 8 frames per second, this needs to be kept in mind when setting up behaviours and other animations such as videos, if you import a video then you still need to drag it across to the number of frames that is correct for the number of seconds the video is. Keyframes The option to onion skin a graphic allows the user to move it in any way that they want however it leaves a tracing outline behind. The markers on the timeline are there to show the seconds as there are always more frames than there are seconds. The playhead and markers make this easier to understand for the user as they can keep track of where they are up to or how long something needs to be. Frame manipulation If the user wants the exact same frame more than once then they can copy and paste it to duplicate the frame. Frames can also be deleted if they do not need it anymore. Reversing keyframe animation is another optional effect which users must insert the animation for the asset within the frame first, AKA, a tween. By highlighting the tweened frame in the timeline and right-clicking, an option is given which allows the user to select reverse keyframes. This can only be done to frames that have classic tween, motion tween or shape tween which has an animation incorporated. Keyframes cannot be reversed on a normal keyframe, e.g. only containing assets. Assets: importing, eg raster images, Assets vector images, sound files, video files, Before creating anything in director then first you must import all the movie clips; assets that you will need, you can do this by going onto file, import and resizing; bitmap to vector conversion; then selecting the ones you want to import. Although easier to import asset libraries them all at the beginning before you start creating anything, you can import them as you go along. Raster images, which are saved as .PNG, .JPG and .GIF, are commonly accepted. These images tend to be composed of pixels, however, when imported into Adobe Flash, you can visibly tell the quality has been lowered. With sound files, for director they have to be saved as an MP3 file in order to be recognised. For as video then it must have been saves a quicktime file. Resizing When importing assets into Adobe Flash, the user can resize certain assets when moved onto the stage from the library. Some particular assets which can be resized within the stage would be vector and raster graphics. When resizing, they do not become lossy meaning they still retain the quality originally produced at the original size, however, if it’s making the image bigger from a smaller scale, it will become lossy. Asset Libraries One of the main tab in Adobe Flash would be the asset library. In this tab, it holds all the assets imported into Flash. Users here can create sub- folders to organise their assets in order for them to easily find the specific asset they require and as well as renaming the asset files without affecting the original source.
Advanced tools: scenes; guide layers; Scenes
masking, eg mask layers, animated With scenes, the user can create new scenes within Adobe Flash be it masks; timeline effects, eg blur, drop scene 1, scene 2, etc. With scenes these are particularly useful when it shadow, expand, explode, transform, comes to creating opening, middle and end. When a new scene is transition; nesting movie clips created, a blank timeline appears. This is very useful when it comes to creating very long Flash animation which could contain more than 18,000 frames. This will save time for the user scrolling the playhead back and forth for the exact frame number. To create scenes, the user can access by window > other panel > scenes. This will bring up a pop-up window which lets the user add scenes within their Adobe Flash file. Masking: Mask Layers/Animated Masks Mask layers are created via a hole through another visible layer. With the mask object, this can be filled as a shape, graphic symbol, or a movie clip. To create a mask layer, the user will need to create an object first and then they will need to insert another layer above it. These two layers will be linked together automatically by right-clicking on the mask layer on the timeline > selecting mask. The icon for the two layers will change to indicate it is a mask layer. An example would be creating a vector, and then putting a raster graphic as a mask layer, the image would appear inside within the shape. Timeline Effects: Blur/Drop Shadow/Expand/Explode/Transform/Transition Special effects can be added within the timeline. In the original Adobe Flash CS3, there was an option which allows users to insert timeline effects easily, however, in CS5, timeline effect options were removed in favoured for preset motions. To add such effects like blur, drop shadow, expand, explode, etc., the asset must be converted into a symbol. Once the asset is converted and that the frame within the timeline is highlighted, the user can go into the preset motion tab where they can select effects such as fly-in-bur, bounce-smooth, etc. In Adobe Flash CS3, however, to add specific effects like blur, drop shadow, expand, etc. this was done by accessing insert > timeline effects > effects > blur/drop shadow/expand/explode.
Interactivity: scripting; behaviours; Scripting
actions; triggers; buttons; rollovers; For more of a complex animation, users can incorporate Scripting into playback control; Adobe Flash animation. If the project is saved as ActionScript 3, we preloaders would be able to use advanced Scripting method to which we can control the assets within the stage. With this method, it’s technically more advanced which requires the user to understand ActionScript, however, there are existing ActionScript ready available for usage in Adobe Flash. These can be accessed via Code Snippet which will let the user drag the specified ActionScript to the asset. This will paste the code which will perform the action as needed. Behaviours Behaviours are a different type of scripts that are already pre-defined for users to automatically attach to objects. Unlike Scripting, behaviours provide functionality, e.g. frame navigation, loading external SWF, controlling movie clips, movie clip dragging, etc. To access the behaviours, the user needs to enable the tab via window > behaviour. The downside is that this option does not support in ActionScript 3 but rather ActionScript 1 and 2. Buttons Users can apply buttons in Adobe Flash which can trigger specific functions (refer to trigger). This adds advanced interactivity towards the multimedia product rather than let the audience watch the animation effect. There are different types of buttons users can include such as, roll-over and click, hover and click, etc. In order to include buttons, it requires the use of ActionScript to cause mouse events such as ‘mouseover’ and ‘onclick’ in order to trigger the action and run the function. This function can be accessed via ActionScript tab and Code Snippet tab. Existing buttons can be accessed via window > common libraries > buttons. Playback Controls If the user decides to include playback controls which lets the viewer control the video playback within Adobe Flash, e.g. stop, rewind, fast forward, backwards, pause, etc. The user can access scripts via window > component > video where a folder which contains all the ActionScript to control a video. Usually when importing a video onto the stage, there is an automatic option which enables the user to include playback controls for their video without adding it separately. Preloaders Preloaders are basically an interact method of loading large .SWF files which controls the content load. This is a creative way to create a loading screen by displaying messages, image or animation to indicate the .SWF is loading rather than a blank screen. To do this, existing ActionScript can be found in the component and code snippet tab which is dragged on to the specific asset within the selected stage/frame.