The Final Post

Well as we come to the end of the course, I am looking back with some fondness to the past months of learning Flash and can honestly say that should I be called upon to make a flash animation for a website, I will be able to pick up where I left off and with a few refreshers from Atomic Learning should not have too much problem making a banner or animated button.

Some things I learned along the way that I would like to pass on to the casual reader who has stumbled upon my blog.

1. Understanding the drawing tools and how they can be used to make any kind of object that you need for your animations is very important. Objects really enable the optimization for small file size in flash that is important in making web animations that load quickly.
2. The stage and the timeline and adding of key frames and how tweening works is at the heart of animation of objects in Flash. You need to be able to move around on the stage and use the different selection tools efficiently. (This was the cause for many a return visit to Atomic Learning for me in the latter half of the course.
3. You may need more than one resource to learn Flash fully. I used Atomic Learning and the Flash in A Flash tutorials to great effect during the past few months.
4. The export settings are really quite tricky to understand but once you do, there is great flexibility. Animated Gif files are easily created and sometimes work better on a website that a .swf file.
5. Finally dont be afraid to go back and relearn some key concepts if they are holding you back. Even the most experienced users sometimes find that a trip back to the basics is in order.
6. Have fun, animation is time consuming but can be very rewarding.

As far as the course goes, I have completed what I set out to do in the beginning, to learn flash for kicks. My plan did not go the way I thought it would and this final two weeks I found there were a few things I had not fully grasped that required me to watch some Atomic Learning clips again. I am not very good at dreaming up off the cuff projects that need an animation so I found myself with no go example to go with for this two weeks. I hope my animated banner will speak for my improvement in skills and meet the requirements set forth for the course.
I had already finished the banner last week and put it on my website. Thanks to Dr Banister for encouraging me to keep going with Flash, it was fun after I got over the frustrations of it not being as much like Photoshop as I had been hoping.
I now have another tool in my arsenal that I can use to help develop engaging media for my students.

Overall I think the concept of picking a new application to learn in place of learning the basic skills covered in the early part of the checklist has served me well. There are a lot of software programs out there that we never get the chance to try unless we find a particular purpose for doing so. This requirement for the course has given me the motivation to learn Flash although I am not so sure that Flash will in another few years slide into the intergalactic bit bucket of time as another cool technology that was replaced by something better… time will tell.


Thanks for reading and good luck in your journey in learning Flash.

This past two weeks I went back over the layering and animation videos at Atomic learning and then applied what I have learned to animating the banner for the 21st century.

I tried and tested the basketball animation from last week and it seems that the problem was not with the swf file but in fact that some websites (blogger included) do not let you embed flash files.

So the banner which is embedded below is an animated gif file.

The text in the timeline is changed after each 20 frames of the animation. Once you get the hang of it, text animation is easier in Flash than it is in Photoshop.

March Animation Madness

In honor of March madness and due to the fact that my best efforts to make a Flash button with glowing edges failed miserably, I decided to follow a nice tutorial about doing a simple animation of a basketball in Flash.

If you are wondering what the tutorial I used you can find it here at FlashExplained.com

The cool thing was that the basketball was made using the ellipse tool and some clever use of gradients and parts of other ellipses.

Once you have the basketball made the next step is to select all the ellipses that make up the basketball and choose Modify >> Convert to Symbol and choose movie as object type.
Once we have a movie object it can be animated by adding keyframes to the timeline and by selecting the basketball and moving it with the cursor on the keyframe. Once you have moved the ball to a new position you right click and do a tween which animates difference between the two keyframes.

Once you have animated the bouncing ball you need to work on technique called easing which lets you animate the acceleration of a bouncing ball which makes it look like a real bouncing ball.

Here is what we ended up with.


And before you ask yes this is actually an animated gif, which is one of the outputs available from Flash. I was hoping to make a SWF file but could not find a way to get it to display in a a web browser. I will work on that conundrum as time permits.

Oh and the email button I was working on last week I animated at flashing email icon in the button to make it stand out more. I did the animation with Photoshop as I had not been able to work out the setting for animating it in flash.

Here is what it looks like.

Back to Basics

This two week period has caused me to revert to a mindset similar to that in a former time when I was first learning a lot of new programs and doing a lot of learning by doing.

I am in a place that perhaps many of my students and clients (teachers such as yourselves that are learning a lot of new stuff for the first time)It is not a bad place to be, but out of ones comfort zone it is well... uncomfortable. I dont know what I dont know about flash and feel a need to go back to where I was comfortable...

To elaborate, last post I talked about how much I got from the tutorials at Flash in Flash and how much I had learned. Well this week I went back to the Flash in A Flash an found in the next episode I could really not keep up with what he was doing and there were again a lot of holes in my knowledge that are preventing me from being able to be even a little bit productive in Flash.

Long story short, I have gone back to Atomic Learning and have re-done a lot of their basic tool techniques again. The stuff I did with the crowns and objects in a lot of respects had jumped me to this week in my objectives (from the plan I started with) and had left out a bunch of basic tools that I really need to re-visit. The selection tools and the pens and paths that I did last week make more sense after looking at the Atomic Learning videos again.

I have an object that I have been working on which is going to be a button but I would like it to have an outside rounded rectangle that helps to define it on the page.

The button looks like this


So far so good but it needs the rounded rectangle.

I had imported the file from photoshop and it had 3 layers in the timeline.
I added a fourth layer and then changed to the rectangle primitive tool.
With the corner radius set to 16px and the color selected as a pale blue I drew a rectangle around the edge of the button.
The file looks like this now in Flash.

Choosing File >> Export >> Export Image.... I was able to export the file as a .png file.


Well that worked sort of... the bottom and side appear to be missing.
I will try and increase the size of the canvas and see if that helps.

Increasing the canvas to 55 pixels and moving the rectangle down has fixed the problem.
Canvas size is modified in the Modify >> Document dialog.

So the button now has a border around it. Next week I am going to look at how to do some basic animation and perhaps I can make the new in the button glow or pulse or something cool.

This is a diagram done in Flash and saved as a PNG file.
It shows why saving objects as a symbol allows you to
use it multiple times in a document without increasing
file size. Each object started out as a square and I changed
its shape using the tools in Flash to make the crown and the arrow.

Flash in A Flash

We are now in Module 3 and not satisfied with just the Atomic Learning movies I cast my net a little wider and found an excellent resource. This was shared by my boss, who has offered basic flash classes before and had found this resource on the Adobe site.

The series of videos is called Flash in A Flash and can be found here
http://tv.adobe.com/show/flash-in-a-flash/

The series is split into 6 episodes which are a little longer than normal for instructional videos running over 30 minutes or more in length. The presenter is John Schuman who takes an approach of not so much showing you everything you do in flash (ala Atomic Learning) but more about some of the more useful tools and techniques for getting started with Flash authoring for the web.

I watched the first episode and followed along in a separate window in Flash and was able to finally understand how to use the drawing tools in a vector program! I had tried to do this in Illustrator but never really got the hang of the bezier tool. Once explained to me and with a chance to play I now have much more confidence in using the drawing tools.

Other things I learned included saving symbols to the library and how to make an invisible button. There are still a few more videos to watch at Atomic Learning and I will watch episode two this week sometime to get more of a handle on working with objects.

Getting Started with Flash and first impressions.

This blog was started in response to the need to journal my efforts to learn Abobe Flash CS3 as a requirement for my EDTL6310 class at Bowling Green State University.

We are in Module 2 of the course and this has been a really big two weeks for me work wise. Last week I spent two days at the FreeTech Ohio conference which was held at the Kalihari Resort in Freemont Ohio and this week it was two days in Columbus for the Ohio Educational Technology Conference.

With all this time away from the office and away from home, I have found it difficult to find time to work on Flash at least as much as I had planned to in my original plan that was submitted.

Last week I got through the Basics Section (A) of videos on Atomic Learning but found that while it introduced me to the tools and controls of Flash it really did not give me the understanding to be able to create anything yet.

This week I started on section B (Basic Tool Techniques) and again while I learned some techniques there was not really enough covered to help me create something. So I decided to open up Flash and just do some experimenting based on the videos that I had seen and to try and create something.

I was able to create a 468x60 banner that could go on a website. My plan right now is to learn how to animate it and add frames to the document so that the banner will become an animated flash banner. I started with some text on a white background but you cannot see that it is a banner. It is shown below.



I added a rectangle which I created with the Rectangle Primitive Tool which I learned from AL can have rounded corners and is easy to change the stroke and fill.
We have a gold background and I dragged the text layer on top of the other one in the order (I knew how to do that in Photoshop and Flash is the same way with layers) I am guessing that like Photoshop each object that is added to the stage is on top of the existing objects.


So here we have a file that has two layers which was outputted as a PNG file.

As we go along and more is added to the project and once I have done animations I assume that it will be saved as a SWF file but all that is ahead of me yet.