Page 1 of 14 123456 ... LastLast
Results 1 to 15 of 208

heres a rundown on how to make a sliding hidden dock for Blackberry themes. Thanks ... Software & Theme Development forum

  1. #1
    9of13's Avatar
    9of13 no está en línea Theme Pro
    Join Date
    Apr 2007
    PIN/ID
    ask me
    Posts
    1,105

    Hidden Dock tutorial. I hope this helps...

    Advertisement



    heres a rundown on how to make a sliding hidden dock for Blackberry themes.
    Thanks to Pinpoint for the video tutorial and all who worked to figure this out

    I must add first that this tutorial geared to those who atleast have the basics
    down with using COMPOSER. if you dont i recommend you watch Pinpoint's Tutorials
    on flick n slide first. itll help a lot.

    you first start out in COMPOSER. line up the icons how ever
    you plan the dock to slide. Along the bottom is the most common. Like the old
    "Dimension Today Plus" theme. Along the top or even the sides as well. as an example
    see image 1 figure A.

    IMAGE 1:


    just make sure the icons dont overlap each other. ive learned it will
    not function correctly. next import the image you want for the dock itself. position it
    over the icons. basically your making how the dock would look whan its in focus. Not
    hidden. see image 2

    IMAGE 2:


    Now right click the imported dock image and follow the menu as image 3
    figure a.

    IMAGE 3:

    select "send to back". you want the image behind the icons. i suggest you place
    the buttons first then the dock image in that order. this keeps the theme button file name
    sequential starting with 1 as in image 3 figure b. This will make the next step after
    composer a little easier. But if it hasnt come out that way, keep the COMPOSER file open
    for reference later. once it looks like it should when an icon in the dock is selected as
    in image 4,

    IMAGE 4:


    go to file then export then svg. after export, save the COMPOSER file.
    But dont close it.


    Now comes the fun part.....



    As it turns out. plazmic CDK does not have a feature to make a hidden dock animation. its all code.
    yes code. But dont worry. Its mostly copy and paste with a few simple quick edits. First
    open the .svg file you just created with NOTEPAD. Image 5 shows the beginning of the code. where
    the code is circled it now says "Buttons".

    IMAGE 5:


    When you first open the file it will say something
    like "Layer_1". change it to "Buttons". Thats the first edit. then scroll down all the way to the bottom.
    it will look similar to image 6.

    IMAGE 6:


    Place the curser at the same location shown as just above. Press "enter" 4 times
    and then dont do anything else to it. You now need to open another file. now ive included a zip file
    with the code to copy at the bottom of this post. it supports up to 10 icons. please look at image 7.

    IMAGE 7:


    the first 2 sections of
    code is for the first icon button. note figure A. All four of them identify The first theme icon button or
    Theme Button 1.
    Now back in COMPOSER if teh theme buttons are in sequential order, just copy the buttons you need.
    If you created a dock with 4 buttons, only copy the 4 buttons. Remember, 2 sections per button. Copy it as shown in Image 7a and paste it to your SVG at the location of the cursor at the bottom of Image 6. But remember that you had to create 3 blank lines before you paste it.

    IMAGE 7a:


    Now if the theme buttons arent sequential, edit just the number in Image 7 Figure A.accordin to the number in the
    COMPOSER file. See Image 3 figure b again incase theres confusion. once all that is done time to edit for animation.
    Now if you look back at Image 7 youll see Figure B. It points to locations on the "x,y" axis.
    The upper one says to="0,0" these you leave alone. each first section for each button stays this way.
    Now note the bottom one. it says to="122,0" Now this was the code to a theme i had just made.
    It tells the dock to move right on the "x" axis. the 122 represents whether you want the dock to move left
    or right. this one tells the dock to move 122 pixels to the right when unfocused. a right side dock.
    now i recomend you set it to 100. or if you know exactly how many pixels to move write it there.
    now if the dock is on the left you need the number in the negative. example to="-100,0".
    Do this to each section where you see the 122,0. leave all the 0,0's alone.
    Now in the first few images, it shows a bottom dock. this moves on the y axis. Up and down.
    to edit this, you would use "0,100" for a bottom dock sliding down off the screen. if the dock is on top,
    it would be something like "0,-100". in teh negative makes the dock move up to hide. when all the edits are done,
    click "file" then "save as". Now take a look at Image 8. youll see im selecting "All files" when selecting the type of files im saving as.

    IMAGE 8:


    when selected, the original SVG file is shown. Double click the SVG file you were just working on and
    Overwrite. Congratulations!!!! You can now add the svg file to THEME BUILDER and build your theme.
    Now when building it to a 4.6 theme, make sure you edit the navigation. The final image shows what you need to do.

    FINAL IMAGE:



    this will first say "Full Memory". Change it to "No Memory". build your theme and please be sure to test it.
    trust me. I had to test many a times before i got it right.
    I hope this helps out. Its my first tutorial. i did this one to hope to help out my fellow theme makers to continue to wow the Blackberry masses.

    Assimilate this info and happy theme building!


    to all who have done tutorials, youre all right. its not that easy to write one! LOL
    Attached Files Attached Files
    Last edited by 9of13; 01-17-2009 at 07:56 AM.
    For my theme blog, remember....
    Resistance Is Futile

  2. #2
    pdxmatts's Avatar
    pdxmatts no está en línea Stack Moderator
    Join Date
    Feb 2008
    Posts
    5,702
    Thank you for all the hard work! I will definately have to check this out and see if I can do it.

  3. #3
    tdmsna523's Avatar
    tdmsna523 no está en línea Stack level 2
    Join Date
    Dec 2008
    Posts
    32
    can this only work for the bb bold?

  4. #4
    9of13's Avatar
    9of13 no está en línea Theme Pro
    Join Date
    Apr 2007
    PIN/ID
    ask me
    Posts
    1,105
    Its for all phones~via BB (wap.pinstack.com)~

  5. #5
    jasonring's Avatar
    jasonring no está en línea Stack level 5
    Join Date
    Aug 2008
    PIN/ID
    be kind
    Posts
    1,045
    Thanks 9..... i just now got a chance to look at this. I've bookmarked this page, and will study. Thank you!!!

  6. #6
    ganns1980's Avatar
    ganns1980 no está en línea Themes Pro
    Join Date
    Apr 2008
    Posts
    853
    Awesome - thanks!
    Proof of absence is not absence of proof.



  7. #7
    tdmsna523's Avatar
    tdmsna523 no está en línea Stack level 2
    Join Date
    Dec 2008
    Posts
    32
    Really? That's awesome thanks I will try it tonight! How do you get the over lay can you make it through composer or gimp if so how?~via BB (wap.pinstack.com)~

  8. #8
    tdmsna523's Avatar
    tdmsna523 no está en línea Stack level 2
    Join Date
    Dec 2008
    Posts
    32
    Also I've heard it only works for bold because of the navigation with the bold.~via BB (wap.pinstack.com)~

  9. #9
    9of13's Avatar
    9of13 no está en línea Theme Pro
    Join Date
    Apr 2007
    PIN/ID
    ask me
    Posts
    1,105
    Quote Originally Posted by tdmsna523 View Post
    Really? That's awesome thanks I will try it tonight! How do you get the over lay can you make it through composer or gimp if so how?~via BB (wap.pinstack.com)~
    Quote Originally Posted by tdmsna523 View Post
    Also I've heard it only works for bold because of the navigation with the bold.~via BB (wap.pinstack.com)~
    if by overlay you mean getting the dock over everything, its on composer. I dont use gimp. when i edit images i use photoshop.

    it works easier for the bold and Flip. basically any 4.6 device. when making it for other phones, place the icons from right to left and set the navigation to navigate up to profiles. that mkes it a little easier.
    For my theme blog, remember....
    Resistance Is Futile

  10. #10
    matte119's Avatar
    matte119 no está en línea Stack level 2
    Join Date
    Nov 2007
    Posts
    66
    How about adding the scrolling feature to the hidden dock style? what is the coding to add that?

  11. #11
    9of13's Avatar
    9of13 no está en línea Theme Pro
    Join Date
    Apr 2007
    PIN/ID
    ask me
    Posts
    1,105
    Quote Originally Posted by matte119 View Post
    How about adding the scrolling feature to the hidden dock style? what is the coding to add that?
    for the scrolling, you edit the "focusin" "0,0". the first button you leave at 0,0 and i suggest every next button you add a minimum of 40 depending on direction and/or iconsize and placement.
    For my theme blog, remember....
    Resistance Is Futile

  12. #12
    tdmsna523's Avatar
    tdmsna523 no está en línea Stack level 2
    Join Date
    Dec 2008
    Posts
    32
    Would you happen to now how to do this for the storm? I get it to hide but i dont know how to make it appear. since its a touch screen. what would i have to change in the text for the svg thanks agian man.

  13. #13
    9of13's Avatar
    9of13 no está en línea Theme Pro
    Join Date
    Apr 2007
    PIN/ID
    ask me
    Posts
    1,105
    ive already done it for the storm. the trick is to add another button when making the svg that does nothing. add it to the edge of the dock so it still shows when the dock is hidden. edit the button in the svg with notepad and use the same numbers as button one.

    for an example, check out this theme

    http://forums.pinstack.com/f240/95xx_white_scroll_today_plus-103591/
    For my theme blog, remember....
    Resistance Is Futile

  14. #14
    tdmsna523's Avatar
    tdmsna523 no está en línea Stack level 2
    Join Date
    Dec 2008
    Posts
    32
    how do you make the button do nothin in composer?

  15. #15
    tdmsna523's Avatar
    tdmsna523 no está en línea Stack level 2
    Join Date
    Dec 2008
    Posts
    32
    alright man i figured that out now to make a scroll would i have to edit the text diffrently or will it work if i do like i did the other devices?

Page 1 of 14 123456 ... LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •