For all you dolphin enthusiasts out there, I present this dolphin birthday ecard. I was very much in the flow of creating while working on this ecard. I got my initial sketch, the dolphins, and the plants done in one sitting, albeit a long one. It helped that the coffee shop was playing Ace of Base- brought the subtle ecstasy of nostalgia to the experience. I’ll have to listen to them more often while working on these.
The dolphins were a lot easier to draw and animate than I anticipated. Drawing the plants actually seemed to be the most time consuming part of this ecard. All those stripes. The animation of the flames and the last minute art details also took a good chunk of time, but it was well worth it. The seahorse with the miniature balloons at the end is one of my favorite things in this ecard. All in all, this was one of my best creating experiences with these ecards and it turned out to be a favorite birthday ecard as well. Know any dolphin lovers?
I made this birthday ecard for my boo, who loves birds. I originally started it last November, but I wasn’t happy with how it was turning out so I set it aside for a while. I had the birthday cake tree done and the birds, but the background and the concept for the ecard were not coming together. Originally, I had the idea that the birds would eat all the cakes off the tree and then one would say it’s okay that they ate so much because it’s organic! The concept didn’t work so well in practice. This month I decided to whip it into shape because I really liked the birthday cake tree and the birds. I thought it might add more charm if I just brightened up the background, put them in space, and forget about having any conversation in it. And oh did it work! This ecard is lightyears ahead of what I had last November. Sometimes these creative things just need some time to simmer while you work on other projects. Click the picture to view or send this birthday ecard.
I worked on this Christmas ecard for quite a while and finished it right before Christmas. It has bears, candy cane crafts and a reversible slide! It ends with a “Happy Holidays!” greeting message. I also finished all the animation and programming for my Skating Elf interactive Christmas ecard, but I didn’t have time to make the music and sound effects. I got kind of stuck in the making of the bear ecard so I next year I will have to remember to get a super early start on my Christmas ecards. For now I will move on to making birthday ecards!
The first human walk cycle I animated in Flash was pretty terrible…although my first animal walk cycle was even worse. I tried to take a lot of shortcuts and it was quite evident in the results. I thought I had to do it using motion tweens – there was just no other possibility in my mind. I wanted to animate a young girl walking and I had the brilliant idea that if I made her skirt go past her knees, I would only have to animate her calves…and never mind ankle rotation, her shoes would just be attached. And I was pretty happy with the results.
Later on however, I decided it was time to try this frame by frame thing that real animators seem to use quite a bit. Despite the massive amount of time and seeming intricacy it would require, I set out to create a walk cycle frame by frame. Here is how I did it:
Step one: Create your character with separate graphic symbols for head, body/clothes, upper arms, forearms, thighs, calves, and shoes. That’s a lot of symbols!
Step two: Convert your whole character into a movie clip symbol.
Step three: Inside the movie clip, extend the timeline to include 11 frames (they should not be keyframes). You can make it more or less frames depending on the frame rate you are using and how smooth you want it to be.
Step four: Position your character frame by frame, following the example below. For other variations and a more exaggerated view of the movements, try a Google image search for walk cycle.
After you complete each frame make a new keyframe with the previous position so you can make the next adjustments more easily.
I have created a new website that will soon be filled to the brim with charming ecards, sendable creatures and trees, and other interactive content. I have decided to put the new website up without anything new on it because I have been lacking the motivation to create lately and I need the push of knowing that such a bare, incomplete site is sitting on the web, disappointing and confusing its kindly visitors.
Shifting Focus from Games to Ecards
Ecards are my main focus on this new website rather than games for many reasons, the the main one being that I just feel more excited about the possibilities in this direction. In creating ecards I can focus on developing my art and animation skills, as well as coming up with creative concepts. I have always been a bit afraid of creating art and I want to overcome this fear by creating as much as possible and doing it often.
Programming was enjoyable enough because the problem-solving was engaging but I don’t think it is the best outlet of self-expression for me. I started learning programming out of a desire to see my art come alive in a game format. I like knowing the basics and understanding how it works but I really wouldn’t mind if someone else programmed a game I had designed. Art is fairly time consuming for me but the time flows by very quickly and I have a great sense of accomplishment when I have created something I admire. Making ecards should allow me to create a lot more art and play with more concepts than I had time for when making games. I like the idea of being able to create little vignettes of lots of different creatures and places. In making games I had to struggle with keeping the file size low so I tried to limit my use of gradients and lines and I couldn’t make my art as intricate as I might have liked. I think this will be less of a problem with ecards, which is a relief. I will still work on making games in the future but I am going to set it aside for right now.
Ecards Coming Soon
I have already begun working on some ecards and now that my blank website is online I will be much more motivated to complete them. I will be working on mainly birthday ecards at first and then I will start on holiday ecards for Halloween, Thanksgiving, Christmas, etc. I’ll post an update here every time I finish an ecard for the first while until I get into the swing of creating regularly. I’ll also start posting some art tutorials so if you do use Flash to create games or whatever, and you struggle with the art aspect, visit my blog for tips! I really appreciate the positive feedback I have gotten about my art and games! I still feel like I can develop my artistic skills a lot and become more time-efficient – I have already come a long ways since I first started using Flash. Working on these ecards will help me to become much more prolific and that will help a lot. Hope you enjoy the ecards!
Want to help shape Magenta Galaxy? Play test my new games and give me feedback.
My New Games
My new games are yearning to be played! They are beaming at you with their florescent colors and beckoning you to enter their ethereal arms where you will lose yourself to sweet reverie. Enter here:
Seahorse Brawl
In Seahorse Brawl you must rescue a stolen sea fairy prince from the sinister sea circus! Ride on the back of a magical seahorse as you fight the silly, but pernicious sea circus scoundrels. The prince will be so grateful to you for his rescue!
Starkit
Unicycle on an outerspace rainbow as you try to catch baby stars that are bursting out of a star tree. Don’t let the ravens deter you with their ouchies. You can spit at them and they will fly away. Complement your stellar collection with twinkly bonus stars and you may even get a chance to catch a superstar!
Bumbershoot
Fall through space and shoot the asteroids with your starblaster to collect the gems inside. You will encounter several goodies to help you to collect gems faster and more easily. Use them wisely. Also, remember it is imperative that you catch white doves in your umbrella to keep yourself afloat. Try not to shoot them – it is possible they will still fly into your umbrella, but they really don’t appreciate it.
Give Me Your Feedback
Tell me what you think about my games! Are you experiencing any errors, malfunctions, inconveniences? Are they engaging? Could I add anything to make them more enjoyable? I’d appreciate any feedback you have. The main issue I am concerned with is the games running too slow, especially as you get further in the game and there are more entities on screen. I will be working on optimizing the graphics, as well as cleaning up the code in the onEnterFrame() function to improve the speed. If anyone has any advice on this, please let me know! Remember, I am still learning so I’m working with what I know. My games will become more complex as I learn more cool programming stuff!
In this tutorial I will show you how to make your game character shoot missles (or whatever object you want your character to shoot). This is mainly useful for making a shooting game, but it can also be used in other types of games where shooting is not the main focus. I will show you how to shoot with the spacebar and also how to shoot on mouse click.
In your flash file, draw whatever object you would like to be your bullet.
Select the image and convert it to a movie clip: Modify> Convert to Symbol
Name it Bullet, select Movie Clip as the type, under Linkage select export for actionscript and give it an Identifier and Class name Bullet. Click okay to return to the stage.
Now, create a new actionscript file: File> New> ActionScript File
Name it Bullet and save it in the same folder as your .fla file.
In this tutorial, the bullets will shoot vertically and be removed when they reach the top of the stage.
Line 3: We name a variable speed that will control how fast the bullet moves.
Line 5-8:When the Bullet movie clip loads, the variable speed is set to 20.
Line 12: Under onEnterFrame, the y coordinate of the Bullet movie clip decreases by the amount of the variable speed (so the bullet shoots vertically).
Line 13-16: If the y coordinate of the Bullet is less than -10, the Bullet is removed from the stage. We remove it once it is out of sight so we don’t see it pop off the stage and so it doesn’t go on infinitely.
In the Bullet class we program how the Bullet movie clip will behave once it is on the stage, but we still need to attach it to the stage when the spacebar is pressed or the mouse is clicked.
Shooting on Spacebar Press
If you have programmed arrow key movement for your game character, you will want to fire bullets by pressing the spacebar.
You will have to decide how close together the bullets can be fired to prevent a continuous stream when the spacebar is held down.
Here the bullets are spaced out by creating a timer that only allows a bullet to be fired every four frames.
Here is the code we need to add to our Player class:
Line 3: We name a variable shootSpacer that will act as a timer to space out the bullets.
Line 7: When the movie clip is loaded shootSpacer will be set to zero.
Line 13: Under onEnterFrame() the shootSpacer is increased by one.
Line 15-18: If the spacebar is pressed and the timer shootSpacer has reached a number greater than four, then the timer will be reset and a Bullet movie clip is attached to the stage.
Line 19-20: The bullet is attached to the Player movie clip at its 0,0 coordinates.
If you want to attach the bullet to a different part of the Player movie clip you can add or subtract pixels from the _x and _y in lines 19 and 20.
Shooting on Mouse Click
If you have programmed mouse control for your game character, you probably want to shoot on the click of the mouse button.
After programming the Bullet class as explained above, you will need to add code to your existing Player class.
Line 6-8: When the mouse is pressed, a Bullet movie clip is named as a variable bullet and is attached to the Player.
Line 9-10: The bullet’s x and y coordinates are same as the 0,0 location of the Player movie clip when it is attached.
As explained above, you can also adjust the position of the bullet by adding or subtracting from the _y and _y coordinated of the Player in Lines 9 and 10.
After it is attached, the Bullet behaves according to the programming of the Bullet class.
You can also limit the spacing of the bullets by adding the shootSpacer code that is given above in section about shooting with the spacebar.
I will cover collision testing and hitting enemies or targets in another tutorial.
Here is the game character shooting bullets … or apples, same thing.
Controlling your game character with the mouse has many advantages over keyboard control. The character can move more fluidly in all directions, rather than a rigid up-down-right-left movements. Mouse control is more intuitive and natural, particularly for people who do not play games regularly. And you can use the mouse button to shoot or perform some other action in the game.
I will be showing you how to control your game character with the mouse with precise movements. I will also show how to create lag in the character’s movement to give it a loose, floating effect. And lastly, we will hide the cursor so it really feels like you are moving the game character.
How to Control Game Character with Mouse-Precisely
First, open an AS 2 flash file: File> New> Flash File (ActionScript 2.0) and draw your game character image. Select your game character and go to Modify> Convert to Symbol.
Name it Player and select Movie clip as the type. Under Linkage check the box export for actionscript and put Player as the Identifier and the Class. Click okay and you are back to the stage.
Now create a new actionscript file: File> New> ActionScript File. Save this actionscript file in the same folder as your .fla file and name it Player.
In our Player class we will write the code that controls the game character movie clip, Player.
Here is the code that will go in our Player actionscript file and the explanation follows.
Line 6: We set the x coordinate of Player equal to the x coordinate of the mouse on the stage.
Line 7: We set the y coordinate of Player equal to the y coordinate of the mouse on the stage.
Code placed in the onEnterFrame event handler is executed continually at the frame rate so we now have continuous mouse control over our Player movie clip.
The mouse cursor will appear over the crosshair in your movie clip. If you want to reposition it so the cursor is not covering your character image, double click the movie clip in your .fla file and place the image wherever you like near the crosshair. Or you can hide the mouse cursor, as I explain below.
Mouse control with precise movement:
How to Create Lag in your Game Character Movement
Lagging character movement provides a different aesthetic for a game; it is good for making the game character seem like they are floating or moving underwater. It also affects the gameplay, often making a game more difficult. The person playing the game has to have more finesse in order to be successful.
To create this effect:
Follow the directions above for creating your game character movie clip, Player.
Open or create an actionscript document named Player.
Line 6-7: We set the variables xMouse and yMouse equal to the x and y positions of the Player movie clip on the stage.
Line 8-12: If the absolute value of the variable xMouse minus the x coordinate of Player is less than one, then the Player x and y coordinates will be the same as the x and y coordinates of the mouse. If the Player is less than one pixel away from the mouse cursor, it will be placed at the exact position as the mouse cursor.
Line 13-17: Otherwise, the distance between the Player movie clip and the cursor will decrease incrementally at a rate determined by subtracting the position of the cursor from the position of the Player and dividing by 7.
You can increase the number it is divided by to create a greater lag or you can decrease that number to lessen the lag. It depends on how great of control you want over the Player movie clip.
Mouse control with lagging movement:
How to Hide the Mouse Cursor
With the cursor hidden, the focus is on the game character. There is no chance that the character will be covered up by the cursor and it feels like you are controlling the game character, rather than leading them with the mouse. Hiding the mouse cursor is very simple.
In our Player actionscript file, we add the following code right above the function onEnterFrame().
1 2 3 4
functiononLoad() { Mouse.hide(); }
Line 1-4: When the Player movie clip loads, the mouse cursor is hidden.
Mouse control with the cursor hidden and lagging movement:
