Creating flash drives and animations in SWF Text. Best Practices - A Guide to Creating SWF Applications How to create a swf file

A couple of times already I have to sweat over a not quite standard task: there is a flash banner (a file in .swf format) that needs to be made a link ... In general, according to Feng Shui, such things are done in the flash itself during the development of the banner, and the banner itself acts as a link without wrapping it in a tag . But, apparently, often flashers forget to ask the customer where the banner should lead, and this matter is shifted to the layout designer. And this is where the problem arises.

Option 1 (non-working). On the move comes the idea of stupidly wrapping the banner with a link. But if you just wrap the code of the flash banner itself in the link tag flash banner code , then, oddly enough, nothing will work for you: when you hover over the banner with the cursor, the link in the status bar will not be visible, and clicking on the banner will give nothing .

Option 2 (non-working). A sophisticated layout designer will go further and try to make the link blocky and position it absolutely right on top of the banner, setting its z-index to a larger size. But, oddly enough, it won't do anything either. It's time to outline the problem: Flash objects by default have an infinite z-index, overlapping any object, even absolutely positioned above them.

Option 3 (partially working). To spare flash from having an infinite z-index "a, the developers of flash" a gave us a handy parameter: Or just wmode="opaque" if you embed flash via .

Here we have the following option:

But that's not all! After all, this option, if there is no text in the link, strangely refuses to work in IE 6-9 (if there is text in the link, then this text over the flash banner will be quite clickable in IE), and as usual for a donkey, we need special crutch...

Option 4 (100% working)

For option 3 to work in IE, you need a unique crutch - set a transparent background for the link using a one-pixel transparent image (in this case, s.gif):

This option works in all popular browsers. I personally checked on IE7-9, current versions of FF, Safari, Opera.

Understand the basic structures of code written in AS3. There are three main parts to any AS3 code:

Variables. They store data (numeric, text, object, and many others). Variables are defined by var code and a single word.

event handlers. Look for certain events to be executed and report them to other parts of the program. This is necessary for the player to enter and repeat the code. Typically, event handlers call functions.

addEventListener(MouseEvent . CLICK , swingSword ); // "addEventListener()" - defining an event handler. // "MouseEvent" is the category of input expected to be executed. // ".CLICK" is a specific event in the MouseEvent category. // "swingSword" is a function to run when the event is executed.

