Now i have created my piece of animation for the group i look back on how i could of made things better or different. Im happy with my step by step approach to following an animated cook book because it gives you simple instructions that you can follow at your own pace by clicking the next objects.
One thing that i should have taken notice was the background, it does differ from my group members so when it comes to linking them together the continuity will not be there, although i did try to crop as much of the background i could that in the end all you can see was a chopping area
Another problem i cam across was animating the carrot which proved to be very difficult, i could only achieve animating one piece which ideally is not enough because it doesn’t use the full potential of the hit test i came across.
Overall this project has been difficult at the start but once you have learnt the capabilities of flash, you can actually achieve quite a lot so if next time i choose to do a piece of animation i will only learn from my mistakes.
Now i need to incorporate some sort of animation to my piece to make it interactive. So far the animation i have created is pretty basic with no real difficulty so i had to make use of the things we learnt in lesson and start to make the animation more engaging. My plan was to make the cursor a knife which can chop the carrot into sizeable pieces.
I first had a problem of how i would achieve this, but i then came across a hit test that could be adapted into my own animation, the hit test used the cursor as one object and as soon as it came near to another object they lock together like so:
The knife was fairly straight forward to do as i just had to import the knife to stage, crop it as i did before with the veg and convert to symbol. The symbol i wanted was a button which i then used a code snippet called ” custom mouse cursor” to make the knife my cursor.
Once i did this i had to individually cut the carrot into pieces and converting them into symbols, by making them a movie clip they can then be animated when instructed to. So the plan was for the cursor to make each individual carrot move about just like it does when you chop a carrot.
Then by using actions, i copied the codes from the hit test into my animation. I had to change the codes so that it can relate to my images like so:
The idea was to do this for every piece of carrot that i had converted to a movie clip but unfortunately i was unable to do so because of some errors in the code. but i did mange to do one which shows you the type of animation i wanted to create.
At the bottom of the screen you can see a line of text, this has the word “hit” which shows me that every time the knife goes near the carrot the animation starts to work with the carrot moving away making it look like a chopping motion.
I then created a next button to move onto the next frame which was simply a book that would go back to the main menu that my other group members had developed.
The first text you will see is the title, i chose the font because it makes it more appealing to the eye rather than using a standard font.
The next step was to add text. the text is really important because it allows the user to follow the animation and to understand what to do. Like in cook books you can read while you cook, by following the simple instructions it will avoid any mistakes throughout.
I carried on with the same font because its gives the animation a continuity element, also it makes the text more engaging to the audience.
As you can see underneath, i imported a arrow that i converted into a button to yet again move onto the next frame which will be exactly the same but following the guidelines of how to prep a carrot.
Now i have to move onto the vegetables that i am trying to prepare, in the menu we chose carrots and broccoli because they are the typical ingredients of a roast dinner. Like the background i found bitmaps and imported them to the library.
One problem i had was that most of the images had a white background that i couldn’t delete, but i discovered when you break apart the images you can easily delete and unwanted parts of the images. I double clicked the layer and a button came up and asked if i wanted to view the layer as a outline, i then selected the line i didn’t want and simple just deleted it.
by doing this i saved a lot of time and the inconvenience of using the rubber tool. I then moved onto the knife and with this i followed the same process. Once i had created the knife i turned it into a symbol and converted it into a button. This button had the code “click and go to next frame”, therefore by clicking the knife you will proceed to the next frame.
Next i will have to add the text.
First frame and i need to create a background for my scene, i wasn’t able to draw a kitchen layout so i managed to find one on google in images. This image i chose is a standard layout with a table that i am able to use for the vegetable cutting. With this image i first imported it to the library in flash, once i did this i used a tool called trace bitmap. This tool helped me to make the kitchen look animated, i had to play around with the number until i get the look i was aiming for. Once i did this i then focused more onto the table and cropping out the remainder because it did not match my groups kitchen. Then i turned it into a group so it was easier to use and used it in all my frames.
Types of symbols
Each symbol has a unique Timeline and Stage, complete with layers. You can add frames, keyframes, and layers to a symbol Timeline, just as you can to the main Timeline. When you create a symbol, you choose the symbol type.
- Use graphic symbols for static images and to create reusable pieces of animation that are tied to the main Timeline. Graphic symbols operate in sync with the main Timeline. Interactive controls and sounds won’t work in a graphic symbol’s animation sequence. Graphic symbols add less to the FLA file size than buttons or movie clips because they have no timeline.
- Use button symbols to create interactive buttons that respond to mouse clicks, rollovers, or other actions. You define the graphics associated with various button states, and then assign actions to a button instance.
- Use movie clip symbols to create reusable pieces of animation. Movie clips have their own multiframe Timeline that is independent from the main Timeline— think of them as nested inside a main Timeline that can contain interactive controls, sounds, and even other movie clip instances. You can also place movie clip instances inside the Timeline of a button symbol to create animated buttons. In addition, movie clips are scriptable with ActionScript.
Creating a symbol
About shape tweens
In shape tweening, you draw a vector shape at one specific frame in the Timeline, and change that shape or draw another shape at another specific frame. Flash then interpolates the intermediate shapes for the frames in between, creating the animation of one shape morphing into another.
Shape tweens work best with simple shapes. Avoid shapes with cutouts or negative spaces in them. Experiment with the shapes you want to use to determine the results. You can use shape hints to tell Flash which points on the beginning shape should correspond to specific points on the end shape.
You can also tween the position and color of shapes within a shape tween.
To apply shape tweening to groups, instances, or bitmap images, break these elements apart.
To apply shape tweening to text, break the text apart twice to convert the text to objects.
You can only apply motion tweens to symbol instances and text fields. To animate the changes of a target object’s properties, you use motion tweens . Motion tweens automatically convert changes you make to properties over time into smooth animations. You can create a motion tween using one of three methods:
Create a graphic or instance that you want to tween, and then right-click a frame(s) in which it’s present and select Create Motion Tween
Select the graphic or instance that you want to tween, and select Insert > Motion Tween from the main menu
Create a graphic or instance that you want to tween, and then right-click the instance on the Stage and select Create Motion Tween
A keyframe is a frame where a new symbol instance appears in the Timeline. A keyframe can also be a frame that includes ActionScript code to control some aspect of your document. You can also add a blank keyframe to the Timeline as a placeholder for symbols you plan to add later or to explicitly leave the frame blank.
A property keyframe is a frame in which you define a change to an object’s properties for an animation. Flash can tween (automatically fill in) the property values between the property keyframes in order to produce fluid animations. Because property keyframes let you produce animation without drawing each individual frame, they make creating animation easier. A series of frames containing tweened animation is called a motion tween.
A tweened frame is any frame that is part of a motion tween.
A static frame is any frame that is not part of a motion tween.
You arrange keyframes and property keyframes in the Timeline to control the sequence of events in your document and its animation.
Inserting frames in the Timeline
To insert a new frame, select Insert > Timeline > Frame.
To create a new keyframe, select Insert > Timeline > Keyframe, or right-click (Windows) or Control-click (Mac) the frame where you want to place a keyframe, and select Insert Keyframe from the context menu.
To create a new blank keyframe, select Insert > Timeline > Blank Keyframe, or right- click (Windows) or Control-click (Mac) the frame where you want to place the keyframe, and select Insert Blank Keyframe from the context menu.
Creating frame-by-frame animations
To create a frame-by-frame animation:
1. Create a new file. 2. Select Frame 1 of Layer 1. This is where the animation will start. 3. Create a graphic using the drawing tools, such as the Rectangle, shape, or Brush
tools. You can also paste a bitmap from the Clipboard or import a file (such as an
Adobe Illustrator illustration). 4. Select the next frame on Layer 1 and create a second keyframe (F6). The contents
of Frame 2 are the same as Frame 1 at this time. 5. Alter the contents of this frame on the Stage to develop the next increment of the
animation. You might select the graphic and move it a couple pixels to the right, add
some new lines to your drawing, or bend a line on a shape. 6. To complete your frame-by-frame animation sequence, repeat Steps 4 and 5 until
you’ve built the motion you want. 7. To test the animation sequence, select Control > Play or Control > Test Movie. Or
just scrub the timeline using the playhead (this means drag the red toggle above the frames back and forth).