16 Replies Latest reply on Sep 16, 2013 2:18 PM by Sean_Wilson

    Time Ruler...

    EL_MISMOLOCO Level 1

      Is there a way to create a ruler made with simple lines and number and controlled by lingo and a text field in a way that it reacts accornding to the time in the text field?

      Let's say I have in the text field 04:59 then the script organizes the lines with four higher lines indicating the four minutes and three smaller ones between the higher indicating 15 seconds each.

      I don't have a idle idea how to make this. Is it possble?

       

      Thanks

       

      Brian

        • 1. Re: Time Ruler...
          James Newton, ACP Level 3

          Sure it's possible. Can you post images somewhere of what it would look like? Perhaps you could include several pictures, for different times. What happens as time increases? Do the lines get closer together so that the ruler still fits the same space, or does the ruler get longer? What is the longest time that will need to be displayed?

           

          The more precise the image that you create for yourself (on paper or in your mind) the easier it will be for you to imagine how to create it.

          • 2. Re: Time Ruler...
            EL_MISMOLOCO Level 1

            Ruler.jpg

             

            The ruler will be 1286 pixel wide, and numbers and lines should accommodate to the time. Maximum 15 minutes. Here the ruler is showing 06:00 minutes even. Please, click the image and see. 

            Please, if someone knows how to do this, send me an email so we can arrange a payment for this job.

             

            Thanks

             

            Brian

            • 3. Re: Time Ruler...
              EL_MISMOLOCO Level 1

              I'm going to take for granted that this cannot be done in director.

              • 4. Re: Time Ruler...
                Sean_Wilson Adobe Community Professional

                No, it can be done in Director. Only recently have you offered to pay for this work, and you are sounding slightly petulant - which won't help you find someone to do this for you. There aren't a lot of users on this forum who can or will do what you ask, so you'll have to be a little patient.

                • 5. Re: Time Ruler...
                  EL_MISMOLOCO Level 1

                  Sorry if I sounded petulant, but since I saw that almost 100 users have seen this post that's why I took for granted that this was impossible to accomplish in director. And if I offer to pay is because I assumed that this kind of task would take time to be done. It wasn't my intention to sound petulant or offend anyone here. If so, I apologize, and I'm really sorry.

                   

                  Thanks

                   

                  Brian

                  • 6. Re: Time Ruler...
                    Sean_Wilson Adobe Community Professional

                    Brian, since James hasn't gotten back to you - and he really would be the best person for the job - I'll try to have a bash at it, but it will be a few days before I can find the time.

                    • 7. Re: Time Ruler...
                      EL_MISMOLOCO Level 1

                      Thank you, Sean. I really appreciate it.

                      • 8. Re: Time Ruler...
                        prossel Level 1

                        Hello,

                         

                        If James and Sean don't do it, I could also help, but not right now either. I need a few days to finish other urgent things first.

                        • 9. Re: Time Ruler...
                          EL_MISMOLOCO Level 1

                          Hi, prossel, thanks. I really appreciate, and I'll wait.

                          • 10. Re: Time Ruler...
                            rduane Level 1

                            Well, I'll be anxious to see what some of these other guys come up with.  Some fancy way of actually re-drawing the object with Lingo drawing commands, no doubt.  But the simplest, most obvious way that occurred to me to do it was to use Director AND Flash.  Just create the largest size ruler you might need, and then scale and crop it to the size you need.  The numbers get to looking a little wonky when you scale it too much, but this basically works.  I only made the minute field editable - I'll leave it to you to figure out how to edit the seconds too.

                             

                            timerRuler.zip

                            • 11. Re: Time Ruler...
                              EL_MISMOLOCO Level 1

                              rduane, thanks for taking your time doing this, but unfortunately, it does not work as I expected. Numbers and lines change disproportionately when you change time. But I as told you. I'm very grateful that you took valuable time to do this. As you say, let's see what these other guys come up with.

                               

                              Thanks

                               

                              Brian

                              • 12. Re: Time Ruler...
                                Sean_Wilson Adobe Community Professional

                                Hi Brian - I had a try at this and cooked up the following behavior. Copy and paste it into a script member and make sure it's typed appropriately before dragging it onto a bitmap sprite (the one you want to display your timeline graphic). It needs to be sent the message to draw this graphic. For example, if the graphic sprite (with this behavior attached) is sprite number 5, and you want it to draw a timeline of 4:33, you would call it with

                                sprite(5).mMakeTimeline("04:33")
                                

                                 

                                property spriteNum
                                property my
                                property myMember
                                property myImage
                                
                                property myWidth
                                property myHeight
                                property myBackgroundColour
                                property myTextColour
                                property myLineColour
                                property myShortLineHeight
                                property myMediumLineHeight
                                property myLongLineHeight
                                property myQuarterFontSize
                                property myMinuteFontSize
                                property myFont
                                
                                on isOKToAttach(me, sType, sNum)
                                  if ( sType = #graphic ) then return ( sprite(sNum).member.type = #bitmap )
                                  return FALSE
                                end
                                
                                on getPropertyDescriptionList
                                  pdl = [:]
                                  
                                  pdl[#myWidth] = [#comment: "Width of image to create:", #format: #integer, #default: 1286] -- #default: sprite(the currentSpriteNum).member.width
                                  pdl[#myHeight] = [#comment: "Height of image to create:", #format: #integer, #default: 94] -- #default: sprite(the currentSpriteNum).member.height
                                  
                                  -- this used to display a colour chip in the resulting dialog
                                  -- I don't know what's changed between  D7/8 and now...
                                  pdl[#myBackgroundColour] = [#comment: "Colour of image to create:", #format: #color, #default: rgb( 196, 186, 180 )]
                                  pdl[#myTextColour] = [#comment: "Colour of text to draw:", #format: #color, #default: rgb( 0, 0, 0 )]
                                  pdl[#myLineColour] = [#comment: "Colour of lines to draw:", #format: #color, #default: rgb( 0, 0, 0 )]
                                  
                                  pdl[#myShortLineHeight] = [#comment: "Height of 5 second interval lines to draw:", #format: #integer, #default: 24]
                                  pdl[#myMediumLineHeight] = [#comment: "Height of 15 second interval lines to draw:", #format: #integer, #default: 35]
                                  pdl[#myLongLineHeight] = [#comment: "Height of minute interval lines to draw:", #format: #integer, #default: 46]
                                  
                                  pdl[#myQuarterFontSize] = [#comment: "Font size of 15 second interval text:", #format: #integer, #default: 10]
                                  pdl[#myMinuteFontSize] = [#comment: "Font size of minute interval text:", #format: #integer, #default: 14]
                                  pdl[#myFont] = [#comment: "Text font:", #format: #font, #default: "Arial"]
                                  
                                  return pdl
                                end
                                
                                on beginSprite me
                                  my = sprite(spriteNum)
                                  myMember = my.member
                                  myImage = duplicate(myMember.image)
                                end
                                
                                on endSprite me
                                  myMember.image = myImage
                                end
                                
                                on mMakeTimeLine me, sTime
                                  -- sTime should be a string and formatted as "mm:ss"
                                  if stringP(sTime) = 0 then return
                                  -- how many seconds were provided
                                  tSeconds = _movie.HMStoFrames(sTime, 1, 0, 0)
                                  -- if this evaluates to an invalid input then bail out
                                  if ( tSeconds = -2147483648 ) OR ( tSeconds = 0 ) then exit
                                  
                                  -- long marker at 0 then short one every n pixels (representing 5 seconds) with longer
                                  -- one at 15, 30 and 45 seconds intervals and longest (thicker) line at minute intervals
                                  tInterval = 5.0 * myWidth/tSeconds
                                  
                                  -- create image and fill with BG colour
                                  tImage = image(myWidth, myHeight, 32)
                                  -- fill image with BG colour
                                  OK = tImage.fill( rect(0, 0, myWidth, myHeight), [#shapeType: #rect, #color: myBackgroundColour] )
                                  
                                  -- make images for 15, 30 and 45s intervals:
                                  tTextMember = _movie.newMember(#text)
                                  tTextMember.font = myFont
                                  tTextMember.fontSize = myQuarterFontSize
                                  tTextMember.antiAliasType = #AutoAlias
                                  tTextMember.hinting = #TVMode
                                  tTextMember.wordWrap = FALSE
                                  
                                  tTextMember.text = "15s"
                                  tWidth = tTextMember.charPosToLoc(4)[1]
                                  tTextMember.width = tWidth
                                  image15alpha = duplicate(tTextMember.image.extractAlpha())
                                  image15 = image(image15alpha.width, image15alpha.height, 32)
                                  image15.fill( rect(0, 0, image15.width, image15.height), [#shapeType: #rect, #color: myTextColour] )
                                  
                                  tTextMember.text = "30s"
                                  tWidth = tTextMember.charPosToLoc(4)[1]
                                  tTextMember.width = tWidth
                                  image30alpha = duplicate(tTextMember.image.extractAlpha())
                                  image30 = image(image30alpha.width, image30alpha.height, 32)
                                  image30.fill( rect(0, 0, image30.width, image30.height), [#shapeType: #rect, #color: myTextColour] )
                                  
                                  tTextMember.text = "45s"
                                  tWidth = tTextMember.charPosToLoc(4)[1]
                                  tTextMember.width = tWidth
                                  image45alpha = duplicate(tTextMember.image.extractAlpha())
                                  image45 = image(image45alpha.width, image45alpha.height, 32)
                                  image45.fill( rect(0, 0, image45.width, image45.height), [#shapeType: #rect, #color: myTextColour] )
                                  
                                  -- finished creating images for seconds so set fontSize of text member for creating minute intervals
                                  tTextMember.fontSize = myMinuteFontSize
                                  tTextMember.width = 500
                                  
                                  -- draw long line at zero
                                  OK = tImage.fill( rect(0, myHeight - myLongLineHeight, 1, myHeight), [#shapeType: #rect, #color: myLineColour] )
                                  -- monitor start point and number of lines drawn
                                  tStart = 0.0
                                  tDrawIndex = 0
                                  
                                  repeat while TRUE
                                    -- add pixel width corresponding to 5 seconds to current draw position (x)
                                    tStart = tStart + tInterval
                                    -- make this an integer (pixels are integer values, not floats) - not strictly necessary as they will be auto-converted
                                    tX = integer(tStart)
                                    -- if this line will be drawn outside the full width then we're done, bail out of drawing routine
                                    if tX > myWidth then exit repeat
                                    -- increment the draw index
                                    tDrawIndex = tDrawIndex + 1
                                    -- set default height and width of lines drawn (over-ridden below if necessary - 15, 30, 45 and minute intervals)
                                    tHeight = myShortLineHeight
                                    tLineWidth = 1
                                    -- if the draw index divides evenly by 3 then it should be a longer line, with some text drawn above it
                                    if tDrawIndex mod 3 = 0 then
                                      -- override line height set above
                                      tHeight = myMediumLineHeight
                                      -- set height of text above line
                                      tStandOff = 2
                                      -- which second interval should be drawn above THIS line
                                      textIndex = tDrawIndex mod 4
                                      case textIndex of
                                        3: -- 15s
                                          tTextImage = image15
                                          tAlpha = image15alpha
                                        2: -- 30s
                                          tTextImage = image30
                                          tAlpha = image30alpha
                                        1: -- 45s
                                          tTextImage = image45
                                          tAlpha = image45alpha
                                      end case
                                      -- if the draw index divides by 12 then it should be a minute interval
                                      if tDrawIndex mod 12 = 0 then
                                        -- override height and width of line drawn
                                        tHeight = myLongLineHeight
                                        --        tLineWidth = 2
                                        -- set height of text above line
                                        tStandOff = 4
                                        -- create minute text image:
                                        tTextMember.width = 100
                                        tTextMember.text = string(tDrawIndex/12) & "m"
                                        tWidth = tTextMember.charPosToLoc(tTextMember.char.count + 1)[1]
                                        tTextMember.width = tWidth
                                        tAlpha = tTextMember.image.extractAlpha()
                                        tTextImage = image(tAlpha.width, tAlpha.height, 32)
                                        tTextImage.fill( rect(0, 0, tTextImage.width, tTextImage.height), [#shapeType: #rect, #color: myTextColour] )
                                      end if
                                      
                                      tLeft = tX - (tTextImage.width/2)
                                      dRect = rect(tLeft, myHeight - tHeight - tTextImage.height - tStandOff, tLeft + tTextImage.width, myHeight - tHeight - tStandOff)
                                      OK = tImage.copyPixels(tTextImage, dRect, tTextImage.rect, [#maskImage: tAlpha])
                                      --      put OK
                                      
                                    end if
                                    OK = tImage.fill( rect(tX, myHeight - tHeight, tX + tLineWidth, myHeight), [#shapeType: #rect, #color: myLineColour] )
                                  end repeat
                                  
                                  tTextMember.erase()
                                  myMember.image = tImage
                                end
                                
                                • 13. Re: Time Ruler...
                                  EL_MISMOLOCO Level 1

                                  Thanks Sean,

                                  It work GREAT! I've sent you a private message.

                                  A question: is there a way to have the background transparent?

                                   

                                  Thanks

                                   

                                  Brian

                                  • 14. Re: Time Ruler...
                                    rduane Level 1

                                    Nice!

                                    • 15. Re: Time Ruler...
                                      Sean_Wilson Adobe Community Professional

                                      Perhaps the simplest option for background transparent is to make the BG colour white ( color(255, 255, 255) ) and set the ink to be Background Transparent (36)

                                       

                                      Alternatively, if this isn't satisfactory, I could rewrite it so that images are drawn onto the alpha channel and then it won't really matter what background colour you choose (save for a little blending around edges) as long as the resulting bitmap member has its useAlpha property set to TRUE.

                                      • 16. Re: Time Ruler...
                                        Sean_Wilson Adobe Community Professional

                                        A question: is there a way to have the background transparent?

                                        I have reworked the code previously posted so that the image created has an alpha channel (that should blend nicely against any background).

                                        property spriteNum
                                        property my
                                        property myMember
                                        property myImage
                                        
                                        property myWidth
                                        property myHeight
                                        property myTextColour
                                        property myLineColour
                                        property myShortLineHeight
                                        property myMediumLineHeight
                                        property myLongLineHeight
                                        property myQuarterFontSize
                                        property myMinuteFontSize
                                        property myFont
                                        
                                        on isOKToAttach(me, sType, sNum)
                                          if ( sType = #graphic ) then return ( sprite(sNum).member.type = #bitmap )
                                          return FALSE
                                        end
                                        
                                        on getPropertyDescriptionList
                                          pdl = [:]
                                          
                                          pdl[#myWidth] = [#comment: "Width of image to create:", #format: #integer, #default: 1286] -- #default: sprite(the currentSpriteNum).member.width
                                          pdl[#myHeight] = [#comment: "Height of image to create:", #format: #integer, #default: 94] -- #default: sprite(the currentSpriteNum).member.height
                                          
                                          -- this used to display a colour chip in the resulting dialog
                                          -- I don't know what's changed between  D7/8 and now...
                                          pdl[#myTextColour] = [#comment: "Colour of text to draw:", #format: #color, #default: rgb( 0, 0, 0 )]
                                          pdl[#myLineColour] = [#comment: "Colour of lines to draw:", #format: #color, #default: rgb( 0, 0, 0 )]
                                          
                                          pdl[#myShortLineHeight] = [#comment: "Height of 5 second interval lines to draw:", #format: #integer, #default: 24]
                                          pdl[#myMediumLineHeight] = [#comment: "Height of 15 second interval lines to draw:", #format: #integer, #default: 35]
                                          pdl[#myLongLineHeight] = [#comment: "Height of minute interval lines to draw:", #format: #integer, #default: 46]
                                          
                                          pdl[#myQuarterFontSize] = [#comment: "Font size of 15 second interval text:", #format: #integer, #default: 10]
                                          pdl[#myMinuteFontSize] = [#comment: "Font size of minute interval text:", #format: #integer, #default: 14]
                                          pdl[#myFont] = [#comment: "Text font:", #format: #font, #default: "Arial"]
                                          
                                          return pdl
                                        end
                                        
                                        on beginSprite me
                                          my = sprite(spriteNum)
                                          myMember = my.member
                                          myImage = duplicate(myMember.image)
                                        end
                                        
                                        on endSprite me
                                          myMember.image = myImage
                                        end
                                        
                                        on mMakeTimeLine me, sTime
                                          -- sTime should be a string and formatted as "mm:ss"
                                          if stringP(sTime) = 0 then return
                                          -- how many seconds were provided
                                          tSeconds = _movie.HMStoFrames(sTime, 1, 0, 0)
                                          -- if this evaluates to an invalid input then bail out
                                          if ( tSeconds = -2147483648 ) OR ( tSeconds = 0 ) then exit
                                          
                                          -- long marker at 0 then short one every n pixels (representing 5 seconds) with longer
                                          -- one at 15, 30 and 45 seconds intervals and longest (thicker) line at minute intervals
                                          tInterval = 5.0 * myWidth/tSeconds
                                          
                                          -- create image and fill with line colour
                                          tImage = image(myWidth, myHeight, 32)
                                          -- fill image with BG colour
                                          OK = tImage.fill( rect(0, 0, myWidth, myHeight), [#shapeType: #rect, #color: myLineColour] )
                                          tAlphaChannel = image(myWidth, myHeight, 8, #grayScale)
                                          OK = tAlphaChannel.fill( rect(0, 0, myWidth, myHeight), [#shapeType: #rect, #color: color(255, 255, 255)] )
                                          
                                          -- make images for 15, 30 and 45s intervals:
                                          tTextMember = _movie.newMember(#text)
                                          tTextMember.font = myFont
                                          tTextMember.fontSize = myQuarterFontSize
                                          tTextMember.antiAliasType = #AutoAlias
                                          tTextMember.hinting = #TVMode
                                          tTextMember.wordWrap = FALSE
                                          
                                          tTextMember.text = "15s"
                                          tWidth = tTextMember.charPosToLoc(4)[1]
                                          tTextMember.width = tWidth
                                          image15alpha = duplicate(tTextMember.image.extractAlpha())
                                          image15 = image(image15alpha.width, image15alpha.height, 32)
                                          image15.fill( rect(0, 0, image15.width, image15.height), [#shapeType: #rect, #color: myTextColour] )
                                          
                                          tTextMember.text = "30s"
                                          tWidth = tTextMember.charPosToLoc(4)[1]
                                          tTextMember.width = tWidth
                                          image30alpha = duplicate(tTextMember.image.extractAlpha())
                                          image30 = image(image30alpha.width, image30alpha.height, 32)
                                          image30.fill( rect(0, 0, image30.width, image30.height), [#shapeType: #rect, #color: myTextColour] )
                                          
                                          tTextMember.text = "45s"
                                          tWidth = tTextMember.charPosToLoc(4)[1]
                                          tTextMember.width = tWidth
                                          image45alpha = duplicate(tTextMember.image.extractAlpha())
                                          image45 = image(image45alpha.width, image45alpha.height, 32)
                                          image45.fill( rect(0, 0, image45.width, image45.height), [#shapeType: #rect, #color: myTextColour] )
                                          
                                          -- finished creating images for seconds so set fontSize of text member for creating minute intervals
                                          tTextMember.fontSize = myMinuteFontSize
                                          tTextMember.width = 500
                                          
                                          -- draw long line at zero
                                          OK = tAlphaChannel.fill( rect(0, myHeight - myLongLineHeight, 1, myHeight), [#shapeType: #rect, #color: color(0, 0, 0)] )
                                          -- monitor start point and number of lines drawn
                                          tStart = 0.0
                                          tDrawIndex = 0
                                          
                                          repeat while TRUE
                                            -- add pixel width corresponding to 5 seconds to current draw position (x)
                                            tStart = tStart + tInterval
                                            -- make this an integer (pixels are integer values, not floats) - not strictly necessary as they will be auto-converted
                                            tX = integer(tStart)
                                            -- if this line will be drawn outside the full width then we're done, bail out of drawing routine
                                            if tX > myWidth then exit repeat
                                            -- increment the draw index
                                            tDrawIndex = tDrawIndex + 1
                                            -- set default height and width of lines drawn (over-ridden below if necessary - 15, 30, 45 and minute intervals)
                                            tHeight = myShortLineHeight
                                            tLineWidth = 1
                                            -- if the draw index divides evenly by 3 then it should be a longer line, with some text drawn above it
                                            if tDrawIndex mod 3 = 0 then
                                              -- override line height set above
                                              tHeight = myMediumLineHeight
                                              -- set height of text above line
                                              tStandOff = 2
                                              -- which second interval should be drawn above THIS line
                                              textIndex = tDrawIndex mod 4
                                              case textIndex of
                                                3: -- 15s
                                                  tTextImage = image15
                                                  tAlpha = image15alpha
                                                2: -- 30s
                                                  tTextImage = image30
                                                  tAlpha = image30alpha
                                                1: -- 45s
                                                  tTextImage = image45
                                                  tAlpha = image45alpha
                                              end case
                                              -- if the draw index divides by 12 then it should be a minute interval
                                              if tDrawIndex mod 12 = 0 then
                                                -- override height and width of line drawn
                                                tHeight = myLongLineHeight
                                                --        tLineWidth = 2
                                                -- set height of text above line
                                                tStandOff = 4
                                                -- create minute text image:
                                                tTextMember.width = 100
                                                tTextMember.text = string(tDrawIndex/12) & "m"
                                                tWidth = tTextMember.charPosToLoc(tTextMember.char.count + 1)[1]
                                                tTextMember.width = tWidth
                                                tAlpha = tTextMember.image.extractAlpha()
                                                tTextImage = image(tAlpha.width, tAlpha.height, 32)
                                                tTextImage.fill( rect(0, 0, tTextImage.width, tTextImage.height), [#shapeType: #rect, #color: myTextColour] )
                                              end if
                                              
                                              tLeft = tX - (tTextImage.width/2)
                                              dRect = rect(tLeft, myHeight - tHeight - tTextImage.height - tStandOff, tLeft + tTextImage.width, myHeight - tHeight - tStandOff)
                                              OK = tImage.copyPixels(tTextImage, dRect, tTextImage.rect)
                                              OK = tAlphaChannel.copyPixels(tAlpha, dRect, tAlpha.rect)
                                              --      put OK
                                              
                                            end if
                                            OK = tAlphaChannel.fill( rect(tX, myHeight - tHeight, tX + tLineWidth, myHeight), [#shapeType: #rect, #color: color(0, 0, 0)] )
                                          end repeat
                                          
                                          tTextMember.erase()
                                          tImage.setAlpha(tAlphaChannel)
                                          myMember.image = tImage
                                          myMember.useAlpha = 1
                                        end