How to create a new file (document) in Flash CS6. Creating flash games How to create flash animation

Creation of a flash site ndash; the matter is rather complicated. This requires knowledge in many areas: programming, computer graphics, the basics of optimizing and promoting sites, you need to know flash itself well, in the end, both at the level of knowledge of the development environment and the programming language action script 2.0. or action script 3.0, which is currently a higher priority.
Flash applications are developed in Adobe Flash Professional ndash; is a multimedia program that is used to create content such as web applications, movies, games, applications for mobile and other embedded devices.
Flash ndash; a unique phenomenon. Previously, this product was called "Macromedia Flash", after the acquisition by Adobe, this program became known as "Adobe Flash" since 2005. Flash animation is used for streaming web pages. Sometimes flush ndash; this is part of the html page, and it happens that the entire page is entirely made in Flash, or the entire site was created with it. The resulting Flash files are special swf (“ShockWave Flash”) files that require special free browser plug-ins to view the content, they can be easily and quickly downloaded and installed from the official Adobe website. The advantage of flash movies was very fast loading and working with vector animation with interactivity. The flash can be loaded before the entire video is displayed on the screen, that is, you can implement the option when you start watching the animation, and the rest of the "streams" on the screen are loaded in the background.
The used flash graphics in the vector plus the program code make it possible to make a full-featured application that can replace some raster, video fragments, program codes, but make it much more optimal, less bandwidth is used for streams, less processor power is consumed. In addition to vector rendering, Flash Player (a player required for viewing Flash movies) includes a virtual machine (ActionScript Virtual (AVM)) to support run-time interaction scripts, and also supports video, mp3.
Let's consider the existing types of graphics and highlight the advantages of vector graphics, with which Flash directly works.
All graphics can be divided into three types: raster, vector, 3D. In raster graphics, as on a TV monitor, each image consists of a set of small ndash elements; pixels ndash; is an abbreviation for picture element.
The principle of dot graphics is very simple: as a child draws in cells at school, only here these cells are much smaller. This type of graphics is simple both in implementation and processing and presentation, it is technically convenient to implement, automate the input or digitization of pictorial information.
But raster graphics have disadvantages: it is voluminous, the file weight as a result becomes large, and when the image is reduced or enlarged, the quality of the picture is lost.
The coding of graphic information in vector graphics is different: all images are specified as ndash contours; mathematical objects. These contours are an independent object that can be moved, resized, scaled, and any number of times. Lines are set by starting points, formulas that indicate the lines themselves. Thanks to this, when changing the pattern, the proportions are always exactly maintained. Vector graphics are also object-oriented graphics, because the drawing consists of individual objects - straight and curved lines, ellipses, rectangles, closed and open shapes, etc., which have their own characteristics of outline thickness, color, line style, etc. d.
Vector graphics are economical in terms of resources, information about it is stored in the form of formulas, and not information for each point, color descriptions do not significantly increase the file size. Vector graphics are easy to modify with virtually no loss in image quality. There are areas of graphics where the preservation of clear contours is fundamental, for example, in creating logos, in fonts, etc.
The vector takes full advantage of the resolution of all output devices, such as a printer. The image always looks high quality, clear, everything will depend only on the printer itself.
Also, the advantage of vector graphics can be called the fact that it is easily transformed into raster graphics, but not vice versa! And it can include raster graphics objects, although it cannot be processed by the same means.
A serious advantage of vector graphics is considered to be a means of integrating text and images, one approach to them, respectively, the ability to create a final product. The most popular vector graphics editors are CorelDRAW, Adobe Illustrator and, of course, Adobe Flash.
Vector is limited when creating realistic images: clear and cartoonish ndash; yes, but here's how to formulate a pine tree or a cloud. There is also a problem when entering graphic information: for example, the scanner transmits information about the image pixel by pixel: the location and color of each point depending on the reaction of the light beam. It cannot cover object by object, and not all images, as I wrote above, can be formalized.

Flash became universally popular ndash; cartoon banners appear on almost every Web page. They are interactive, play animation and take up little disk space, which is important when working on the network.
Animation is created by displaying each flash frame for a certain amount of time. When there are many frames, the illusion of movement is created. Earlier flash technologies appeared GIF-animations, but the possibilities of Flash are much wider. So with its help you can create navigation elements, voiced cartoons, animated logos, calculators, entire sites with a set of various interactive elements, and what miracles of animation can be created on flash: they look very impressive and other technologies for the web cannot boast of such capabilities.
Flash animations are called movies. Animation possibilities are not limited to animation, various objects are animated: menus, pictures, links, texts.
When the program starts, a window opens with a workspace and a toolbar, as well as additional windows that can be connected during work. The tabs for working with the timeline, error checking settings, etc. are also displayed. In the program, films are created by drawing or importing ready-made drawings, they are placed in a special area of the ndash working window; scene (Stage), and frames are created using the Timeline (timeline).
There can be several scenes in a movie; when you start the movie, they are played in the order they were created, unless this order was changed on purpose. This allows you to conveniently and quickly change individual episodes, change their order.
The animation itself is done by changing the frames following one after another, changing their content, that is, objects with the necessary parameters are added to the frame. Objects on the stage can be rotated, position, color, transparency, their shape, size can be set, the same can be done with any other objects.
Animation can be created in the following ways:
Frame-by-frame Animation ndash; the drawing in each frame is done by hand and the frames go in a row;
calculated (Tweened Animation) ndash; only the initial and final frames are made (called key frames), and between them the program itself builds frames; two types of such animation: motion (Motion Tweening, when the motion parameters change, turn, size, position), shapes (Shape Tweening);
programmatically ndash; when the parameters for changing an object are set using commands of the Action Script programming language.
In the process of working on a film, the original data is saved in a special file with the .fla extension. This includes the scene with all objects, as well as additional parameters about objects that were not included in the movie, but were created in it, as well as sound options, comments, script codes, program settings, etc. After creating such a source, you need to translate it into a format suitable for the Internet ndash; namely SWF, so we publish the movie or compile the code. This will remove information from the file that is not needed for playback in the desired form of the movie. Thus, the file size becomes minimal and quickly loaded by the user. Such a file can be opened separately by ndash; the player will play it, but you can connect it to any html page as an object.

