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 ).
Related
So, I was just wondering if anyone could give me a succinct answer on why exactly it's better to code mostly in an AS3 file as opposed to most on the timeline?
I've heard a lot of people answer questions with a cop-out "don't put so much code in your timeline". I've tried both ways and found some pros and cons on each, but it just seems silly to me for so many people to parrot the general good coding practice techniques.
Another thing about that is that a lot of times I'll be searching for help on coding, and people will give such complicated responses, and half the time I'll use little snippets of code as well as incorporate a small portion into my projects. Also, the AS3 API site also gives waaaay overcomplicated coding examples. Why do people do this? I could figure out some of my issues much more quickly if people just simplified the code examples.
Three good reasons not to put it on the timeline:
Your code will be stuck inside a binary file, not allowing you to use version control nor review changes to it.
You're going to hide code behind menus, making it hard to review in an instance. When it's all in one place you can easily refactor it, and change it.
By putting code on your timeline, you're making your code be dependent on the Animate compiler. (Animate is going to take your code and inject it into your document class using the undocumented function addFrameScript to make things work). The code isn't easy to migrate in this form, if you ever feel the need to re-code in another language.
Please use an IDE when coding. It will help prevent mistakes and even suggest ways to make your code simpler. (To name a few IDEs: FlashDevelop, VSCode, IntelliJ Idea Ultimate (paid).)
To clear up any confusion, writing code in an AS3 file instead of the timeline doesn't mean make things less organized or put code where it doesn't make sense to put it.
What you should be doing is creating a new AS3 file for every MovieClip that you need scripted, then going into the Symbol Properties of your movieclip and selecting Export for ActionScript and set the class name to your AS3 file. The runtime will automatically declare the instances in your file at compile time. What you can do is actually declare them yourself in the file, to have full completion capability in your IDE.
What I like doing is first setting the movieclip to export for actionscript, publishing my project, then opening the compiled swf using Free Flash Decompiler, and copy paste the generated class into a new AS3 file. (You'll want to only copy paste the class and generated instance variables.) Then you can code in your AS3 file with all the symbols contained within the MovieClip already referenced.
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.
Is there anywhere a GOOD tutorial page where I can learn ActionScript 3 ? Or can you help me out ?
I don't use a GRAPHICAL DESIGNER and I don't want to. All I need is code.
For example: things I need to learn quick:
Buttons and TextFields (basic form stuff)
Drawing canvas (like the html5 canvas)
Using FlashDevelop + Flash SDK, no plugins, no nothing. I just got it to work (compile, build and start a blank piece of nothing) and now I need to see what I can do with the ActionScript code.
Solved: Thanks to Dannyw the 2 items above could be solved directly (with minor additions)!
Julian's answer is very helpful too. Since I also wanted to browse through all standard classes in Flash:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html
I have some tips for you to become a great flashdeveloper:
Drop everything you know, start fresh. You have strange assumptions of how the workflow should be. If you want to become professional, you should be open for other workflows.
If your coming from actionscript 2, Dont think as2 is like as3, so don't try to do the AS2 thing with AS3. Again, drop everything you know.
Read & Learn the Adobe LiveDocs
Learn how the display list works.
Learn AS3 coding standards, learn to write clean readable code, later try to learn design patterns.
Learn how to use common actionscript libraries, TweenLite, Gaia framework, RobotLegs, Temple Library, Pure MVC, Away3D, as3corelib etc.
Dont try to reinvent the wheel, dont create your own framework, because you think there is none like yours, most starters step into that trap.
Code never inside the Flash IDE actionspanel, there are really nice actionscript editors like FlashDevelop, FDT, FlashBuilder, IntelliJ. But dont lose yourself in code, there is a lot visual stuff that can faster be build using the Flash IDE, so find a nice workflow, instead of limiting yourself.
if you like video tutorials; videos on gotoAndLearn.com, most have common practices.
If you like to learn from opensource projects: find as3 projects on github.com or wonderfl, check out how they did it.
if you like to read blogs: feeds.adobe.com is full of nice relavant blogs. Learn from the best.
Last but not least: there is no ultimate guide to become a flashdevelop-code-only-flash-developer. Like sport, you have to train and just experiment right away. So be open, use google alot, try to challenge yourself with excercises and fun experiments.
For buttons:
http://www.how-to-code.com/as3-actionscript3/as3-buttons/as3-button.html
For Textfields:
http://www.republicofcode.com/tutorials/flash/as3text/
For Drawing:
http://www.republicofcode.com/tutorials/flash/as3drawvectors/
I learnt actionscript the same way you intend to, just by reading tutorials on the internet and picking bits up as I went along. I eventually bought myself a big old actionscript bible too (Essential Actionscript 3.0 by Colin Moock), but can safely say that the internet was my most valuable resource!
Have fun with the tutorials :)
Use this:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html
BTW, You should almostly declare this website as holy when programming in AS3.
Using adobe flash or macromedia is recommended, follow these tutorials I learnt everything about flash from this website.
http://www.lynda.com/Flash-CS5-tutorials/flash-professional-cs5-essential-training/59964-2.html
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.
In Flex Builder, when I create an .as file in a non-actionscript/flex project, the code hinting doesn't seem to work.
Is there a way to get code hinting to work when working on a .as file that's not part of an ActionScript/MXML project?
UPDATE:
The Outline functionality also doesn't seem to work in the same situation. It would be nice to get that working as well.
can't get it to work either ... this must be somehow related to eclipse's project/file management ...
if you really want to code AS3 however, than FlexBuilder really is not your IDE of choice ...
personally, i use FlashDevelop for AS3, but it needs windows ... it's worth virtualizing though ... also, it does a very smart completion on any as files and it supports AS2 and AS3, works quite alright with MXML, and provides rudimentary support for HTML, CSS, XML and PHP ...
apart from that, there seems to be quite a good textmate plug in for as3 ... but i really don't know of anything decent for linux ...
well, there's always FDT, but i somehow don't like it, and in my eyes it is too expensive for the features provided, that i'd use ...
greetz
back2dos