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.