The film is created from prefabricated ndash elements; standards (Symbols) or symbols. A reference is an image, a button, an animation, a movie clip that are repeatedly used in a video. They can be created or imported. Once created, symbols are stored in a special ndash store; library. In the process of assembling the film, in those places where necessary, it is the instances (Instance) of the standards (which are stored in the library) that are inserted, and not they completely each time. And you can insert them any number of times and anywhere. In this case, you can change the instance parameters as you like: location, size, scale, rotation, bend, transparency, tone, etc., while the reference symbols themselves do not change. This is very convenient ndash; you do not need to create an element anew each time or copy it, the element is one, and its modifications are as many as you like. And during the publishing process, the file of the final video, which is created in the swf format, is assembled in such a way that in one place there will be a reference object directly, and in all the rest ndash; just pointers to it. Imagine how much the weight of the video is reduced in this way compared to copying almost identical elements.
The standards are:
bull; Movie Clip (moviklip) ndash; includes sound, graphics, animation, can be scripted programmatically;
bull; Graphic (Graphic) ndash; static drawings, animation, sound, but not programmatically controlled;
bull; Button (button) - includes pictures, sound; compared to other types of symbol references, it includes only four frames, which show changes in the state of the button when various mouse events occur.
Before directly creating a reference symbol, you need to set its type, later it can be changed.
In addition to reference symbols and their instances, a movie can contain images from external files, fonts.
Entire video in Adobe Flash ndash; this is a sequence of frames (Frames), they are shown in turn at the specified speed. They work with the help of the Timeline. On the left on the scale are the layers whose names need to be set, on the right ndash; a set of empty frames that are filled as objects are created and placed on the stage. As soon as the frame has become filled with objects, it changes color to gray. Keyframes are indicated by a black dot. On the timeline, the current frame is marked with a red ndash marker; a playing head through which a thin red line passes vertically, which crosses all layers and laquo; sees traquo; the current frame in each of them. It is these frames, that is, their contents in the form of movie clips, that are displayed on the screen.

To implement interactivity and the ability to create full-fledged sites, Adobe Flash uses the Action Script programming language.
To make a movie interactive, Flash uses script programs (script-script), they contain a set of instructions (actions) in ActionScript, and are executed when certain events occur: the user presses a button, reaches a certain frame of the movie, reactions to mouse movement, its wheel, positioning the pointer over a specific area, and many others. Script commands determine how Flash reacts when an event occurs.

Script commands that are made when an event is implemented are specified for a clip, frame, button, and this is done on a special tab at the bottom of the Actions (Commands) screen (Actions Frame, Actions Movie Clip), Actions Button.
Possible events:
Key Press ndash; when the user presses the keyboard keys, the function parameter is the name of the key.
Hover (Roll Over) ndash; when the mouse pointer is over the object, but the mouse is not pressed;
Release ndash; if the mouse button is released when the pointer is over the button that was programmed, that is, if the user clicks the manipulator laquo;mouseraquo;;
Press ndash; if the mouse button (left) is pressed while the pointer is over the button that was programmed. In this case, the actuation area is taken into account, and not its visible image, this is determined in the frame Area (Hit);
Remove (Roll Out) ndash; there was a mouse pointer above the button, it was not pressed and the mouse is taken away from the programmable button;
Shift (Drag Out) - the mouse button is placed over the object, pressed and removed;
Release Outside ndash; if the mouse button was pressed on the object, and then it was released by the user outside the object;
Drag Over ndash; a pointer is set on the object, the left mouse button is pressed and not released, but the pointer is led behind the object, then returned again.

The ActionScript 3.0 language, when compared to ActionScript 2.0, is more modern in that it is based on the fundamentals of object-oriented programming. Where the main concepts are a class, an object, its attributes or properties, as well as methods inherent in this object.
ActionScript is executed using a virtual machine (Virtual Machine ActionScript), it is part of the Flash Player.
The basis of any program code is a variable, which in ActionScript is set like this: var ndash; a special Flash command, which means that in this section a variable is designated and its type is determined; name ndash; variable name, specified in text-numeric format, but does not start with a number; type ndash; indication of the variable type (numeric - Number, logical ndash; Boolean, text - String, etc.). that is, you will specify: Var x: String;
Be sure to include a colon after the variable name and a semicolon at the end of the line. During the execution of the code, the value, and accordingly the type of the variable, can be changed.
A variable that holds a large amount of data is called an array. In AC 3.0. it is specified with type Array: Var Mas: Array.
All array elements are numbered starting from 0, so to access, for example, the first element, you need to specify Mas. That is, in square brackets you indicate the position of the desired element in the array.
The code itself will consist of functions that describe the sequence of commands that occur on a particular ndash event; mouse click, key press, reaching some value, etc.
The function is specified using the reserved word function, then you specify its name - name - any text-numeric name, but does not start with a number, then in parentheses () you can specify the parameters of the ndash function; what is fed to it as input, they may be absent, then a colon and the data type that the function returns or void ndash; when the function returns nothing. After that, enclose the entire function code in curly braces ( ). And you access the function, specifying its name and parameters if necessary: name (). "Conditions in AC 3.0. are set through the operator if: if(x==y), that is, in round brackets, you need to specify the comparison condition itself. Loops are defined through for(), where its parameters are set in parentheses: the counter variable, the step of its change.
Each object is characterized by its parameters or properties; you can attach event listeners to objects in flash using the addEventListener function. This listener will handle events that occur with the object, and if the reactions to them are described in the function by the programmer, the program will react accordingly.

This is just a small part of what you need to know when starting to create a flash site. You don’t have to create a site from scratch. There are special templates that you can buy and modify to suit your needs (for example, the templatemonsters site). The design is already fully developed there, you need to change the content and in the software implementation everything that will be necessary can be reprogrammed. Then you need to buy a domain and hosting, place an html file in which the swf is connected.
Read books (for example, the book laquo; 100% tutorial M.Flash MXraquo; helped me for work and articles), learn from colleagues on the forums (demiart, flasher.ru), and also what should be your very first Assistant is help on the official Adobe website. Opsian language ActionScript is very detailed and detailed, examples are shown, and the material is presented in Russian as well.
After creating a video, you need to publish it. You can set the program's publishing options in the File menu item Publishing Options. It indicates in which formats to upload the video, what are the quality settings for graphics and sound, and many others. Once you have the swf file, you can use it as a complete finished application. To change, update the created video, you need to edit the ndash source; fla file and publish again.

Fortunately, most active Internet users can create a flash game. For beginners, even the initial programming skills help a lot in this (acquiring them, by the way, is not so difficult - there would be a desire). True, you will need some time to master one of the many special flash game designers (for example, Macromedia Flash).

Many software sites contain, among other things, just such constructors. Installing them on a computer, as a rule, does not create any special problems for the user. Remember that the selected program should be registered and installed with all the necessary changes - then it will serve you faithfully, that is, uninterruptedly. Most game designers are made in English, but you can look for a crack or a version in Russian. Often in the settings themselves there is a window where you can set your native language.

How to create a flash game: preliminary preparation

