flash08
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by flash08
-
Thank you! I'm still tossing around the various options in my head. I don't much like the animation possibilities built into Edge - very limited, I think. It all boils dowjn to whether I can find the time to do some work with GSAP before this project gets approved and then, well, the race is on... I've now got my understanding of Edge at a point where I could do all of the banners pretty quickly - as long as the client doesn't dream up some complex animation thing.
-
My own preference is for GSAP, and were it not for my "free" Adobe Edge (I subscribe to the whole CC suite, as I very much need Photoshop, Illustrator and Indesign...) I wouldn't even bother with the Adobe program. Sometimes it's a bit difficult to "imagine" the GSAP Timeline, especially when the animations have to be completed quickly. Once I can successfully write a basic Timeline with TimeLineLite, I'll just use that for the basis of my new animations. I don't quite have the hang of it yet. I have generated some test files with the latest version of Edge, and they seem stable enough. The animation possibilities are far fewer, but for some simple banner ads, I may go with Edge, especially since they changed the output file structure to bring the number of required files down to just 2. The problems going forward are that the Webmasters for the client's site don't seem especially savvy, and just getting the pair of JS files into the page header, linking up the CSS file, and inserting the Edge Runtime code may not be something they can digest easily...sigh. Thanks for your comments!
-
I think TweenLite + CSSPlugin will be the way to go for me. I have yet to find out what the client's Javascript requirements are, if any. I also noticed that Edge Animate has changed and is more efficient in its use of resources, but strangely enough, even though I have the CC2014 version, it seems not to be up to date per Adobe's own versioning data. Unfortunately, it seems that the latest Edge "update" is so buggy as to create many problems for developers. A test of Edge shows that the problem is that files created in previous versions cannot be saved to the latest version under their original names. Using Save As generates a fairly compact new footprint - only one edge.5.0.0.min.js file, about 100K in size. With the other Edge Javascript needed to create the output files, the total footprint for a small banner is less than 120K, which seems OK, all other things considered.
-
It's for a client. Their Web people I have communicated with don't seem all that savvy - it's for a marketing site, where almost all of the current content is just images created from their print materials - terrible for search engines. The large image file on the landing page (180K, mostly consisting of text and links rendered as a single .JPG) does not load all that quickly, but I don't want to make matters worse. There are some toods out there for doing HTML5 banners, but they all seem pretty clunky unless you need to make many, many banners in lots of different sizes. One of the primary ideas behind GSAP is lightweight functionality, I think. If I had a lot of these to do, I would just use something simple like Edge, as the ability to look at a timeline and swap in visual elements is handy - with GSAP for the actual animation, of course. But Edge adds another 100K or so in just overhead. Maybe OK, but seems a bit much for some small animated banners.
-
Thanks, but not too much there. There must be someone here who is using GSAP for banners. Maybe we'll hear from them?
-
Working on some small animated banners. Just wondering what the optimal GSAP setup might be in terms of balancing a decent animation feature set and the overall size of the files output. I've looked around a bit, but there doesn't seem to be much practical advice. Ideas?
-
Yes, it sure does, I guess. Works fine, though, and only 2 lines of code per button. Well, the Edge interface looks a lot like the Flash interface. I don't know much about the Edge code itself, because it isn't very well documented, and seems very clunky to use. I had avoided using it at all until they "fixed" the way Edge uses external JS files (such as GSAP) - now, all you have to do is click to add the JS files, without having to manually paste them into the HTML file, as had been the previous method. I'm using strictly GSAP code for the different Edge events: mouseover, mouseout, onclick, etc. - it's so easy to write, and all I need to do is to have the GSAP Easing demo up on another screen to figure out which effect I need. I think of Edge as working pretty much like Flash works - the real functionality is in the ability to use scripting, not in the built-in stuff: using GSAP is like using Actionscript - just code. Much more intuitive, given the fact that Adobe's Edge interface is IMHO, completely non-intuitive and needlessly complex. The only thing I like about Edge is that the Timeline is just as easy to use as it was in Flash, especially if you're trying to do something where a visual depiction of the Timeline is helpful.
-
Yup. I have been working with GSAP inside of Adobe Edge, as the interface is very simple to use to pre-test the animation. The only real issue I have come across is that of targeting specific elements. So, while var hideall = sym$("[id*=Box]"); TweenMax.to (hideall, .25, {opacity:0, ease: Linear.easeNone}); works, if I try to target an individual element with the same syntax, i.e. var.showbox = sym.$("[id=Text_Box3]"); TweenMax.to (showbox, .25, {opacity:1, ease: Linear.easeNone}); It does not work. But this does, oddly enough: var.showbox = sym.$("[id*=Text_Box3]"); TweenMax.to (showbox, .25, {opacity:1, ease: Linear.easeNone}); I checked the selector, and it's correct: Text_Box3 No big deal, as it works fine using the wildcard. Just wondering why the selector doesn't work as expected.
-
Thanks, OSUblake. That's what I needed. The problem is how to target all of my buttons in order to hide them all before showing the one I want. My text boxes all have the ID's specified like this: #Text_Box1 #Text_Box2 #Text_Box3 So, it's then just a question of a little jQuery selector stuff: var hideall = sym$("[id*=Box]"); TweenMax.to (hideall, .25, {opacity:0, ease: Linear.easeNone}); And then the line to show the individual box that I want, etc. Just had to look up the jQuery selector syntax, which I couldn't quite recall.
-
I'm converting another Flash movie. This one has 16 buttons, each targeting a unique text box. When the user clicks on a button, it changes the text that appears in an adjacent area. In the Flash version, this was done with layers and moving around on the Timeline. No problem figuring out the onclick actions. But how to handle the "stack" of text boxes? 1.) When the page opens, the default text box is in place. When the user clicks a button, it's easy to change the zIndex, or the opacity, or even the show/hide properties. But, when the click occurs, this is what has to happen: 1.) The selected layer is "activated," either by changing its opacity to 1, or bringing it to the top of the "stack" with zIndex. The text box appears. BUT, simultaneously, the text box that was at the top of the stack must be "deactivated." 2.) The box at the "top of the stack" at any time could be any one of those 16 different boxes. Obviously, it must now "go away," by hiding it, or changing its opacity to 0, or sending it to the bottom of the "stack" with a lower zIndex number. Easy to "activate" a box, but not so easy to send away the one that's currently visible when the click occurs. Since it will always be a different box, I can't see a way to target it. I would think that when the selected text box loads, it has to somehow automatically become a variable that could be addressed later. But this is above my jQuery knowledge level... can someone point me in the right direction? TIA!
-
Thank you - that's the right syntax! So, I tested it with 3 different changes and they all work: // insert code to be run when the mouse hovers over the object var element = sym.$("#Stage_Test_Ellipse"); TweenMax.to (element, 2, {css:{backgroundColor: "red", rotation:135, opacity:.5}, ease:Elastic.easeOut}); I am still working on adding the CSS plug, as it doesn't seem to be added via the built-in Scripts panel; although I see it listed it does not work as of yet.
-
Well, there's very little to see. Here is the total code of an example of the issue, using just Javascript. The name of the Edge Symbol I am trying to change the color of is just a circle, called "Test": // code for hover event sym.$("Test").css("background-color", "red"); -or, using GSAP: var element = sym.$("Test"); TweenMax.to (element, 2, { css:{backgroundColor: "red"}}); The result of either method is the same: It turns out that the problem is one of WHICH element is being addressed here. My original code acts on the PARENT element (a div) of the Symbol. The ellipse contained inside the Symbol is addressed like this (courtesy of some folks on the Edge forum): sym.getSymbol("Test").$("Ellipse").css("background-color", "red"); //where "Ellipse" is the circle element inside the symbol So, for GSAP, how would I go about doing the same thing?
-
Thanks. I'm known for my bad typing! I did have it set to backgroundColor, without the G. Odd, but I have found out that what my code does work, but not as expected: It DOES change the "background color", but NOT as I would expect - it changes the background of the Symbol, which is apparently the background of a parent element, not the Symbol itself, which in this case, began life with a grey fill. (I edited the Symbol into a rounded rectangle, here) I'm guessing that I need to somehow address one element lower in the document (i.e., the one whose background I can address...) I've added a screenshot below, which shows what happens.I used to do a fair amount of Flash work, but I'm not sure how the Symbols work in Edge just yet. Not intuitive, at least to me.
-
I've got some Flash animations to convert to HTML. Since I have Adobe Edge as part of the CC subscription, I thought I'd give it a go. After a lot of head-scratching and teeth-gnashing over the syntax, I more or less have the basic stuff figured out. I think GSAP is far simpler to use than the Timeline-based "point 'n click" method. What I can't seem to address is how to use GSAP to change the color of a Symbol in Edge. The CSS for backgroundColor doesn't do anything - see the following code snippet - the rotation and opacity changes occur on hover, but the color of the object does not change. // insert code to be run when the mouse hovers over the object var element = sym.$("Sphere"); TweenMax.to (element, 2, { css:{backGroundColor: "#FF9933", rotation:135, opacity:.5}, ease:Elastic.easeOut}); Stupid syntax error, but I can't seem to see it. TIA for your help!
-
That's it, thanks. I've really got to try and get my head around AS3. I don't do as much Flash stuff as I used to, but I don't want to be forever stuck in AS2 syntax...
-
This is more of my rotating wheel thing. I have a wheel that rotates when a user clicks on a button contained on the wheel; the amount of rotation depends on which button is clicked. When the button is clicked, the wheel rotates and a small animation plays, also depending on which button was clicked. I want the Wheel mc to play the animation associated with its first position - when the Wheel mc loads for the first time ONLY. I can't seem to get this to happen, most likely due to being stuck in AS2 syntax. Here's the code: import com.greensock.*; import com.greensock.easing.*; //this is what's not working, and it also prevents the rest of the script from working properly // Wheel.addEventListener(Event.ENTER_FRAME,spinInit); function spinInit(event:Event):void { TweenMax.to(Wheel, .5, {rotation:30, ease:Cubic.easeIn}); Clients.gotoAndPlay("As"); } //end of what doesn't work // Wheel.A.addEventListener(MouseEvent.CLICK,spin); function spin(event:MouseEvent):void { TweenMax.to(Wheel, .5, {rotation:30, ease:Cubic.easeIn}); Clients.gotoAndPlay("As"); } Wheel.B.addEventListener(MouseEvent.CLICK,spin2); function spin2(event:MouseEvent):void { TweenMax.to(Wheel, .5, {rotation:20, ease:Cubic.easeIn}); Clients.gotoAndPlay("Bs"); } etc etc etc TIA for your suggestions
-
Well, I started wuith a clean file and - your last suggestion works fine! It was the EventListener that needed to specify its target according to the parent.child relationship. Wheel.rotate.addEventListener(MouseEvent.CLICK,shifter); I looked around in the old file for some other conflicting AS, but found nothing. Thanks so much for your help! I still don't find AS3 very intuitive compared to its antecedents...
-
Thanks for your suggestions. Here is what I tried: The parent wheel mc is called Wheel. I can easily rotate Wheel with a button instance called Rotate with this in the timeline: import com.greensock.*; import com.greensock.easing.*; Rotate.addEventListener(MouseEvent.CLICK,shifter); function shifter(event:MouseEvent):void { TweenMax.to(Wheel, 1, {rotation:120, ease:Cubic.easeIn}); } But, if I edit Wheel and put Rotate inside Wheel, when I click on the button, nothing happens and the output dialog reports, "Access of undefined property Rotate" I assume because the path is not properly defined? How does AS3 want me to call the parent Wheel from it's child button Rotate? I tried this: import com.greensock.*; import com.greensock.easing.*; Rotate.addEventListener(MouseEvent.CLICK,shifter); function shifter(event:MouseEvent):void { TweenMax.to(Wheel, 1, {rotation:120, ease:Cubic.easeIn}); } trace(Rotate) trace(Wheel) [object SimpleButton] [object Wheel_2] ... and now when I click the button, it rotates the whole stage!!! So I'm almost there. It's obviously the reference to Wheel needing to indicate that it is a parent mc of the Rotate button.
-
So, what I tried was this: import com.greensock.*; import com.greensock.easing.*; Mybutton.addEventListener(MouseEvent.CLICK,shifter); function shifter(e:MouseEvent):void{ TweenMax.to(Myclip, 1, {rotation:120, ease:Cubic.easeIn}); } No more errors in compiling - but also no rotation of Myclip. I went in and commented out all of the AS1 code on the different buttons, as well. I must still be missing something. Reading Moock's AS3 book as fast as I can... Update: Started with a new file, button works OK. There must be some remnant of AS1 code I can't see in the older file. But, what I can't seem to get a handle on is how to have MULTIPLE buttons, each rotating my mc by differing amounts. In AS1, all I needed to do was to attach actions to the button instances. The basic problem is that these individual buttons are physically INSIDE my rotating mc - like rotating a wheel to see what specific place it comes to rest - Wheel of Fortune style. The buttons rotate along with the rest of the wheel.
-
Now that I've got TweenMax working, I'm trying to use it to replace the old AS1 code that I'm dealing with here. I've got some code written in AS1, and I need to update it for future maintenance purposes. All that's going on here is that when a user clicks on a button, it causes a graphic "spinner" to rotate around its central axis. The AS1 code won't work in a AS3 environment, as basically, you can't attach an action to a movieclip or button instance as you could long ago in AS1. The old code, attached to the mc instance Mybutton: on (press) { setProperty("/Myclip", _rotation, "-20"); I tried: import com.greensock.*; import com.greensock.easing.*; Mybutton.addEventListener(MouseEvent.CLICK,shifter); function shifter(TweenMax.to(Myclip, 1, {rotation:120, ease:Cubic.easeIn}); No errors in compiling, nothing happens. I just HATE AS3 syntax...so much less intuitive than previous versions.
-
Thank you - that's it, of course. In creating the new symbols, somehow I completely forgot to pick the center registration point out of that tiny box in the Flash dialog. I guess I was assuming that the default registration point would be the center; I think it just defaults to whatever you picked the last time you did Convert to Symbol. One of these days I'll have to go back into the prefs and see if I can fix that...
-
I'm converting some old AS2 code to AS3. I had some old code that rotated a circular-shaped mc IN PLACE by different amounts, depending on which button the user clicked. Kind of like a "spinnner" effect. I plan on adding an easing function with TweenMax replacing the old code. I am using for the TweenMax rotation, as a test TweenMax.to(mc, 1, {rotation:120, ease:Cubic.easeIn}); But what this does is to rotate the mc itself around a circular path, but not in place. I even played with the interactive demo on the TweenMax page, which yielded the same code. What am I missing?
-
Thanks for your help. I was just getting "syntax error." I figured out that the problem was that my .FLA was based on a previous .FLA that used AS2. Even though I had deleted the things that had AS2 scripting, the file - even though resaved as a Flash CS4 version - still somehow considered itself to be using AS2, not AS3. I copied the artwork over to a new empty .FLA and everything returned to normal. The project on which I am working now involves translating the AS2 code to AS3 for maintenance and future upgrades. I've poked around and it looks like going over the code manually is my best bet - but at least TweenMax is working as expected.
-
De-lurking here. I had used TweenLite on some AS2 projects - worked fine. I am familiar with using the different easing functions, etc. Just tried to work with the AS3 version of TweenMax - downloaded a new install this afternoon. There is an obvious path problem here, as even the simple statements, import com.greensock.*; import com.greensock.easing.*; generate "syntax errors" when the Flash compiler does its thing. The Greensock parent "com" folder is in the same folder as the .FLA in question, and for good meaure, I added the classpath pointing to the "com" folder in AS3 Flash prefs. Something obvious here, but I guess not to me. Windows XP, Flash CS4, etc etc etc. Can someone point out the obvious?
-
Hmm. A check of the embedded SWF shows that it's published to version 6! So, there's no way to publish to a later version of Flash except to upgrade to Flash CS-something?