Flash Animation – Final Project Documentation

Jigsaw Life

March 07,2008

To find out how my final project came together please download this word document:

idm-level-3-project-documentation.doc

February 19, 2008

Today we looked at importing video and audio into Flash and I had time to scan in some images for my project using the scanner.

Video

We were told the Flash help application was a good place to go for details on video uploading, This includes a list of file formats that are useable in Flash depending what programmes you computer has on it. These included .avi .mpeg or .mpg, .dv, .mov and .wmv and .asf. I was interested to know what my computer could deal with. I do have Quick Time (but I will have to check it is Quick Time 7) and apparently I can get a free download of Direct X9 to install which allows overlay (an animation/video term for one thing running on top of the other). Then I will be able to use all the file types shown in the help application.

 Importing video

To upload a video to Flash go to file – import – import video. You will then be taken through and options wizard which gives you two options on the way you upload the video.

1 – Progressive – using this way your video plays from an external file (if chosing this option you need to fill in Flash 8 encoding option and video codec – on 2VP6 – and then choose your skinning, the style of the player your video appears in). With this method as long as you keep all your media in the same folder you will be fine. You can place a button on the timeline to bring in your video in its player (a start animation button so to speak).

2 – Embedded video in .swf – using this method you can put your video into a movie clip but before doing that as you go through the video wizard you can chose the option to edit it first using an intuitive editor that creates clips for you as you select parts of your video. Once on the stage you can stack movies on top of each other and use the blen options which will have apppeared in the properties panel to get some nice effects. You may want to create an invisible key frame over the video so people can click it to play. You can do this by dragging the key frame from up to hit so there is only a hit state.

Audio

Again you need to go to file - import and then import to library this time to bring in audio. You can also choose settings for your audio from the file - publish settings option. From these you would chose an ‘audio event’ for a short snippet, a sound effect perhaps. Using this option once the play cursor has reached the first frame the whole sound will play regardless of whether you have placed enough time for it, in frames terms, in the timeline. Althernatively you may need to use the stream option. With this option you can scrub through the audio where it appears in the timeline and hear it as you do so. This would be useful if you wanted to place key frames at key sections of the audio. Our tutor recommends sticking with MP3 files in our animation.

Tip - If you go to the bottom of the library panel and click the ‘i’ symbol you can see the properties of the symbols – such as MP3.

Scanning

The scanner was a simple machine much like a photocopier only with the image being uploaded to the computer. In order to do many images as quickly as possible, I uploaded the scanner’s own wizard and set it to scan to desktop and just kept scrolling back through the scanner’s automatic scan and upload options. Once I had done I transferred all the images into a desktop folder I had created and saved them to my memory stick as I would have to use them both at home and in the tutorial next week to create my project.

 Tips and hints

Remember when you place an action on a button you place it on the image and therefore it is on that instance of a button – so if you drag a new instance of the button out you can (indeed must) place new actions on it.

Out of hours – work between tutorials

This week I worked every evening and all weekend on creating my Flash movie. Details of what I have achieved will be uploaded so far and how it progresses will be uploaded to the blog in a series of entries all titled PROJECT … Please find the details there.

February 24, 2008

Today we mainly worked on our projects (see main project blogs – which all start with PROJECT in title). We also looked at how to upload our final projects on to the web. To demonstrate this our tutor showed us how to upload our .swf files by placing them on a web page.

He showed us how to define a site in Dreamweaver (following the intuitive instructions in the opening panels) but pointing the site to a folder containing our .swf files (and any external files required to run it that such as those that are created when video is uploaded to Flash – but NOT the .fla files) and using the advanced tab you have to fill in the fttp details for the server (our tutor has provided us with space and details of the server and password to put our work on – these need to be entered into Dreamweaver).

Once this has been achieved, within the folders panel you need to create a page and place the .swf file on that page (along with any other graphics or introduction perhaps that you would want to be hosted with it) by going to insert media – flash – and selecting it from your folder (or it is possible to just drag it in). For our purposes we will be calling that page index.html as that will be all our website will consist of.

Then you have to upload your site to a server. Much of this is intuitive in Dreamweaver. Simply click on the icon above the folders panel that says show local and remote sites. Once this is open at our tutor’s server you will have two panels – the folders in the server on the left – the folders in your website/Dreamweaver project on the right. To place our IDM projects on line we need to put our work into our own folder on the server – this will be inside the web folder and then inside the IDM folder.