Even before you sit down to master the designer, you should already have an approximate scenario for the game, a storyline. It’s a good idea to think about animation and design in advance - this will significantly save your time. Before you create your flash game, decide on its desired type. For inspiration, visit sites that feature flash game libraries.

Professionals recommend that beginners start by creating simple applications, such as arcade games. And only then it will be possible to move on to more complex types of games and even create your own strategies. You can choose the type of future toy in the same constructor, where all genres are conveniently sorted. Activate, for example, the arcade (double click).

How to create a flash game: working in the game designer

Open the template and drag the desired objects from the Animated Objects and Static Objects sections onto it. Create a background by choosing a texture and color. For objects, select colors using the color palette. Use the Animation Player to check which other features are not enabled. In the settings, set the levels of movement of game characters (in arcades) or objects (in logic toys).

After you've done everything you need to, launch the debugger. In this mode, you can go through your own game, starting from any level - this is important in order to test it for performance. Eliminate the detected errors and check the flash game again. If everything is ok, save your changes.

How to create a flash game: bring the game "to mind"

Now you can come up with an original name for your flash brainchild, write a short annotation. Use the splash screen designer to create a spectacular splash screen for your game. Save any changes you make as well.

Go through your own flash game from start to finish in order to find (or not find) errors and malfunctions in it, and it doesn’t hurt to take a critical look at your handiwork. It is very important that the game has logical and well-defined parts, like a good book or movie: the beginning, the development of events, the ending.

Send a clean version of your game to your friends - let the most honest critics evaluate what results you have achieved. Well, after that, you can already upload a flash game to the Web.

How to create a flash game if you have a desire, but no knowledge?

To those numerous users who are so concerned about this issue, we certainly want to give an answer. Remember that any knowledge cannot come from nowhere. Any new business has to start somewhere. Over time, you will begin to understand what kind of knowledge you lack to create games. You will begin to ask for advice, look for recommendations, read relevant literature, thanks to which you will begin to advance in your skill more and more. Do not be afraid of the new, otherwise you will never achieve what you want. Good luck!

A program for creating flash games without knowledge of programming languages. Allows you to create games from logical blocks and pre-prepared images.

Sometime, probably already a couple of years ago, the Game Maker program appeared on our website, which allowed you to make games with virtually no knowledge of any programming language!

Until now, this page has been one of the most discussed with us, and often in the comments there are complaints that it cannot be used to create games that could be played online. Today we will return to the topic of game development again and consider a similar program that can still make flash games - Stencyl!

Program Features

With the help of Stencyl, you can create 2D games of any genre, but most of all, the program engine is “sharpened” for various rpg shooters. Structurally, the program is a whole set of tools in which you can, if desired, create a game from scratch without using third-party applications.

We close the pop-up window with information about the new version of the program with the “Close” or “Don’t show this again” button (if we don’t want to see this window every time the program starts) and instead we get the following window:

Here we are offered to create our own account in the Stencyl developer community. In principle, you don’t need to create an account (for this, click the “Remind Me Later” button below), but registration gives you the opportunity to download additional templates and actions from an online storage called StencylForge, so it won’t hurt :). To create an account, click the "Create an Account" button and go to the registration form:

Here we fill in the standard fields with your username, password (twice) and email address, and then click the "Sign Up" button. If everything goes well, then the interface of the program's start window will finally open in front of you.

Start window interface

Externally, the workspace of the Stencyl start window is divided into several zones:

At the top is traditionally the menu bar and toolbar. All the main settings and control buttons are collected here. Under the toolbar, we have a small narrow gray stripe. It contains tabs (yes - the Stencyl interface is multi-tab, which is very convenient) and buttons for quickly switching between them (on the right).

The main workspace is divided into two parts: on the left there is a navigation bar for sections of the program, and on the right - the main content (on the main screen - a list of games), which changes depending on the currently active mode of operation. At the bottom there are a few more additional buttons that allow you to:

Open the folder in which Stencyl stores all the resources of the created games and the games themselves (the "View Games Folder" button in the lower left corner).
Launch a training course on working with the program (“Start Crash Course” on the green panel in the lower right corner). By the way, there is also a button next to it to hide the offer to undergo training (“Don’t show this again”).
Open the currently selected game from the list, which is similar to double-clicking on the game icon (“Open Game” in the lower right corner).

To explore the possibilities of Stencyl on your own, you can take a training course (and it would be desirable to pass it), as well as open one of the ready-made games that best suits your idea and see how everything works there. And I propose to study the work of the program on the example of creating a game about the adventures of the symbol of our site and its virtual resident - Frida Best!

How to start creating a game in Stencyl

If you, before going to create your game, looked at the standard examples of games on Stencyl, you might have noticed that basically they are all quite simple, single-screen and have a side view. We will make a dynamic top-down shooter with mouse shooting! Everything is like in "big" games :).

For your project, you can change the logic of one of the ready-made templates, but we are not looking for simple ways and therefore - only "from scratch", only "hardcore" :). To do this, click on the workspace toolbar (or in the "File" - "Create New" menu) the "Create a New Game" button and get into the following window:

Here we can choose a game template by genre with a pre-selected set of functions and actions for your project. However, we will create a game from scratch, so select the "Blank Game" item and click the "Next" button.

In the next step, we need to make some basic settings:

In the “Name” field, we need to specify the name of our game, and in the “Screen Size” section, set the dimensions of the playing field by specifying its width (Width) and height (Height) in pixels. After that, click the "Create" button and go directly to the game editor interface:

By default, the “Dashboard” tab opens in front of us, on which the entire resource tree of the game is collected on the left, and on the right is the workspace itself. Here, I think, it would be appropriate to make some clarifications on the structure of the "tree".

It consists of four branches, the first two of which contain standard resource sets (RESOURCES) and logic (LOGIC), and the last two can optionally store manually loaded resource packs (RESOURCE PACKS) and extensions (EXTENSIONS).

The master branch here is the RESOURCES branch. It contains the following sections:

Actor Types - sprites of all game characters are stored here and the actions of their animation and interaction with each other are configured.
Backgrounds - in this section we can store all the necessary backgrounds for the game. Moreover, the background can be both for the background (background) and for the foreground (foreground), which allows you to superimpose backgrounds on top of each other, achieving, for example, thereby the effect of parallax.
Fonts - a section where we can upload various beautiful fonts to create original inscriptions. However, it is worth considering that Stencyl can only work with the English character set, so to add Russian letters to the font file, we need to replace some of the Latin characters with them.
Scenes is a place to create and edit game levels. It is here that we can set the appearance of any stage and place all the characters, bonuses and other game elements.
Sounds - respectively the repository of all the sounds used in the game.
Tilesets - a special branch that stores tiles - special sprites that we can use to build game levels.