Functions. Sections of the program defined by a keyword; they are called during the execution of the program. The code for a complex game may include hundreds of functions, while a simple game may contain only a few. Functions can be placed in any order, since they only run when they are called.
function swingSword (e : MouseEvent ) : void ; ( //Code ) // "function" - keyword, entered at the beginning of any function. // "swingSword" is the name of the function. // "e:MouseEvent" is an additional parameter indicating that // that the event handler is calling the function. // ":void" is the value returned by the function. // If no value is returned, use :void.

Create objects that the player will interact with. Objects can include sprites, characters, or video clips. In our simple game example, you will create a rectangle.

Set the properties of the object. To do this, open the "Edit" menu and select "Convert to Symbol" (or press F8). In the Convert to Symbol window, give the object an easily recognizable name, such as "enemy".

Locate the Properties window. At the top of the window is an empty text field labeled "Sample Name" (if you hover over this field). Enter the same name that you entered when converting the object to a symbol (in our example, "enemy"). This will generate a unique name that can be used in AS3 code.
Each "sample" is a separate entity that depends on the code. You can copy already created "samples"; to do this, click "Library" several times and drag the "sample" onto the "stage". Each time a “sample” is added, its name will change (“enemy”, “enemy1”, “enemy2”, and so on).
When you refer to an object in code, simply use the name of the "example" (in our example, "enemy").

Change the properties of the sample. Once a swatch has been created, you can change its properties, such as resizing. To do this, enter the name of the pattern, followed by ".", followed by the name of the property, and then the value:

enemy.x = 150; Sets the position of the "enemy" object along the X axis.
enemy.y = 150; Sets the position of the "enemy" object along the Y axis (the beginning of the Y axis lies at the top point of the "scene").
enemy rotation = 45; Rotate the "enemy" object by 45° clockwise.
enemy.scaleX = 3; Stretches the enemy object in width by a factor of 3. A negative value will flip the object.
enemy scaleY = 0.5; Cuts the object's height in half.

Learn the trace() command. It returns the current values for specific objects and is necessary to determine that everything is working correctly. You should not include this command in the game source code, but you will need it to debug the program.

Create a simple game using the information above. In our example, you will create a game in which the enemy will change size every time you click on him, and until he runs out of health.

var enemyHP : Number = 100 ; // Sets the amount of enemy health (100 at the start of the game). var playerAttack : Number = 10 ; // Sets the attack power of the player when clicking on the enemy. enemy. addEventListener(MouseEvent . CLICK , attackEnemy ); // The action of this function is directed directly to the "enemy" object, // that is, the function is only run when the object is clicked, // and not somewhere else on the screen. setEnemyLocation(); // Positions the enemy on the screen. // Runs at the very beginning of the game. function setEnemyLocation () : void ( enemy . x = 200 ; // Moves the enemy to the right 200 pixels from the left side of the screen. enemy. y=150 // Moves the enemy down 150 pixels from the top of the screen. enemy. rotation = 45 ; // Rotate the enemy 45 degrees clockwise. trace ("enemy"s x-value is" , enemy . x , "and enemy"s y-value is" , enemy . y ); // Displays the enemy's current position for debugging.) function attackEnemy (e : MouseEvent ) : void // Creates a function to describe an attack when an enemy is clicked.( enemyHP = enemyHP - playerAttack ; // Subtracts the player's attack power from the enemy's health. // As a result, the new value of the opponent's health is obtained. enemy. scaleX = enemy HP / 100 ; // Changes the width based on the enemy's new health value. // This value is divided by 100 to get a decimal. enemy. scaleY = enemy HP / 100 ; // Changes altitude based on the enemy's new health. trace ("The enemy has" , enemyHP , "HP left" ); // Displays lost health. }

Most users computer systems, one way or another, faced with Flash-animation. In this format, a lot of cartoons, banners on websites or even simple Internet games are made. But what exactly are SWF files and how are they created or edited if some changes need to be made to the finished project? This and much more will be discussed further.

What are SWF files?

Few people think about what a SWF animation file actually is, considering it to be an ordinary video.

In fact, the files themselves are compiled derivatives of the original FLA format, which, in turn, is a project in which you can see and change the original structure. Naturally, this requires some kind of editor for SWF files. But what? Today, after all, so many programs have been created for creating and editing Flash animation that it is quite easy to get confused in them.

How to open SWF file?

We will return to the editors a little later. In the meantime, let's consider how to open a SWF file in the simplest situation. There are at least two options: either use some software player that supports this format (KMPlayer), or start playback in a web browser.

In the second case, for correct reproduction, a prerequisite is the presence installed plugin Flash Player from Adobe or its equivalent in the form of a Macromedia Flash extension, which, in general, is the same.

The principle of editing the finished Flash-movie

Now a few words about how, in general terms, the editing of the finished project is carried out. The editor of SWF projects of the most primitive type will not be able to open the file just like that, since the finished SWF file, as already mentioned, is compiled and contains a minimum of information about the initial structure.

Thus, before the simplest editor of SWF files is used, the finished file must first be translated, so to speak, into a readable form. In other words, it needs to be decompiled into its original FLA form. For this, special utilities are used, which will be discussed separately.

The best editors for creating animation from scratch

Nevertheless, at the initial stage, both the simplest applications and entire professional-level software packages can be used to create a video (rather than editing it) at the initial stage.

It will not be possible to describe all of them, but among the programs designed for this, several of the most popular can be distinguished:

Alligator Flash Designer.
SWIS Max.
Adobe Flash professional.
Corel R.A.V.E.
Sony Vegas Pro.

Alligator Flash Designer

This SWF editor in Russian is the simplest of all presented below and is mainly intended for quickly creating animated banners that will be used on websites on the Internet.

There are not so many tools at the disposal of a novice web designer, however, there are about one hundred and thirty different effects, the ability to create animated text, drawings or insert sound. The interface is extremely simple and clear, so this application is very well suited for learning the basics of creating this type of animation.

SWISH Max

This animation file editor is very similar to the previous utility, although it looks a little more complicated for a beginner.

With it, you can create more professional work of good quality. Any user will be able to deal with it due to the fact that the application itself provides for the presence of video tutorials explaining the basics of creating animated videos.

Adobe Flash Professional

The Adobe Flash SWF editor is a professional-level software package that not everyone can master the first time.

There are so many tools in his arsenal that, according to many professional web designers and animators, any fantasy can be realized with their help. By the way, if you look at the world rankings software in this direction, it is Adobe Flash applications of the CS and CC series that are the undisputed leaders.

Corel R.A.V.E.

We have one more professional editor SWF, which has capabilities comparable to the previous package from Adobe.

Of the most interesting, one can note the ability to draw two-dimensional objects, determine their movement along a predetermined path, bind to the specified path, create a twin of an animated object to change only the size, color or location, after which the program automatically performs the necessary transformations and animates the image. Naturally, this is not all that this application is capable of. You can study it and admire more and more new opportunities for a very long time.

Sony Vegas Pro

This package for working with video certainly needs no introduction. Even those who have never worked with multimedia of this type are aware of it. Of course, this is not a SWF editor as such, but it does have tools for creating animation, and very worthy of attention.

The program allows you to create and edit animated videos (in this case, the emphasis is on them) using more than 200 effects, editing can be done on the basis of 8-bit mode, and at the finalization stage, switch to 32-bit to improve quality. Here you can apply color filters to eliminate differences in different fragments, set the frame rate to 30 fps and higher, and set a wide variety of image aspect ratios, including even transformations and transitions between them (4:3, 16:9, 16: 10), etc. In general, there are enough tools.

Additional utilities for working with Flash

Speaking about creating and editing animated videos, you can not ignore some additional utilities that may come in handy in your work. In particular, this applies to converting the final SWF file to the original format of the FLA project by decompiling (code formatting), as well as some additional tools used to improve image quality and reduce the size of the final file without quality loss.

Among the most necessary programs are the following:

Trillix Flash Decompiler.
Sothink SWF Decompiler.
Flash Optimizer.
Sparkle SWF Optimizer.

Flash Decompiler Trillix

A novice user will need this program to convert a SWF file to FLA format so that the project can be opened even in the simplest editor and make the necessary changes to it.

In fact, this is an advanced converter with editor capabilities, in which changes can be made on the fly. It can also be used to batch convert. And all this is done without the obligatory installation of Adobe and Macromedia plug-ins.

Sothink SWF Decompiler

This program is also a decompiler-editor, however, it is paid. Its possibilities are very interesting. It is oriented towards quick creation or editing banners, videos and even Flash games.

For beginners, the application provides for the presence of a special "Wizard" based on the choice of the type and structure of the future project from the available templates. In addition, you can work with source code, apply all kinds of filters, effects, or create vector images in a special WYSIWYG environment.

Flash Optimizer and Sparkle SWF Optimizer

These two small utilities, as the name already implies, are some kind of optimizers that allow you to reduce the size of the finished SWF file to save space without losing quality. They will be especially useful to all those who place their work on the Internet or are engaged in the creation of banners and Flash-format online games.

As stated on the official websites of the developers, these utilities allow you to compress and reduce the size of the original object by as much as 70%. They have several types of optimizations that apply automatic transformation after setting the necessary parameters.

What to use?

Finally, the most important question: “What to choose from all this?”. We think that novice animators and web designers should start with the simplest utilities. For those who are at least a little versed in creating and editing SWF movies, no doubt, professional utilities will do. Here the choice is up to the user. However, if you wish and study the reference information that is available in most of the applications presented, you can master working with them very simply. But which editor is better? By right, the palm belongs to the developments of Adobe, although other editors and decompilers should not be discounted.

Yet existing SWF flash movies can be used as templates for creation new flash-movies (when replacing video clips, texts, pictures, types of action scripts in SWF sample). ... - Ability to convert SWF in EXE, SWF to SCR (screen saver). ... - Ability to use existing SWF files as templates for creation new flash movies.

5 are as follows: - Convert MP3/WAV files for listening or SWF sounds; - Convert MP3 files; - Creation SWF Sound Libraries; - Dubbing via microphone and direct conversion to SWF; - Select hundreds of sound files at once for conversion; - Easy to use interface; - Loading the ftp server; - Creation XML based project;...

Sothink SWF Decompiler is the leading tool for capturing, decompiling and extracting Shockwave Flash movies, especially converting your SWF in FLA. ... To control, view the web page in Internet Explorer or Firefox, you can enable Sothink SWF Catcher as an auxiliary program for capturing flash movies; this program is very convenient for decompilation SWF.

This program creation flash can edit almost all elements SWF files such as: texts, shapes, URLs, ActionScript, etc. ... You can find everything you could hear about it - form design, Creation movements, conducted movement and the addition of streaming audio; or whatever you heard about it - edit SWF directly.

Animated clip can be saved as avi or swf format and can be easily uploaded to a web page. ... Creation animation has never been such a simple operation before. ... Converts movies to animation clips. ... Just download a movie or home video (avi format), click the button and view the finished animation.

In addition, secureSWF helps you protect your Flash applications against various security threats by providing an encrypted domain lock, an encrypted Creation bootloader and string encoding. ... secureSWF secures SWF files from decompilation and reverse engineering, providing the best Flash ActionScript masking, optimization and coding that makes this program...

... - Creation unlimited animations. ... - Visualization of the transformation in various popular formats, including Flash SWF and animated GIFs, as well as exporting in real formats such as JPEG, PNG, TIFF and more. ... - Plus a large number of additional features. ... - Share animations with friends and family using the built-in email feature.

Have you ever wondered what lies behind the beautiful animation of banners on the Internet? Or for newfangled cartoons created with the help of computer technology? Most often they are based on " flesh", more precisely, this is how the name of the Flash technology is translated from English. Today we will talk about flash animation for the site:

Flash Technology

The multimedia framework was developed by Macromedia. But after its takeover (merger), all rights to the technology were transferred to a new owner - Adobe Systems.

Scope of modern application of Adobe Flash:

Creating web applications is a fairly new direction. It implies full or partial use of Flash to create websites. With partial application, this technology creates separate design elements: various interactive menus, animated buttons, etc.

Compared to conventional resources, html based flash sites have some features that limit their use. These include high development costs, demanding server resources, long loading times with a slow Internet connection, and some other aspects:

Implementation of multimedia capabilities - for listening to audio and playing video on sites, media players based on Flash are often used. Their development includes the use of one of the scripting languages (more often JavaScript):

In Internet advertising - most often the technology is used to create animated banners. They imply not only the playback of multimedia advertising, but also some kind of interaction with the user on a game basis.

Fundamentals and Tools for Flash Development

To create flash animation, traditional tools from Adobe are most often used:

Adobe Flash Professional - a program for creating interactive animation (animator);
Adobe Flash Builder - an environment for creating an interface for web applications;
Adobe Flash Player is a browser-integrated player for playing Flash.

In addition to it, a number of third party applications. The most popular of them are Gnash, QuickTime and some others:

This technology allows you to display any type of graphics ( raster, vector, 3D). And also supports streaming relaying of audio and video data. Especially for mobile devices lightweight has been developed flash version Lite.

The main standard for flash files is the SWF extension. The acronym stands for Small Web Format. Video recorded in Flash has file extensions FLV , F4V .

The development of interactive animation in Flash is based on vector graphics. Thanks to this, it was possible to implement support for the multimedia platform and the independence of the animation quality from the screen resolution.

The file size of a Flash application is the same for all users, regardless of specifications screen (resolution).

Interactive animation in Flash is based on morphing (vector type ), which slowly blends between keyframes. To play the data, a flash player is used, the operation of which is in many respects similar to the work virtual machine JavaScript. The software component of the technology is implemented using the ActionScript language.

The disadvantages of the technology include the following points:

Heavy load on the central processor of the client machine. This is due to the low efficiency of the flash virtual machine, which is embedded with the player in the user's browser;
High Error Probability – Playing Flash animation can be very error prone. Moreover, failures in Flash playback negatively affect the operation of the entire client application (browser). This is due to insufficient control over the fault tolerance of the program code when creating flash applications;
Cannot be indexed - All text content displayed in Flash content is not indexed. This limitation is especially problematic for those resources that are based on this technology.

Overview of Third-Party Flash Creation Software

As a prototype application on which we will demonstrate the basics Flash creation, Sothink SWF Quicker was taken. According to many professionals, the program is the most understandable and easy to learn.

In addition to creating and editing, the flash editor "knows how" to work with all other types of web animation (GIF, HTML and other standards):

After installation, we go to the user-friendly interface of the program. Unfortunately, after wandering through all the nooks and crannies of the interface language switcher, we did not find it.

In order to understand how to make a flash animation in this application, we will use the built-in templates. The New From Template dialog box appears immediately after starting the program. In addition, it can be called through the main menu item "File". Among the proposed options, we chose the creation of a banner:

In the next window of the wizard, you need to select a template from the drop-down list, according to which the animation will be created. Below it is a small frame in which the selected template is played:

In the next steps, you need to set the size of the banner and enter 5 phrases of text that will be played in the animation. In addition, you must specify the address of the resource to which the user will be led by clicking on the banner:

After compiling the project and closing the wizard window, you can view the resulting video in the built-in player. To do this, click on the green arrow at the top:

After closing the player, let's take a closer look at the application's interface. Please note that it consists of two main windows: the top one is for editing the time interval of the video, and the bottom one is a regular graphics editor. Each of the elements is located on a separate layer, which is available for editing using standard tools located on the sidebar:

Created flash animation for the site can be published. You can select the publishing method by clicking on the " Publish" button at the top. There are three options to choose from, including inserting into html code. Detailed settings for this process are available in a separate window " Publish Settings".