Step 12

And there you go, this is the final piece and it should look like this:

SO keep playing with values and changing the variables and see what different patterns and looks you can create.

Step 11

If there are any problems or warning messages you can just right click and click "go to source" and it will highlight it on the actions page

The warning page will tell you what's wrong, just make sure you type slow, check spelling, and look out for little mistakes like missing punctuation

Step 10

Once the code is all typed in and you have changed the values and colours of the butterflies to ones you like, test it out by hitting “shift + enter”. This is called exporting and it also creates a swf file. You can play around with the butterfly image, colours, alpha channels, and values to change it up and make it your own, just trial and error.

When playing with values you can always comment out certain text. Just copy and paste the line you want to change and use two forward slashes // to comment out one of the lines, that way you can keep the original text and if it doesn’t work you can always go back and try again

The grey shows the code is not commented out

Step 9

To change the alpha (opacity) of the butterflies: This will make some of the butterflies transparent depending on the value and rotation randomly selected by the variables you chose:

clip.alpha=(Math.random()*3);;

Step 8

To change the scale (size) of the butterflies as well as the rotation: This code will randomly select values between whatever values you select and will change the scale and rotation of them creating an interesting pattern:

clip.scaleX = clip.scaleY = (Math.random() * 0.75) + 0.25;

clip.rotation=(Math.random()*200)+5;

Step 7

To change the colour: Use the HTML colour names to change the colours to which ones you would like:

var color:ColorPool = new ColorPool(

0x33CCCC, 0x339999, 0x336666, 0x333399, 0x33FFCC, 0xFFCCFF, 0x33CC66, 0x99FFFF, 0x33FFFF

Step 6

I will provide you with the code. You can not just copy and paste the code though, you have to write it out yourself. Make sure the names match from whatever you called the movie clip to match the code.

Code:

import hype.extended.color.ColorPool;

import hype.extended.layout.ShapeLayout;

import hype.framework.core.ObjectPool;

import hype.framework.interactive.Adjuster;

MyShape.visible = false;

var pool:ObjectPool = new ObjectPool(MyCircle,500);

var layout:ShapeLayout = new ShapeLayout(MyShape);

var color:ColorPool = new ColorPool(

0x33CCCC, 0x339999, 0x336666, 0x333399, 0x33FFCC, 0xFFCCFF, 0x33CC66, 0x99FFFF, 0x33FFFF

pool.onRequestObject = function(clip) {

clip.scaleX = clip.scaleY = (Math.random() * 0.75) + 0.25;

clip.rotation=(Math.random()*200)+5;

clip.alpha=(Math.random()*3);;

layout.applyLayout(clip);

color.colorChildren(clip);

addChild(clip);

}

pool.requestAll();

var adjuster:Adjuster = new Adjuster();

addChild(adjuster);

pool.activeSet.forEach(adjuster.add);

Step 5

On an “Actions” layer you have to open up your actions window:
1) Windows
2) Actions

Step 4

Now set up your layers.

Layer setup:














If there are any layers you don’t need you can guide out the layer:
Right click and select “Guide”, This makes them invisible without deleting them

Step 3

Bring in the file:
1) File
2) Import
3) Import to stage (or) Import to library

Now make the file a movie clip:
1) Insert
2) New Symbol
3) select “Movie Clip”
4) Name it something simple you can remember

Step 2

For setting up your flash file you will need to:
1) Open Adobe Flash CS5
2) Choose Action Script 3.0

I am providing the butterfly image to you, just drag it to your desktop, it is a png file so there is no background. If you’re going to use a different butterfly image make sure it has an outline and is a solid colour.

HERE you can find the link to the butterfly image to use.

Butterfly Tutorial: Step 1

This is a tutorial to showcase the process and design of one assignment and the details in order to re-create it yourself. With this you will be able to follow along and see the design process to do this project yourself and using the same source files and assets for the recreation. Remember, save your work often.


This is what we will be creating:

FOR THE FINAL

I will be working on the tutorial for the FIRST project we did with the butterflies. I am choosing NOT to do one for the music assignment because honestly, I barely understood how to do it so I would be no good at explaining to someone else how do do it. So I am working with the butterfly piece, explaining alpha channels and colour, a tutorial about the code and how we got to the final image.