Creating and configuring tiles

There is no unambiguous opinion about the sequence in which to implement this or that game. At this point, it’s convenient for anyone, but I would recommend the following algorithm:

Create the first scene - create the character - create the enemies - create the power-ups - create the rest of the stages

To create a scene in Stencyl, you need to draw its appearance in the Scenes branch. However, in order to draw, we first need to have blocks that we can "draw" with. These blocks in the program are called tiles (tiles) and are stored in the Tileset section:

A tileset is a simple matrix of images that you load into it. You can upload either a ready-made matrix (a picture consisting of several equal-sized images in one or several rows) or supplement existing sets with separate pictures.

First we need to create a new set of tiles (the "Create New" button in the Tilesets section), after which we will see a window, as in the screenshot above. To upload an image, we need to click the "Choose Image" button and select a pre-prepared file with the desired image (s) in the Explorer window that opens.

When the image is loaded, we will set its layout parameters and dimensions in width and height, after which (if everything is displayed correctly) you can add the image to the set by pressing the "Add" button.

For each image (tile) in the matrix, you can configure the parameters of interaction with game characters and objects. To do this, select the desired tile and access the following window:

The "Collision Bounds" section will open at the top of the right pane. Here we can choose an arbitrary shape that indicates the boundaries of the interaction of our object with game characters. By default, all tiles have the "Square" parameter (square), which makes the tile completely impassable and solid. If you need to make the tile "transparent" for the characters (for example, the floor), then it is enough to set the "No Collisions" parameter.

In addition to borders, animation can be set for each tile by adding frames using the "Insert Frames" button on the bottom panel. By default, the animation speed is 100 milliseconds, but this number can be arbitrarily changed for each frame.

To do this, just double-click on the desired frame with the left mouse button and in the window that opens, change the delay indicators as we need. It is also possible to correct the selected frame using the built-in graphic editor, which is opened by the "Edit Frame" button.

Scene rendering in Stencyl

After the set of tiles is formed, it is logical to proceed to the next step - the formation of the finished game space from the added images. You can do this by clicking the "Create New" button in the Scenes section. After pressing the button, we will get to the scene settings window:

Here we definitely need to set a unique name for our scene in the “Name” field, specify the dimensions (width and height in tiles (by default) or pixels), and optionally (that is, at our own request) set the background color for the new scene. Click "Ok" and get into the level editor:

It looks like a graphics editor. In the center is the workspace, where we draw our level. To the left and top are small toolbars. On the right are the palette panels, the selection of tile sets and the layer management. Now how it all works...

First of all, we draw the background of our workspace. To do this, on the right panel, activate the “Palette” tab and on it the “Tiles” tab and select the desired tile from the list presented. Then, on the left panel, select the Pencil tool and draw the desired areas with the selected tile.

Due to the support of layers, tiles can overlap each other, so it is most logical to organize the level, taking into account the fact that, for example, on the “Layer 0” layer we will have a background substrate, above, a layer with obstacles and characters, and even higher - layer with various counters and game indicators.

Layers can be controlled using the buttons under the "Layers" panel. There are buttons for creating, deleting, moving and renaming layers. In addition, any layer can be hidden or shown by clicking on the button in the form of an eye to the right of the layer name.

Character Creation

After we have our first scene created, it's time to populate it with various playable characters. In Stencyl they are called "actors" and are stored respectively in the "Actor Types" section. Actors are created according to the same principle, so we will consider this process using the example of creating the main character of our game - Frida.

To add a new actor, just go to the aforementioned Actor Types section and click the “Create New” button there. We are already habitually asked again about how we want to name the new game object, after which the character animation editing window will appear in front of us:

Here, on the left side, a list of the added animations of the actor is displayed (the default is an empty frame "Animation 0"), and on the right side there are tools for adding and configuring these same animations.

Select an empty animation (or add a new one by clicking on the button with a plus at the bottom) and click on the “Click here to add a frame” field on the right side. After that, the window for adding images will open, which is similar to a similar window for adding new tiles to the set. Click the "Choose image" button, select the desired image and adjust its layout and dimensions (if necessary).

When everything is set up, click the "Add" button in the lower right part of the add window - the animation should be displayed as a preview in the left section:

Now we just have to adjust the frame rate (double click on any of the frames) and some additional parameters, such as the name (Name) of the animation (very useful for complex projects), looping (Looping) playback (active by default), synchronization and basic point (Origin Point) origin of the sprite (by default - the center).

On the bottom toolbar in the right section we will find a series of buttons. They allow:

add new frames to the animation (Import Frames);
edit the selected frame in an external editor (Edit Frame (External));
create a frame in an external editor (Create Frame (External));
edit the frame in the built-in editor (Edit Frame);
remove frame (Remove Frame);
copy frame (Copy Frame);
insert a frame (Paste Frame);
move one frame back (Move Back) or forward (Move Forward).

Setting the parameters and behavior of the characters

Above, we made an animation of Frida's run, using only two frames for this, which are, in fact, the same figure reflected horizontally. Now we need to make sure that we can use the mouse and keyboard to control the movement of our heroine, and also that she adequately reacts to collisions with obstacles that we have drawn on the stage.

First of all, let's set up collisions. To do this, look at the line under the list of open tabs and find the “Collision” button there.

By default, the collision area is a square circumscribed around the entire animation sprite. That is, the collision event will occur over the entire area of the object. However, in practice, our picture most often contains additional elements (for Frida, for example, a blaster), which, according to the idea, should not interact with anything. It is with the help of this section that we can set up all the collision areas.

To begin with, we will reduce the area around Frida to the size of only her body. Here we need to take into account that we cannot move the area with the mouse, and four numerical parameters in the “Current Shape” section are used for settings. First, we set the offset of the area horizontally (from the left edge) and vertically (from the top), and then we specify the new width and height of the collision area.

Below there are a few more parameters grouped under the "Physical Properties" section. Here we are faced with the checkbox "Is a Sensor?" and the concept of groups.

If you activate the “sensor” flag, then the selected area will no longer be a physical object: the character or part of it will become, as it were, “transparent” for various obstacles, but at the same time it will retain the ability to launch any actions under certain conditions.

An example from real life can be modern signaling using lasers: we don’t see the laser itself, but if we touch it, the notification process starts that we climbed the wrong place :).

Now, what are the groups for ... Suppose that our character does not have a blaster in his hands, but a sword with which he (more precisely, she :)) chop enemies into cabbage (by the way, Frida has a laser blade in the source code;)).

The task is that when you touch the enemy with a sword, the enemy dies, but if we missed, and the adversary hit Frida, then some of her energy was taken away. And the main problem here is that the impact animation we have, in fact, is a picture in which both Frida and the sword are present at the same time ...