Project work

We spent much of the tutorial time working on our projects which raised serveral questions. I had done a large amount of work between the last tutorial and this one in order that I could find what problems I was going to come across and raise them with my tutor.

It was great to be able to have the tutor on hand to double check we were heading in the right direction and to give us a clue when he hit problems. As we have only gone to level three in flash it is easy to want to do things that are not possible with the knowledge we have and while some external study is possible it is good to have the tutor still on hand to advise us if we are aiming at something that is light years ahead of what we have learned.

I was able to progress my project well in the tutorial. See project blogs for full detail.

One key reminder I was able to get during the tutorial was that if you break text apart, then break it apart again the letters become shapes (which you could morph etc if you wanted) – but you can then put it the text into a symbol and it becomes a ‘graphic’ rather than just text and so it will appear the same on any computer, no matter what fonts are on it.

February 12, 2008 +work between weeks

Today we worked on our blogs and project proposals. We also recapped on uploading imagery and using it within a movieclip symbol as well as creating a slideshow.

My proposal was finished although now I have had time to look at how I might do somethings specifically in flash I feel it could do with updating a bit (no in the essence of it but perhaps the detail). I had already dug out some photos so I spent time looking through these to see which ones I felt reflected what I was going to say and thought about how I might want them to move – did I want a simple smart slideshow or a more comic entry and exit for them, would I morph them beyond recognition or keep them as straight forward photographic images. I certainly had already decided since writing my proposal that I would allow myself to make this project simply for the course and be therefore able to enjoy it and make it humorous – rather than if I had wanted to use it on my website for work.

I had to source ad lots of photos, a couple of short movie clips from my phone/stills camera, photo CDs, DVDs and the hard drive of my home computer. These had to be uploaded into a folder and saved on my memory stick between classes to bring in for project work. But some of the images which I would really like to use will need to be scanned in. I will bring these in next week to do during the project time in class.

I tried to source some music which I might use and found several tracks on CD. I would also like a ’clunk’ sound effect or perhaps a ’crack’ to use either when the first button comes into play either as it arrives, or in one of the states. 

I also used good ‘old fashioned paper and pens’ to draw out some of my ideas.

Imagery and importing recap

-Importing image – file - import – to stage

-Flash recognises naming conventions so will recognise groups individualised by number.

-Can resize and paint things on it (for example)  - appears in library (so can use again and not increase file size much)

-Can animate simply with motion tween

-Put bitmap image inside a movie clip – benefits can control the Alpha (opacity)

Short cuts, tips and extras

Click once then click and drag elements that are on own (such as Action Scrip STOP)

For things that are part of a tween click, drag and ctrl

Reminder – Action Script lives on its own layer – keep at the top for ease. NB if you leave a blank line in action script it still recognises that there’s something there so it will show the action symbol on the timeline keyframe

Shortcut – esc S T = action script stop

My trial and error

In thinking about my project I imported an image of my son on a horse and tried to animated it. I moved around the large image, so the edges were not seen on the stage putting the different end points on keyframes, of course, then I shrunk image to fit on stage to give it a ‘zoom in’ feel. I realised it moved too quick, so I used shift F5 to add in frames between the keyframes to slow it down as it was a bit frantic.

While I was working on this my tutor talked about putting bitmap images into a movie clip on main time line. Then putting the whole thing into another movie clip so that you can animate when inside the outer symbol – so you are animating a movie clip rather than the bitmap. This opens up lots of possibilities and when you are done it is the outer move clip that you can drag and drop from the library on to the main stage/timeline.

Problem solving – if you have a symbol on the stage and double click to go inside it you get the stage showing – if you double click on a symbol in the library then the stage fills the screen and you cannot work off the edges of it.

Back to the slideshow

We looked at creating a slideshow by opening a movie clip symbol and importing a series of images. Then we created two buttons for forward and backward and on each we added action scrip. I had a bit of difficulty creating my second button for some reason. Then I realised I had become confused between things living on the same layer in different locations and things living on different key frames (for some reason) known only to myself. Once I had got myself out of that strange mindset it was fine. I am looking forward to using these methods in my project and am already thinking how I can take this forward.

Here’s a recap on how I did the slideshow. Once I had imported a series of images which appeared within the movie clip symbol as a series of keyframes, I created a button and put it into a button symbol (keeping the text for the button on a separate layer). Then I duplicated the button and changed the text (back and forward). Then I added Action Script to the first button – (making sure the button was selected) using the + symbol – global controls – movie clip controls – on – release (option in action panel). Then (press return) and use the + option again global control – timeline control – next frame.

