Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Carl

Official Adobe news: Future of Flash Pro and Edge Animate

By Carl, in Banner Animation. Views: 5,305

Recommended Posts

Posted

Development has ceased on Edge Animate: http://blogs.adobe.com/edge/2015/11/30/update-about-edge-tools-services/

 

Flash Pro is being re-birthed as Adobe Animate CC: http://blogs.adobe.com/flashpro/

 

Will you miss Edge? Do you think Animate CC will be the one tool to rule them all? Interested in your thoughts.

  • Like 3
Link to comment
Share on other sites
Posted

Honestly, this came as a bit of surprise for me, I really thought they were serious about Edge. Plus, in my company we already started using Edge as default tool for HTML ads. Now they have announced new things in Animate CC, but there is no demo or trial or whatever, we only have a list of things that they will add to Animate CC, and I am afraid that once we get the actual product a lot of new issues willappear.

Link to comment
Share on other sites
Posted

Here is a link to the banner specific Flash CC to Canvas presentation. You can skip over about the first 20 minutes. GSAP gets a huge shout out at the 54 minute mark.

 

https://max.adobe.com/sessions/max-online/#/video/4908 

 

Here is the white paper

 

http://createjs.com/html5ads/

 

This was a smart move on Adobe's part. The people who are upset about Edge never "got" Flash. I am fluent in Edge, and I am 100% faster in Flash.

Link to comment
Share on other sites
Posted

But why did they go with Edge at all? Why not start with Animate right away? I definitely agree that for everyone that's used to Flash, the best solution is to continue using the same tool, only with a valid HTML output.

Link to comment
Share on other sites
Posted

I think Edge was always way too buggy and not user friendly. Having to edit JS files in order to open your files that were perfectly fine when you closed them, is too much to expect of the average user. If you look at Adobe's Edge forum it appears they had major problems getting it to run on Macs.

 

You don't have to wait for the new renamed version, it works now. CreateJS is built into Flash CC 2015. Just follow the steps. Best of all, no more font issues, so no more making transparent PNGs or SVGs of your text.

 

https://github.com/CreateJS/html5ads

 

https://github.com/CreateJS/html5ads/tree/master/AdHelper

Link to comment
Share on other sites
Posted

This is all already achievable with Flash CC, no?

 

I'm guessing they just want to distance themselves from Flash completely and package it as a new software so that's why they're renaming it but it's essentially Flash CC with updates from what I've seen (Correct me if I'm wrong!).

 

Intriguing to see where this goes anyway and what people's reaction to it will be.

Link to comment
Share on other sites
Posted

It is more than just Flash CC Canvas, it is AdHelper.js I think the new name has a lot to do with the Flash Player dependency being severed. And the fact they are ceasing dev of Edge.

Link to comment
Share on other sites
Posted

A little confused here.

I have used GSAP with Edge Animate in the past. A killer platform (GSAP)

I don't think i will have a problem getting my head around Ex-Flash to be renamed Animate 2015.

The question is can i use either HTML/JS or FLASH GSAP and output HTML Canvas/Webgl with the same results?

Link to comment
Share on other sites
Posted

Yes, if you watch the Adobe Max video, the long intro is the first 20 minutes, there is in depth discussion with GSAP being talked about at about the 54 minute mark. You author an AS3 Flash doc, then convert it to Canvas from the Command menu. Then you write your javascript instead of AS. So stop() becomes this.stop()

 

All your text will be dynamic, simply break apart and if you fear there will be edits to your copy, keep a duplicate guide layer of your text.

 

There are Canvas specific code snippets in the actions panel. You also want to do classic rather than motion tweens.

 

https://images-tv.adobe.com/avp/vr/155ad5fb-a467-45ba-a599-6f0e3b4806ad/3e5d068a-7998-41d1-8607-d4f04a5579df/1aa439ad-0773-4ee7-b88b-28393984b4a0_20151007114929.854x480at800_h264.mp4

 

my notes here: http://greensock.com/forums-support-files/flashCC_canvas_HTML5ads.png

Link to comment
Share on other sites
Posted

Just a thought... there should be a direct interface to hook in GSAP in the new Adobe Animate IDE itself. This way we can use GSAP's power to animate combined with the new 'Animate' tool (which we can do as mentioned at 54:00 of the video) but when the new program comes out, maybe there will be a true GSAP-with-Adobe Animate tool in the interface! I have a lot of love for the old flash as a tool (for about 15 years), and equal (much newer) love for GSAP's amazing abilities, power, support, and smoothness--and to bring them together seamlessly, without a bunch of convoluted steps would be interesting. I never really took well to Edge Animate really, so it's okay by me to see it go. Otherwise, I enjoy the flexibility of hand-coding with GSAP, and designing in photoshop/illustrator like any other web-based design project, using the browser itself as the visual interface.

Link to comment
Share on other sites
Posted

The caveat is if you are doing banners uncheck create sprite sheets, as it creates a JSON file which Doubleclick won't allow.

 

Experimenting with breaking apart text, certain fonts appear to need to be broken apart twice, others not.

 