If we bind the action of the sword to the picture, then whoever touches our heroine when playing the animation will die from the blow. And just in order to divide the picture into several objects with different capabilities and parameters, the group mechanism was invented.

By default, we have only one area, which corresponds to the character itself ("Same as Actor Type"). However, using the drawing tools above the main work area, we can create new virtual objects and set a group for them using the "Edit Groups" button.

With collisions, perhaps, that's all, and now I propose to deal with the most basic - setting the actor's behavior on stage. To do this, we need to go to the "Behaviors" section:

By default, there are no actions here at the beginning, but we can add them by clicking the "Add Behavior" button in the lower left corner. You will see a list of ready-to-use functions for controlling a character or interacting with other actors on stage.

For example, I chose the “8 Way Movement” behavior, which involves the movement of the actor in a circle in any direction. Now we select the added action in the list on the left and on the right side we can configure its parameters.

Adding actors to the stage and testing the level

If you followed the instructions, then you should already have the necessary minimum resources for the game. It remains to learn how to add actors to the stage and test the performance of the game space.

We return to the editor of the scene created earlier and re-activate the palette (Palette), but now instead of tiles, turn on the “Actors” tab (Actors). We will see a list of previously created characters that we can add to the scene using the Pencil tool:

We have one main character, so just one click with a pencil is enough to add her to the scene. And now the moment of truth has come - the first test! To start the pre-compilation of the project, just click the "Test Scene" button in the upper right corner of the tab with our scene. After some time (the first compilation always takes longer), we can admire our work in the flash player:

In addition to the player itself with the game on the side, we have a window showing the logs of the game. With their help, we can quickly find problems in the work and try to fix them.

As you can see, we can already move Frida in different directions, but the stage itself remains motionless and as soon as our heroine goes beyond the edge of the visible part of the stage, she disappears ... Disorder :). You can solve the problem by adding the “Camera Follow” behavior to Frida or by setting the desired parameters using events.

Also, it would be useful to replace the standard cursor with something more suitable, for example, a crosshair. We can implement this by adding a new actor as a crosshair, removing its collision area and attaching it to the scene using the standard "Custom Mouse Cursor" behavior:

Event system in Stencyl

Simple games in Stencyl can be created using only standard behaviors (Behaviors), however, if we need something non-standard, then we already have to think about using events that are configured for actors and scenes in the "Events" section:

In fact, behaviors (Behaviors) are also built on the basis of events, but they also have a visual interface, which makes editing easier. Here we are dealing directly with functional blocks that perform certain actions.

The event window is divided into three sections:

The left section contains a list of events and buttons for managing (creating/deleting/moving) them. To add an event, we need to click the "Add Event" button, then select the desired group in the drop-down list and specify the specific function we need. To the right of the created event, there is a checkbox that allows us to deactivate it if necessary.
In the right section, we have a list of all available actions, grouped into 10 sections, each of which is activated by a corresponding button. For greater convenience, the actions in each section are sorted into thematic tabs and have their own unique color. At the bottom there are three more tabs. By default, the tab "Palette" (palette) is active, on which lists of actions are located. The second tab - "Attributes" - serves to display local variables (more on them below), and the third - "Favorites" - serves to display your favorite actions.
The central section is the workspace. This is where we form the final examples of character behavior using various combinations of action blocks and events, according to which these actions occur. Combining occurs by simply dragging the blocks onto the workspace and then editing the parameters specified in them. It should be borne in mind that the function is made up of only those blocks that are combined with each other and included in the main event block. Thus, in order to temporarily remove certain currently unnecessary (but useful) combinations, we just need to move them from the general structure to a free space. If the actions turn out to be completely unnecessary over time, then they can be completely deleted by moving them to the trash, which is located in the upper right part of the workspace.

Actually, we have already described the algorithm for creating events, but, alas, I cannot give any universal recommendations - for each game, the events will be different and there can be quite a lot of them ... As an example, you can look at the source codes of the game about Frida, which you will find in the archive with the program, but this is only a guideline, since working on events is your personal creativity :).

Setting physics and properties

You and I have already covered a lot of things, but have not touched on some additional topics that can be very important when creating games - I'm talking about setting up all sorts of properties of our actors and scenes. These parameters are stored in the last two tabs. And the first one is "Physics":

For scenes and actors, the physics settings tab looks different. There are only two parameters on the scene physics settings tab - horizontal and vertical gravity settings. The appearance of the physical parameters settings section of the actors is shown in the screenshot above and consists of five tabs with different options:

General tab. Here we have three parameters: the type of the actor (stationary, platform (can move according to the given rules, but other actors cannot move it) and movable), the rotation of the actor (can rotate or not), and the influence of gravity.
Tab "Heaviness" ("Weight"). On this tab, you can set the mass of the virtual object and its inertia.
The "Material" tab allows you to set characteristics for the actor that will simulate the behavior of a real object made of a particular material. We have the option to select one of the presets from the "Preset Materials" dropdown list, or manually set the friction and elasticity characteristics of our actor.
The Damping tab gives us the ability to fine-tune the parameters of the actor's interaction with the environment by introducing such values as linear (for example, to air) and angular (during rotation) resistance.
The "Advanced" tab gives us access to various additional settings that are not included in the previous sections. Here you can activate a simplified physics model (to optimize the game), automatic detection of collision areas, re-collision events and the ability to apply a pause to the actor.

We figured out the physics, and now let's look at the properties that are called by pressing the "Properties" button:

As in the previous case, the properties will be different for scenes and actors. In the scene properties, we can specify its name (“Name”), dimensions (“Size” section) and background color (“Background Color”).

