Now: Tutorial for Web and Software Design > Flash > Basic > Flash Content
> Kaleidoscope [Bookmark it]
Kaleidoscope

Download Source

Let's get trippy with an easy-to-build kaleidoscope! A simple bit of masking and some tweening is all it takes to achieve something that looks a lot more complex. Skip to the bottom of the page to see it in action.

Start a new movie. Next, import the image that you want to use for your 'scope. I've picked a sort of fiery checked pattern for mine, you you could try a landscape or a photo or whatever. The image needs to be fairly square for the best effect.

image 1

Highlight the image and convert it to a movie symbol (press F8 and choose 'Movie'). Call this symbol 'Pattern'.

Right-click on the movie clip and choose 'Edit' to open the new clip for editing.

Create another layer above the one containing your image. Call this 'Segment Mask' - this will make sense later. Highlight this layer in the timeline and draw a circle that is the same size as the image. Divide the circle with lines as shown and fill in one segment (one eighth of the circle) with any colour (it doesn't matter, because it won't show).

image 2

Next, delete all the lines, leaving just the red segment. Move this segment on top of the image, and make sure the centre is on the '+' (You should be using the 'Grid' and 'Snap' options at all times, by the way!).

image 3

Add more frames to both layers (somewhere around 30-60). Insert a new keyframe at the end of the bottom layer - the one containing the image. Double-click on the first keyframe in the bottom layer and set up a motion tween (see below). This will rotate the contents of the layer by 360 degrees clockwise.

image 4

Double-click on the keyframe at the end of the bottom layer and go to the 'Actions' tab. Add a 'Go To' action to loop back to the first frame, i.e. Go to and Play(1). This action is not absolutely necessary, but it makes for a smoother rotation (this is because the first and last frames in the loop are the same).

Now make the top layer into a Mask: right-click on the layer name and select 'Mask' from the menu. Check to make sure that your movie clip looks like the illustration below.

image 5

Now return to the main scene of your movie (click on 'Scene 1' at the top-left of the movie).

Select the movie clip and duplicate it (Ctrl-D). Rotate the duplicate by 90 degrees. Repeat twice more and position the 4 clips as shown below.

image 6

Select all four clips together (you can group them if you want - it might make it easier). Use Duplicate again and then Modify > Transform > Flip Horizontal from the menu to create a mirror-image set of 4 clips. Position these as shown below to complete the movie.

image 7

Right. That's it. Here's the result:


[Bookmark][Print] [Close][To Top]
  • Prev Article-Flash:

  • Next Article-Flash:
  • Related Materias
    Examples of ActionScript 2
    Flash 8 Tutorial - Shape T
    Controlling File Size in F
    Simple Authentication Syst
    Controlling File Size in F
    Dynamically Attaching Comp
    Principles of Animation - 
    Principles of Animation - 
    Opposeable Mouse Effect
    Simple Particle Effect
    Topics
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Graphic Design Tutorial
     

    Coreldraw Tutorial

      Illustrator Tutorial
      3D Graphics Articles
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial&Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial&Articles
     

    XML Style Tutorial

      AJAX Tutorial
      XML Mobile
    Flash Tutorial&Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial&Articles
     

    Linux Tutorial

      Symbian Tutorial
      MacOS Tutorial