We put a stop on the first frame of the slide show to give us control of the timeline and then created two buttons below the stage where a series of images were living on individual keyframes on the timeline.

After clicking on the first button to identify it as where we wanted our user-based action to live we went into the actions panel, using the plus icon, to select global functions, movie clip control, on - then selected release from a set of options - go to, then pressed return and went to the timeline controls to select ‘next frame’ .

This told the animation that each time the mouse was released after clicking on the button it should take the user to the next frame. On the other button we put our tutors code to go back to the start.

We also looked at creating a labelling layer (like the action script layer, a functional layer rather than one holding imagery or animation). Once you have one of these in place you can place symbols anywhere on the timeline and make a button command or other action take you there. To identify where the symbol is click on the frame directly above where your symbol’s keyframe is and in the properties panel far left there is a space for frame name. Use a name that is all lower case and without spaces. Then when you put action on a button (for example) instead of putting next frame (from the set options) you can type in the name of the frame you wish the animation to jump to NB this must be put in inverted commas (speech marks).

Tip – across the top of the Action Script panel are some other options: the tick test for errors; speech bubble for code hints

We creating a second movie clip with another slideshow in and a ‘cover page’ a movie clip symbol which we could put both slideshow movie clips into, with buttons to run either

I did manage to create the whole slideshow - with options – and put my movie clip inside a movie clip, but I had to re-do the slideshow inside as had not put alpha fade on it.

Here are a few things I would like to do but don’t know if that is possible:

Can you randomise a path? Can you have a movie clip as a button? (Ah reading back on my notes I have the answer to this! And I tried it out in class using the helicopter animation we were given to try out). 

Summary of project detail:

Just to remind me what I have to demonstrate within my project I have summarised the key points here:

* Must incorporate five pieces of audio;

* Must say something about who you are:

* Must use variety of imagery - bitmap and vector, but video optional;

* Must use shape and motion tween, and frame-by-frame animation;

* Must be well documented from preparation to review;

* Must be uploaded to a server on a webpage.

Recap of learning objectives (and meeting some of them) 

In doing this and in blogs of independent learning and tutorials I need to demonstrate use and understanding of: (from learning objectives) digital cameras and scanning; bitmap and vector-based graphics; output for both screen and print; very basic digital audio editing; use of the internet; interactivity (use of basic Action Script); simple animation; various file formats,

I alreay note that among those are a couple of things we have not covered directly during course time, such as using a digital camera. However I will be able to demonstrate this as several of the images I am using will be from a digital camera source. I have also demonstrated this as part of the whole diploma in my digital grahics module. Also output for screen and print, as we are using Flash the print element of this is not really relevant, again however I have already demonstrated in my digital graphics module my ability to look at print versions. For this for example I would be looking at the different resolutions of images. On the web where images are small and the computer screen can only support a limited quality of picture, images are uploaded at 72dpi for general use such as websites and this would be applicable to flash. But if you wished to create a nice image to print out larger such as A4 or to create a beautiful image for the mantlepiece you would probably opt for a 300dpi image.

When it comes to different files in my blog I have talked about saving graphic images as .png for flash. These are good (like .gif files often used for website applications) as they work well with block colour. For photographs you would use a .jpeg image. This could be cut down in size in Photoshop by using the option ‘save for web’ and checking how low quality it could be saved as before you started losing definition. In Flash, when you play out your .fla file it creates a .swf file – this file type is a flash movie for web and is specially made for that. It is this element that you upload to a webpage (along with external files that flash creates for imported video – but we will be looking at that later).

As for scanning I will refer to this as my project gets fully under way as I have quite a few images only in paper format and they need scanning in.

Week 5

February 5, 2008

Today we looked at importing images, masking, action script and recapped on the different types of symbols, their uses and attributes. We were also given the details of our final assignment.

Masking

In Flash, any solid colour is the equivalent of white in Photoshop in that it reveals. To create a mask, add a layer above the one you want to mask, create a shape the same as the area you wish to reveal and then right click ont the masking layer. There will be an option to mask, simply select this and then the two will be locked together and only that part of the image below will be revealed.

