Exporting flash cc html5 animation to edge animate

I want to create an interactive animation for PC, cellphones tablets etc. Since most cellphones do not support flash I decided to do this in HTML5. Flash cc supports html5 canvas but the response time of the simple buttons I created is just awful and buggy. After researching I found out that everyone suggest Edge for html5 content. My problem is in edge I do not have any brush or pen tools which I need for my animations. So I would have to create vector animations in flash and export them to edge. I have found absolutely nothing to do this. I can either export as swf which the majority of cellphones do not support or videos that are non vector or non vector image sequences. I can publish flash cc html5 canvas as html/js but I cant Import it to edge. Am I missing something or why isn't this possible?

Hi Alhab
One way to do this is, exporting your content from Flash to Edge Animate as sprite sheets. The following discussion might help you to bring your content from Flash to Animate.
created animation in flash turn it into a rollover
Let us know If you need more help.
Thanks
Manigandan

Similar Messages

When I export an HTML5 animation from Edge Animate into Adobe Captivate 8, is there a way to resize the animation once in captivate to fit all devices (PC, tablet, mobile)?

I have a hard time getting the animation to fit all sizes...
Thanks for the help!

That is probably it!
How do I make it responsive?

Import flash animation into edge animate

Hi,
I need to import a flash vector cartoon style animation into edge animate, do you know how can I do it?
Kind regards,
eugenxi

Hi eugenxi,
You can use the Export Png Sequence feature included with Flash CS6 to export a series of pngs from your symbol animation (tut by Tom Green):
http://layersmagazine.com/png-sequence-from-flash-cs6.html
Then import the pngs to Fireworks, and use John Dunning's plugin to export a symbol directly to Edge Animate:
http://johndunning.com/fireworks/about/EdgeAnimate

Is it possible (or feasible) to create an entire website full of animations using Edge Animate?

Back when Adobe Edge preview first came out I tried making this site:
http://www.bluekanji.net based on a friends request to have everything animate, with sound effects, music, etc. It didn't turn out too well and the coding is a mess because of my lack of coding knowledge and trying to jam stuff in there when Edge didn't allow it at the time.
I'm currently recreating the site from scratch, but hoping to make it all one cohesive page, instead of every animation having to be on a new page.
My main issue now is that when I have any animation play the next one will overlap and block one another and it becomes a pretty big mess. So my question is is it possible to do a full site full of animations with Edge Animate (and/or with Edge Reflow)? Or is it better to try something else?
Thanks.

There has been many new features added post the preview releases. You can check the below links for information on what added in 2.0,3.0 and CC 2014 releases.
Latest Version: https://helpx.adobe.com/edge-animate/using/whats-new.html
EA 3.0: https://helpx.adobe.com/edge-animate/using/whats-new-edge-animate-30.html
EA 2.0: Edge Animate Help | New features summary
I would recommend you to try Edge Animate/Reflow/Muse for creating websites and let us know if you encounter any issues.
-Sujai

How to create scroll controlled svg animations in Edge animate cc

Since I am a beginner in Edge animate, I am very confused about svg animations in Edge animate. I want to create an effect like this http://tympanus.net/Development/SVGDrawingAnimation/index.html. In this page the animation is set to autoplay, I will controll my animation using scroller bar in adobe muse cc. Please tell me how to animate svg images like this.
Thanks in advance

Hi bhardwajaralhul517,
Found something that could help you get started
Using parallax scrolling in Animate with a single line of code | EdgeDocks.com
How To Create A Parallax Scrolling Website | Web Design Principles
Thanks,
Preran

Flash Timeline Animation to Edge Animate CC?

I have a client with an old Flash CS4 Presentation file that uses Forms and Slides and they want to update their presentation to HTML. I am not concerned about the presentation functionality or shell as my developer will create a new one... But, the presentation contains a bunch of timeline animations that demo their product.
I don't want to export the animations out using the Canvas tag, or as a movie or image sequence.
I am new to Edge, but I am thinking this is the solution for the animations.
Is there a way to export/import these Flash timeline animations into Edge? Or even, at the very least, import the assets into Edge?
Thanks,
Carol

What kind of animations do you have? If you have scenes in Flash you can reproduce that in Edge Animate with symbols. For small animations like a runner for example you can create a spritesheet with Flash and use it in Animate. You will have to use the clip tool and display on/off to set it up. Rigth now it takes several tools to go from Flash to Animate but Animate is quite adequate to reproduce what was done in Flash.

Adding HTML5 animation from edge animation to captivate 8

I created a simple/small animation in Edge Animation, published it as .oam . In Captivate 8, Media, HTML5 Animation, selected the animation and it displayed on the slide. The problem is now, in the preview the animation doesn't play. I even published it on a web server and it doesnt show there either. Does anyone have any idea what is going on??

