so let's get to the thing. I have to estimate a project that's main goal is to migrate from FLASH interactive and complex animations into HTML5.
As far as I've read there are plenty of questions how to do it... so I've researched there is Swiffy / Wallaby / Adobe Flash Professional Toolkit for CreateJS and Online converters and here goes the BUT... but many persons said it won't handle more complex FLASH animations (only simple ones).
So the question is: Does someone have an experience with such a migration, is there a non-manual way to do it?
Thanks in advance!
Yes, there is a non-manual way to do it for most Flash animations that contain some ActionScript, as well as a limited set of more interactive applications. If ease is your first concern, try the latest release of Swiffy (5.0 when you wrote your question and as of this response). Swiffy supports a substantial feature set of ActionScript 3, more than enough for navigational controls.
Drawbacks:
The level of snappiness may be unsatisfactory; I have been happy with functionality of some simple game conversions but they are sluggish.
The end product is SVG, so you'll also have to contend with unsupported browsers.
Changes to artwork will probably need to be made to the natives first, then re-exported. Otherwise, there is a hefty JSON config you can edit (and watch it blow up).
You may need to get under the hood with sound (I use SoundManager2).
I am less familiar with the Wallaby/CreateJS workflow but ActionScript support during export from Flash is extremely limited. Essentially, it enables you to export your asset library for use with CreateJS on the JavaScript side.
Related
For the work, I am amused to the realization of an interactive video. This means a video that proposes choices to users. Choices influence the scenario of the video. Thus, such choice refers to such a moment of the video.
I could already realized this type of video in HTML5 or with Youtube, I master the logic of the concept. Problem, this time, I need to export the interactiv video to a program without using the Web. So I thought of using Flash to compact my interactive video into a ".exe".
Nevertheless, I wish to have the opinion of the community because the gotoAndPlay function in AS3 is unstable.
So, do you have any alternatives to offer me? There are many software programs that claim to be able to create videos of this type but all are bugged.
Thanks in advance and sorry about my english !
AS3/AIR is ideal to export rich media applications, but from your question it seems you lack the experience. If you start from zero, consider a book about OOP in AS3, you can find second hand very good books, since AS3 has been stable for a long while. I did all sort of video apps in AS3, from UGC composited video content, to full featured video chat apps managed from a local workstation in TV studio grabbing video from Android devices, etc. just to give you an idea of how powerful the platform is. Same kind of apps in JS require longer debug time and are less powerful (intrinsic limitations of i.e. the video object in browsers). I would go with AS3, but there are other considerations that only you can know.
I have to "convert" some flash projects to HTML5/JS but I don't really know how I can do it :(
This flash projects are little "activities" like this one :
https://www.brainpop.com/artsandmusic/artconcepts/cameras/activity/#=standard
I did some research about it, but i'm a bit lost...
I found other people asking the same question and a lot of responses are to use Haxe/OpenFL and as3hx (https://github.com/HaxeFoundation/as3hx) but I don't really understand how to proceed...
Is it possible to load a .swf file with openfl-swf to create a similar .html file ?
Should I convert AS3 to Haxe3 with as3hx ?
Is there a simple way to just get a graphic render of this activities without any interactivity so I can add manually input text field ?
I never used ActionScript or Haxe before.
If someone has any suggestions i'll be glad to hear it :)
I hope my explanations are clear, english is not my first language, so excuse me for any mistake.
Cheers !
as3hx will convert only as3 code to haxe openfl and may well need hand tweaking. To make the code more flexible try to avoid extending Sprite then potentially it will be easier to use your activity logic in more webgl accelerated haxe solutions like Kha and Luxe.
You probably need clean seperation of the code and the onscreen layout.
To run a fla swf that is mostly graphics in openfl you need to use the haxelib https://github.com/openfl/swf, it can be quite fiddly getting to different children or frames and the gradients are not perfect, just remember when using it that it's not the same as accessing a child normally your using a structure that is a bit different to do that.
Alternatively you may find flump useful it can be used with openflump.
https://github.com/SavedByZero/openflump exports from flash IDE.
It converts lots of your graphics to png sequences in nested structures, it would probably be worth rebuilding textfields yourself.
Openfl js can be slow I suggest you do some tests before committing to a solution, since Kha or Luxe may provide you a more shader modern approach to graphics than a flash emulation api solution, but then all you assets largely need to be images.
I doubt if there is any ideal way but getting your logic in Haxe is really good idea because then you can do c++, c#, js etc.. The first step if you choose openfl is to perhaps to try just porting parts of your code to haxe and then use them as a swc in your current projects this will allow you to gradually check your conversion and fix an issues easily within a haxe flash approach prior to trying to do the same in html haxe. You may find the swf library is not ideal for html5 and that png's are the way to go, Animate now provides export png sequence which I have used in starling as3. Another approach to consider is the away3d plugin for Animate it can convert flash timeline into typescript away3d (2D ) that you can control with javascript code ( even haxe you may have got from as3hx if you remove some of the flash specific haxe and adjust it to work with the away3d 2d but I guess it could be very complex ).
I am fairly new to Flash and AS3.
My questions is do I actually still need to use Flash CS6 to setup the stage and library files.
Or can it all be done from FlashDevelop ?
Thanks
Flash CS6 is an application similar to Photoshop, you generally use it for creating/structuring/positioning graphical resources and then makes it possible to animate these (from keyframe to keyframe) and then access the graphical content from code.
So, the answer is no, you can create a SWF file without Flash, you can embed content to use in AS3-code without flash and you can use flex-components and position them without flash.
But creating any bigger project like that would be pretty unnecessary since you just as well could use some other language or tools for doing that kind of stuff. Tools and languages that were designed to do this specific thing.
Few months ago I switched completely to FD and since today I successfully built everything only in FD. The reason was that I had huge project to publish, and I couldn't compile it in Flash because of memory shortage for JVM compiler. With FD that was not a problem.
So in short, no, you don't need flash any more.
Though maybe there can be some things that you can create quicker and easier way in Flash than in FD (for example: some timeline animation and then publish to SWC to use with FD).
I still have Flash installed, just in case for quick animation jobs.
You need it if you want to create graphic objects to use them later in your code. The alternative is to create everything by code
It depends. If you need to use vector graphics, drawn in Flash, then the easiest way to incorporate them in your project is to use the IDE-based project (http://www.flashdevelop.org/wikidocs/index.php?title=Projects#AS3_Flash_IDE_Project). This isn't the only way, but it's easier than packaging them up and using libraries. In this case you are effectively using FD just as an external AS editor (and it's worth doing it just for this, since it is a much better editor than the one built in to Flash Pro.
If, on the other hand, you are working with objects drawn in code, with text, or with external bitmaps, then no, there's no real need to use CS* at all.
The advantage to OOP is having an environment like Flash for layout. It's been pretty crucial for me as a designer and when implemented correctly with a proper class structure, becomes extremely powerful. It really depends on what you are using as3 for. I find the Flash architecture to be most advantageous in the context of interface design, but for things like games or "static" interactives, sometimes its much more efficient to do everything in code and compile outside of Flash.
I have developed a casual game that has become a modest hit on a few flash gaming sites and
I'm weighing the pros and cons of adding it to facebook. I don't have a strong coding background - I learned AS3 as I was developing the game- so I'm not sure if embedding a flash file is a good idea for facebook games. If I want to eventually enable in-app purchases, are there any reasons I might not want to use Flash? Does Flash make the game more susceptible to cheating? Are there any other reasons that I might want to go with HTML5 or another coding language?
HTM5 isn't a coding language, but JavaScript is used for programming the HTML5 Canvas element, which is what your consideration would be.
There are a lot of Canvas vs. Flash posts on the internet and I suggest you search for them and read them. There's no reason for me to reiterate what's been said a hundred times.
There isn't anything wrong with embedding Flash on Facebook, though the usual iOS crowd won't be able to see it.
Personally I'd recommend learning Canvas, which is a lot lower level than Flash but totally doable. The future of flash is probably going to get a lot smaller, and you're already boxing out at least one demographic (iPad/Phone/Pod/iOS) by using it.
So the bottom line is that Flash is easier, at least for now, but HTML5 Canvas is the future here.
There are a number of Canvas books that cover simple game development and there are already several libraries that make game creation easier (ImpactJS, Game Closure, etc. I'd suggest searching and taking a good look at the currently most popular ones)
If you already actually have the game all coded up and working in AS3, it's pretty much a waste of time to switch it over to another language. A lot of Facebook games are Flash, and if you want to target iOS you can always package it as an AIR app.
For future projects though, I'd agree that taking a look at HTML5 technologies would be prudent.
A long time ago (Netscape 4-era), I wrote Javascript-based games: Pong, Minesweeper, and John Conway's Life among them. I'm getting back into it, and want to get my hands even dirtier.
I have a few games in mind:
Axis & Allies clone, with rugged maps and complex rules.
Tetris clone, possibly with real-time player-vs-player or player-vs-computer mode
Breakout clone, with a couple weapons and particle velocities
In all of these, I have only a few objectives:
Use JavaScript and HTML 5 - it should run on Chrome, Safari, or maybe an iPad.
Start small and simple, then build-up features.
Learn something new about game design and implementation.
So my questions are:
How would you implement these games?
Do you have any technology recommendations?
If you've written these games, what was the hardest part?
N.B.
I also want to start from first-principles - if you recommend a framework/library, I would appreciate some theory or implementation details behind it. These games are different enough that I should learn something new from each one.
Depends how much you want to start from scratch. To answer your direct questions:
1) How would you implement these games?
A: JavaScript + Canvas. Canvas is the 2D drawing surface from HTML5. Performance is pretty good on desktop machines, not so great on iOS and Android devices (as of the date of this post). If mobile is your utmost concern, you need to use the DOM and CSS3 3D transforms which trigger the GPU on those devices.
2) Do you have any technology recommendations?
A: This is sort of answered by the first question. JavaScript is a must, but I would ignore jQuery. You are targeting HTML5 devices, so no need to compensate for legacy browsers. As you are probably using Canvas, no need to smooth over the DOM interaction, either. There are some higher level libraries which make interacting with Canvas easier, such as Easel.js. WebSockets are useful for bi-directional streaming communication. And Box2D is useful for a physics engine. Local Storage is simple key/value string data for things like level progress, but for anything complex, you'll want WebSQL DB. For large binary assets you'll want to look at the File System API. Finally, don't be afraid of WebGL, as it is extremely fast and useful for 2D games.
3) What is the hardest part?
A: Almost certainly the hardest part is the debugging. WebKit's Developer Tools can make this easier, so don't leave home without them.
Put simply use Canvas for moving lots of stuff around the screen and SVG for prettier, slower, vector graphics.
One of the first things you should do is write a speed test program to see what can be done with Canvas and then play with it.
I wrote a blog post about Canvas & writing HTML5 games
edit 2019-02: processing.js is old and not well supported. Instead, try p5.js, which is equivalent and up to date.
Don't forget processing.js, which is a pretty well tested full-stack graphics and interactivity javascript framework, which has substantial (if not comprehensive) support for most I/O, sounds, graphics, and even WebGL. If you write vanilla Processing code, which is basically Java syntax compiled to JavaScript, you can use many open-source debuggers out there, including the native Processing environment. Other than that, you can integrate any other JavaScript code you have a mind to include.
Here is a guide for the JavaScript developer, explaining much of what you might want to know.
Check it out. Good stuff.
The hardest part, for me, was that there were no tools to help make the graphics, as there is no Maya export to canvas, for example, so, everything is done manually, with primitives, unless you want to take bitmaps that you will modify as though they are sprites.
At the time there was no real support for text in canvas, so my solution didn't work using excanvas, but worked fine on Safari and Firefox.
So, you may want to look at what HTML5 features you want to support, such as a built-in database, and then decide which browsers you are willing to work on.
How to implement these will largely depend on how you want to create the graphics, and if you want to do 3D graphics, as then the bitmapped sprites would not work.
Tom here from Scirra (Construct 2 game maker). We make an HTML5 games engine called Construct 2, it exports purely to HTML5 no Flash in sight!
Construct 2 uses an event based system to add logic to your games and does tons of the repetitive/difficult legwork for you. For example adding polygon collision to objects without some visual editor is a difficult task to undertake sometimes.
Anyway we think it's worth a look and you can get results very quickly from it as well. It's an alternative to coding the entire game you might want to take into consideration when developing HTML5 games.
Take a look at ChromeExperiments The examples are from around the world using the latest open standards, including HTML5, Canvas, SVG, and javascript.
Maybe this is not what you wanted to hear, but have you thought of starting with a good book?
http://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias%3Daps&field-keywords=html5%20game
A good book will save you a lot of time, and start you off right at the basics.
A good question when I also started to learn HTML5 I also came across this question, finally after lot of research I found best way to do is by using some engine or framework. I learned canvas and made my own game but that took hours of logic and 100+ lines of code.
Better go with scirra, it might reduce your work.
I'm currently working on a series of blog posts explaining how to build a Javascript game using EaselJS and Box2D for physics. Here's Part 1.