animated diagrams

[darrenroy]

Gday All,

I am not sure if this is too complicated to do but i will ask anyway.  I am in the process of putting a barramundi lifecycle into a conceptual diagram.  I was wondering if it is possible to make the model animated.  What i wanted to do was make the different stages of the lifecycle  (which i have symbols for thanks to Tracey) move around the base (river mouths 2) to the different areas they migrate to during their life (ie adults spawn at mouth of river, larvae develop then swim as juveniles into supratidal swamps then migrate upstrem into freshwater habitats to mature and then back to the estuary to spawn again)  i want to start with an adult fish at the mouth the fade that to a larval fish and have them swim up river and fade into a juvenile which then moves again and fades to an adult as it reaches freshwater.  can this be done, and is it in the capabilities of a beginner Illustrator user like myself?????? 

Thanks

darren

[AdrianJ]

Hi Darren,

Well I just did a little research into Illustrator and found that you can create animations. The easiest option is to export directly to flash format (.swf). This can be displayed through a web browser and also inserted into a PowerPoint presentation. You can also convert swf files into avi, quicktime (mov) or mpg with third party converters (I am sure there is a freeware converter - let me know if you are interested and I will find one for you).

Would any of these suit your needs?

I made a VERY QUICK exampe of what can be done - it seems that you can pretty much achieve any effect including making the transitions much smoother than I have in this example. I will need to do a little more research into the techniques involved in improving this. The basic technique, however, involves the "Release to Layers (sequence)" command in the layers palette, followed by an export to flash format using the "All layers to SWF frames" option.

Anyway, have a quick look at my first example and I'll work on refining things and posting a tutorial here on how to generate an animated conceptual diagram.  Thanks for prompting us to look into this further.

http://ian.umces.edu/videos/animate.swf

Regards,

Adrian

[darrenroy]

Gday Adrian,

That is what i want.  Thanks for that.  the info you gave will get me started and i will have a play around until your tutorial is posted as i imagine you are far more skilled in illustrator than I.

Cheers

Darren

[lisfano]

Hi Darren and Adrian. This is a little late in the making, but it's taken awhile to get the hang of using Flash. I was also curious about carrying over the symbols and then animating them in Flash, and promised that I would submit something if I ever had the time and know-how. Finally, here?s an example. I can?t download a .swf (at least that?s what it says) so here?s a link where it?s embedded in a html page. It may take a bit to download.

http://homepage.mac.com/lisfano/buffer/buffer.html

The sitelet was created for a Flash course where the focus was more on design than content, so I hope everything written is accurate. I found that the file size was smaller if the highly detailed images (the background - plants and roots, in this case) were bitmapped while the arrows and simpler symbols were copied over as vectored images. There?s not a whole lot of, ?animating? in this example but I thought that it may inspire someone else to give it a try.

Cheers,
Lis

[AdrianJ]

Hi Lis,

Thanks very much for the contribution. Its a really nice layout and good example of what can be done with flash for layout and creating a story with diagrams.

I have been meaning to get back onto the animation options, but haven't quite got there yet. I am curious that you found the bitmaps resulted in a smaller file size in flash. From my limited experience with flash I have found vectors compress really well and flash is really the only universally available vector format currently available for the web - this usually results in much better image quality without large file sizes. I would like to find out more on your experience with this. For example, did you create the flash using Illustrator or Flash itself? My very basic diagram was created entirely in Illustrator. Maybe we can do some investigating and work out the best options.

Cheers,

Adrian

PS I embedded your flash for everyone to see


http://homepage.mac.com/lisfano/buffer/buffer.swf

[lisfano]

Hey, thanks for embedding the .swf file. I really wanted to keep the  symbols as vectored images but ended up rasterizing the background for a few reasons which I'll explain. First though, you are totally correct about  Flash use and vectored images. Since the code comprising a vector image creates a geometric equation for the shapes instead of data for every pixel, the file sizes can be dramatically smaller. Not only does this aspect of vector art make for fast-loading websites/files but also makes the images scalable, without any loss of quality. Here's the rub that I ran into - the symbols are so beautifully detailed, that if I just copied and pasted them as is, the file sizes were huge. Of course those details are what makes the posters and printed items look so great! For instance the beech tree that I used in this animation just by itself, without any animation, would be 60 KB as a vectored image vs. 7 KB as a 16-bit GIF. My guess is that because the beech tree contains over 51 paths/ compound paths between the leaves and bark (excluding roots) that the equation code outweighs the pixel data. Now this is where my limited knowledge of Illustrator comes into play. Is there any way to combine the paths of the entire tree by flattening and combining paths? I tinkered with this for a bit in Illustrator, tried effect>pathfinder>merge, etc... but eventually gave up. The paths within the grouped layer stayed put. 

So, that's the main reason I bitmapped the images. I also ran into problems transferring (cut and paste) the vectored images over into Flash. While the symbols themselves transferred fine, the strokes and gradient fills did not. This however is a common problem that even happens between Illustrator and Photoshop. I'm currently experimenting with importing the .eps files directing into the Flash library, but so far am having difficulty. If the .eps files can be saved as .fla files (perhaps the newer Adobe CS/CS2 software can do this?) it should work. I'm still using AI10.

I've never animated in Illustrator. Once all of the files were in Flash, the animation went quickly.  The only thing going on in this example is the fade-in/fade-out time is different for each layer. I'd like to experiment more using these wonderful symbols, especially some of the newer bases. Who can resist animating those volcanoes?

~Lis