The two layers will display the locked symbol if you wish to move the image or mask around then this will have to be undone and the masking will no longer appear until they are both locked again.

 I have found as I have moved on to my project that a good idea is to put the two masked layers into a symbol (in my cases a movie clip symbol) and then import that into whatever symbol or the timeline you are working on. This makes it a nice simple image to move around, transform or tween, as well as affording all the benefits of a symbol such as alpha control.

Action Script

This is the language which you can use to tell the Flash programme what to do. It is something you can attach to a specific frame on the timeline (timeline-based action) or to a button (user-based action) so allowing interactivity.  

The first action we looked at was a stop action and this was really useful as so far all our animations and looped endlessly.

 Action is normally placed in its own layer and convention is to name that layer ‘a’. It is usual to put the layer at the top of all your other layers in the timeline too. There is a intuitive panel for animators to use with many of the common action script commands on and this is (on Flash 8) a tab behind the properties panel (I have found in my CS3 trial I had to open it separately and could put it where I wanted - which in the end meant I put it in the same place!). In the actions palette there are lots of files or pre-programmed options down the left hand side. Abovet the actions pane there is a big plus sign this will offer the option of adding an action. For us (at Level 3) we will be using the Global Functions option from the drop down menu, and from that menu timeline controls or movie clip controls. We used the plus sign function to insert stop actions in our time line and on to buttons. When adding action to a button it is important to remember to click the image of the button in the main pane/on the stage – this is where the action lives – it will not appear on the timeline and should not create an ‘a’ symbol in the frame. The ’a’ symbol should only appear when you are creating timeline code/action script.            

Our tutor gave us some action script code to use on buttons to make them take the animation back to the start. 

To test the syntax in your Action Script you can click the tick button across the top of the Action Script pane.

We looked at using Action Script to animate a pre-prepared slide show which we will do next week. Recap on symbols (and shapes)

We did a recap on what the benefits and properties of the different type of symbols are (F8 to convert to symbol – or as our tutor says to put an image inside a symbol).

Shape - This does not live in the library just on the stage. There will be no blue box around it when you click on it. It will be listed as a shape in the properties panel.

- This must be tweened with a shape tween

Graphic - You need to convert or put something in a symbol ’box’ to get a graphic symbol. This will appear in the library and has its own unique timeline. This needs time on the main stage to run and you will be able to see it running in the main stage timeline without exporting it.

- This uses a shape tween in its own time line (as you are tweening shapes there)

- It uses a motion tween for animation on the main stage timeline

- You cannot use filters or action script on this type of symbol and it is not for use in the button state  

Movie Clip -  

Once something is converted into a movie clip symbol it too has its own timeline within the symbol. But any Movie Clip animation put on to the main timeline cannot be previewed by scrubbing or playing out the main stage timeline using ’enter’. It can only be seen when exported.

- Filters and action script can be applied to these symbols.

- This is the right symbol to use in buttons

- Action Script can be used on these symbols  

 Buttons - These symbols have four states - up, over, down and hit. It is necessary to insert a key frame to place the image/or animation for each state. The hit state is the area over which the button will be active. If you place a key frame here inheriting the information from the frame before that will be the hit area - otherwise you can simply create a shape on a keyframe here and it will create an ‘invisible’ button. The finger will appear when someone hovers over it and they will be able to click for action but there will not be apparently a button in any other way.

Our tutor noted that it is best not to embed the text on the button but put it on a new layer. (See later notes in project about breaking apart text to get a graphic inorder to avoid the problems with different fonts on different computers).

General benefits of symbols – in addition to their individual characteristics

Symbols live in the library so any server accessing the animation only needs to find the symbol once no matter how many times it is used in the animation – this keeps the size of the animation down and therefore helps it to run quicker.

Importing images

When creating the slideshow to demonstrate the use of action script we had to import the images from a folder in the computer’s documents’ file. If you have a series of images labelled the same using the 01, 02, 03 technique of ordering them in a folder then Flash should recognise them as a series. So if you try to import the first one it should offer the option to import all the rest – placing them each on a keyframe on the timeline. To import you simply go to the file menu (right across the top) and from that select import (there are other options as to what to import but we will look at video etc later). You can import directly to the stage as we did or you can put items into the library.

Final assignment

We must create an interactive self-portrait for our final assignment. We have to “explore an aspect of your daily life that tells the user something about you” in an abstract or narrative form using animation, imagery, five sound files and simple scripting. We must ‘use vector and bitmap art from a variety of sources using key frame (frame-by-frame) and motion and shape tween animation’.  Final movie should be embedded in a web page and uploaded to a server. The development should be thoroughly documented and a 150 word proposal is due in on 12.2.08.

