would encompass what I've learnt so far in
Illustrator and Flash. The skills I' am using here
were all learnt from Simon's tutorial and web
resources seen on previous posts.
The following shows my process of creating a
simple cloud shape filled with a gradient, which is
then imported in to Flash to be animated.
Begins: Illustrator:
1) After opening Illustrator as a blank print
document, I created a large group of circles.
2) In the first step I made the mistake of only using
an outline for the ovals. So using the Fill and
Stroke tool, I altered the Fill colour as one flat
colour and changed the stroke to non-colour,
meaning that it won't be visible.
I then selected all the circles using the Selection
tool, and then using the knowledge I had gained
from the tutorial two weeks ago, used "Pathfinder-
Unite" to merge all the circles together. My end
result as you can see is a single path filled with
one colour.
3) Next, I created an oblong shape, keeping the
Fill and Stroke both blank to ensure the shape was
not visible. Again, I went to "Pathfinder-Unite" to
erase the bottom half of my cloud to create a flat
edge.
4) Adding a gradient was actually harder than I
had anticipated as I had forgotten how to do it
since our tutorial with Simon. Because of this, I
managed to source a website that instructed me
how to create gradients:
http://help.adobe.com/en_US/Illustrator/14.0/WS8
D8A9E2F-0F65-4bcb-B38F-5E665BC538A9.
html
I quickly realised there was a tool to the left of the
canvas with ways of applying a graident. I soon
found it was really easy and worked in a very
similar way to Photoshop.
All I had to do was select my cloud object, and
then choose my gradient type, angle that it should
travel, and the two or more colours I wanted. I
could also alter how gradual the gradient is.
5) This is what my cloud looks like now with its
gradient. I then saved this shape on to my Desktop.
Flash: Begins:
6) Once Adobe Flash was open with a new
ActionScript 3.0 stage, I imported my cloud from
my Desktop. Next I resized it using the
co-ordinates to the left, changing the positioning
to the top left of the stage and making the cloud
a lot smaller and easier to manage.
Here's a screenshot of my progress so far, with the
cloud positioned just outside of the stage ready to
be introduced.
7) Just to complicate things a little bit, I've
attempted to produce a smaller copy of the cloud
moving in the opposite direction to the larger
original. To be honest it's been a real pain to
duplicate the original process of motion tweening
(even when it isn't that difficult!), but I've
managed it anyway, even if the timeline
proves otherwise.
For example, the timeline (see below) shouldn't
extend as far as it does for the smaller cloud.
Regardless, it still works.
The link here: file:///User%20Work/clouder.html
should demonstrate it working, but I reckon this
might only work on my computer, so I'll have to
find a way of publishing it as an animation that can
be seen by anyone.
No comments:
Post a Comment