Flash Rotation

Recently I finished my first project for this semester’s iMedia Production class. It was definitely a very helpful experience. I learned so much from it, which I think was the underlying purpose of the assignment.

The task was to create an infographic, not just an infographic, an interactive one using Adobe Flash CS5. After struggling to find a topic, I decided to focus on the “Big Six” media conglomerates and their share of the stations we watch on tv. My vision was to have pie chart as the main piece that we would spin when the user rolled over certain buttons. However, each piece of the pie would also be separate movie clips that could be manipulated independently from the whole to learn more information about the conglomerate they represented. Although very simple, it took me a while to figure out how to do this.

To begin, I designed my pie chart in illustrator, and imported it in Flash as one image, but with separate layers. I learned that Flash automatically gives you the ability to import Illustrator and Photoshop images as layers. I was able to use the “Tween” commands in ActionScript3 to get my image to rotate. I made to buttons on the left and right sides of my pie chart. I made the buttons invisible by inserting a key frame in the hittable frame, and deleting the image in the up frame. In my action script I used the following command:

var goLeft:Boolean=false;
var goRight:Boolean=false;

btn_left.addEventListener(MouseEvent.ROLL_OVER,leftOn);
function leftOn(e:MouseEvent):void {
goLeft=true;
}

btn_left.addEventListener(MouseEvent.ROLL_OUT,leftOff);
function leftOff(e:MouseEvent):void {
goLeft=false;
}

btn_right.addEventListener(MouseEvent.ROLL_OVER,rightOn);
function rightOn(e:MouseEvent):void {
goRight=true;
}

btn_right.addEventListener(MouseEvent.ROLL_OUT,rightOff);
function rightOff(e:MouseEvent):void {
goRight=false;
}

This script creates two variables, goLeft and goRight. The Variables are then set to false using Boolean logic. It then states that if a user rolls over the invisible hittable area of the buttons btn_right and btn_left, the Boolean is then true. When not in the hittable area, the Boolean is false. The next part of the ActionScript:

this.addEventListener(Event.ENTER_FRAME,onEnter);
function onEnter(e:Event):void {

if(goLeft){
if (bg.rotation < 20000) { bg.rotation += 2; } else {} } if(goRight){ if (bg.rotation > -2600) {
bg.rotation -= 2;
} else {}
}
}

This ActionScript basically commands that when a user roles over this area (the hidden buttons), take “bg”- the pie chart (converted into a movie clip) and rotate it by a certain number of degrees, within a certain amount of time. I was happy to see it worked because at that point, I had never used the rotation command before. I had only used tweens that moved the x and y positions of a movie clip. It was a new learning experience.

The next step was to figure out how to manipulate the individual pieces of the pie chart after it was converted to a movie clip. This step took me a while to figure out, but I found one of my new favorite buttons, Break Apart, located in the menu bar under [insert name here].

Once I double clicked my pie chart movie clip, I was able to edit it. I simply clicked the chart and used the break-apart command, and each individual piece became a separate piece (or layer) within the movie clip. I then converted those pieces into movie clips that functioned as buttons, which enabled the users to clip and drag the piece to a target area to learn more.

You an check out my infographic here here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s