In the properties of an actor, in addition to the name, you can specify a description (the “Description” field) of the object, a group to which the actor belongs (the “Choose Group” section) and an animation layer for mobile devices (you can not change anything here, since the free version of the program does not allows you to export games to formats for mobile phones.

But this is not all the settings that are available to us in Stencyl. General game settings are available to us by pressing the "Settings" button on the main toolbar:

In the settings window, on the left is a list of parameter groups, and on the right is the main area (sometimes divided into several tabs) containing all kinds of options. Here we are interested in the following sections:

"Settings" ("Settings"). The first group of settings, which allows us to personalize our game a bit. This group contains three tabs. On the first of them ("Main") we can give the game a new name, a short description, as well as a preview image and an icon. On the "Display" tab, the final size of the game space is configured, and on the last one ("Advanced"), it is possible to enable simplified physics and set anti-aliasing parameters.
"Loader" ("Loader"). In this group, we can partially (taking into account some limitations of the free version) customize the appearance of the preloader (loader), which will be displayed before the game is fully loaded. There are already four tabs. On the first (“General” - general) you can specify a link to your site, enable copy protection of the game on other resources (we list the list of allowed sites in the second line separated by a comma) and one of the loader skins. On the Appearence tab, we can set the bootloader screen color and background image. Using the “Bar Style” tab, you can specify the size of the loader strip, and “Bar Color” allows you to set, respectively, its colors.
"Attributes" ("Attributes"). This group of settings is one of the most basic! Here you can control the global variables used in the game (more on variables in the next section below).
"Controls" ("Management"). As the name implies, in this group we can reconfigure and add keyboard buttons with which certain game actions will be performed.
"Groups" ("Groups"). We have already considered the mechanism of groups a little higher. Here we have the opportunity to see all created groups and edit them.

Actually, that's all the settings that we will need to create flash games in the free version of Stencyl. But since this section is about settings, it would be a sin not to mention the parameters of the program itself. You can access them by activating the "Preferences" item in the "File" menu:

The program provides support for a multilingual interface, however, at the moment there is only English localization, so we went straight to the second tab - "Workspace". The fact is that in the third version of Stencyl, a function appeared to automatically generate adaptive images from loaded sprites.

And by default, the sprite is doubled, which leads to a deterioration in the quality of graphics. To prevent this from happening, I advise you to disable image resizing by selecting Standard (1x) in the Scale field.

I also advise you to look at the third tab - "Editors". Here you can associate actions for processing graphics, sound and text with external more advanced (rather than those built into Stencyl) editors.

A little about variables

We have considered almost all the nuances of working in Stencyl, but we have not touched on one of the most powerful features - working with variables.

Variables in any programming language allow you to operate on various events, expressing them through certain numbers (numerical variables), conditions (boolean variables), texts (string variables), etc. The main feature of variables is the ability to replace any value within predetermined limits. A simple example of a variable: an attendant in a class. Today it may be Ivanov, tomorrow Petrov, and the day after tomorrow Sidorov :).

In our case, the “on duty” variable can take one of three values, which will be automatically substituted depending on the specified condition (for example, the order of surnames in the list).

In Stencyl, variables can be local or global. We can declare local variables within the framework of some event or behavior, and they will work only for the specified actions. You can create a local variable in the event editor by calling the "Attributes" section:

Here we have several tabs:

The "Getters" tab allows you to set variables that will receive a value from any calculations or direct instructions.
The "Setters" tab makes it possible to set any values for the previously created variables.
The “Games Attributes” tab stores blocks of global variables and, if desired, allows you to add new ones (although we will consider how to do this better below).
The Lists tab gives us the ability to create arrays of data.
The Functions tab is used to organize the created functions.

The algorithm for creating a local variable is simple: first, create a new block in the "Getters" tab, and then find the newly created variable in the "Setters" tab and add a block with it to the workspace, equating it to some game parameter. That's all - the variable is declared and has received a set of valid values.

Global variables (Game Attributes) in Stencyl are set immediately for the entire game and can be called in any event or behavior. As mentioned above, you can create them in the "Attributes" section on the "Game Attributes" tab:

However, it is much more convenient to view and manage all the created variables using the "Attributes" section in the settings (the "Settings" button on the toolbar or "Show Game Attributes" on the "Game Attributes" tab in the event editor):

Here we have the entire list of global variables and it is possible to create new ones by pressing the "Create New" button. For a new variable, we can immediately set the type (numeric, text, boolean or array) and the starting value without leaving the window, which is very convenient in my opinion.

Using global variables, it is very convenient to implement various counters, since the data in them is saved when the player moves to new levels and is stored in memory as long as the game itself is turned on. Also, I recommend using global variables to keep track of the animation being played.

Having given the actor a specific sprite in events, we can assign a specific value to this sprite in a variable below (for example, a serial number or animation name). Thus, by binding an action to a variable, we can call it at any time by setting this variable to the desired value.

Publishing, importing and exporting games

Finally, we, albeit briefly, got acquainted with the basic principles of working with Stencyl. Suppose we created a game, tested it and everything turned out to be working. Now it's up to you to turn the game from a project into a real SWF file that can be posted on the Internet. To do this, we just need to open the "Publish" menu and click the "Flash" item in the "Web" list.

The compilation of the game file will start, after which a request will appear where and under what name to save the resulting flash file. We save and that's it - the game is ready :).

The reverse process is to import the game. Thanks to the import function, you can open game projects of other users, for example, to see how they implement this or that function;). You can also import a game from the File menu. Upon successful import, the game will appear on the main screen in the list of projects. However, here it is worth making a small reservation.

The problem is that the new Stencyl 3.0 is only partially compatible with projects created in earlier versions, so the functionality of the game project you imported may not be complete or, in the worst case, the game will not start at all, giving an error. You will have few options - either look for and correct errors, or put up with it and leave everything as it is :).

Advantages and disadvantages of the program

ease of creating games with little or no programming skills;
the ability to create games of almost any genre;
a large collection of ready-made behaviors and game resources;
the ability to exchange game projects;
there are no restrictions when creating flash games.

rather high resource intensity of both the program itself and the created games;
a limited number of objects on the stage - the more, the slower the game runs (up to failure to start);
there is no support for Cyrillic fonts (you need to edit the vector images of the Latin alphabet, replacing them with the necessary letters);
incomplete compatibility of the new version of the program with game projects created in earlier versions.

findings

Of all the programs for creating flash games that exist today, Stencyl is the most reasonable compromise between ease of operation and breadth of possibilities. The good news is that the functionality of the designer in the free edition is practically unlimited, which allows you to almost fully implement any idea.

However, do not forget about "almost" ... The fact is that Stencyl itself works on the basis of a JAVA machine, which, as you know, is quite demanding on resources. If we add to this load also the load that the game creates, it turns out that for normal operation we need a modern powerful computer.

This is the first "almost". And the second is the implicit restriction on the number of objects on the stage, which I have already mentioned in passing. Even if these objects are just tiles, but there are a lot of them, the game may give an error during testing and not start until you reduce their number.

In summary, we can say that Stencyl will be an ideal engine for creating all kinds of casual flash games and side-scrolling shooters. Moreover, having practiced creating flash games, you can purchase one of the types of licenses and, with a little change in the mechanics, port your game to formats supported by Android and iOS. And this is a real way to earn money by placing the game on the Play Market or the App Store!

Finally, it remains only to wish good luck to all those who decide to seriously engage in game development. Let your algorithms work the first time, and the compiler sits and is silent in a rag when you start your games :).

P.S. It is allowed to freely copy and quote this article, provided that an open active link to the source is indicated and the authorship of Ruslan Tertyshny is preserved.

