en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en en en en en en en en en en en en en en en en en en fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en hbs_lat la fa en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en de en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en fr en en en pt en es en it en fr en en en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax.
Will you miss Edge? Do you think Animate CC will be the one tool to rule them all? Interested in your thoughts.
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.
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.
Here is the white paper
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.
It is actually quite easy. Just author an AS3 FLA. Break apart your text, then convert to a Canvas doc. Uncheck create spritesheets and overwrite HTML under publish settings.
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.
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.
Here is a direct link to the HTML5 Advertising with Flash Pro CC (mp4). Deep linking on AdobeMax site seems not to work.
Share on other sites
Schoopie Doo    1 Likes (Newbie)
Posted December 1, 2015
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.
Share on other sites
somnamblst    200 Likes (Specialist)
Posted December 1, 2015
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.
Share on other sites
ConfusedMonkey    0 Likes (Newbie)
Posted December 1, 2015
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?
Share on other sites
somnamblst    200 Likes (Specialist)
Posted December 1, 2015
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.
my notes here: http://greensock.com/forums-support-files/flashCC_canvas_HTML5ads.png
Share on other sites
ConfusedMonkey    0 Likes (Newbie)
Posted December 1, 2015
Thank you very much somnamblst, got it.
Share on other sites
celli    88 Likes (Contributor)
Posted December 2, 2015
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.
Share on other sites
somnamblst    200 Likes (Specialist)
Posted December 2, 2015
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
as does this on your timeline referencing an instance name of your button symbol
Share on other sites
Web Dizajner    65 Likes (Contributor)
Posted December 2, 2015
My only concern is DOM animation, Flash Pro have only Canvas and WebGL animation. Will the Animate include DOM animation?
Share on other sites
somnamblst    200 Likes (Specialist)
Posted December 3, 2015
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
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.
Share on other sites
AdObeOne    4 Likes (Newbie)
Posted April 1, 2016
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.
Share on other sites
somnamblst    200 Likes (Specialist)
Posted April 1, 2016
Check out the AdStarter FLA Cory Hudson created. It has an ad specific Publish Profile that includes a commented out call to GSAP, and a buch of stuff related to AdHelper.js
Share on other sites
Oliver16Years    208 Likes (Specialist)
Posted April 2, 2016
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.
Share on other sites
somnamblst    200 Likes (Specialist)
Posted April 4, 2016
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).
Share on other sites
AdObeOne    4 Likes (Newbie)
Posted April 5, 2016
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?
Share on other sites
Web Dizajner    65 Likes (Contributor)
Posted April 5, 2016
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?
Share on other sites
somnamblst    200 Likes (Specialist)
Posted April 5, 2016
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.
Share on other sites
emmanuelulloa    33 Likes (Newbie)
Posted April 26, 2016
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.
Share on other sites
somnamblst    200 Likes (Specialist)
Posted April 28, 2016
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
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 5
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Official Adobe news: Future of Flash Pro and Edge Animate
“I absolutely love working with GSAP. It’s been one of the most enjoyable things I’ve ever studied and the team do a fantastic job of making it first of all but also in the fantastic forums. I’ve managed to learn so much from that so I’ll always be gratefu”
“Any time I've struggled to achieve a complex animation in CSS alone, I've never regretted using @greensock 's GSAP. After all these years, and impressive competitors, it's still Best In Class.”
“GSAP is awesome - I just dropped all my [custom] code, like a thousand lines of code and everything is so so much simpler, smoother and much easier to read for other developers! You have no idea how cool it is to offload that thought process to you guys!”
“I just tried to animate some objects using vanilla js but it was really laggy- switched to GSAP and now it’s smooth af”
“With the incredible functionality, and the mind-blowing customer service, the price of Club GreenSock admission is well worth it!”
“+1 to GreenSock. It’s just one of the deepest and most reliable javascript libraries I’ve ever used”
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
“The depth of GSAP blows me away like all the time. It seems like I stumble on something new and amazing every time I peek at the docs.”
“Honestly think without GSAP, I would have changed careers by now; it's that good.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.