Tips from the tutor

Avoid complex plots and intricate movement; keep focus on using flash and interactivity in simple ways to effectively convey ideas;

Marking

Planning, research and development – 20%: originality/strength of ideas (10%); sketchbook/preparation/experiementation (10%).

Final project – 50%; evaluation/report – 30%: techniques used (creativity, range, depth) (20%); Overall quality of design (impact/aesthetics/professionalism/fitness for purpose) (30%).

Initial thoughts:

I think this is a great project as I know I have lots of material I can incorporate. I think I will do something that suggests what a mish mash of things my life/personality is. In doing so I can incorporate all the diverse elements that make it up perhaps motherhood, work, travel, laughter, fun, friends, on the personality level I have some bizarre and diverse photographs which show me in totally different lights which would be good to suggest this. Also we are going to be looking at using video and I have several short videos from my stills camera of my son, and of course motherhood is a one of the big pieces of my jigsaw life.

 Short cuts, tips and helpful extras

To move a frame hold Ctrl, click and drag

Text is a group unless it has been broken apart (see later blog for reminder about text and breaking apart).

Stop, esc and S T = stop (action script)

Click drag and ctrl to drag things that are part of a tween – when not click once to highlight and then click and drag.

Put bitmap images inside movie clips (more in coming blogs)  

You can create movie clips (and other symbols) directly into library by clicking on new symbol icon (bottom left of library panel) and then using the symbols timeline to create your animation. When you close it or go back to the main timeline the symbol will be in the library to be extracted later, or re edited.

 Alt, Click and Drag to move everything that is highlighted

 When using graphics from Photoshop (or other programme) they should be saved and imported as .png.

 Missed opportunity

We were told at the end of the lesson about an animator who was visiting the university to give a talk the next day – Marc Craste, senior animation director at studio aka, and BAFTA award winner for the best animated short film Jo Jo In The Stars. Which was a shame as only in the morning break I had arranged to go do an interview for work the next morning and would have fixed it up earlier in the day so I could have got back for the event at lunchtime. Unfortunately the tutor had only received the information in time for today’s tutorial himself.

Between these two sessions I prepared my draft proposal (uploaded) and did some preparation for my project.

I also downloaded a 30-day trial of Flash which was the CS3 version. After installing I noticed that it looks a bit different to the version (Flash 8) that we are using, which is just one version behind the trial I downloaded. So I spent some time looking around the interface to find out where all the controls were. I noticed a couple of extra drawing tools (at least) these were the primeval oval and rectangle tools. I had a play with these in order to see if I could work out what they did. They do not perform the same as the shapes I am used to, but they did seem to have an interesting geometric application where you can cut quarters etc out of them.

I consulted my tutor to find out how I would work in CS3 and move my project between the classroom and home. He told me that Flash projects can be saved from CS3 as Flash 8 movies – but you can only ever go one version back with Flash – so that will be fine as long as I remember when saving to ‘save As’ Flash 8 and all the work should be transferrable.

Preparation and Planning:

Firstly I have spent time digging out photographs, images and footage I may wish to use. I have lots though in effect I may only use a handful of these. I have also been thinking about the words which I would like to appear as part of the animation. I have a brainstorming list which I will add below. I am also working on a storyboard to establish exactly what happens in each part of the animation, but I cannot work on this until I have the images together.

Brainstorming

Words (or concepts and such) that I may like to appear in my animation:

Conscientious – Fun-loving – Game for anything – Daring – Determined – Understanding – Never a dull moment – Active – Inclusive – Leader – Team player – Motivated – Innovator – Creative – Full of initiative – self-starter – Brave (Tyne Bridge pic) – Adventurous – comedian – fun loving – Full of life – Loving life – empathetic – writer – journalist – filmmaker – Thoughtful – Quirky – People person – teacher – sporty – love the outdoors – world traveller – cook – entertainer – friend – mother – studious – frivolous – party animal – book worm

Images to include:

-Cow costume; horse riding; parachuting; ballooning; snorkelling; assault course; Capri; interviewing; sailing/windsurfing; abroad; food

- with Fin: video and stills; mantelpiece one; from phone: from computer drive.

-Banners from newspapers and headlines: awards;

Audio:

Fin – motorbike? Mummy – stuff from little vids

Me – monkey, popadom, angel, fimbles

Lines from Ableton Project/sounds

