the making of

9
Creating a Kaleidoscope Animation on Flash 1. I started with a blank flash canvas using all of the default settings. (white background, standard actionscript 3.0 size and format) 2. I then created a simple black line which I then used to create a basic triangle shape. I repositioned the centre of the shape and rotated it -36 Degrees to create the shape shown above. (Img.1) 3. I joined the two lines with another simple black line and then again reposition the centre of the now triangle shape, which I turned into a symbol. 4. Now that I had a triangle symbol I was able to copy, paste and rotate this simple shape several times to create pentagon. Img.1

Upload: joshpayne

Post on 11-Nov-2015

20 views

Category:

Documents


0 download

DESCRIPTION

The Making of A Kaleidoscope Animation Test (Flash)

TRANSCRIPT

  • Creating a Kaleidoscope Animation on Flash

    1. I started with a blank flash canvas using all of the default settings. (white background,

    standard actionscript 3.0 size and format)

    2. I then created a simple black line which I then used to create a basic triangle shape. I

    repositioned the centre of the shape and rotated it -36 Degrees to create the shape shown

    above. (Img.1)

    3. I joined the two lines with another simple black line and then again reposition the centre of

    the now triangle shape, which I turned into a symbol.

    4. Now that I had a triangle symbol I was able to copy, paste and rotate this simple shape

    several times to create pentagon.

    Img.1

  • 5. Now that I had the pentagon shape that I needed for my Kaleidoscope I was able to focus on

    the other main aspect of the kaleidoscope. (The design)

    6. I create this design by first creating a simple circle shape and turning it into a symbol.

    7. I used this new symbol to create my main design. I used it by simply drawing very random

    and colourful lines within the circle and then hiding the circle, like the image show above.

    (Img.2)

    Img.2

  • 8. This design once finished and taken out of the symbol started to look like the image above

    (Img.3) which was more like a kaleidoscope.

    9. I then went into the original triangle symbol and deleted the left hand-side line.

    Img.3

  • 10. This new modified symbol once taken into the main kaleidoscope image looked like the

    image shown above. (Img.4)

    11. I then had to go back into the triangle symbol and create two features; 1. Action Script (this

    is so that I can write script onto the symbol and hoping create a practical animation) 2. A

    mask so that I can manipulate the eventual kaleidoscope, along with what is displayed on

    the final outcome.

    Img.4

  • 12. Now with these new features on the triangle symbol I was able to start writing the action

    script for the animation.

    (With the script I wanted to programme the arrow keys so that when you press down on one

    of them for example, the down arrow the kaleidoscope design with move in that direction

    and format)

    13. I started writing the script with just the basic coding that would enable the user to move the

    kaleidoscope in any direction unlimitedly, like the image above (Img.5)

    Img.5

  • 14. The image above shows the test of the kaleidoscope with the first set of coding on it (Img.6)

    15. I then realised that there was a problem with the unlimited movement of the kaleidoscope,

    this was due to the fact that the design was limited to the shape of a circle and the user

    could over-ride that design and be left with a blank screen.

    Img.6

  • 16. I went back into the action script and started re-writing and add aspects to control the

    limitation of the kaleidoscopes movement within the animation.

    17. Just like it is shown in the image above (Img.7) I added trace script and limited each direction

    (UP, DOWN, LEFT AND RIGHT) that the kaleidoscope could move in to a number that was

    touching the edge of the original design.

    Img.7

  • 18. Once I finished all of the action scripted, added and altered the movement of the animation,

    I added another circle and put it around the design.

    19. I then also added a square that cover the entire background of the kaleidoscope and filled it

    black (this then tidied up the look of the animation)

    20. The kaleidoscope then looked like the image above (Img.8)

    Img.8

  • 21. The image above (Img.9) shows the final test of the fully finished kaleidoscope animation.

    Img.9