Animating Game Menus and Screen Transitions in HTML5: Flash Developer's Guide (2023)

1

2

3

4

5

shoot them

6

7

8

 ID ="My Canvas" width=“480” height=“320”>

9

Your browser does not support HTML5!

10

11

12

13

1

2

"text/javascript" span>>>

3

4

Our next step is to create four variables to easily reference canvas elements.
(Video) HTML5 Tutorial - 23 - Animating with Transitions
1
2
it was canvas = document.Get element by id(“my canvas“);
3
it was context = canvas.get context(“2d“);
4
it was width = canvas.get attribute('width');
5
it was tall = canvas.get attribute('tall');
we mentioned firstmy canvasvariable and set it to point to the HTML canvas element. the second variable, the so-calledcontextIt is used to obtain canvas dimensions (2D). As with Flash, we create the last two variables,widthexisttall, to simplify access to the width and height properties of the canvas.
Step 2:Loading and drawing images
Just like in ActionScript, we'll create an instance of the image.
1
2
it was background image = novi picture();
3
it was Pictorial logo = novi picture();
4
it was play pictures = novi picture();
5
it was picture instructions = novi picture();
6
it was upload a picture = novi picture();
7
it was Show credits = novi picture();
8
it was picture of the ship = novi picture();
See Also
Create better presentations with AI: Presentation Maker AI ToolGet started with GitHub Copilot in Visual Studio Code11 Best After Effects Courses for Beginners - [2023]Create presentation slides using HTML and CSS
We are missing the critical code for each instance - the source path! I keep all the images in the "images" folder in the same folder as the HTML file, so:
1
2
picture of the ship.source = “image/ship.png“;
3
background image.source = “image/background.png“;
4
Pictorial logo.source = “slike/logo.png“;
5
play pictures.source = “images/reproduction.png“;
6
picture instructions.source = “Image/Description.png“;
7
upload a picture.source = “image/settings.png“;
8
Show credits.source = “images/credits.png“;
Before drawing the image on the canvas, we'll create four arrays to hold the button's position and size (play pictures,picture instructions,upload a picture,Show creditsThese strings will later be used to create the hover function.
1
2
it was type X = [192,110,149,160];
3
it was Yes = [100,140,180,220];
4
it was button width = [96,260,182,160];
5
it was Button height = [40,40,40,40];
Now we can draw a picture on the canvas; this can be done in one gofully loadedfunction for each image, but there is no need to include the onload function - we can just usedraw picture().
1
2
background image.fully loaded = Function(){
3
context.character image(background image, 0, 0);
4
};
5
Pictorial logo.fully loaded = Function(){
6
context.character image(Pictorial logo, 50, -10);
7
}
8
play pictures.fully loaded = Function(){
9
context.character image(play pictures, type X[0], Yes[0]);
10
}
11
picture instructions.fully loaded = Function(){
12
context.character image(picture instructions, type X[1], Yes[1]);
13
}
14
upload a picture.fully loaded = Function(){
15
context.character image(upload a picture, type X[2], Yes[2]);
16
}
17
Show credits.fully loaded = Function(){
18
context.character image(Show credits, type X[3], Yes[3]);
19
}
If you're testing it now, you should see a static image of the menu that we'll be bringing to life soon. The ship is not drawn with other images as we will draw it later on the mouse event. By the way, if you haven't already, group your variables at the top and do the same for the functions.
Step 3:animation per interval
JavaScript is missing oneonEnterFrame()Equivalent, but we can easily create our own using an interval (timer).
1
2
it was framework = 30;
3
it was Countdown Id = 0;
4
5
Countdown Id = set interval(renew, 1000/framework);
You may be confused about how intervals work, so I'll explain briefly. range call functionrenew()Each (1000 /framework) milliseconds to create a smooth refresh rate. valueframeworkControls the number of frames per second; ifframework25, the browser will try to callrenew()Every (1000/25=) 40 milliseconds.
Our next obvious step is to create a functionrenew()
(Video) Create Transitions/Animations on Page Load with HTML & CSS - Web Design Tutorial
1
2
Function renew() {
3
Clear();
4
move();
5
picture();
6
}
Three more functions have just been called.Clear()Use to clean canvas because canvas is not the same as flash, it's like putting stickers on a board; once the image is posted, it cannot be moved. The following functions,move(), to change the value of the variable used with the image. Finallydraw()He was asked to put on those "stickers".
1
2
Function Clear(){
3
context.pure rectangle(0, 0, width, tall);
4
}
In short, this code deletes everything inside a rectangle that is the size of the canvas, drawn from the top left corner (0,0). This means it erases the entire visible canvas.
Before moving on to the next function, two variables need to be introduced.Pozadine Ywill be a variable for the y position of the background image, ispeed upwill be used for subtractionPozadine Yevery update cycle.
1
2
it was Pozadine Y = 0;
3
it was speed up = 1;
The effect we will create is a moving background. The picture consists of two identical pictures of the starry sky, one on top of the other, in a larger picture (the picture is twice the height of the canvas). We'll slowly move the image up until the bottom half is fully visible, then move the image back to the top half.
1
2
Function move(){
3
Pozadine Y -= speed up;
4
I(Pozadine Y == -1 * tall){
5
Pozadine Y = 0;
6
}
7
}
See Also
How to create a Squid game business card using Photoshop effects
Finally we havedraw()Function. All pictures have been repainted, but one change should be notedbackground imagey values ​​are replaced by variablesPozadine Y.
1
2
context.character image(background image, 0, Pozadine Y);
3
context.character image(Pictorial logo, 50,-10);
4
context.character image(play pictures, type X[0], Yes[0]);
5
context.character image(picture instructions, type X[1], Yes[1]);
6
context.character image(upload a picture, type X[2], Yes[2]);
7
context.character image(Show credits, type X[3], Yes[3]);
Test it now and enjoy smooth sliding backgrounds.
Step 4:Check the mouse position
One thing about HTML5The lack of support for image event listeners means we can't just writeplayImage.mouseover = function(){}Instead, we need to determine the position of the mouse relative to the canvas and determine if it is over the object.
1
2
it was MusicX;
3
it was music, music;
4
5
canvas.Add event listeners(“mouse movement“, check the location);
The two introduced variables will be used to determine the current mouse position. We add an event listener, just like in ActionScript, that calls a functioncheck location()Every time the mouse moves.
1
2
Function check the location(mouse event){
3
MusicX = mouse event.Page X - to.offset connection;
4
music, music = mouse event.page number - to.offset top;
5
}
(Video) HTML5 Tutorial - 43 - Animation for Games!
If you change the valueMusicXexistmusic, musicYou will get the exact position every time you move the mouse. But there is a problem: not all modern desktop browsers support this method. To fix this, we can use a little trick instead:
1
2
I(mouse event.Page X || mouse event.page number == 0){
3
MusicX = mouse event.Page X - to.offset connection;
4
music, music = mouse event.page number - to.offset top;
5
}Anders I(mouse event.Pomak X || mouse event.Pomak Y == 0){
6
MusicX = mouse event.Pomak X;
7
music, music = mouse event.Pomak Y;
8
}
This checks if the browser is using the "page" or "offset" properties to return the mouse position and adjusts the value (if necessary) to get the mouse position relative to the canvas.
Remember that ship we designed but didn't draw? We'll take that photo, rotate it, and make it appear when we hover over the button!
1
2
it was Chip X = [0,0];
3
it was Sprite = [0,0];
4
it was width of the ship = 35;
5
it was height of the ship = 40;
6
7
it was ship visible = value;
8
it was ship mate = width of the ship;
9
it was rotation of the ship = 0;
The first four variables are the same as before (we have two positions because there will be two ships). this oneship visibleWhen the mouse hovers over the button, the variable is set to true. Regardingship mateexistrotation of the ship, are used to vertically scale and reposition the ship to create the illusion that it is rotating. Note that the image is scaled from right to left.
1
2
for(and = 0; and < type X.lenght; and++){
3
I(MusicX > type X[and] && MusicX < type X[and] + button width[and]){
4
I(music, music > Yes[and] && music, music < Yes[and] + Button height[and]){
5
6
}
7
}Anders{
8
9
}
10
}
In the code addcheck location()Function. First, we go through the buttons there (I useButton X. lengthThen we compareMusicXto see if it's bigger than the current buttontype Xless thanbutton X + button width- i.e. within the horizontal borders of the button. Then we repeat the process for the Y value in the second if statement. If all this is correct, then the mouse must be above the button, so place itship visibleunhappyWhere:
1
2
ship visible = Where;
while in the voidAndersit is stated in the press releasevalue; then call it when you move the mouse off the button:
1
2
ship visible = value;
the followingshipVisible = truewe willChip XexistSprite, and perform all scaling in the move and draw functions.
1
2
Chip X[0] = type X[and] - (width of the ship/2) - 2;
3
Sprite[0] = Yes[and] + 2;
4
Chip X[1] = type X[and] + button width[and] + (width of the ship/2); 
5
Sprite[1] = Yes[and] + 2;
FirstChip X, we want to be to the left of the button, we set the value to (current button X - half the width of the ship), I moved it to the left more than 2 pixels to make it look better. Repeat a similar procedure the first timeSprite.otherChip XWe position at (current button X + button width + half ship width), then set Y as before.
Now comes the tricky part. We have to increase and move the ships to compensate for the increase in size. existmove()function write thisIstatement.
(Video) Game Development in AS3 Part 18 - Tweening menu transitions
1
2
I(ship mate == width of the ship){
3
rotation of the ship = -1;
4
}
5
I(ship mate == 0){
6
rotation of the ship = 1;
7
}
8
ship mate += rotation of the ship;
The code first subtracts the value fromship mate, which will be used to scale the image as we draw it; when zero is reached, the process is reversed until full scale is reached again.
Now we can move ondraw()Function. Add the following if statements below all other drawing methods.
1
2
I(ship visible == Where){
3
context.character image(picture of the ship, Chip X[0] - (ship mate/2), Sprite[0], ship mate, height of the ship);
4
context.character image(picture of the ship, Chip X[1] - (ship mate/2), Sprite[1], ship mate, height of the ship);
5
}
The ship is drawn normally, except that the X position is compensated by subtracting half of the current scale.
Step 5:Check mouse clicks
Add another mouseup event listener and create a new variable for the second interval we will create.
1
2
it was fade and fade = 0;
3
canvas.Add event listeners(“mouse up“, look at the click);
Create a checkClick() function.
1
2
Function look at the click(mouse event){
3
for(and = 0; and < type X.lenght; and++){
4
I(MusicX > type X[and] && MusicX < type X[and] + button width[and]){
5
I(music, music > Yes[and] && music, music < Yes[and] + Button height[and]){
6
7
}
8
}
9
}
10
}
As before, we check if the mouse position is correct. Now we need to create new intervals and stop other intervals and event listeners.
1
2
fade and fade = set interval(“fade out()“, 1000/framework);
3
pure interval(Countdown Id);
4
canvas.remove the event listener(“mouse movement“, check the location);
5
canvas.remove the event listener(“mouse up“, look at the click);
Except we have to create afade out().We also need to create another namedtime.
1
2
it was time = 0,0;
1
2
Function subside(){
3
context.fill the style = “RGB(0,0,0, 0,2)“;
4
context.vulRect (0, 0, width, tall);
5
time += 0,1;
6
I(time >= 2){
7
pure interval(fade and fade);
8
time = 0;
9
Countdown Id = set interval(“renew()“, 1000/framework);
10
canvas.Add event listeners(“mouse movement“, check the location);
11
canvas.Add event listeners(“mouse up“, look at the click);
12
}
13
}
It has some new methods, but it is very simple. Since we stopped all event listeners and other intervals, our menu is completely static. So we repeatedly draw a transparent black rectangle on top of the menu - without clearing it - to create the illusion of fading.
(Video) Easy Game Design in Adobe Animate
variabletimeIt is incremented every time the function is called, and when a certain value is reached (in this case after 20 "frames") we delete the current interval. Here I reset the menu, but here you draw a new part of the menu.
One last thing to note is that when you draw shapes on the canvas,fill the stylergb values ​​(red, green, blue) are set. Use rgba(red, green, blue, alpha) to draw transparent shapes.
I hope this clears up some of the learning curve for moving from simple AS3 programming to simple canvas programming. Leave a comment if you have any questions!