GourmetGorilla Posted May 17, 2015 Share Posted May 17, 2015 Can anyone explain this file, how it was generated, what is was made with. How the sequence of 'position' and 'alpha' numbers are used, and how they relate to the scrollable feature of the site? http://flashvhtml.com/js/site/ScrollMap.js For instance: var rockets = {rockets:[{startFrame:0, endFrame:100, position:[1.15,5,3.14,2.25,10,3.14,3.3,15,3.14,4.3,20,3.14,5.3,25,3.14,6.25,30,3.13,7.15,35,3.13,8.05,40,3.13,8.9,45,3.13,9.75,50,3.13,10.55,53,3.13,11.35,54,3.13,12.15,53,3.13,12.9,50,3.13,13.65,45,3.13,14.4,38,3.13,15.1,29,3.13,15.8,18,3.13,16.5,5,3.13,17.2,-9.95,3.13,17.85,-26.9,3.13,18.5,-45.85,3.13,19.15,-66.8,3.13,19.8,-89.75,3.13,20.45,-114.7,3.13,21.05,-141.65,3.13,21.65,-170.6,3.13,22.25,-201.55,3.13,22.85,-234.5,3.13,23.45,-269.45,3.13,24.05,-306.4,3.13,24.6,-345.35,3.13,25.15,-386.3,3.13,25.7,-429.25,3.13,26.25,-474.2,3.13,26.8,-521.15,3.13,27.35,-570.1,3.13,27.9,-621.05,3.13,28.45,-674,3.13,29,-728.95,3.13,29.55,-785.9,3.13,30.05,-844.85,3.13,30.55,-905.8,3.13,31.05,-968.75,3.13,31.55,-1033.7,3.13,32.05,-1100.65,3.13,32.55,-1169.6,3.13,33.05,-1240.55,3.13,33.55,-1313.5,3.13,34.05,-1388.45,3.13,34.55,-1465.4,3.13,35.05,-1544.35,3.13,35.55,-1625.3,3.13,36.05,-1708.25,3.13,36.55,-1793.2,3.13,37.05,-1880.15,3.13,37.55,-1969.1,3.13,38.05,-2060.05,3.13,38.55,-2153,3.13,39.05,-2247.95,3.13,39.55,-2344.9,3.13,40.05,-2443.85,3.13,40.55,-2544.8,3.13,41,-2647.75,3.13,41.45,-2752.7,3.13,41.9,-2859.65,3.13,42.35,-2968.6,3.13,42.8,-3079.55,3.13,43.25,-3192.5,3.13,43.7,-3307.45,3.13,44.15,-3424.4,3.13,44.6,-3543.35,3.13,45.05,-3664.3,3.13,45.5,-3787.25,3.13,45.95,-3912.2,3.13,46.4,-4039.15,3.13,46.85,-4168.1,3.13,47.3,-4299.05,3.13,47.75,-4432,3.13,48.2,-4566.95,3.13,48.65,-4703.9,3.13,49.1,-4842.85,3.13,49.55,-4983.8,3.13,50,-5126.75,3.13,50.45,-5271.7,3.13,50.9,-5418.65,3.13,51.35,-5567.6,3.13,51.8,-5718.55,3.13,52.25,-5871.5,3.13,52.7,-6026.45,3.13,53.15,-6183.4,3.13,53.6,-6342.35,3.13,54.05,-6503.3,3.13,54.5,-6666.25,3.13,54.95,-6831.2,3.13,55.4,-6998.15,3.13,55.85,-7167.1,3.13,56.3,-7338.05,3.13,56.75,-7511,3.13,57.2,-7685.95,3.13]}, and also the position, scale and alpha here: mc89:{view:'cloudFade', depth:3, startFrame:488, endFrame:540, position:[1,1,0.95,1.2,0.95,1.2,0.95,1.2,1,1,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,0.95,1.2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], scale:[20.718994140625,15.5989990234375,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718994140625,15.5989990234375,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718368530273438,15.597808837890625,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375,20.718994140625,15.5989990234375], alpha:[0,0.25,0.5,0.75,1,0.875,0.75,0.625,0.5,0.375,0.25,0.125,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}, How do I make sense of all those numbers? And how do I make one of these? It kind of looks like skrollr.js meets greensock on steroids. It's from the brilliant http://flashvhtml.com site. Quote Link to comment Share on other sites More sharing options...
ericjbasti Posted May 17, 2015 Share Posted May 17, 2015 I don't want to down play it, but it looks fairly straight forward to me. It just a series of tweens. If you look at mc0:{view:'space', depth:0, startFrame:0, endFrame:444, position:[0,36,0,36,0,36,0,35.95,0,35.9,0,35.9,0,35.85,0,35.8,0,35.75,0,35.7,0,35.7,0,35.65,0,35.6,0,35.55,0,35.5,0,35.5,0,35.45,0,35.4,0,35.35,0,35.3,0,35.3,0,35.25,0,35.2,0,35.15,0,35.1,0,35.1,0,35.05,0,35,0,34.95,0,34.9,0,34.9,0,34.85,0,34.8,0,34.75,0,34.75,0,34.7,0,34.65,0,34.6,0,34.55,0,34.55,0,34.5,0,34.45,0,34.4,0,34.35,0,34.35,0,34.3,0,34.25,0,34.2,0,34.15,0,34.15,0,34.1,0,34.05,0,34,0,33.95,0,33.95,0,33.9,0,33.85,0,33.8,0,33.75,0,33.75,0,33.7,0,33.65,0,33.6,0,33.55,0,33.55,0,33.5,0,33.45,0,33.4,0,33.35,0,33.35,0,33.3,0,33.25,0,33.2,0,33.15,0,33.15,0,33.1,0,33.05,0,33,0,32.95,0,32.95,0,32.9,0,32.85,0,32.8,0,32.75,0,32.75,0,32.7,0,32.65,0,32.6,0,32.55,0,32.55,0,32.5,0,32.45,0,32.4,0,32.35,0,32.35,0,32.3,0,32.25,0,32.2,0,32.2,0,32.15,0,32.1,0,32.05,0,32,0,32,0,31.95,0,31.9,0,31.85,0,31.8,0,31.8,0,31.75,0,31.7,0,31.65,0,31.6,0,31.6,0,31.55,0,31.5,0,31.45,0,31.4,0,31.4,0,31.35,0,31.3,0,31.25,0,31.2,0,31.2,0,31.15,0,31.1,0,31.05,0,31,0,31,0,30.95,0,30.9,0,30.85,0,30.8,0,30.8,0,30.75,0,30.7,0,30.65,0,30.6,0,30.6,0,30.55,0,30.5,0,30.45,0,30.4,0,30.4,0,30.35,0,30.3,0,30.25,0,30.2,0,30.2,0,30.15,0,30.1,0,30.05,0,30,0,30,0,29.95,0,29.9,0,29.85,0,29.8,0,29.8,0,29.75,0,29.7,0,29.65,0,29.65,0,29.6,0,29.55,0,29.5,0,29.45,0,29.45,0,29.4,0,29.35,0,29.3,0,29.25,0,29.25,0,29.2,0,29.15,0,29.1,0,29.05,0,29.05,0,29,0,28.95,0,28.9,0,28.85,0,28.85,0,28.8,0,28.75,0,28.7,0,28.65,0,28.65,0,28.6,0,28.55,0,28.5,0,28.45,0,28.45,0,28.4,0,28.35,0,28.3,0,28.25,0,28.25,0,28.2,0,28.15,0,28.1,0,28.05,0,28.05,0,28,0,27.95,0,27.9,0,27.85,0,27.85,0,27.8,0,27.75,0,27.7,0,27.65,0,27.65,0,27.6,0,27.55,0,27.5,0,27.45,0,27.45,0,27.4,0,27.35,0,27.3,0,27.25,0,27.25,0,27.2,0,27.15,0,27.1,0,27.1,0,27.05,0,27,0,26.95,0,26.9,0,26.9,0,26.85,0,26.8,0,26.75,0,26.7,0,26.7,0,26.65,0,26.6,0,26.55,0,26.5,0,26.5,0,26.45,0,26.4,0,26.35,0,26.3,0,26.3,0,26.25,0,26.2,0,26.15,0,26.1,0,26.1,0,26.05,0,26,0,25.5,0,25,0,24.45,0,23.95,0,23.45,0,22.95,0,22.45,0,21.95,0,21.4,0,20.9,0,20.4,0,19.9,0,19.4,0,18.85,0,18.35,0,17.85,0,17.35,0,16.85,0,16.35,0,15.8,0,15.3,0,14.8,0,12.45,0,10.1,0,7.7,0,5.35,0,3,0,0.65,0,-1.75,0,-4.1,0,-7.7,0,-11.3,0,-14.9,0,-18.55,0,-22.15,0,-25.75,0,-29.35,0,-32.95,0,-36.55,0,-40.15,0,-43.75,0,-47.4,0,-51,0,-54.6,0,-58.2,0,-61.8,0,-65.4,0,-69,0,-72.6,0,-76.25,0,-79.85,0,-83.45,0,-87.05,0,-90.65,0,-94.25,0,-97.85,0,-101.5,0,-105.1,0,-108.7,0,-112.3,0,-115.9,0,-119.5,0,-123.1,0,-126.7,0,-130.35,0,-133.95,0,-137.55,0,-141.15,0,-141.35,0,-141.55,0,-141.75,0,-141.95,0,-142.15,0,-142.3,0,-142.5,0,-142.7,0,-142.9,0,-143.1,0,-143.3,0,-143.5,0,-143.7,0,-143.9,0,-144.1,0,-144.3,0,-144.45,0,-144.65,0,-144.85,0,-145.05,0,-145.25,0,-145.45,0,-145.65,0,-145.85,0,-146.05,0,-146.25,0,-146.45,0,-146.6,0,-146.8,0,-147,0,-147.2,0,-147.4,0,-147.6,0,-147.8,0,-148,0,-148.2,0,-148.4,0,-148.6,0,-148.75,0,-148.95,0,-149.15,0,-149.35,0,-149.55,0,-149.75,0,-149.95,0,-150.15,0,-150.35,0,-150.55,0,-150.75,0,-150.9,0,-151.1,0,-151.3,0,-151.5,0,-151.7,0,-151.9,0,-152.1,0,-152.3,0,-152.5,0,-152.7,0,-152.9,0,-153.05,0,-153.25,0,-153.45,0,-153.65,0,-153.85,0,-154.05,0,-154.25,0,-154.45,0,-154.65,0,-154.85,0,-155.05,0,-155.25,0,-155.4,0,-155.6,0,-155.8,0,-156,0,-156.2,0,-156.4,0,-156.6,0,-156.8,0,-157,0,-157.2,0,-157.4,0,-157.55,0,-157.75,0,-157.95,0,-158.15,0,-158.35,0,-158.55,0,-158.75,0,-158.95,0,-159.15,0,-159.35,0,-159.55,0,-159.7,0,-159.9,0,-160.1,0,-160.3,0,-160.5,0,-160.7,0,-160.9,0,-161.1,0,-161.3,0,-161.5,0,-161.7,0,-161.85,0,-162.05,0,-162.25,0,-162.45,0,-162.65,0,-162.85,0,-163.05,0,-163.25,0,-163.45,0,-163.65,0,-163.85,0,-164,0,-164.2,0,-164.4,0,-164.6,0,-164.8,0,-165]}You will see the startPoint = 0 and the endPoint = 444. The total number of positions in the array are 888, thats 2 positions (x,y) for every point in time. Your mouse controls the timeline (just like skrollr.js) by taking the total scroll distance and dividing it by the total animation timeline. They probably built a tool to generate the arrays because they're actually quite inefficient (but the easiest to create). If an item is suppose to stay put for 50 frames, they duplicate that information 50 times. jdnichollsc 1 Quote Link to comment Share on other sites More sharing options...
jdnichollsc Posted August 25, 2015 Share Posted August 25, 2015 I don't want to down play it, but it looks fairly straight forward to me. It just a series of tweens. If you look at mc0:{view:'space', depth:0, startFrame:0, endFrame:444, position:[0,36,0,36,0,36,0,35.95,0,35.9,0,35.9,0,35.85,0,35.8,0,35.75,0,35.7,0,35.7,0,35.65,0,35.6,0,35.55,0,35.5,0,35.5,0,35.45,0,35.4,0,35.35,0,35.3,0,35.3,0,35.25,0,35.2,0,35.15,0,35.1,0,35.1,0,35.05,0,35,0,34.95,0,34.9,0,34.9,0,34.85,0,34.8,0,34.75,0,34.75,0,34.7,0,34.65,0,34.6,0,34.55,0,34.55,0,34.5,0,34.45,0,34.4,0,34.35,0,34.35,0,34.3,0,34.25,0,34.2,0,34.15,0,34.15,0,34.1,0,34.05,0,34,0,33.95,0,33.95,0,33.9,0,33.85,0,33.8,0,33.75,0,33.75,0,33.7,0,33.65,0,33.6,0,33.55,0,33.55,0,33.5,0,33.45,0,33.4,0,33.35,0,33.35,0,33.3,0,33.25,0,33.2,0,33.15,0,33.15,0,33.1,0,33.05,0,33,0,32.95,0,32.95,0,32.9,0,32.85,0,32.8,0,32.75,0,32.75,0,32.7,0,32.65,0,32.6,0,32.55,0,32.55,0,32.5,0,32.45,0,32.4,0,32.35,0,32.35,0,32.3,0,32.25,0,32.2,0,32.2,0,32.15,0,32.1,0,32.05,0,32,0,32,0,31.95,0,31.9,0,31.85,0,31.8,0,31.8,0,31.75,0,31.7,0,31.65,0,31.6,0,31.6,0,31.55,0,31.5,0,31.45,0,31.4,0,31.4,0,31.35,0,31.3,0,31.25,0,31.2,0,31.2,0,31.15,0,31.1,0,31.05,0,31,0,31,0,30.95,0,30.9,0,30.85,0,30.8,0,30.8,0,30.75,0,30.7,0,30.65,0,30.6,0,30.6,0,30.55,0,30.5,0,30.45,0,30.4,0,30.4,0,30.35,0,30.3,0,30.25,0,30.2,0,30.2,0,30.15,0,30.1,0,30.05,0,30,0,30,0,29.95,0,29.9,0,29.85,0,29.8,0,29.8,0,29.75,0,29.7,0,29.65,0,29.65,0,29.6,0,29.55,0,29.5,0,29.45,0,29.45,0,29.4,0,29.35,0,29.3,0,29.25,0,29.25,0,29.2,0,29.15,0,29.1,0,29.05,0,29.05,0,29,0,28.95,0,28.9,0,28.85,0,28.85,0,28.8,0,28.75,0,28.7,0,28.65,0,28.65,0,28.6,0,28.55,0,28.5,0,28.45,0,28.45,0,28.4,0,28.35,0,28.3,0,28.25,0,28.25,0,28.2,0,28.15,0,28.1,0,28.05,0,28.05,0,28,0,27.95,0,27.9,0,27.85,0,27.85,0,27.8,0,27.75,0,27.7,0,27.65,0,27.65,0,27.6,0,27.55,0,27.5,0,27.45,0,27.45,0,27.4,0,27.35,0,27.3,0,27.25,0,27.25,0,27.2,0,27.15,0,27.1,0,27.1,0,27.05,0,27,0,26.95,0,26.9,0,26.9,0,26.85,0,26.8,0,26.75,0,26.7,0,26.7,0,26.65,0,26.6,0,26.55,0,26.5,0,26.5,0,26.45,0,26.4,0,26.35,0,26.3,0,26.3,0,26.25,0,26.2,0,26.15,0,26.1,0,26.1,0,26.05,0,26,0,25.5,0,25,0,24.45,0,23.95,0,23.45,0,22.95,0,22.45,0,21.95,0,21.4,0,20.9,0,20.4,0,19.9,0,19.4,0,18.85,0,18.35,0,17.85,0,17.35,0,16.85,0,16.35,0,15.8,0,15.3,0,14.8,0,12.45,0,10.1,0,7.7,0,5.35,0,3,0,0.65,0,-1.75,0,-4.1,0,-7.7,0,-11.3,0,-14.9,0,-18.55,0,-22.15,0,-25.75,0,-29.35,0,-32.95,0,-36.55,0,-40.15,0,-43.75,0,-47.4,0,-51,0,-54.6,0,-58.2,0,-61.8,0,-65.4,0,-69,0,-72.6,0,-76.25,0,-79.85,0,-83.45,0,-87.05,0,-90.65,0,-94.25,0,-97.85,0,-101.5,0,-105.1,0,-108.7,0,-112.3,0,-115.9,0,-119.5,0,-123.1,0,-126.7,0,-130.35,0,-133.95,0,-137.55,0,-141.15,0,-141.35,0,-141.55,0,-141.75,0,-141.95,0,-142.15,0,-142.3,0,-142.5,0,-142.7,0,-142.9,0,-143.1,0,-143.3,0,-143.5,0,-143.7,0,-143.9,0,-144.1,0,-144.3,0,-144.45,0,-144.65,0,-144.85,0,-145.05,0,-145.25,0,-145.45,0,-145.65,0,-145.85,0,-146.05,0,-146.25,0,-146.45,0,-146.6,0,-146.8,0,-147,0,-147.2,0,-147.4,0,-147.6,0,-147.8,0,-148,0,-148.2,0,-148.4,0,-148.6,0,-148.75,0,-148.95,0,-149.15,0,-149.35,0,-149.55,0,-149.75,0,-149.95,0,-150.15,0,-150.35,0,-150.55,0,-150.75,0,-150.9,0,-151.1,0,-151.3,0,-151.5,0,-151.7,0,-151.9,0,-152.1,0,-152.3,0,-152.5,0,-152.7,0,-152.9,0,-153.05,0,-153.25,0,-153.45,0,-153.65,0,-153.85,0,-154.05,0,-154.25,0,-154.45,0,-154.65,0,-154.85,0,-155.05,0,-155.25,0,-155.4,0,-155.6,0,-155.8,0,-156,0,-156.2,0,-156.4,0,-156.6,0,-156.8,0,-157,0,-157.2,0,-157.4,0,-157.55,0,-157.75,0,-157.95,0,-158.15,0,-158.35,0,-158.55,0,-158.75,0,-158.95,0,-159.15,0,-159.35,0,-159.55,0,-159.7,0,-159.9,0,-160.1,0,-160.3,0,-160.5,0,-160.7,0,-160.9,0,-161.1,0,-161.3,0,-161.5,0,-161.7,0,-161.85,0,-162.05,0,-162.25,0,-162.45,0,-162.65,0,-162.85,0,-163.05,0,-163.25,0,-163.45,0,-163.65,0,-163.85,0,-164,0,-164.2,0,-164.4,0,-164.6,0,-164.8,0,-165]}You will see the startPoint = 0 and the endPoint = 444. The total number of positions in the array are 888, thats 2 positions (x,y) for every point in time. Your mouse controls the timeline (just like skrollr.js) by taking the total scroll distance and dividing it by the total animation timeline. They probably built a tool to generate the arrays because they're actually quite inefficient (but the easiest to create). If an item is suppose to stay put for 50 frames, they duplicate that information 50 times. Exist any tutorial with scaling? Thanks in advance! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.