Clips from radio packages?

Hold on Tight

Graphics

Arrows – cow! (theme in the animation and end animation with my cow costume pics?) – frog (Finlay Frogletti the Ace Detective) -

TO DO:

-Save pics, audio and footage to memory stick/scan in (take pics on Tuesday to scan).

-Make a move clip of a cow that moves (and moos?)

-Record Fin and me etc. – get Hold On Tight

-Get image of me with: headphones on; behind camera – still and video; film me saying ‘say cheese’: at the computer keyboard

- decide order and method images will appear – think humour and entertain as well as painting a picture

Beverley Addy – Introduction to Digital Media Level 3: Flash Animation

Final Project Proposal

I aim to scan in photographs and images such as newspaper headlines, plus video clips (imported) of myself, featuring friends, family and colleagues, with graphics created in Flash or Photoshop, and sounds either from the web/other sources (bearing copyright in mind) or recorded on mini-disk.

I will use animated words to show values or traits which illustrate who I am. I hope to use a similar animation for my personal/cv website and will bear this in mind as I progress. I aim to have some kind of drawn animation theme (a cow probably!) to complement this abstract animation.

Triggering the animation could either be done to individual parts, from images on either a ‘film strip’ or montage to start one segment from a particular point, or to the whole ‘film’ with a main start/stop button. I may also using the ‘over’ state during the animation for ‘hidden’ messages. (148 words)

Reflection:

I think it will be difficult to keep a professional tone to the animation and utilise all the images I would like to. Rather than worry about making this something I could use on my website, I think I will enjoy making the animation and note the styles and techniques that will be appropriate for website use later and not worry about making something I can use straight off. I can see how the images could come in and out etc. I guess for some parts I may have to cut up the images in Photoshop and then import the parts. I am thinking about the drawn animation that I might need to use (perhaps an arrow to indicate where I am/what I’m doing in the photos – perhaps the key words could appear on the arrows … ?). Considering the future idea to use it/or an edited version on my website, I have also to look at the fact that I am going to have to source copyright from several of the newspapers I have worked at if I do want to use these images (as I’ve often been behind the camera in my personal life most of the photos of myself have been taken during my professional activities by professional photographers).

My main thought is that I must keep it simple as we have a limited time scale. If I have more ambitious ideas for what I might use on my website later I can edit and scale up this animation and will be able to use what I have learned to take on something more complex with more time later.

I am interested in finding out how video works within Flash – for the project and beyond.

During the drop-in session I made an effort to zoom and pan into my frog animation. At first everything just broke up. So I created another set of keyframes, for all parts that are present at the beginning, at the point where I would have liked the frog to come into view as it was in the rest of the animation. Then I created a second keyframe (for all layers) immediately after that (as a fall back position in case what I was about to try didn’t work).

Then I highighted all the frog parts in their timeline first keyframes and then right clicked on the image itself to convert the whole lot to a symbol. Then I did the same to the smaller frog. This worked much better but I found the lily pad went AWOL So I added the lily pad to the symbols at either end of the tween. This was working okay but seemed to jump at the end of the motion.

I think with more time I could have got this to work. Perhaps I needed to convert the small frog and lily pad to a symbol to start with. Then create the keyframe along the timeline, then expand the initial image and tween it – if I have time I’m going to try this. But it has been a handy experiment in what can and cannot be done with so many parts of the image.

For now I think I will be happy with my frog as it is… perhaps I will make his tummy rumble at the beginning and maybe a smile at the end but panning and zooming will be left aside for this mini-project now.

I was interested to know while thinking about the panning and zoom, though, if layers could be merged down to make them into a less complicated image, thinking this may help but my tutor said he did not believe that was possible. This has also led me to wondering whether other flash animations can be imported into the timeline….

Further reading

I am still trying to find time to read some more about flash outside of our class time, but I have been looking with interest at kids cartoons that I believe may be created with Flash or similar technology and trying to work out how they are done and what if any of it I would be capable of with the knowledge I have now.

This is the website for Franny’s Feet (as I have to watch on weekend mornings with my three-year-old). The animation is quite simple compared to many computer generate cartoons, yet it works (well my boy’s impressed and it has made it on to mainstream TV). It has made me think about what I have to actually create in my final animation and what you suggest to the eye (a bit like the frog’s tongue in the frog animation – there I could not easily make the tongue wrap around the insect so I suggested by breaking up the insect and sticking it in the tongue that was what had happened) and what needs to be actually shown.

