Oliver16Years
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Oliver16Years
-
-
Sorry I don't have Animate, but as I remember all nested elements are accessible via dot syntax.
The elements ( MovieClips ) are in tree hierarchy. You can address them top-down from the stage. EaselJS calling it "Display list" as I know.
I am guessing now:
stage.myMovieClip.myCloseButton.addEvenlistener(....Here is the official page of EaselJS which is the graphics engine of Animate's canvas format:
http://www.createjs.com/easeljsAnimate pros correct me please!
-
1
-
-
I think better if You keep all Your scripts in the main timeline. If You put script fragments into MCs You will get confused fast.
-
1
-
-
Nice work, I love the integrated jpg encoder!
-
Hi Jorrit,
The first and biggest problem was adWords validator with its critpyc error messages and silly limitations. Then the various, outdated and baffling SIZMEK templates. Later the 100k ADFORM, with wired in landing page url, and i'ts little manifest.json. The last obstacle was adWords image ad uploader which is messing up the SVG code.
Take a look at my new automated/chaotic peview:
http://www.bannerhost.hu/Preview/Unilever/Surf/Q12017/Preview_092147.htmlBy the way: could someone please explain me how SIZMEK calculating the ad size? Because what I see as their ad size indicator, nohow reflecting my actual file sizes.
-
The beauty of handCoding is that You can automate it. But that's not "hand coding" anymore. I would call it automated DOM code generating, which is merely different from writing every <tag> and #css by hand. I personally writing only the GSAP tweenScript by hand, all other code and asset is autoGenerated.
-
Hi Marjan and Oliver,
Sorry I wouldn't say hand coding in NOT smart. IMHO hand coding is a the only way to get clean and fast result.
It's absolutely possible to create more than 10 sizes for less than 8 hours with hand coding.
It's a matter of workflow setup (large screens + graphic editor + IDE + browser) + designing and coding experience + having enough sleep + etc.
Cheers
Vitaliy
Yes, the "not smart" is not the right expression. I would say: It is not as fast as other workflows when You are not an expert.
-
1
-
-
got it, thank you so much.
Now that gsap is activated and I can start play around with it, do I have to enter the size somewhere or will it auto fit?
Let`ts say I will only use mobile ads first: 300 x 250, 320 x 480, and 480 x 320
The ad will be loaded into the iFrame at the x:0, y:0 coordinates. Everything will be cropped at the frame's far borders I think, but best if You crop your ad with overflow: hidden.
adWords requires a line in the <head> which is telling him the dimensions of Your ad:
<meta name = 'ad.size' content = 'width=300,height=250' >
I am using a main container <div> called 'Stage' with this style:
#Stage { width: 300px; height: 350px; position: absolute; overflow: hidden; cursor: pointer; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTYnIGhlaWdodD0nMTYnIHZpZXdCb3g9JzAgMCAxNiAxNicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyA+PHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzE2JyBoZWlnaHQ9JzE2JyBmaWxsPScjNjY2Jy8+PHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzgnIGhlaWdodD0nOCcgZmlsbD0nIzk5OScvPjxyZWN0IHg9JzgnIHk9JzgnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnIGZpbGw9JyM5OTknLz48L3N2Zz4="); }-
1
-
-
Hand coding is not smart option for fast mass production of banner ads. Is it possible for one developer to prepare assets, hand code and prepare for specific ad server full set with 10 sizes for one 8-hour work day? With Edge Animate and Animate is possible.
I agree, not time for handcoding in this SOS craziness . Except if You Metahandcoding. I mean if You handcoding an app which is making DOM HTML for You.
-
Thanks Joe_midi I decided to listen to you and try some codepens, and I hit a problem right away, how do I "activate" the gsap ?
This is my pen, I am sure you can see the error right away.
See the Pen XpOvzE by eekern (@eekern) on CodePen
I found out that what I wanted was "slider" not "calculator" so I think my ad goal is maybe even easier than what i first anticipated.
My question now is:
Is it a way I can "code" the ad to fit all adwords sizes ?
Thanks
In a banner ad, we can access the elements via id because it is running in separate namespace of an iFrame. We must put the color value into quotes:
See the Pen VPRZra by oliver15years (@oliver15years) on CodePen
You have to make every ad size separately.
-
1
-
-
Edge is no longer being developed by Adobe. If you're just starting out, it would be best not to invest time learning an outdated program.
Edge is exists and working and can make HTML ads, but You are right: it's is abandonware, Adobe Animate is a much better choice.
-
1
-
-
Got it, thanks.
Sorry to ask simple questions but I have read a lot of threads and wonder if:
- flash + GSAP the most preferred way to create adwords dsplay ads?
- I also wonder if I can make a opt in (ask for mail or phone number) inside display ads ?
Thanks
You can make adWords ads in Flanimate, Edge, with handcoding. I cannot recommend GWD beacause You will get insane very quickly. You have to pass their validator which isn't an easy task. It is so dumb, You can't imagine. It's tries to disassemble Your code and put it back together and alarming on valid, unrecognized solutions. Even if Your ad passed the validator, it can fail if You upload it to adWords campaign manager. One advice: don't use SVG in adWords ads until You have a proper hack for it. ( PM me if You need it )
I remember when we fooled the validator with a simple <script> tag injector which allowed us to use any CDN link.
According the user input: best if You spend a half day reading their Faqs. I never did anything like that before.
-
2
- flash + GSAP the most preferred way to create adwords dsplay ads?
-
That's gonna be a GSAP draggable with a draggable part over the clickArea.
https://greensock.com/docs/#/HTML5/Drag/Draggable/-
1
-
-
I am not sure what is calculators but if You want to make an adWords ad
You have to Load GSAP from CDN:
<script src = 'https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js' ></script>\r\n"
You must add this script to your html:<script src = 'https://tpc.googlesyndication.com/pagead/gadgets/html5/api/exitapi.js' ></script>\r\n
Your have to include click area like this:<div id = clickTag onclick = 'window.open(ExitApi.exit());' ></div>
You can Inline your assets:You must compress the ad's folder into a maximum 150k .zip.You have to stop all animations within 30sec.After all this crazy stuff, check the .zip with https://h5validator.appspot.com/adwords#/asset and try to understand the nonsense error messages. Because I am sure You will get a few.
-
I wish for a module which is automatically patching all the crappy browser animation behaviours. It would handle all browsers and versions, with all the animation types ( slide, scale, rotation ) and HTML element types ( div, img, path... ). Would be nice if it could be the part of GSAP.
-
2
-
-
I think I know the hard refresh problem.
You have 2 choices:
The first which is simple and reusable: Use a fader <div> which is acts like a curtain: fading out at the start of the animation and fading in at the end.The second is to tailor the end of you animation to end exactly the same as the anim begins. This way your repeat will be smooth.
In both cases You have to .add( function(){ myStopTimelineIfSecondRepeatFunciton(); } ) just before the end of the anim.
If the main timeline's last frame is not containing all the information what is considered good to stare at for a long time, You can make an ending timeline, and start it after You stopped the main timeline. This is what i call endFrame. Hard to build, not always worth it, I usually just stop at the last frame if my cliend don't ask for a specific endFrame with all the stuff on it.
This ad containing a simple fullscreen fader.div:
http://www.bannerhost.hu/nissan/qq/tenyears/HU/Nissan_QQ10_640x360_HU_SIZMEK/-
4
-
-
I am fighting with these issues since a year and I have to tell that at this point: I don't care if my animations are jerky or stuttering or whatewer weird insane bugs they have in different browsers. I don't have more patience to patch/hack the browsers. I did it, multiple times, but the workarounds aren't working now. The last known perfect chrome version was v41. I feel that, this is not my job to make the animations perfect in every browser. It is their job to implement the standards perfectly. I am tired, i am sad, i don't care anymore...
But, You can find various posts here in this forum like:
https://greensock.com/forums/topic/13875-chrome-49-janky-gsap/
https://greensock.com/forums/topic/13975-scale-text-animation-in-chrome-flickering-and-not-firefox/-
6
-
-
Chrome is full of bugs, and they are tend to introduce more and more. I am currently forced to use v53 because the remote debugger is not working after this version. They are loosing control of their code. The cheap workforce is unable to handle this kind of complexity and maintain the browser's reliability. This is what happening when the coders aren't dedicated enough.
Here is a couple of the unfixed issues I have found:
https://bugs.chromium.org/p/chromium/issues/detail?id=615778&can=2&start=0&num=100&q=canvas%20clip&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=
https://bugs.chromium.org/p/chromium/issues/detail?id=659253+ a huge adWords one:
https://www.en.advertisercommunity.com/t5/Advanced-Features/Why-AdWords-replacing-lt-image-gt-tags-in-SVG/m-p/867486/highlight/true#M51174-
3
-
-
My favorite is 640x360 which is an 1/9 HD surface. It has perfect aspect ratio, it is big but not too big to not fit into 200k. If this is in the prodlist, I always choose this as a master size.
-
1
-
-
Hi GearMobile!
AdWords accepts 150k .zips. How big is Your banner now? Why do You want to downsize an example? As I see - on the fly - it loads a few external libs, which is not allowed on adWords. You have to include them in your zip, except if they are hosted by google.You can link these in your adWords banner in <script src=...> tags without increasing your ad's size:
https://developers.google.com/speed/libraries/
https://support.google.com/richmedia/answer/6307288?hl=en -
Ad agencies send me only a storyboard and a source .psd. My responsibility to close my eyes and see the animation and code it with GSAP. They occassionally append text to storyboard frames to describe their vision more pecisely.
There is no better and more flexible solution than scripting an anim with GSAP. If You get through the painful asset exporting/optimization and css positioning, You have the clear field to play with movements, alphas, masks, rotations, spawn particles... The timeline approach is not the way. It is seems easy at first glance, but You are doomed if You want to make size mutations, or the client coming out with a brand new modification idea. Ergo there is no reason to convert a timeline to GSAP. That is a rocky road, don't go that way.
The question is: How do You make all the pixel, vector, box, ( text ) assest from that .psd, and how do You make a raw HTML from them, ready to TweenMax it?
My answer was ( after trying out all the commercial tools ) to write my own IDE which is resides in Photoshop. It exports assets, writes and formats HTML and offers me a convenient tweenScript editor, and tons of more. It's a pre alpha and not released yet, but I have to say: I can concentrate on animation now, not on the dirty HTML business.
Opps, someone reserved adFury.io and the name as a trademark a few months ago. I have been pushing out ads with this signature since more than a year. I was slow
anyway, I am sending this pic for him.
http://www.fractalartcontests.com/1999/entries-organic.htm-
3
-
-
As I know SVG doesn't support 3D CSS transforms.
http://read.pudn.com/downloads135/ebook/573344/OReilly-SVG-Essential.pdf
If You want to rotate vector shapes in 3D space, put every one of them into <div><svg>....</svg></div> tags and twist the <div>s.
But I am getting confused now what is possible and what is not.
-
3
-
-
Google is so large, they can't even solve anything. I have several open issues since months with replies like:
- Oh really?!
- You are stupid, how dare You reported this issue!
- We are really sorry, workaround the problem in 15 more steps.
- This issue is so little, we don't even move our little finger.- Use Chrome 49, that is working.
No, I wont report anything to or ask anything from Google.
-
Great! With the latest beta, it's working.
1.19:See the Pen kkvzKN by oliver15years (@oliver15years) on CodePen
Latest Beta:See the Pen kkvzKN by oliver15years (@oliver15years) on CodePen
Maybe You changed something else which is affecting SVG masks. Anyway, this gonna be perfect when we can CDN link it.
Do You know when will Google host this version?-
1
-
-
@Jack, I am assembling a transfrom attribute value by chaining all the necessary transfroms and setting them. IE and FF not updating the CSS tweened masks and clip paths. I didn't spent much time developing it, and at the moment it depends on a ".layout" attribute of the DOM elements, which I set previously.
See the Pen qRZorJ?editors=0010 by oliver15years (@oliver15years) on CodePen
I am glad You are interrested in it.
Forgive me my noobness. I would really appreciate Your advices, how to make it professional.
Repeat all animation one time
in Banner Animation
Posted
You have to create a timeline and supply the repeat key-value for it:
mytl = new TimelineMax( { repeat: 1 } );