Just a suggestion: try to add a play button in Edge Animate, maybe the animation is so short that you don't have time to see it? What is its duration? I can insert OAM's in CP8.

Responsive scaling of animation in Edge Animate

I am inserting an animation into a responsive web page. I have gotten the design to scale in either direction (horizontally and vertically) in both Animate and a browser but cannot get the animation to scale in both height and width when the browser window size is just narrowed or the page is served up to a mobile device (tablet or phone.) I created a simple test comparison at this link: http://www.users.cloud9.net/~agoltz/edgeTest/animateTest.html I've embedded the CSS styles in the document so they can be evaluated (be kind...I'm an amateur)
If the browser window is narrowed the animation just gets narrower but doesn't scale vertically. The static image scales in both directions as the width of the window or device narrows. I'm looking for the same behavior with the animation. I hope I'm just missing something (not an unusual occurance) and not that this is a limitation of Animate since Flash is no longer a universal option. Any thoughts? Thanks.

Hi Rodlab2x
Thank you for sharing your tests. Interesting to see comparison between Amazium and Bootstrap. Which is which by the way?
I'm impressed, particularly with the first one (http://www.lab2x.com/pacificdental/) because it almost appears to be scale-to-fit in places. In fact, for a moment, you had me fooled and I thought you'd solved it!
I think you've come up with probably the best possible solution at the moment.
Let me just check that I've understood your site correctly?:
You have 3 versions of the header panel that the site swaps to as the browser size is reduced:
1. The large one. This is an Edge Animate animation and uses all the feature in the 'Resize' lesson - ie. it scales horizontally but the height remains the same.
2. The middle one. This is a smaller Edge Animate animation with the same features as above.
3. The small one. (This is the one that fooled me for a moment!). This may be Edge Animate - BUT it's not an animation at all. It is a still image - and therefore able to scale proportionately
Just a suggestion - you could go further and add some animation to the smallest header. If you only use images, not graphics, then you can achieve scaleable animation. Just try making the graphics png files with transparency. Might help if each layer png is the same width and height as the background image. Only issue is - I don't know if the file size will be prohibitively big.
Cheers

How to replay entire composition including video and other animation in edge animate cc 2014.1

I am working on a project but i am stuck now. The basic flow of my project is: intro slides then a video plays then next and back buttons fade in that will control the next set of slides. Another button to replay the whole thing from start. My problem is i am able to replay the slides but not the video. My slides consists of text animations. I am using the new edge animate cc 2014.1 All the slides play from the beginning but the video does not follow that lead. I also managed to replay the video but thats not the desired thing i want. I want the whole composition to play again when i click a button. Can anyone help ?