* Used programs: Flash CS3, Photoshop CS3
* Complexity: medium
* Estimated lead time: 3 hours

A portfolio site is of great importance for any contemporary artist, photographer, designer, and even musician. He shows a serious approach to business and professionalism. Today we will show how you can create an original and stylish photo portfolio based on the modern Flash content management system Moto CMS.

We will use the standalone version of Moto CMS, which contains various utilities, components, built-in examples, and clean site templates with different structures. And we use the simplest template, that is, we will create a photo portfolio website from scratch.

In this guide, we will cover the following topics:

* Creation of containers.
* Create slots (Close button, simple button).
* Create modules (music player and image gallery).
* Edit site preloader
* Creation of site pages and filling them with content.

We will also talk about the features and functionality of the Moto CMS Control Panel.

We will need:
* Adobe Photoshop;
* Adobe Flash CS3;
* Offline version of Moto CMS (free trial);
* Website design c. PSD format.

Preview of the final result

Step 1: Download Moto CMS Files

To start building our photography portfolio site, you need to download the standalone version of Moto Flash CMS. In order to repeat all the steps from this guide and understand the capabilities of Moto CMS, the trial version will be enough.

Step 2: Brief overview of Moto CMS files

Here is a quick overview of Moto CMS files and folders:

* Components. This folder contains mxp components managed by Adobe Extension Manager.
* control panel. Contains all Control Panel files.
* docs. This folder contains the API documentation.
* Examples. Contains 4 examples of ready-made flash sites, from the simplest to the most complex, with a gallery module, a news module, a music and video player, a contact form, etc.
* Templates. 5 templates that you can use to create a site based on Moto CMS. Each template has the necessary set of files and differs in its structure. Today we will be using one of these templates, specifically template #1, as the base of our photo portfolio.
* readme file, which describes how to get started on creating a site with Moto CMS.

Step 3: Run on Localhost

Our next step is to launch the website template that we're going to build our portfolio website from. To do this, we need a local web server. We are using WampServer. It allows you to build web applications with Apache, PHP and MySQL databases.

To launch site template No. 1, simply upload the contents of the folder to the local server template_01 from the /templates/ directory, as well as the contents of the folder controlPanel.

After that, we go to the Moto CMS Control Panel by entering our URL in the address bar of the browser, adding /admin at the end

Note: You won't be able to view the site right now because it doesn't contain any pages yet. A 404 error page will appear.

Step 4: Editing config.xml

All we need to do is change the width and height of the site and set the background color.

The size of our project is 980×800 pixels. In order for the size to change on the big screen, we need to set "100%" for the width and height of the site. And in order for it to be displayed correctly on a screen with a small resolution, we must specify the minimum width and height of the site (scroll bars will appear). The background color is black (#000000).

Step 5: Change style.css

Now we have to open the style.css file and set the background color (black). Everything else can be edited using the Moto CMS Control Panel.

Step 6: Create the preloader

The source files moto.xfl and website.xfl are in the flamoto and flawebsite folders, respectively.
The site preloader should be created in moto.xfl. The preloader can be a simple clip with 100 frames.

In the Actions panel of this clip, we write: “Stop ();” for the first frame. Then we animate the rest of the frames as we like.

We also write “Stop ();” in the actions of the first frame of the timeline in fla.

Don't forget to specify site dimensions (minimum width and height) in moto.fla file properties.

Our next step is to create a nice preloader disappear animation. On the last frame, we have to start the website by activating the “showWebsite()” function.

Open the website.xfl file and update the preloader.

Step 7: Site Background

Open the Moto CMS Media Library (Settings > Media Library) and along with other necessary images (for the main page, main pages or gallery), upload a background image using the “Add Media” button.

After that, return to the Control Panel, create a new page and insert a background image using the "Photo" button. Drag the image and center it.

The font manager allows users to manage site fonts, which are stored as SWF files and can be downloaded.

Before loading any font, we must first convert it to SWF format. For this we will use Online Font Creator is a handy online application developed by the MotoCMS team that allows you to easily convert TTF and OTF files to SWF. All we need to do is select the required font file with .TTF or .OTF extension, add it to the Online Font Creator, click the “Create Font” button and download the finished SWF file, after which we can use it on our portfolio website .

Create a website name and slogan

Once the new font is uploaded, you can create the site title and slogan using the Text tool and apply the desired font. To create the slogan, we use the font Tahoma, size: 10, color: # 727272. After that, adjust the name and slogan of the site in accordance with the design in .PSD.

Step 9: Adding an Image to the Homepage

We will place the image of the gallery on the main page of the site. To do this, select an image from the Media Library by clicking "Photo" in the left toolbar. If necessary, adjust its location in accordance with the design of the main page.

Step 10: Create the Bottom Menu

Using the Shape tool, create a gray narrow rectangle and use the Text tool to create buttons on it. Adjust everything according to the design of your site.
Save all changes and see the result by clicking on "Preview".
You can also use the built-in menu module to create a menu.

Step 11: Create Content Containers

Note: Containers are clips in website.fla where content can be added dynamically. They can be of 4 types: 1) a container with objects that are visible throughout the site, 2) a container with layout objects; 3) container with page objects; 4) container with popup objects.

The #1 site template we have chosen has two containers by default: a container with objects visible throughout the site and a container with page objects. If we open the website.fla file we will see them:

These containers are written in the structure.xml file. Make sure the width is 980 and the height is 800px.

Container with objects that are visible throughout the site:

Container with page objects:

To make site elements such as the background, site name, slogan, and bottom menu with a gray box visible on all pages, we must place them in a site-wide object container. We can easily do this using the Moto CMS Control Panel. Simply click on the desired element and select its location - Website . (On The Entire Website).

Step 12: Create the About Us Page

Create an empty page

In the upper left corner, click the "Create" button, which will allow us to create a new page.

Connecting the necessary menu buttons to the new page

To do this, we return to the main page and connect the menu button to the new page. Simply highlight the menu button text and click on the link icon on the right to open the link editor. In our case, the Portfolio menu button links to the main page of the site, and the About Us button links to the About Us page.

Adding a Background Image to the About Page

We decided to add a black background to the page. To do this, go to the Media Library by clicking the "Photo" button on the left panel, select a pre-loaded image (a regular black rectangle) there and adjust its location on the page in accordance with the design.

Adding Text to the About Us Page

Adding text information to a page using the Text tool. The built-in WYSIWYG editor shows everything you do, so text formatting is a breeze. Adding a contact address is also easy enough, you just need to open the Link Editor and enter an email address.

When you're done, don't forget to place the About Us page elements in a container with page objects. Select each element one by one and select the placement: Page (page content).

Step 13: Change The Preloader Image

