Tag Archives: ActionScript

Flash Lessons Learned

Well yesterday was the last day of production class and I must say I am both happy and sad; happy because I need the rest and sad because I really enjoyed learning a new tool, Adobe Flash this semester.  Here are some of the things I will take away from this years Production class:

  • Adobe Flash is an excellent way to add interactivity to the most boring topics.  Simple roll overs, mouse overs, and animation can add a little excitement to communication.
  • There is a lot of talk about the end of Flash. Some people say it’s coming for sure, and some say it will never go away. What I do know is learning Flash and the ActionScript that accompanies it will only help me in the future whether it dies or not.
  • A great way to solve Flash problems is through online resources. If you enter a specific error message into a search engine such as Google. Hundreds of articles pop-up with information on the topic. The key is know what to type in.
  • There are a lot of great tutorials online that takes users through step by step directions.
  • Flash can give a great since of “Fiero”  when tasks are accomplished. It’s very rewarding to make something work in ActionScript (especially when you’re not a computer programmer).
  • I will miss Professor Sang Nam (my production teacher) when he goes on his sabbatical next semester.

 

So these are the lessons and tips I will take and keep with me for the rest of my life as I continue down this Elon, Interactive Media journey!

Advertisements

Mobile Flash Nixed

There has been a lot of talk about the death of flash, specifically due to its non-compatibility with the iPhone and iPad.  This topic is pertinent to me and other interactive content designers and developers.  To combat these issues, Flash began working on developing the plug-in, which would make it compatible with mobile phones. Recently it was announced Flash nixed this project (check out the article here). 

Sources close to Adobe that have been briefed on the company’s future development plans have revealed this forthcoming announcement to ZDNet:

Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores. We will no longer adapt Flash Player for mobile devices to new browser, OS version or device configurations. Some of our source code licensees may opt to continue working on and releasing their own implementations. We will continue to support the current Android and PlayBook configurations with critical bug fixes and security updates.

So what does this mean for an interactive media student (like myself) studying Flash development? I’m not quite sure. However I do believe this is only the beginning of this problem and Adobe will eventually find away to tackle the issue, thereby ending rumors of its device. Even if this does not happen, I think learning the program and the ActionScript that accompanies it will help program my mind to work with future applications that produce the same content.   Who knows what the future holds?

Fluid Movement in Flash

In the last post, I spoke about “Finding Bonga” my first flash game. As mentioned, I had some tough moments when creating the game, but as a whole it was very fun and rewarding once I completed everything.

I spoke about the challenge of using music and sound effects in my last post, but something else I had to figure out was character movement.  In class we learned how to use keyboard input to move the characters. Anytime the user pushes any of the arrow keys on the keyboard, the character moves according to the coordinates specified in the ActionScript. For example, the ActionScript for one of my games looked like this:

stage.addEventListener(KeyboardEvent.KEY_DOWN, move_object2);