You do just do your GSAP coding in your Canvas doc in Flash, with the advantage of a timeline, by setting keyframes that correspond to the existence of the movie clip symbol just like GSAP for Flash.

 

A button symbol does give you a cursor. Simply adding this to your published HTML file canvas div works for your clickTag

 

onclick="javascript:window.open(window.clickTag)"
 
as does this on your timeline referencing an instance name of your button symbol
 
this.myBtn.on("click", function(evt){
window.open("clickTag", "_blank");
});
Link to comment
Share on other sites
Posted

My only concern is DOM animation, Flash Pro have only Canvas and WebGL animation. Will the Animate include DOM animation?

Link to comment
Share on other sites
Posted

Here is my practice demo file. I created the first 3 blocks of text in my AS3 FLA, broke apart text, some once, some twice and for one, did not even convert to a movieclip symbol. then converted to Canvas.

 

All tweening was added in the Canvas document FLA in Flash.

 

The final device text illustrates what using that option in Canvas looks like.

 

The third block of text uses a motion preset.

 

the first copy block uses one of the built in code snippets

this.addEventListener('tick', fl_FadeSymbolIn.bind(this));
this.movieClip_2.alpha = 0;

function fl_FadeSymbolIn()
{
	this.movieClip_2.alpha += 0.01;
	if(this.movieClip_2.alpha >= 1)
	{
		this.removeEventListener('tick', fl_FadeSymbolIn.bind(this));
	}
}

I would attach my Canvas FLA but I don't have permission to attach that type of file.

 

Using the CDN for libraries, and using Flash to create the background and red rectangle has my zip at 8K.

 

 

canvasPossibilities_300x250_Canvas.zip

Link to comment
Share on other sites
  • 3 months later...
Posted

Great idea celli. I was thinking the same thing.

 

Edge Animate hasn't been developed since a long time. It's a nice tool to start in animation, but file management and using more than one edge animation on a site meant manually changing files. Very user unfriendly, considering the target users of Edge Animate. Unbelievable that Adobe didn't solve that within the first couple of versions. Then they killed the export option I was used to using, which was a pain.

 

Combining GSAP's power and features with a GUI-interface would be totally awesome.

Link to comment
Share on other sites
Posted

I think Flash is too general tool to make ads. It's overall purpose is to make animations, not specifically advertisements. I know it can  export various formats with templates. But I need a faster solution to deliver the various masters and size mutations to my clients. Takes too much patience to export all the assets from Photoshop and put the layout back together again in Flash, make layers, moveiClips, try to reproduce the layout which is already made in PS by the art director. The biggest problem is: it can't edit pixels. It can't resize, crop and optimize pixel assets. The code editor syntax highlighting don't changed in this latest, renamed version. I didn't find a way to integrate a professional editor into it. It still requires tweenJS to show assets, even when they didn't moved a pixel.

The othes side is: this is the best "official" tool on the market at the moment.

  • Like 1
Link to comment
Share on other sites
Posted

I create a few assets, and or paste vector files from Illustrator, then build everything in Flanimate. I create my storyboards with Flanimate.

 

I go from one ad size to the next, by editing the content inside symbols. 

 

You can also go from 728x90 to 468x60 then to 320x50 by scaling content when you resize the stage.

 

Only things that can't be created in Flanimate should be created in PhotoShop (like cropping or resizing bitmaps).

Link to comment
Share on other sites
Posted

My only concern is DOM animation, Flash Pro have only Canvas and WebGL animation. Will the Animate include DOM animation?

It looks like Animate won't do DOM animation. Who will fill this GUI-animation-gap? GSAP?

  • Like 1
Link to comment
Share on other sites
Posted

It looks like Animate won't do DOM animation. Who will fill this GUI-animation-gap? GSAP?

Maybe we dont need DOM animation. DOM element like video and form can be added above Canvas element?

  • Like 1
Link to comment
Share on other sites
Posted

A DOMElement allows you to associate a HTMLElement with the display list. It will be transformed within the DOM as though it is child of the Container it is added to. However, it is not rendered to canvas, and as such will retain whatever z-index it has relative to the canvas (ie. it will be drawn in front of or behind the canvas).

The position of a DOMElement is relative to their parent node in the DOM. It is recommended that the DOM Object be added to a div that also contains the canvas so that they share the same position on the page.

DOMElement is useful for positioning HTML elements over top of canvas content, and for elements that you want to display outside the bounds of the canvas. For example, a tooltip with rich HTML content.

http://www.createjs.com/docs/easeljs/classes/DOMElement.html

Link to comment
Share on other sites
  • 3 weeks later...
Posted

Quick question: ¿So Edge produced DOM animation and Animate produces Canvas animation? ¿Or do both tools produce DOM and Canvas animations?

I've never created an ad that is Canvas animation.  I usually go for DOM in Sublime.

Link to comment
Share on other sites
Posted

Animate can publish OAM. I think it is for people who need WYSIWYG in Dreamweaver.

 

For banners you just zip your js and html files and the images folder if there is one. Your backup image banner should be separate.

 

Don't use spritesheets, it creates a JSON file, which I believe DCM will reject.

 

My zipped Animate banners (CDN hosted createjs) are as small as 34K

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account