You may have noticed white circular preloaders as you navigate through the pages. To set them up, open the website.fla file and go to the library. Right click on the preloader and select Properties.

In the symbol properties window, you can select the “Edit Base class” item and then animate the preloader the way you want. We will leave the preloader empty and delete the graphic image.

Step 14: Website Animation

Finally, we come to the most interesting part of our guide: site animations. At the moment, as you may have noticed, the site is static, since not a single container is animated. So our next step is to animate the containers and add other animations to bring our site to life.

Animating default containers

The content container is easy to animate along the timeline. Open the website.fla file and create a fade in animation for each container.

First, let's animate the main container with objects visible throughout the site. This is the website_holder_1 layer. We're doing a simple animation with transparency, but we'll decorate it with something. Create a second keyframe on the layer, set Alpha 0% for the first keyframe (make it transparent), create an inbetween frame from first to second, and then add easing.

Let's create an animation for the container with page objects (page_1_holder_2 layer) in the same way, but make it appear a bit later.

So we'll add two more keyframes on the layer, make the container transparent at the first and second frames, and create an easing inbetween from the second keyframe to the third.

When we compile and load the site, we will see that each element appears already animated. But when moving from one page to another, there is no animation, only unusual blinking. The second part of the timeline is responsible for this.

This is how we make the animation of the appearance and disappearance of the container.

Since the font of the text is from the system fonts, we need to change the blend mode from the normal layer to the level for all movieclip instances on the container layers.

We create additional containers and animate them.

For a good flash site, this animation is not enough, so we will also make other parts of the site animated, such as the top (highlighted in yellow in the image below), the bottom (highlighted in green) and the content itself (in the image in the red box).

Since the top and bottom parts lie at the level of the entire site, we will add two containers for these two parts. Before adding containers, we must determine their size and location. This is easy to do with the Slice tool in Photoshop.

The top part has the following dimensions: x=0, y=0, width=980, height=120.

Bottom zone: x=0, y=765, width=980, height=35.

The top container will contain the site name, the bottom container will contain the menu, and they will display differently. Also, they will stick to the top and bottom of the screen respectively when going full screen.

After determining the dimensions of the containers, we open the structure.xml file and add new containers (at the site level), specifying their coordinates, width, height and depth.

After adding the containers to the .xml file, we need to create them in the website.fla file. Open website.fla file and create new layers for our containers. The order of the layers should match the depth values we set in the xml file.

We can copy the empty movieclip from the website_holder_1 layer and paste it into website_holder_3 and website_holder_4.

We set the same coordinates in the clip as specified in the structure.xml file.

For the 3rd container: x = 0, y = 0;

For the 4th container: x = 0, y = 765.

Since we copied the clip, the old names remained. We change them according to the ID so that they are easy to find.

The same must be done for container 4.

On the timeline, we set the first keyframe for containers 3 and 4 so that they start appearing later than the container with the objects of the entire site. We then create the second keyframes and animate the inbetween frames. The first keyframes contain the start position of the containers, and the second keyframes contain the final position of the containers in the site. The main container appears from the top of the screen, so we move it to the first keyframe; the bottom container is on the bottom side, so we move that to the first keyframe as well. And we also add easings to animate the inbetweens.

Here's what we got:

After that, we need to add the following code on the actions layer at the level of the first animation keyframe of our containers.

Then we compile the site and update the Control Panel.

Place objects in containers

When you select any object, you will see that two new containers appear in the list of possible placements in the drop-down menu: the top and bottom.

The site name with the slogan must be placed in the top container, and the site menu with a gray rectangle in the bottom one.

Change the content of the bottom container

Now it's desirable that on a large screen, the bottom container sticks to the bottom of the screen. To do this, we must move the animation of the container to another clip, because, as you know, we cannot move the animated clip programmatically (the animation will not work). Let's call this clip website_holder_4_c.

After that, let's go to the main scene, click on the first keyframes of containers 3 and 4 and edit the code.

After compiling the site, you can see that the bottom container sticks to the bottom of the screen no matter how we resize the screen. If the screen resolution is too small, then the bottom container will not overlap with the content of the site, and will stay in place.

Step 15: Animate the Content Container

In order to animate the content of the site, we will need to animate the container with the objects of the entire site in the same way as we did for the top and bottom containers.

Step 16: Create the Contact Page

Before creating a new page, let's update the page template. Let's make the template for all new pages, the "About Us" page. Right-click on the About Us page and select Update Page Template.

After we have updated the page template, click on the “Create” button, enter the page name, title, assign a URL and select its location in the structure of your site, as shown below, in the screenshot.

The "Contacts" page is ready. Now it remains to edit its content using a convenient WYSIWYG editor, and use the link editor to connect it to the corresponding menu button.

Step 17: Create a Simple Slot

In Moto Flash CMS, slots play the role of animated objects. The slot may contain a large number of animated features that can be controlled directly from the Control Panel.

First we will try to create a simple slot, and then improve it.

Let's start with the "Close" button, add it to the site as an image, apply some effects to it, and assign the "Go to Page" -> "Home" action.

Animating the close button is not difficult at all because we will do it using a slot. Let's create a slot in the website.fla file. To do this, we import the image of the "Close" button into the library. In the Slots section, we need to create a new movieclip and name it CloseButtonSlot.

Let's set the class as CloseButtonSlot. There is no need to create a new class, it is enough to inherit the AbstractMotoSlot class. Just copy: com.moto.template.shell.view.components.AbstractMotoSlot and paste it into the Base Class field.

We then add a CloseButtonIcon image to the stage (CloseButtonSlot MovieClip must be open) and convert it to a clip called CloseButtonIcon. Since we inherited our slot from the AbstractMotoSlot class, this gives us the main animation. Now we will make a nice expand/collapse effect.

The next step is to create a new layer and create keyframes where you need to put "Stop ();". Place the main labels “over” (between the first and second stop frames) and “out” (between the second and third stop keyframes) – see screenshot:

We create the same key and in-between frames on our clip layer.

For example, our "Close" button will rotate clockwise when the mouse is hovered over it and counter-clockwise when it is removed.

Let's add rotation brightness and easing for the motion animation.

After the animation is done, we compile the website.fla file with our new slot (Ctrl + Enter).

In order to work with the slot using Moto CMS, we need to specify its parameters in the file: structure.xml:

librarySymbolLinkage=” ” – export movieclip slot (Class name).
animated=”true” – an attribute that specifies whether the slot is animated or not.
resizable="false" - whether there is logic for resizing the slot or not.
locked=”false” – whether the slot should be displayed in the Control Panel or not.
– slot name in Control Panel
– slot properties that extend the functionality. We will not use it in this example.

home > Tests