function move_object2 (e:KeyboardEvent):void{

if (e.keyCode == Keyboard.LEFT){

test1.rotation = -180;

test1.x -=25;

}

“test1” was the name of my object, and every time the down key on the keyboard is pressed, my object moved down (-25).  The problem with this code is the choppy movement. It doesn’t flow smoothly and the user has to press the button and release it and press it again in order to move the object.

In this game, I didn’t want this type of movement. I wanted the object (Binky) to move fluidly as long as the key (left and right arrows) is down.  I didn’t want the player to have to press and release the keys to make it move.  I had to figure out how to do this.

First I had to created to variable and create a Boolean for the variables:

var isRight:Boolean=false;

var isLeft:Boolean=false;

The next step involved righting ActionScript to define the two variables:

stage.addEventListener(KeyboardEvent.KEY_DOWN, downKey);

function downKey(event:KeyboardEvent){

if(event.keyCode==39){

isRight=true}

if(event.keyCode==37){

isLeft=true}

}

stage.addEventListener(KeyboardEvent.KEY_UP, upKey);

function upKey(event:KeyboardEvent){

if(event.keyCode==39){

isRight=false}

if(event.keyCode==37){

isLeft=false}

}

One function is activated when the left or right keyboard arrow is down (pressed), and the other function is activated when the left of right keyboard around is up (or not pressed).  The variable I declared at the top of the ActionScript is “true” when the arrow keys are down, and they are “false” when the arrow key is up.

Next I had to declare movement anytime the left or right arrow keys were up or down:

stage.addEventListener(Event.ENTER_FRAME, loop);

function loop(Event){

if(isRight==true && myObject.x<850){

myObject.x+=20;

myObject.gotoAndStop(3);

if(isLeft==true && myObject.x>50){

myObject.x-=20;

myObject.gotoAndStop(2)};

if(isRight==false && isLeft==false){

myObject.gotoAndStop(1);

This script specifies, when the right arrow key is down (the user is pressing it), variable isRight is true, and when variable isRight is true, myObject (Binky) will move right +20 pixels, as long as the x location of the object is less then 850(the width of the stage). If the x location becomes more than 850, myObject will not move. The same is true for the variable isLeft; when the left arrow key is down, myObject will move -20 pixels to the left, as long as myObject’s x location is greater than 50  (width increases left to right). If either of the two keys are up, then isRight and isLeft is false.

Therefore I was able to created continuous, fluid motion, instead of choppy movement. As long as the key is down, the object moves.  Pretty cool right? I love the things I learn when working on these Flash projects. I look forward to learning more and sharing more of my Flash secrets!

Try my game here!

Flash Music

This week I turned in my first major flash game.  It was tough, but very fun and rewarding upon completion. I had plenty of “fiero” moments!

I named my game “Finding Bonga,” and the objective was to help Binky (Bonga’s Friend) find Bonga by completing to simple task. The first was a simple egg catching game; the second was a shooting game.  Naturally I ran into some problems trying to create this game, but I learn a ton of new things, one being the implementation of music and sound effects.

In previous projects, I entered music directly on the timeline. This was not efficient because there was no way to control the music.  I couldn’t get it to start when I wanted it to, or stop when I needed it to.  It just played automatically after exporting the file as an swf file.  So, on this project, I wanted to have more control over the sounds and music.

In the first scene, Binky has to collect eggs in a basket falling from chickens. Every time the egg hit the basket, I wanted to play a coin sound effect. Similarly, a buzz sound effect when the activation of the sound effect was included in the hit test.

First I imported the individual sounds into my library as an mp3 file; the background music, the buzz sound, and the coin sound.  In the library, I double-clicked the sound icon next time the file that directed me to the sound properties window. On the ActionScript tab I checked the “Export for ActionScript tab.” Under ”class” I need the file what I wanted it to be…for example, I named the buzz sound “wrong.”

The next part involved my ActionScript. I had to declare a variable for each sound. I did it at the start of my ActionScript. It looked like this:

var mySound: Sound = new ding();

var mySound2: Sound = new backgroundmusic();

var mySound3: Sound = new wrong();

var mySound5: Sound = new congrats();

Each sound had it’s own variable name (mySound), and each sound was commanded to activate at specific moments.  For example, when the user clicks the startgame2 button, mySound2, the background music, starts playing:

function startgame2(e:MouseEvent):void{

mySound2.play();

}

For the sound effects, they were activated in the hit test:

circle.addEventListener(Event.ENTER_FRAME, hitTest);

function hitTest(event:Event){

if(circle.hitTestObject(egg)) {

score= score + 1;

score_text.text = String(score);

egg.gotoAndPlay(41);

mySound.play()

}

Everytime the hit test occurred and the egg hit the circle (which symbolized Bonga catching a good or bad egg) the sound effect plays.

This is just one of the new things I learned while doing this project. In my next post I talk about something else I learned, looping character movement.

Try my game!

Flash Keyboard Input

This week in my graduate Interactive production class, we learned how to use input of the keyboard up, down, left, and right arrow keys. We also learned how to use dynamic text to create timers and score boxes.

So, I decided to recreate a simple space game in which a spaceship has to make it to the safety point (located on the other side of the stage), while avoiding asteroids. The spaceship can shoot the asteroid thereby making the task easier. If an asteroid hits the spaceship, points are deducted from its score; if the score falls below 0, the player loses. Sounds simple right? But creating it in Flash was not as simple as paying the game

First, I used keyboard input ActionScript code that allows the user to use the arrow keys on the keyboard to move the spaceship around. I had to figure out how to get the spaceship to shoot a bullet that could hit the asteroid. I created a red dot that hid behind the ship. When activated (pressing the space bar) the red dot (“bullet”) traveled a certain distance in a certain amount of frames. I created the effect by making the red dot a movie clip called bullet. I used the same ActionScript that I used to make the ship move up and down with the arrow keys; however this time the key code was changed to indicate the pressing of the space bar. The ActionScript specifies when the space bar is pressed, go to and play this red dot movie clip. The ActionScript looked like this.

stage.addEventListener(KeyboardEvent.KEY_DOWN, move_object2);
function move_object2 (e:KeyboardEvent):void{

if (e.keyCode == Keyboard.LEFT){
test1.rotation = -180;
test1.x -=25;
}

if (e.keyCode == Keyboard.RIGHT){
test1.rotation = 0;
test1.x +=25;
}

if (e.keyCode == Keyboard.UP){
test1.rotation = 0;
test1.y -=25;
}

if (e.keyCode == Keyboard.DOWN){
test1.rotation = 0;
test1.y +=25;
}

if (e.keyCode == Keyboard.SPACE){

test1.play();
}
}

The red dot bullet clip hides behind the space ship, and when users use the arrow keys to move the spaceship, the red dot movie clip moves as well. Then when the space bar is pressed, the “bullet” fires and destroys the asteroid.

This little project was a lot of work because I had to learn how to use new codes of ActionScript I had never used before. All though very simple, I enjoyed this project and I look forward to using some of the techniques I learned to create more advanced Flash games!

Flash Drag and Drop

For my first project in the graduate course Producing Interactive Media Class, I decided to create an interactive inforgraphic on the “Big Six” media conglomerates, and the stations they own on television.  The infographic was entitled “Who Owns What You Watch?”

One feature of my inforgraphic was the ability to drag a piece of a movie clip within a movie clip to a target area that would play another movie clip. Sounds confusing don’t it? However, it wasn’t that bad.  In class we had previously learned to use the drag and drop feature. We created an image, converted it into a movie clip and added action script which enabled the movie clip to function as a button that could be dragged when a user used the mouse and dropped upon release of the mouse.  I did the same thing in this project.  The action script looked like this:

bg.btn1.buttonMode = true;

bg.btn1.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

bg.btn1.addEventListener(MouseEvent.MOUSE_UP, dropIt);

function pickUp(event:MouseEvent):void {

            event.target.startDrag();

            event.target.parent.addChild(event.target);

}

bg.btn1 is a button located inside of a movie clip, or in this case, a piece of the pie movie clip. I had six pieces to the pie graph so I had the same ActionScript for each one.  I just changed the name of the button (bg.btn2, bg.btn3, etc…)

My pie chart was imported as a whole from illustrator.  I converted the pie chart into a movie clip on the first layer, and then I went inside, broke the pie chart apart (which made each piece separate) and converted each piece of the pie chart to movie clips. Then, in my action script I was able to have the function as buttons that could be dragged and dropped.

My next step was to incorporate a function that would play a certain movie clip when an individual piece of the pie chart hit a certain area.  (In writing these blogs, I have seen how increasingly hard it is to talk about adobe flash and action script in simple terms!)

In actionscript, the certain area would be considered a target area.  Previously in class, we worked on using target areas to show information. For example, lets say I have a circle that is a drag and drop movie clip.  When a user drags the circle to a target area, a certain frame of the target area would pop up and show additional information.  Therefore, each frame of the target area had different information.

Well, the only difference with my project was, I wanted the target area to play a separate movie clip when hit, not a frame within the target area movie clip. I found out the fix was simple, and all I had to do was change a bit in my action script.  Instead of target.gotoAndStop(), I used movieclip.gotoAndPlay(). This showed me that I didn’t need to put the movie clip within the target. It could be anywhere I wanted It to be. All I had to do was change the actionscript! It looked like this:

function dropIt(event:MouseEvent):void {

            event.target.stopDrag();

                        if (event.target.dropTarget != null && event.target.dropTarget.parent == target){

                                    ge_mc.gotoAndPlay(3);

                                    btn_left.visible = false;

                                    btn_right.visible = false;

                                    info.visible = false;

                                    rings.visible=false;

                        } else {

                                    ge_mc.gotoAndStop(1);

                                    btn_left.visible = true;

                                    btn_right.visible = true;

                                    info.visible = true;

                                    rings.visible = true;

                        }

This project was super tedious, but very fun. I learned a ton of new things about Adobe Flash CS5 and actionscript.

To view my first Flash project click here.

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.