20 Replies Latest reply on Nov 19, 2012 5:19 PM by tfbkny

    Links

    brex2040 Level 1

      I am working on a project. first time using Edge, love it so far, bit tricky to get it to do what i want. Ok my layout. I have 960x500 work area, that of course is set too % so it will fill the screen. Anyone, So i have my menu

       

      with my content, looks plain right now, just getting layout done and links working.  So as you can see i have an option for boxed chocolate, i would like to open to the right of it in that red box, doesnt have to fill the whole thing, most of it. I have no JS experiance programming, can someone help me with the coding please. Thanks.Project.png

        • 1. Re: Links
          tfbkny Level 1

          It would be easier if you shared your project by zipping the containing fodler so that it could be downloaded by those in the community who can lend a hand modifying the project and sending it back

          • 2. Re: Links
            brex2040 Level 1

            I am working on a project. first time using Edge, love it so far, bit tricky to get it to do what i want. Ok my layout. I have 960x500 work area, that of course is set too % so it will fill the screen. Anyone, So i have my menu

             

            with my content, looks plain right now, just getting layout done and links working. So as you can see i have an option for boxed chocolate, i would like to open to the right of it in that red box, doesnt have to fill the whole thing, most of it. I have no JS experiance programming, can someone help me with the coding please. Thanks.

             

            Here is the link to dl my files i am working on.

             

            https://www.dropbox.com/s/4n0ul53z9mt14m3/Cummings%20Chocolates2.rar

            • 3. Re: Links
              tfbkny Level 1

              Couple things:

              - For some reason can't work with your file as I can't add actions in Code view (all actions are grayed out) so there may be something wrong with the file itself. Are you using Edge v.1 or was this made with an older preview? 

              - Images need to be optimized for web use (they are huge)

              - The file is built in a bit of a messy way as items have not laid out in a manageable way (turning them into symbols that can  then be targeted for interactivity) and it would be much easier and cleaner for me to rebuild from scratch based on what I gathered from your attempt

               

              I think I get what you are trying to do and if you want I can make a quick example based on a photogallery paradigm if that helps your project. Though I don't know if that will help you learn much... let me know and I'll see what I can send you back.

               

               

              Cheers!

              tfbkny

              • 4. Re: Links
                brex2040 Level 1

                That would be awsome if you could do that. I am using what ever Adobe downloaded in my Creative Cloud. How can i move items up and down in the stage or elements window, so that they are all together, like if if have 2 rectangles, one might be at the bottom and one at the top, i have tried to move them to be together. I think i included the wrong pictures, sorry. but if you have the idea, that would be great if you can help.

                 

                Thanks so much.

                • 5. Re: Links
                  tfbkny Level 1

                  Check the page: http://www.tfbkny.com/testbox/cummingschocolate/index.html

                   

                  Just a quick sample... click on Boxed Chocolates and Nut Brittles. Those are the only buttons that work at the moment. Is to give you an idea of what could look like (I followed your original layout design and colors scheme). Each section could have a slideshow with images and perhaps a short description of the product. If this looks like something you could use let me know and I will send you the files (note: I reduced and opimize the images. I also did a quick color correction as the images have an heavy yellow hue that made them look not very natural).

                   

                  I didn't go further since I don't have an idea of what you are looking for, but hope this could be a starting point

                   

                  Cheers

                  tfbkny

                  • 6. Re: Links
                    brex2040 Level 1

                    That is so cool, I love Edge. I cant wait till i can learn more. If you can send me the files. this will help me out a lot. Thank you so much. I love it.

                    • 7. Re: Links
                      resdesign Adobe Community Professional & MVP

                      Menu elements are overlapping on Chrome.

                      But I do love chocolate being half-Swiss where Nestle and Caille are from.

                      • 8. Re: Links
                        tfbkny Level 1

                        That is strange resdesign... o_O I have seen no issues in Chrome or Safari (see attached screenshot from chrome 23.0.1271.64 under OS X 10.6 where I highlighted by selecting in the browser all text menu elements and show no overlap)... 

                        Have not tested this in all browsers like IE/FF/Opera though... No overlapping here... and you brex2040?

                         

                        Screen-shot-2012-11-16-at-3.45.jpg

                         

                        Anyway Brex2040 here is the zipped archive with quickly color corrected (most of them) and optimized images. Let me know if you need further help and I'll be glad to lend a hand

                        www.tfbkny.com/testbox/cummingschocolate/version1.zip

                         

                        Cheers

                        tfbkny

                        • 9. Re: Links
                          resdesign Adobe Community Professional & MVP

                          Here is what I get:

                          11-16-2012 2-55-59 PM.png

                          • 10. Re: Links
                            brex2040 Level 1

                            Wow, thats so cool. I love it. the only thing is when i look at the coding, i poop myself. I am not a js person. so i have no idea what it all means. If i want to make more item clickable, do i just add the code to the prodoct section of the code or do i need need to add more items. within that window to make it all work.

                             

                            You explaining things is helping me enough. after this client, i have 2 more that want there art studio website redone. so i really want to learn this. Thanks for the help.

                            • 11. Re: Links
                              tfbkny Level 1

                              @resdesign

                              What it seems to be happening is due to having a zoomed view I could reproduce the same issue by zoomin in once. Since the text will be enlarged, it will break and wrap onto the next line hence overlapping the text present below it. If you look at actual size it should be no problem (I assume you are on mac too and Chrome v23). Let me know if that was the issue on your end.

                               

                              Cheers!

                              tfbkny

                              • 12. Re: Links
                                tfbkny Level 1

                                brex2040 I absolutely know how you feel when looking at code... I am no developer myself and I know my limits but don't get discouraged, the will to learn, time and perseverance it's really all you need. As far as help that'll be always available from the wonderful people in this community and the Edge team wizards! Many have helped me and continue to do so.

                                 

                                Regarding your question about adding interaction, you can check out this AdobeTV video here. I am not being lazy, I just thing that will help you get it better than reading through a long-winded text explanation I'd provide here and like I said, if you need help at any time with this or other projects, all you need to do is ask

                                 

                                Cheers!

                                tfbkny

                                • 13. Re: Links
                                  resdesign Adobe Community Professional & MVP

                                  I did not zoom in oor out anything. Just loaded the page.

                                  • 14. Re: Links
                                    tfbkny Level 1

                                    Yep resdesign, I didn't say you did just that I could replicate the behavior only by zooming in (and actually also zooming out 2x). Perhaps my version of Chrome renders differently than the one you're running for some weird reason. At the moment I am at a loss and don't know what it may be causing this rendering issue... though if in future you find out why, please do share your findings... I'll do the same

                                     

                                    These are the moments I miss the much higher consistency that Flash allowed when it came to render in the same way across browsers and platforms... even flash had its issues in that regard, but boy it removed a lot of head scratching and time wasted debugging issues that shouldn't have been there in the first place. That's all another "black magic" to learn... finding fixes and workarounds to problems that are not related to the designer/developer doing something wrong. It's like using different hand calculators where on some 1+1=2 while on others the result may be 0, 11, or some other nonsense that is not related to anything that you did when you keyed in the calculation (note: please pass me the comparison despite hardly anyone other than perhaps some old-school accountants may be using handheld calculators ;D)

                                     

                                    @brex2040 issues like the one brought up by resdesign are something you will need to be aware of so test your builds in as many browsers/ OSs and devices you can to make sure the pages render acceptably on all or most of the target users. Keep in mind that there may be cases where you may not be able to "fix" an issue because it's  not your page to have a problem, but it's rather a bug in a browser that needs fixing. Thankfully those are rare cases and usually limited to a platform/browser that needs to catch up with the mainstream ones. Other cases may be issues created by the fact that some may still be using older versions of OS and/or browsers. Often these issues are between IE and non IE browsers, but when mobile came to the game it exponentially multiplied headaches. One way would be to use Adobe Edge Inspect since you already are a Creative Cloud subscriber.

                                     

                                    As a side note: I had clients who claimed to be unhappy with the fact that the HTML5 build of the project they commissioned wasn't working in Windows XP under IE6.x and asked me to "make it happen" because their client expected that project to work ubiquitously. That alone should be "enough said", but you (brex2040) may not be aware that IE6 isn't HTML5 compliant so there is no way to "make it happen". After learning that you may now understand that a client asking you to "make it happen" in this case would be laughable and it would even be quite funny if it wasn't happening as often than it does (hopefully in time will be less frequent) making it a tragically sad reality of working in this field.

                                    By the way, I had provided a flash version, several video formats for the animation and a static image (as a poster frame), to be used when non compliant browsers like IE6 were detected. Apparently that wasn't what their client asked so when they kept insisting I'd "make it happen" even after building and providing those alternatives for free and explaining the reasons why "making it happen" was impossible for me (or anyone else for that matter), I suggested they would put in a request with Microsoft to add HTML5/CSS3 compliance to IE6. Mind you this didn't happen ages ago, but when Windows 7 and IE10 were already out though not extremely popular yet (just to put things into perspective XP and IE6 were first released over 11 years ago).

                                     

                                    That said happy designing and learning!

                                     

                                    Cheers!

                                    tfbkny

                                    • 15. Re: Links
                                      brex2040 Level 1

                                      tfbkny

                                       

                                      I just watched that video you suggested, very helpful. My only question is on the timeline or in the elements window he had a section called Group. Is that where he put the pictures and how did he set those up. That part would be great to know. Wish he would have shown use from start to finish in that video. Know of any others that would show that part of it.

                                      • 16. Re: Links
                                        tfbkny Level 1

                                        Glad it helped and yes I agree with you that there should be more beginners, intermediate and advanced training available out there... maybe in time I'd do some videos but I am no guru so I wouldn't want to spread misinformation. Maybe I'll do a few to share what I know so maybe those who know more will pitch in and correct and expand on topics I didn't cover... we'll see, I'll play by ear.

                                         

                                        Now about the group what is that isn't clear? Anything specific?

                                         

                                        If you want to know a way to do that is simple... you could very simply use a single image done in Photoshop that contains all the frames you want to show. Then you can import that single strip containing all images and you can call it Group or whatever you like... strip, slideshow, voteForPedro ... anything you want, really. The name is arbitrary and it's just so you can identify the element.

                                         

                                        The idea behind the interactions in the video tutoria is to

                                        - create an strip containing all images that one want to display,

                                        - import the image and create with it an animation that will slide the image strip from a frame to another,

                                        - place a stop on each frame in the timeline of the animated strip so each full frame containing a new image is shown when moving from image to image (note: not placing stops at each frame will cause the animation to play from the first image to the last, skipping those in between),

                                        - once the above has been set up, then it will be possible to use simple actions triggered by buttons (we will call them button because we use them to trigger an action but they could just be any element/symbol to which you acan attach code to make them "do something".

                                        In the tutorial that is accomplished with previous and next buttons that move the animation forward or backward 1 step at the time and intermediate buttons that are sending the playhead of the timeline straight to each stop points to allow navigating directly to a specidic image "index" represented by the label that the author has set up (for instance "Start" or "End") without having to move through each steps in between.

                                         

                                        Sorry if the explanation looks verbose, but it's always more challenging to explain using text rather than images or videos

                                         

                                        Hope the above helps and don't hesitate to ask should you have other doubts and questions.

                                         

                                        Cheers!

                                        tfbkny

                                        • 17. Re: Links
                                          brex2040 Level 1

                                          That sounds simple, but when you import, how do you know where one picture starts and then ends to keep it even and not over lapping? sorry if it seems stupid to ask. trying to learn. lol.

                                          • 18. Re: Links
                                            tfbkny Level 1

                                            There are no stupid questions, the only people who would remain ignorant are those who don't ask... that is probably one not-so-smart thing to do IMO

                                             

                                            So let me see if I get what you mean....

                                             

                                            - Let's say you have 10 images that are 640 pixel wide by 480 pixel high, for sake of example

                                             

                                            - You'd  create in Photoshop an image that is a strip where I've pasted 5 images obtaining a strip 3200 pixel wide by 480 pixel high

                                             

                                            - Now you'd import the image in Edge and create an symbol that is 640 pixel wide x 480 pixel high that you will use to display the images of the strip

                                             

                                            - Then you would create an animation where the strip would start showing the 1st image and, on a 2nd keyframe, the strip got slid horizontally toward the left side so that within your 640x480 area of the symbol containing the strip, you will have the 2nd image of the strip shown at its full 640x480 frame. You would then proceed to do the same with 3rd, 4th and 5th image of the strip, continuing to slide the strip to the left and adding a keyframe and timeline stop action for each

                                             

                                            - You would finally set the overflow to hidden for the symbol containing the image strip so that only the 640x480 area is shown and the rest of the strip would remain hidden from view

                                             

                                            Makes sense?

                                             

                                            (note: something similar to a strip could be accomplished in Edge building a "strip" importing 640x480 images in Edge and placing them side by side in a container symbol, but I used the option to make the entire strip image in Photoshop for sake of simplicity).

                                             

                                            Cheers!

                                            tfbkny

                                            • 19. Re: Links
                                              brex2040 Level 1

                                              Cool, I will try that and see if i can make that work. Do you know anything about Adobe Muse? If so, how do you get the window to auto size to the content its veiwed in. I dont want to go through all the CSS files and set everything to 100%.

                                              • 20. Re: Links
                                                tfbkny Level 1

                                                The example I sent you gets centered on the page using css within Edge... that's the line reading:

                                                $("#Stage").css({"margin":"auto", "text-align":"center"});

                                                 

                                                If you want to format the Edge composition within an html page you can always do so by using CSS in Edge or editing the index.html externally editing some inline CSS (or using a separate stylesheet).

                                                 

                                                One easy and visual way to get the code for your page layout generated with little effort would be to use one of the online generators... one of the most intuitive and least complex I think it's the one at:

                                                http://csslayoutgenerator.com/

                                                 

                                                There are several others that would help with page layouts and can also help you learn how CSS works when it comes to setting a page layout. Here are some more useful links you could check out aside from running your own searches with the terms "CSS" and "layout":

                                                 

                                                https://www.pageblox.com/generate

                                                http://www.generateit.net/layout-generator/ (part of http://www.generateit.net with a few other useful generators)

                                                http://csscreator.com/version2/pagelayout.php

                                                http://www.cssportal.com/layout-generator/

                                                 

                                                More CSS generators here:

                                                http://line25.com/articles/handy-roundup-of-css3-generators-and-tools

                                                 

                                                Sorry I can't help with Muse... I'd sugget trying the Muse forum for that if you want to know how to specifically accomplish that in Muse.

                                                 

                                                I am not a paying subscriber of Creative Cloud I was forced to become subscribed for free in order to get Edge Animate which I have been following since preview 3 (when there was no "Animate" in the name). I may check out Muse if Adobe will allow anything other than subscription-based model, but for now I am not too keen on renting access to software that I will not own and won't be able to use unless paying continuously including years from now. Perhaps I am still too old school on that aspect and I may not see the value others do. Adobe is making a mistake not to allow different marketing models (IMO), but that's another story

                                                 

                                                Cheers!

                                                tfbkny