The problem is with the playReverse call for time duration in which video is there.
playReverse actually plays in timeline in revere order 5sec->4sec->...->0sec, but this won't work for video as it doesn't play the video in reverse.
what you can do is that, in the "previous" button click handler, add
     if(sym.getPosition() > 7750) {
       sym.playReverse();
     else {
       sym.$("trance6")[0].pause();
       sym.$("trance6")[0].currentTime = 0;
       sym.play(0);
Also in "start" button click handler there needs a correction as below:
     Use this sym.$("trance6")[0].play();
     instead of sym.$("trance6")[0].play("1");
hth,
Vivekuma

Exporting a text from illustrator to edge animate 2014.1 CC

Hi,
i would like to know if someone has succeed to export a text (with font name, color, size, ...) from illustrator to edge Animate.
In the past, there was a plugin to do this from fireworks to edge animate, but now with the last version of Edge Animate, it's not working anymore.
Thanks !

Hi all,
The solution for the moment is to use the cc extension Illustrator Layer Exporter http://dehats.com/illustrator-layer-exporter/
Thanks to Franck for his help ;-)

Using CSS animations in Edge Animate without .js

Is it possible to use edge animate with only css transitions and effects. I do not want to have these .js files for animation and only want to draw and animate in css. Is this possible?

Ask in the Edge forum, but I would simply assume no. CSS3 animation support is different and inconsistent across browsers, so the only way to get predictable results is actually jQuery animation.
Mylenium

Exporter flash vers gif animé - Quel méthode pour un rendu correct ?

Bonjour,
Je cherche à simplifier mes exports d'animation fait sous Flash en gif animé.
Pour l'instant pour obtenir un rendu correct (et avec la CS6)
J'exportais en vidéo .avi puis sous Photoshop "importation vidéo dans des calques" ce qui me permettait ensuite d'exporter en gif animé avec une compression et des couleurs parfaites.
Mais c'est super fastidieux et désormais Flash CC n'autorise pas l'export en .avi, et le .mov exporté ne s'importe pas sous Photoshop...
Il doit bien y avoir une méthode d'exporter correctement en gif animé. Peut-être que c'est simplement que je n'utilise pas bien la fonction "exporter l'animation" qui me produit des gifs animés aux couleurs catastrophiques et à des tailles énormes.
Quelle est la bonne technique rapide et performante que vous utilisez ?
(sous Flash CC)
Merci bien
[Edit 16h27 :] Je viens d'essayer en exportant une sequence .png -> puis transfert par photoshop : bon poids (478ko pour une image 275x173px avec 500images à 25i/s) mais le lissage de la transparence foire
J'en ai aussi profité pour tester le "Adobe Media encoder" avec cette même séquence .png, puisque 'il n'accepte pas les .swf et qu'il ne reconnait pas les .mov créé par Flash (vive la compatibilité), résultat niquel, transparence niquel, poids... euh 6,96Mo. Ah. Passons la qualité de 100 à 25 -> poids 6,96Mo. Pfffff...
[Edit 23h :] Back to CS6 et à l'ancienne méthode... Tant pis.

Je vais défaillir. J'en ai tellement besoin de cette option...
S'il vous plait : I NEED HELP!

Can't get my animation in edge animate to work

here's my code, I can't figure out what exactly is wrong. None of my animations for my content are working when clicking on the corresponding buttons within my webpage.
this is what i believed would work:
var mySymbolObject = sym.getSymbol("homeright2");
mySymbolObject.play("homeright3");
var mySymbolObject = sym.getSymbol("hometoptext2");
mySymbolObject.play("hometoptext3");
var mySymbolObject = sym.getSymbol("homeleft2");
mySymbolObject.play("homeleft3");
// Show an element
sym.$("homeleft2").show();
// Show an element
sym.$("hometoptext2").show();
// Show an element
sym.$("homeright2").show();
// Hide an element
sym.$("xboxone").hide();
// Hide an element
sym.$("macbookpro").hide();
// Hide an element
sym.$("bose").hide();
// Hide an element
sym.$("productstitle").hide();
// Hide an element
sym.$("applemic").hide();
// Hide an element
sym.$("geeksquadtext").hide();
// Hide an element
sym.$("geeksquadlogo").hide();
// Hide an element
sym.$("appletv").hide();
// Hide an element
sym.$("dealtitle").hide();
// Hide an element
sym.$("COD").hide();
// Hide an element
sym.$("nexus").hide();
// Hide an element
sym.$("toshiba").hide();
// Hide an element
sym.$("applestore").hide();
// Hide an element
sym.$("shopstitle").hide();
// Hide an element
sym.$("samsung").hide();
// Hide an element
sym.$("mag").hide();
// Hide an element
sym.$("microsoft").hide();
// Hide an element
sym.$("midtext").hide();
// Hide an element
sym.$("toptext").hide();
// Hide an element
sym.$("phone").hide();
// Hide an element
sym.$("contacttitle").hide();

it seems to be working now, there was an error on my timeline.
now the only problem I seem to be having is embedding a YouTube video within the page.
using this code:
var youtube = $("<iframe/>");
sym.$("video12").append(youtube);
youtube.attr('type','text/html');
youtube.attr('width','540');
youtube.attr('height','315');
youtube.attr('src','http://www.youtube.com/embed/_JY4ZV_fumU?rel=0');
youtube.attr('allowfullscreen','0');
the video displays but it's like the container symbol is over top of it, so I can't play the video.
Any ideas?

Can we import Flash into Edge Animate

Hi
I would like to know if we can import Flash animation into Edge Animate and into Muse

Hi Dan,
There is no such workflow as far as I know. However, Animate does support native HTML5 videos.
Edge Animate Help | Add video to animations
Also see Add engaging content from Edge Animate and Flash | Adobe Muse CC tutorials
Thanks,
Preran

Help needed! From Flash Professional to Edge Animate poll.

If you have used Adobe Flash Professional and Adobe Edge Animate, please answer this 12-question poll. I'm studying in a university at the moment, and to complete the assignment that I have to do, I created a simple poll to find out, how users of Flash Professional can adapt to animating in Edge Animate. I'd appreciate it alot, if you answered this poll!
https://docs.google.com/spreadsheet/viewform?formkey=dEZCdHp3SGVSOEdseEM2WG5MMk1xdUE6MQ
Thank you!

hi heldeJ,
i just filled out your poll. I'm a flash developer who is moving to edge and would be interested in seeing the results of your poll. Good luck with it!
best regards,
-sharon

Exporting flash cc html5 animation to edge animate

Similar Messages

Maybe you are looking for