http://www.frannysfeet.com

Here’s some things I am looking forward to learning

How do I make it stop and play, and attach it to an email or facebook application, so I can send it to my friends? (I’ve managed to save upload and swf version but I’m not sure how I ended up with a version saved in that format.)

How do I add sound? or video?

Can we use this form of flash to compress videos so that they are easy to play on a website or send to people?

Look at my frog!

I believe I’ve saved a .swf version of my frog animation (pre-tummy rumbling and possible cheezy grin at the end to this ‘share your work’ site … have a look if you like. (For others who want to upload here’s the web address http://www.sharebee.com)

http://sharebee.com/9e64d95c

Week 4

January 29, 2008

Today in class we worked more on our frog animation. I created eyeballs adding a little radial gradient from white to grey to give them a bit of shape. I made sure they were the right size by going inside the blink symbol and copying the shape. Once I had pasted this into place and changed the colour/gradient etc I made them a little smaller to fit beneath the eyelids. I checked they were in the right place by using the onion skin tool

(Left) Here you can see the brackets across the top of the timeline marking which areas will show up in the onion skin mode which allows you to see a shadowy version of each change – like looking through tracing paper (or onion skins!)

(Left) This shows the various layers showing through including the motion path – which was helpful in making the frog’s eyes follow the insect.

I also created an insect and a motion guide (by right clicking on the insect layer and selection add motion guide). I aligned the insect to the path with the tools in the properties panel at the bottom of the screen.

(Above) Here you can see the properties panel. The tools available here change depending on what you have selected.

In the later part of the class we learned about new types of symbols:

Movie Clip symbols – These are not tied to the timeline as the graphic symbol is. For a graphic symbol you must create frames on the timeline for it to run in. With the movie clip symbol it runs continously but you must preview your animation in a browser to see the action. For our movie clip symbols we duplicated a graphic symbol we had created and saved it as a movie clip.

Button symbols – We had short introduction to these. Once you have created a button symbol you have the option to create different states – over, down and hit – within each of these you can create animation so you cannot only create a different shape, or colour for the new state but a changing effect. In the button symbol option there is not a timeline as such just the four options within which you have to create a new keyframe to create the image on.

(Left) Here is the ‘timeline’ which appears when you are inside a button symbol – with the four options.

We had a recap of some things which we had been told before about symbols, particularly how if you edit a symbol it affects all the instances of the symbol used. However Dave pointed out that there are somethings that you can do to individual instances of a symbol, including altering the brightness and alpha and free transforming them.

Outside research

There are many books on Flash to do further research including those by publisher Friends of Ed. I am going to consult some copies of Macromedia Flash manuals that someone has already given me.

Reflection

My frog animation is nearly finished but I wanted to pan and zoom out from a small area of the pond. This proved difficult to achieve as I had not left space at the beginning with nothing happening to do this. I was shown how to block the whole of the action on the timeline (clicking on the top left frame and bottom right and dragging) so then I had many free frames at the start of the animation on which to create a stationary version of my image to pan and zoom out to. This I will do before our next session along with a pair of forelimbs and possibly a smile from the frog at the end.

I have encountered several problems while creating my fog animation. Most of them I was able to resolve with a little thought. But one area I am still working on when an animation moves in front of another piece of animation… For my short animation I wanted the frog’s tongue to come out under the insect and wrap around it. In order to achieve this I found I had to cut and paste the insect from its own layer on to the tongue layer and then send it backwards (using the option arrange offered when you right click on an item). This did not work very well. So I decided to go into the insect symbol and copy the shapes. These I broke into pieces and stuck them under the tongue. In the blink of an eye when the action happens this seemed to give the effect of the frog catching the insect.

While trying to set up panning and zoom on my animation I put all my layers into a folder thinking this would allow me to create a timeline on the folder and do my panning and zooming on that but it does not – and now my layers are all tucked up in a folder. While this does not seem to be presenting any problems it is not a simple matter to just delete the folder, you have to extract all the layers.

Without knowing what our final animation project will be it is hard to know how I will apply what I have learned. I would like to ensure that I create a nice background that isn’t static before the action is added and hope that I can create something slick and believeable (in anyway that animation is believeable).

I will also try sharebee.com to find out if I can upload Flash animations there so I can put a link up where people can see my first animation on my blog (this site does allow people to put up music clips and may also allow Flash. If not there may be another site I can find to do this).